First tiny programming Project - how to set a login function?

Hello there!

I am working with Hype 5 to make small and simple animations for websites, but in this project I need some deeper HTML skills - would it be possible to finde here some help?

My little project is comparable with a simple login site, where you need to enter a password by pushing separate buttons.

Short Description:

I have 2 scenes (pages) in hype 5. The first one is a landing page, the second a configuration page.

  1. ) On the landing page you need to enter a password (number 0-9). Therefore you need to push buttons (individual graphics), with a similar design like a calculator. If you enter the correct number, you push enter to verify the code and jump to the second Scene. Otherwise you can push "Delete" to enter a new code.
  1. on the second scene, you can change/set this password.

I would be very happy if someone can help me with this function. I set the buttons, but I am not able to link these with an input field to verify a password and link them to the next page if correctly.

Thank you very, very much in advance!

Best regards
Andreas

Attached you see the effect I am searching for. The picture is not my project, but looks very similar to it.

Welcome to the Forum Andreas!

The following post (with demo file) by @MarkHunte might be close to what You are looking for - just a little adaption for clicking on the keypad numbers.

1 Like
1 Like

Note in case folks missed it: this is in the freelance section, so feel free to contact @amjex if interested in taking on some work to do this :slight_smile:.

1 Like

Hi there,

I've implemented the parental gate function and it works absolutely fine - thank you very much for your idea!

Would it be possible to get some extra for two little questions?:

  1. How can I adjust this code to enter an individual code with 10 digits? Currently it works with an automatic shuffle code, so it set the password automatically. I guess it wouldn't be possible to enter and save an individual password on they succeed page - isn't it?

  2. How can I implement my buttons "Enter" and "Delete". By pressing "Enter", the password will be verified, by pressing "Delete", your input will be reset.

Thank you so much !

HypeConditionLinker extends Hype to do some simple logic without the need of custom scripting. It provides the logic-management, but let's the functional-layout-setup for how, why, when to you. it takes some arguments from the attribute-panel and fires custom-behaviors regarding the progress of the linked conditions. the logic to setup a conditionLinker is described in the above linked thread...

if the shuffle-function is removed (it's been there just for fun) the conditions are defined by the entry in the attributes-panel. it can be of any length. in the examplefile i changed it to five numbers.

I've added a reset/delete-button. it's done by simply reloading the scene. the enter-button will appear if the right keys are entered. that's the easiest way to achieve this using the extension.

New file:
Parental_gate_reset_enter.hype.zip (48.0 KB)

this'll be something that requires some additional coding which depends on how you want to enter a new combination and where the new combination should be stored -> You've got access to a database or just want to save it locally ... ¿

///
for anybody who likes to script the last part (individual password): a new condition will be activated by changing the data-attribute -> logicIf of the element that holds the condtionLinkerInstance on HypesScenePrepareForDisplay

3 Likes

brilliant! - Thank you so much - it works great! :grinning: :smiley: :grin:

2 Likes