How to create a custom login functionality

0
Here's a rewritten version of your question: I'd appreciate some guidance on implementing a custom login page for our web application. Specifically, I'm looking to replace the default username and password text boxes as well as the sign-in button. Additionally, I'd like to include functionality to show and hide passwords using an eye icon. Could you please share any relevant insights or suggestions on achieving these requirements?
asked
3 answers
0

Hi Jayasree,

 

 yes this can be achieved in mendix by following steps:

1.Create a page with customLogin and select ur preferred layout type.

2.Set this page as the default login page project settings - runtime - custom login page

3.Create a non persistant entity with attributes username and password as attributes.

4.Add these attributes in the Custom login Page created.

5.create a login button)sign in) and on click of the button add a microflow.

  • Validate the username and password.
  • Use the Login action activity to log in the user.
  • Handle any login errors or show messages.

6.Place an Image or Icon widget (e.g., an eye icon) next to the password field.

7.Add an OnClick Microflow  to toggle password visibility:

  • Microflow Approach:
    • Add a Boolean attribute(eg.show password) to the Non-Persistant entity.
    • Use conditional visibility to switch between a text box of type password and text.

8.Style the page accordingly.

Hope this is use ful

answered
0

Just change the theme\web\login.html to your liking.

This also already has an showhide button:

 <span class="glyphicon glyphicon-eye-close" onClick="togglePassword()"></span>

triggering this function

        <script>
            function togglePassword() {
                const icon = document.querySelector("[class*=glyphicon-eye]");
                if (icon.classList.contains("glyphicon-eye-close"))
                    icon.classList.replace("glyphicon-eye-close", "glyphicon-eye-open");
                else icon.classList.replace("glyphicon-eye-open", "glyphicon-eye-close");

                const input = document.querySelector("#passwordInput");
                if (input.type === "password") input.type = "text";
                else input.type = "password";
            }
        </script>

NB. there are a couple of login-pages, of course first find out which your app is using.

answered
0

Here the documentation I think its useful to you.

 

Documentation

answered