Password Protected Elements

Ask the community
,
1

Instead of creating a password protected page, can you make a password protected element?
Example: The user clicks on an image, and is then prompted to enter a password in order to view the image.

2

Hi,
Without any security aspect, you can probably achieve this with a few lines of code

Add an image with a placeholder.
Add code so when the user click the image it shows him a text input.
Add logic in the code so when he enter the “password”, it changes the image source for your final image.

let $w("#myImage").src = sourceOfPlaceHolder

export function myImage_click(){
$w("#myInputField").show();
}

export function myInputFiled_onChange(){

let myPassword = "yourPassword"

if ($w("#myInputField").value === myPassword){
$w("#myImage").src = sourceOfFinalImage
}

}

I didn’t tested it, and again, this isn’t the right way to protect something. It is just the logic you need to achieve this

3

Thank you so much for your time.

So here is a link of what I am trying to achieve:
https://www.leveluptraining.tv/tesst

I’ve changed the concept slightly. The user must enter a password and click on a button to view the collapsed box.

I would really appreciate it if you could give me the code on how to do this logic:

IF: input value = password AND submit button is clicked
THEN: show box container

You rock :slight_smile:

4

This is the example page at the moment:

$w . onReady ( function () {
$w . onReady ( function () {

  $w ( '#buttonGO' ). onClick (() => { 
            toggleBox ( $w ( '#boxDavidsProfile1' ),); 
});

});

function toggleBox ( boxElement ) {
const isCollapsed = boxElement . collapsed ;
if ( isCollapsed ) {

        boxElement . expand (); 
}  **else**  { 
                
        boxElement . collapse (); 
}

}
});