Showing results for 
Search instead for 
Did you mean: 

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

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
function myFunction() {
console.log(555,"RR Test");
  var x = document.getElementById("PasswordValue");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";




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. 







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"