Custom password protect website and show different section based on input password

Ask the community
,
1

Hi,

I’d like to add a custom password protection to my wix site, with a catch. Basically it is a single page event website for a wedding. There will be two types of guests (whole day and evening guests) and depending on the password the guest enters they should see the same page, only the event schedule section of the page should differ. This way I’ll only have to maintain one page should I have to make changes or add content.

So I’m thinking one page, two predefined passwords and two versions of a schedule section. Show one section and hide the other depending on which password is entered.

I’m not a JS star. What would be the best approach to achieve this? Thanks in advance!

2

There many way to do it.
For example, you can add a multistate box, have the following States:

  1. password state with “Welcome, please fill in the password” + text input (or number input if only numbers are allowed)

  2. dayGuest state with the elements relevant to type1 guests

  3. eveningGuest

Now it depends:

    • if you only have 2 password, you can hardcoded them in the page code (assuming that you don’t really afraid that a guest will get into the page code to read the forbidden password which is not really hard to do by the way. (If you are, go for the next option)
    • If you wish to have a unique password per guest (or alternatively instead of asking them to fill-in a password. ask them to fill-in email/phone number and use it as password behind the scenes) or if you want to protect the password from guests who know where to look for it in the code files, you’ll have to store them in the database and query the data for match.

Let’s say you go for the first option, then you can do:


//page code
let dayPw = 'abcde123';
let eveningPw = 'qwert456';
$w.onReady(() => {
    $e('input1').onInput(event => {
        if(event.target.value.trim() === dayPw){
            $w('#mulitiStateBox').changeState('dayGuest');
        } else if(event.target.value.trim() === dayPw){
            $w('#mulitiStateBox').changeState('eveningPw');
        } 
    })
})