I want to customize the password protection login screen; I cannot do anything about it for now. Neither can I change the wording from ‘Guest login’ to something more relevant to my site, nor can I change theme colors and add graphics to expose my business branding. I have read a bunch of suggestions related to the similar issue I have here. I don’t think those suggestions are particularly suitable. My need is very simple: the page function works fine. All I need is to redesign its look. I don’t want to change it into a registration window, or create a collection and include a query to retrieve the collection page. It just doesn’t fit in my particular case. I really appreciate that if anyone out there can share your solution when having the same problem need but was able to find a solution for it.
Hi RZ,
Check this example I made for you: https://arthurvalatin.wixsite.com/tech
You can’t really customize the wix password protection page. What you can do is, you can create your own password protection page! You will need to hide your page content on load. Then you need to add a user input element & a button. Then you need to add the on_Click event to the button (in properties panel). Then, after button is clicked, if user input element’s value is the password, hide the user input element & the button & show the page content.
export function button_click(event){
if ($w("#input4").value === "hi"){
$w("#successMessage").show();
$w("#passwordInput").hide();
$w("#button").hide();
} else {
$w("#errorMessage").show();
}
}
I made this example for you: https://arthurvalatin.wixsite.com/tech
When you type “hi” into the input element and click the button, you will get the success message. If you type something else, you will get the error message. You can show your page content when the user correctly types the password.
Hi Arthur! Thank you for responding to me.
How do I hide the page load in this case?
Shall I update the value of #input4 in my case, which is providing password before entering the site?
Thank you again for you help!
Also, what import value shall I put in there?
Hi RZ!
Ok, sorry. #passwordInput should be #input4. Sorry. Yes, you should update #input4 to your own input id.
The current password is: “hi”. You will need to change it to your own password:
if ($w("#input4").value === "hi"){
needs to be changed to your own password:
if ($w("#input4").value === "myPassword"){
Have you seen my example site? —> https://arthurvalatin.wixsite.com/tech
I did, but I think I need to first add the ‘import’ value to allow the page recognize the code, something like what is shown below. In your example , the button is called to show error or successful messages, for my case would be enter a page, is there anything I need to tweak to make it apply to my case?
import wixUsers from ‘wix-users’;
2
3 let email = // email address of user to log in
4 let password = // password of user to log in
5
6wixUsers . login ( email , password )
7 . then ( () => {
8 console . log (“User is logged in”);
9 } )
10 . catch ( ( err ) => {
11 console . log ( err );
12 } );
Well, it is kind of the same thing. You hide page content on load. When user types “hi” in password input & click button, show page content.
Hi Arthur. Hoping you can help me as well. I’m looking to do much the same thing. Have a portal which certain people only can access. I need it basically to welcome them to the Portal and prompt for a password entry with instructions what to do if they don’t have a password. If they enter the correct password then they see the page. What I seem to be able to do with the above is get them to enter a password and it redirects to the homepage?
Hello Lindsey.
My code above hides the page content until the right password is entered. What you could do is send an invite email to people you want to have access to your portal (which includes the password too).
My code is only suitable for password-protecting specific pages. The disadvantage is that you need to enter the password on every password-protected page you enter.
What you can do is use the Wix-storage API . Use the session property to store a message like “Has entered the password correctly” once the password is entered correctly. Then take the message out from Wix data whenever you load a page so you can then allow them to view any password-protected page without having to re-enter the password every time (The session property will expire when the user closes the browser tab or window).
Thanks Arthur. All I’m trying to do is password protect a particular page. Essentially a referral portal for physicians. The code I’ve entered is as follows:
// API Reference: Introduction - Velo API Reference - Wix.com
// “Hello, World!” Example: Velo Learning Center
$w . onReady ( function () {
// Write your JavaScript here
// To select an element by ID use: $w(“#elementID”)
// Click “Preview” to run your code
});
export function button_click ( event ){
if ( $w ( “#input1” ). value === “ROKband” ){
$w ( “#successMessage” ). show ();
$w ( “#passwordInput” ). hide ();
$w ( “#button” ). hide ();
} else {
$w ( “#errorMessage” ). show ();
}
}
What I get when I enter the correct password is a redirect to the home page versus showing the remainder of the portal page? HELP!
I should also note that it isn’t hiding the content below on the page.
Hello again,
I am no quite getting what you need help with.
Have you done:
- Hide the portal page on load
2.show the portal content on correct password input? $w(“#portal”).show();
3.Have you used the events on properties panel
I also want to ask if you either want to show the page content or redirect to a different page after the correct password is entered. Also it would be easier for me to help you if you post the link to the page.
Check this example page:https://arthurvalatin.wixsite.com/tech
Have a nice day!
Hi Arthur.
The code above is the entirety of what I have on the page.
https://boldinkstrategy.wixsite.com/rokband/referral-portal
What I want is the first block to show upon arrival on the page. Once the correct password is entered I then want the rest of the page to be visible.
I know nothing about code so am flying a bit blind. Using what I have above, the entire page shows and if you enter the password it redirects you back to the home page (which is not what I want).
Help!
Hi if anyone is looking for COMPLETELY copy and pastable code for a password protected page (NO personal login, just a simple page password) that redirects user to another page on your website this is what worked for me (as of December 2021):
NOTE: This method requires a text input, a button and a text box. You need to click on the element and set the button to both ‘hidden’ and/or ‘disabled’ in the right hand side of dev mode under ‘default values’ (depending on what you want). The text box must be set to ‘collapsed’.
ALSO NOTE: This method requires for the user to press enter in order for the password to be accepted.
Elements are referenced as follows (change the element ID to the words next to the hash tag by clicking on the element and looking on the right hand side of the screen):
#button = button
#textinput = text input
#errorMessage = text box
//COPY FROM HERE>>
$w . onReady ( function ()
{
$w ( “#button” ). link = “” ; //use %20 instead of space if //necessary
$w ( "#textinput" ). onKeyPress (( event ) =>
{
**let** value = event . target . value ;
**if** (( $w ( "#textinput" ). value === "PASSWORD" ) && ( event . key === "Enter" ))
{
$w ( "#button" ). show ();
$w ( "#button" ). enable ();
}
**else**
{
**if** (( $w ( "#textinput" ). value !== "PASSWORD" ) && ( event . key === "Enter" ))
{
$w ( "#errorMessage" ). expand ();
}
}
});
});
Hi @kraaprojects , Thanks a ton for sharing this precious code. Is it possible to use this code to exand/collapse certain section in a page, instead of navigating to another page? Thanks again. : )
@kraaprojects I really wanna thank you. But I tried this code in my way and having difficulty. Kindly help me out of this situation. The code is as follows :
$w.onReady(function () {
$w("#boxMultiState1").collapse();
$w("#textWrongPassword1").collapse();
$w("#button42").collapse();
$w("#button42").onClick((event) => {
if ($w("#boxMultiState1").collapsed) {
$w("#boxMultiState1").expand();
} else {
$w("#boxMultiState1").collapse();
}
});
$w("#inputPasswordCheck1").onKeyPress((event) => {
let value = event.target.value;
if (($w("#inputPasswordCheck1").value === "PASSWORD") && (event.key === "Enter")) {
$w("#button42").show();
$w("#button42").enable();
} else {
if (($w("#inputPasswordCheck1").value !== "PASSWORD") && (event.key === "Enter")) {
$w("#textWrongPassword1").expand();
}
}
});
});
Everything is correct. No error in console. But PASSWORD is not working. I have logged in as a user inputting right password (actual login one). Whats wrong? Kindly help.
This is incredibly easy to hack by an attacker this type of example from beginner programmers shouldn’t be allowed to be distributed. You must verify a password on a backend and a component should at least be removed from the DOM. And not just hide it. A hidden component is still part of the DOM. Any one could read its content easily.