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
</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"
Comments
-
Power Apps portals: Customise the sign-in form- Toggle password visibility
Thanks for the solution, it works except for the scenario that the user doesn't provide a username/password as shown below.
Any ideas?
-
Power Apps portals: Customise the sign-in form- Toggle password visibility
Hi @ragavanrajan This is fabulous, thanks for posting it. Is there a way to customise the colour of the buttons? I cannot seem to target them with CSS and I wonder if something near this is the solution?
*This post is locked for comments