Javascript Password - Switch or if/else?

Actually this is probably incorrect as well:

case(attemptedPassword == "sasha"):

…it more likely should be:

case "sasha":

…since attemptedPassword is already invoked in the switch declaration.

I actually am using the else if and it’s working beautifully. I’ll write it out here when I can.

2 Likes

I would love for you to post your code. I am a teacher and I have no idea how to code but would love to drop in your code and change the page names and passwords.

Thanks so much,

Michael

Here’s the code like I promised. It’s a long else/if but it did the trick.
Very insecure but it’s for a game so there is no personal information.

var attemptedPassword;
var attemptedPassword = prompt("Alpha 527 please enter password");
if(attemptedPassword == "SASHA") {
	hypeDocument.showSceneNamed("Green Flash", hypeDocument.kSceneTransitionInstant);
} 
else if(attemptedPassword == "ALVIN") {
	hypeDocument.showSceneNamed("Cook", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "PAT") {
	hypeDocument.showSceneNamed("Gamble", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "JAMIE") {
	hypeDocument.showSceneNamed("Seen", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "MARK") {
	hypeDocument.showSceneNamed("Friends", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "TRACY") {
	hypeDocument.showSceneNamed("Prejudice", hypeDocument.kSceneTransitionInstant);	}
else if(attemptedPassword == "JORDAN") {
	hypeDocument.showSceneNamed("MindReader", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "ELIZABETH") {
	hypeDocument.showSceneNamed("TheBetrayer", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "AARON") {
	hypeDocument.showSceneNamed("Honey", hypeDocument.kSceneTransitionInstant);
}
else if(attemptedPassword == "T-27") {
	hypeDocument.showSceneNamed("Speechless", hypeDocument.kSceneTransitionInstant);
}
else {
    alert("You are not Alpha 527 Access Denied.");
}

This should work, in ‘switch/case’ format, if you’re hot to give it a try…

var attemptedPassword = prompt("Alpha 527 please enter password");
switch(attemptedPassword){
  case "SASHA":
    hypeDocument.showSceneNamed("Green Flash", hypeDocument.kSceneTransitionInstant);
    break;
  case "ALVIN":
    hypeDocument.showSceneNamed("Cook", hypeDocument.kSceneTransitionInstant);
    break;
  case "PAT":
    hypeDocument.showSceneNamed("Gamble", hypeDocument.kSceneTransitionInstant);
    break;
  case "JAMIE":
    hypeDocument.showSceneNamed("Seen", hypeDocument.kSceneTransitionInstant);
    break;
  case "MARK":
    hypeDocument.showSceneNamed("Friends", hypeDocument.kSceneTransitionInstant);
    break;
  case "TRACY":
    hypeDocument.showSceneNamed("Prejudice", hypeDocument.kSceneTransitionInstant);
    break;
  case "JORDAN":
    hypeDocument.showSceneNamed("MindReader", hypeDocument.kSceneTransitionInstant);
    break;
  case "ELIZABETH":
    hypeDocument.showSceneNamed("TheBetrayer", hypeDocument.kSceneTransitionInstant);
    break;
  case "AARON":
    hypeDocument.showSceneNamed("Honey", hypeDocument.kSceneTransitionInstant);
    break;
  case "T-27":
    hypeDocument.showSceneNamed("Speechless", hypeDocument.kSceneTransitionInstant);
    break;
  default:
    alert("You are not Alpha 527. Access Denied.");
}

It’s partly a question of how you prefer your code to look, I suppose. To my eye the multiple stackings on switch/case are easier to read, parse, and maintain than a series of if/then/else statements.

The biggest thing to remember is to add the break keyword after each statement that you want to be an escape from the cascade; otherwise, both that statement and the default will run.

There is another, albeit similar method to use. Certainly following what has been said earlier about how you want your code to look… Following that, I did not want my code to outright give away the passwords (like the above methods) and I did not want to resort to some OAUTH login either.

So here is my solution, it uses a similar JS login, but only looks for hype Scenes, if it does not find them, it goes to a Denied page, which lets you log in again. Many of you will recognize the hype linking to scene functions Linking to specific scenes

Looking at the code, a crafty person will also see that the “passwords” are in fact in plain site, just not where one would expect them to be… here is the hint, look at the div names.

Ok, here is the site, I coded this almost entirely in hype for a work project.

I would love to hear what folks here think.

1 Like

this is what the password Javascript ends up looking like:

{pwd = prompt(‘Enter your frendbox serial number’,’’);
if (pwd !== “”) {
hypeDocument.showSceneNamed(pwd, hypeDocument.kSceneTransitionCrossfade);
hypeDocument.showSceneNamed(“Denied”, hypeDocument.kSceneTransitionInstant);
} else {
hypeDocument.showSceneNamed(“Denied”, hypeDocument.kSceneTransitionInstant);
}
}

1 Like

I will post the actual hype document for all to see later.

Definitely a cleaner option, yeah, provided the scene names match given passwords. :smiley:

in the password Javascript above, there is no password variable and there is no checking against what was entered. It checks to make sure it is not blank and then just passes the entered text directly into the hypeDocument.showSceneNamed variable. Either the scene is there and loads, or it isn’t, in which case the “Denied” scene is called.

I liked that it removes the need to have a separate password list to check (and reveal within the script) and just uses the scene names as “passwords”.

I found my hype document, let me know if you are interested and I will post.

best regards.

Exactly; it’s really quite an elegant solution.

This is great! I’d love to see that hype project if you are able to share it!

This is nice.

Here is an example. Also note that scene names are case sensitive which is demonstrated in this example.
passwordBySceneName.hype.zip (44.1 KB)

3 Likes

Thank you for the nice comments regarding this example.
Here is the hype file. I have removed all of the branded elements to allow for better reuse.

JS_to_Scene_Login.hype.zip (51.5 KB)

4 Likes

I like how you have boiled this down to just one script. Nicely done Mark.

Looking back at my own version, I am not sure why I didn’t use the hypeDocument.sceneNames() API.

I actually thought I was just doing what you most likely had done in regards to your code snippet.
The only thing I added was the form fill instead of a prompt ( which I dislike) :smile:

1 Like

Mmm. Prompts, alerts, modal dialogs … anything that halts background processes utterly is, as I see it, an artifact of the days when computers were capable of doing only one thing at a time. To entirely lock the user into something that must be handled before they can get on with their work smacks of failure, to me. At the very least it strikes me as questionable UX design.

I realize there are times when some steps must be followed in a specific order of operations, but in my experience, those times aren’t geneally as common as many programmers seem to assume.

2 Likes

This is good, the non-secure login on this microsite was supposed to look like a really old CCTV login page. So the prompt, as I see it, was more a success in both the UI and UX design.

Please login into the microsite here: http://frendbox.tv and use serial number 7676
Here is a link to the package this microsite was a complement to: Frendbox package
I would really appreciate your thoughts on the additional pages within. :smile:

I do agree that using a form is a much less obtrusive method for getting user input.

Sure, there are, as I mentioned, times when that sort of thing is necessary, and particularly in this case it’s not especially egregious. :wink: By and large, though, modality might indicate a need to restructure a workflow to be more accommodating, or at least less linear.

Cute concept, by the way.

Hi Mark,

I can do the same but using the radio button?

I tried, but I had a problem. When I select any radio button, always is directed to the same scene.

passwordBySceneName_RadioButton.hype.zip (42.8 KB)