Add show password to Login page and autocapitalisation

[graphicz]

Customer reported that his customers could not login on iPhone. The issue seems to be that iOS capitalises text entries, so I think I am entering test123 but actually I am entering Test123

So I have added a 'Show Password' tick box so that users can check the password they are adding:

Swift

Add immediately after the password input

Show Password:&nbsp;<input class="showpw" type="checkbox" onclick="mypwshow()">
<script>
function mypwshow() {
var x = document.getElementById("idPass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

Add Style

input.showpw[type="checkbox"] {
visibility: visible;
position: relative;
height: auto !important;
width: auto !important;
right:0;
}

Pre Swift - Smart v18.2.* You don't need the styles:

<label>Show Password</label>
<input type="checkbox" onclick="showpw()">
<script>
function showpw() {
var x = document.getElementById("idPass");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

No style needed

In 18.2.* Sellerdeck has added autocapitalize="off" autocorrect="off" to the USER and PASS inputs

So in pre v18.2 and custom sites ie 18.0.* and 18.1.* add autocapitalize="off" autocorrect="off" to the USER and PASS inputs

<label><Actinic:Variable Name="UsernamePrompt"/></label>
<input class="input-text" type="text" name="USER" id="idUser" maxlength="60" autocapitalize="off" autocorrect="off" />
<label><Actinic:Variable Name="PasswordPrompt"/></label>
<input class="input-text" type="password" name="PASS" id="idPass" maxlength="60" autocapitalize="off" autocorrect="off" />

You can still add the show password routine immediately after the password input.

Script came from W3C.

[MDN]

Nice! Thanks for the share