Push user to a scene on successful password entry

Using JavaScript with Hype
1

Hi Hype users.

I’m not much for coding, and I’ve found myself stuck on a form submission. Here is my code:

<head>
<script type="text/javascript">
function isValid(){
var password = document.getElementById('password').value;
if (password == "abc123")
HypeDocument.showNextScene
else
{alert('Wrong Password')}
}
</script>
</head>

<form name="Password" action="isValid();">
Password:
<input type="password" autofocus placeholder="Enter your Password" id="password" name="password">
<input type="button" value="Log in" onsumbit="return isValid();" onclick="isValid();">
</form>

Basically everything seems to work. It responds with “Incorrect Password” when an invalid password is typed, where I’m encountering a problem is sending the user to a new page when the correct password is entered. At this stage nothing happens when the correct password is entered.

I feel very close to accomplishing what I need to, but there is a small gap, someone please help me! I’ve been banging my head on my desk for a week now, and this project has to go out the door. There is no need for any advanced security, it will run on an intranet, on an iPad in single app mode, so even the most basic, un-secure way of getting a page transition on a correct password entry will do just fine.

Right now all of my code is inside an HTML widget in a scene called ‘password’, I’m trying to send users to a scene called ‘main1’ when they are successful at password entry.

I will happily provide more detail if necessary, but I can’t post the file because of some legal blah blah… Thank you!

2

You can do the same in a much simpler way.

1,

Add a Rectangle elements to your first scene.

Then edit its innerHTML by double clicking on it and click the edit button that shows underneath it.

2,
paste this code into it.

<div id="password" class="password">
  <input type="password" id="answer" class="textInput" placeholder="Password">
 
</div>

(Set what ever styles you want for the Rectangle using the Element Inspector.)

3, Add a button element to the same first scene, shape as you will and set its text to "Log in"

4, With the Login button selected, go to the Action Inspector

5, Click the + button on the right of the option On Mouse Click.

Under the On Mouse Click actions
Choose the Action: Run Javascript and Function: New Function…

6, Doing step 5 will jump you to a new blank Javascript.

Change the function name untitledFunction to an appropriate name. i.e passwordValidator

7,

Inside the function, paste this code.

  var password = document.getElementById("password").childNodes[1].value
    	
    	 
    if (password == "rawr"){
    
   hypeDocument.showSceneNamed('main1', hypeDocument.kSceneTransitionCrossfade, 1.1)
    }

You completed function should look like this:

function passwordValidator (hypeDocument, element, event) {

var password = document.getElementById("password").childNodes[1].value

if (password == "rawr"){

hypeDocument.showSceneNamed('main1', hypeDocument.kSceneTransitionCrossfade, 1.1)
}

}

Thats it.

3 Likes
3

Hi Mark,

Thank you for your help. For some reason your code didn’t quite work but when I mashed both our codes together I was able to have the desired result.

Thanks again.

4

Hi Scott,
Examples like this do normally need some adaption done by the end user.
But glad the concept worked.

Cheers

5

Wouldn’t someone be able to look at the source code of the webpage and go thru the “hype_generated_script” and see the password?

6

Yes I suspect if they know how to they could. But very basic security is what was requested

1 Like
7

For my purposes, its on an intranet on a single iPad in single app mode. There is no way for the user to check the user code unless they use their own machine and first decode the wifi password to get onto the network, then find the IP broadcasting the website, then look at its source code. What I’m protecting is some volume controls. I think they’ll be safe enough.

Best,
Scott

2 Likes
8

I love the above code but it seems to only work with one scene in a hype document. If I make a new page and want a differnt password I redo the tutorial and just name the password script number 2 and it doesn’t work. Is there something I need to do to have several password areas in the same document?

Thanks for the help.

9

Did you change the "Scene Name" in the script? Its "main1" in the original

hypeDocument.showSceneNamed('main1', hypeDocument.kSceneTransitionCrossfade, 1.1)
11

It seems that I can only have one password in a hype document.

Here is password script 1:

function passwordValididator1(hypeDocument, element, event)  {
var password = document.getElementById("password").childNodes[1].value
if (password == "Fultz"){
    hypeDocument.showSceneNamed('Hall of Honor',
 hypeDocument.kSceneTransitionCrossfade, 1.1)
}

Here is script 2... A copy of the first one with changed pages and passwords.

function passwordValididator1(hypeDocument, element, event)  {
var password = document.getElementById("password").childNodes[1].value
if (password == "mike"){
    hypeDocument.showSceneNamed('last',
 hypeDocument.kSceneTransitionCrossfade, 1.1)
}

Thanks for your help. I don't know scripts at all. I am a 6th grade teacher and need these for my gamified site.

12

They are both named the same, try renaming one of the scripts

13

Typo… They are passwordValididator1 and passwordValididator2

14

Still doesn’t work even with them named differently.

15

You are unable to have two elements with the same ID, and to functions with the same name, as the browser will not understand which it is meant to look at.

So the code you are looking for is like:

function passwordValididatorS1(hypeDocument, element, event)  {
    var password = document.getElementById("S1password").childNodes[1].value
if (password == "Fultz") {
    hypeDocument.showSceneNamed('Hall of Honor', hypeDocument.kSceneTransitionCrossfade, 1.1)
}

function passwordValididatorS2(hypeDocument, element, event)  {
    var password = document.getElementById("S2password").childNodes[1].value
if (password == "mike"){
    hypeDocument.showSceneNamed('last', hypeDocument.kSceneTransitionCrossfade, 1.1)
}

This means you would need a <input> element named accordingly in each scene.

1 Like
16

So the code below told me to make something like a square and paste this code in. I tried changing the imput type and it didn’t work. Any help would be great thanks… I think you are on to something. I just don’t know what you mean by make an imput that uses that code. Sorry I just can’t figure this out as I don’t know this code stuff at all. Much appreciated. [quote=“MarkHunte, post:2, topic:2027”]
1,

Add a Rectangle elements to your first scene.

Then edit its innerHTML by double clicking on it and click the edit button that shows underneath it.

2,paste this code into it.

<div id=“password” class=“password”>
<input type=“password” id=“answer” class=“textInput” placeholder=“Password”>

</div>
[/quote]

17

Take a look at this:

passValidation.hype.zip (29.0 KB)

18

@MrAddy beat me to the punch…

Form password test.hype.zip (31.8 KB)

Pasword 1 = jawr
Pasword 2 = rawr

2 Likes
19

Hey Mark... I found this other post you had with the virtual keyboard:

Thank you, and very cool.
Now, the hard part... I am JS nobody (what comes before novice?) but need to find a way to incorporate these two files... Mr'Addy's PassValidation and your Virtual Keyboard.

We are trying to produce a stand alone kiosk without keyboard, but require a password entry via keyboard.

Any suggestions on how one might combine these two?
If someone was able to help with this, we have budget.

Thanks Kindly.
-DG

20

Derek, ( @Chizz )

Here you go.

passwordKioskKeyboard.hypetemplate.zip (85.7 KB)

1 Like
21

Hey man… lol, that’s fantastic!
Thanks kindly…
What a great community - hopefully I can return the favor some where :smile:
Best!

1 Like