I have found that the above solution does not work very consistently. Here is what I am now actually using, which has been tested on an Android phone (the above was not tested on a phone).
This assumes the input component for your password is named "password" and is a password type.
Add a Checkbox group with one item.
The name of the one check box item should be "show_password" (or change the Javascript below to use whatever name you put in).
Put whatever text you like on the check box item, like "Show Password"
Add an input component, type text. Uncheck Visible so it is hidden. Name it "plainpassword"
Add Event to the Checkbox group, not the item. Event is Value change, Action is Run Javascript.
Put in the following Javascript:
preif ($('input', Appery("show_password")).prop("checked")) {
Appery('password').val(Appery('plainpassword').val());
Appery('plainpassword').val('');
Appery('password').show();
Appery('plainpassword').hide();
} else {
Appery('plainpassword').val(Appery('password').val());
Appery('password').val('');
Appery('plainpassword').show();
Appery('password').hide();
}/pre
This will hide the password input and show the plaintext input when the check box is checked. (The logic in the "if" above seems backwards, but this is how it works.) It will copy the value of the password input to plainpassword, and make password blank. When it is not checked it does the opposite.
Add this Javascript to the Click event of your Login button (or whatever it is that causes the page to be sent to the Service). Make sure it comes before Invoke service:
preif (Appery('password').val() === '') {
Appery('password').val(Appery('plainpassword').val());
}/pre
This checks to see if the password field has a value. If it does not, then it must be that the plainpassword is showing, and it copies that value to the password field.
Instead of adding that action to the Click event of the login button, I have modified my REST service to look for the parameter plainpassword if the password parameter is blank. And in my validation on my log in page I use this:
prevar error = '';
if ($.trim(Appery('username').val()) === '') {
error = 'Please enter your user name.
';
}
if ($.trim(Appery('password').val()) === '' && $.trim(Appery('plainpassword').val()) === '') {
error = error + 'Please enter your password.
';
}
if (error === '') {
loginService.execute({});
return true;
} else {
localStorage.setItem('error',error);
Appery.navigateTo('error_popup', {
transition: 'pop'
});
return false;
}/pre
The popup named error_popup, on Page Show, gets the value of the localStorage error, and puts it into a label on the popup.