Using Passwords


(Mark Butler) #1

Can Hype produce password protected sites? I want to protect parts of my site with a password so only people approved by me can view those pages.


Membership Area & Passwords
(Nick ) #2

You can do it with javascript but if someone else knows how to write a javascript password they can probably crack your password too.
Here is a good tutorial on how to create a basic password form in HTML5
http://www.the-art-of-web.com/javascript/validate-password/
In Hype you can always use an HTML widget and then click on the pencil icon to add the code to create your form.
See attached as an example.

password.hype.zip (19.0 KB)


(Mark Butler) #3

Hi Nick,

Thank you for the info.
The .zip just takes me to the hype tutorial page that opens whenever you use the program. Is that what it is intended to do?
I entered password as a search term in the help documentation, nothing is found.
Going to try my skills at javascript this evening, should have even less hair on my head by the time I go to bed…


(Nick ) #4

It should open a Hype Pro document. I created this in Hype Pro the released version.
Then you can view the HTML widget file with the script.
You would not be able to use this as a password script to move between pages but it will show you the mechanics of how to get started.


(Mark Butler) #5

Nope, I am achieving the square root of nothing with this. Been at it for 3 hours no idea what I am doing.
Is there a step by step guide anywhere you know of/


(Greg) #6

Hi Mark, Nick’s zip file should be a .hype file when you open it, previewing it in Safari it should look like this…


(Mark Butler) #7

Yeah I can get that far, how and where do I enter the HTML?
I can find no way to create a form in hype or anything in the help documentation relating to forms or passwords.
I am guessing I need to use an HTML widget, is that correct?


(Greg) #8

Ahah, Nick entered his code in the “innerHTML” of a widget…

There is a small “pencil” icon that shows up when you double click within the HTML WIDGET, click on it to see the “innerHTML” code


(Greg) #9

Here is an older tutorial on password proctection, it may help.
http://hype.desk.com/customer/portal/articles/798062


#10

Your web host might also handle this if you ask them how (everyone handles it differently).

Also, here’s a way to set a password before any web content is loaded at all: http://www.htaccesstools.com/articles/password-protection/


(Nick ) #11

Not sure how much background you have in javascript or HTML. But you will want to dig into that a bit more.
But here is a link to treehouse.com’s quick CSS solution
https://css-tricks.com/easily-password-protect-a-website-or-subdirectory/


(Mark Butler) #12

Hi, I left this for a while, have it working now but how do I direct it to the next ‘page’ once submit is pressed?


(Jonathan Deutsch) #13

If you want to advance to a different scene, you’d use this Hype API code in the success case:

hypeDocument.showSceneNamed('sceneName', hypeDocument.kSceneTransitionCrossfade, 1.1);

If you want to direct to a different URL, you can use this code:

window.location = "http://tumult.com/hype";