Customise the Password Protected POP Up

Ask the community
1

Hi

I’m wanting to customise the pop up page that is protecting a certain webpage, for use for employees only.

The page is Used CNC Machines

The colours don’t really match that of my website although I have changed the theme colour.

Is it possible to customise this page? eg colours/add logo etc.

Thank You.

Vici

2

Hi woz,
You can use role api to make your own password customized page for your employees .
Get Roles | Velo
You can filter who can view the resources or not using Role API. Beside if you want to add the password tab too, use lightbox or add another section in your restricted page.
Then add (Title , Input , submit button) in the newly added section.


// set the #ContentSection default values to collapsed
$w.onReady(() => {
  // First, check if the user is logged in
  currentMember.getRoles()
    .then((roles) => {
      console.log("User roles:", roles);

      // Example: check if the user has the "Admin" role
      const isAdmin = roles.some(role => role.title === "Admin");

      if (isAdmin) {
        console.log("User is an Admin");
        // Show admin-only elements
        $w("#passwordTab").expand();
        $w("#ContentSection").collapse();
      } else {
        console.log("User is NOT an Admin.");
        // Hide admin-only elements
        $w("#passwordTab").collapse();
        $w("#ContentSection").expand();
      }
    })
    .catch((error) => {
      console.error("Failed to get roles:", error);
    });


    const PagePassword = "password12345";

    $w("#PasswordSubmitBtn").onClick(() => {
        const inputPassword = $w('passwordInput').value;
        if(inputPassword === PagePassword) {
            $w("#passwordTab").collapse();
            $w("#ContentSection").expand();
        }else {
            $w('#errorMessage').text = "Password is wrong. Please try again!"
        }
    })
});

You can design the elements in your section as you like with this method!!!

3

Just to be sure, let me add a note of caution to Mike’s response.

Even for a simple password-protected page like that, you should avoid hardcoding the password directly into the page code, as it’s insecure. Passwords should always be handled and verified on the backend. :innocent:

1 Like
4

Is is a custom form or the Wix Generated form of the Members only permission?

5

Custom form using Input Element and normal button using Velo