Custom password protected page

Ask the community
,
1

I’m trying to make custom “guest area” by this way: create a page log in, where subscribers need to enter a password and if they enter a correct password, they click on a button and go to the secret page. I found a code, but it doesn’t work on my site

import wixData from "wix-data";

$w.onReady(function() {
//make sure your input is empty on load
$w("#input1").value = ""
})
 
export function button1_click(event){
//when button is clicked
if ($w("#input1").value === "hi"){
//if input value is "hi" show/hide these elements
//change the input value and which elements to hide to fit your needs
$w("#text1").show();
$w("#input1").hide();
$w("#button1").hide();
$w("#text7").hide();
} else {
//show/hide these elements if user types anything else than "hi"
$w("#text7").show();
$w("#text1").hide();
}
}

code from here: https://arthurvalatin.wixsite.com/tech and it works, but not on my site

910×566 27.9 KB

2

This code does not redirect you to another page.
Please describe how do you want this custom password to work? Is it per member? Do you have a Passwords database collection? etc…

3

the password is one for everybody, it’s like “only for subscribers”, they receive the password via email subscription

so I write my password for example “hi”

if($w("#input1").value ==="hi"){

and I thought I can make a button1 which linked to the secret page, if password is correct

if it’s impossible in my situation, I would like to create an another button2, which been “show()” only if visitor entered a correct password

4

If it’s the same passwords for everyone, why wouldn’t you use the Password settings in the Page settings setup, without any code?

488×501 12.1 KB

5

I want my own design, this page is ugly

6

I see (I think there is a way to play with this page design using custom code, but you need to know some HTML and CSS in order to do it).

Anyway, there’re a several different ways to achieve that using Velo, and deciding which way does partly depend on how badly you want to hide the contents of the page from people who can look into the source code and discover the hidden contents.
If the security of the contents is not so important to you, you can do the following:

  1. Add a MultiStateBox on your page.
  2. On the first State (let’s name it “gate”) put the password input (go to the settings and make it “required”) + “GO” button + hidden spinner loader gif image + a hidden message text element.
  3. On the second state (“contents”), put the real contents.
  4. Add some code like:
//page code
import {checkPassword} from 'backend/password.jsw';
$w.onReady(() => {
 $w('#goButton').onClick(() => {
  $w('#message').hide();
  let value = $w('#pwInput').value;
  if(!$w('#pwInput').valid){return showMsg('Please  fill-in the password');
  $w('#loader').show();
  checkPassword(value)
  .then(isMatch=> {
   $w('#loader').hide();
   if(!isMatch){return showMsg('Wrong password');}
   $w('#mulitiStateBox').changeState('contents');
  })
 })
})
function showMsg(msg){
 $w('#message').text = msg;
 $w('#message').show();
}

BACKEND CODE:

//backend/password.jsw
const pw = 'thisIsThePagePassword1234';
export const checkPassword = (input) => input === pw;
7

Worth noting that this doesn’t seem to be too secure. I’m pretty sure someone could just open the Browser tools and manually show/hide the elements. Agree, though that Wix needs to update the password-protected page. It’s terribly ugly