Power Apps portals: Customise the sign-in form- Toggle password visibility

[ragavanrajan]

This article is inspired by @UlrikkeAkerbæk 

Section 1: Customising the sign-in page

In Portal Management: 

1. Under Content > Content Snippets > Account/SignIn/PageCopy 

2. Add the following code in the value section 

<div class="password-checkbox">
<input type="checkbox"  onclick="myFunction()"> Show Password
</div>
<script>
  $("#content-container").addClass("togglepassword");
function myFunction() {
console.log(555,"RR Test");
  var x = document.getElementById("PasswordValue");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

3. Hit Save and close

Code Explanation: 

1. Adding a class name called "togglepassword" for positioning the show password 

2. The logical field "Passwordvalue" was derived from inspecting the element. 

3. Password toggle visibility JavaScript can be found at W3Schools

4. Reason why we added "togglepassword" class can be found at Ulrikke's blog

Section 2: Positioning element via CSS

In Portal Studio: 

1. Click Themes > Upload custom CSS called "custom.css" 

2. Add the following CSS 

/*********		SIGN IN Show Password		*******/

#content-container.togglepassword .password-checkbox {

    position: relative;
    will-change: top, left;
    left: 336px;
    top: 201px;
    z-index: 999999;
}

Pro Tip: You can use media queries to adjust the above CSS for different screen resolutions. 

3. Hit Save > Sync Configuration and browse the website. Press "ctrl +F5" for the hard refresh to see the changes. 

Output: 

------------------------------------------------------------------------------------------------------------------------

Free pack of Power Apps portal and Power Platform cool stuff. Please consider subscribing by clicking here

Free pack of deep-dive sessions of Power Platform powered by key experts and MVPs.  Please consider joining the "Auckland Power Platform User Group"