Custom password protected page

Ask the community
,
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;