Adding password protection to a page/scene in Hype

So you have a project on your website that might be a bit delicate and you want to add a simple password authentication to a specific scene?
Then I have an solution for you.
It’s a very simple solution, so it’s not the most secure. People with some basic understanding of HTML are able to go around it.
But, for most purposes, this should do the trick 🙂

Let’s first start by understanding how this will work.

By clicking on an element, the user will be asked for a password.
If the password is correct, the user will be redirected to the secret scene.
If the password is incorrect, he will get a notification to try again, or he can cancel.

Follow this video, the code for it is right below:
(The video has no sound, it just shows what you need to do)



	var password = "123"; // The password you want the user to enter
	
	var message = "Enter password:"; // The message that tells the User to input the password
	
	var errorMessage = "The password you entered was wrong. Would you like to try again?"; // The error mesage that should pop up, if the password was incorrect

	
	var nameOfProtectedScene = "secret"; // This is the name of the scene that will open if the password was correct
	
	
	///////////////////////////////////////////////////////
	// The code below does all the checking and alerting //
	//           It's best not to change it ;)           //
	///////////////////////////////////////////////////////
	
	var enteredPass;
	var passCheck = false;
	
	while(passCheck == false){
		enteredPass = prompt(message,"");
		
		if(enteredPass == null){
			alert(redirectBackMessage);
			break
		}
		
		if (password === enteredPass){
			passCheck = true;
		} else {
			var confirmation = confirm(errorMessage);
			if(confirmation == false){
				break
			}
		}
	}
	
	if(passCheck == true){
		hypeDocument.showSceneNamed(nameOfProtectedScene, hypeDocument.kSceneTransitionInstant)
	}



Feel free to change the variables (the “quoted” text) to your liking.
I do not recommend changing anything in the bottom part of the code.
However, if you feel adventurous and already know a bit about coding in Hype, you can change the last line of the script. In there you can define what kind of a transition you want. By default it will just do an instant transition.