0 Replies Latest reply on May 12, 2015 10:58 AM by lagnet

    Mimicking Password Authentication with Text fields and Localstorage

    lagnet

      Hi all,

       

      I'm a designer new to Edge Animate and am not very familiar with code. What I'm trying to do is mimick a password set up and authentication process for a project.

       

      I currently have three text fields (TextfieldA, TextfieldB, TextfieldC), each looking like this:

       

      sym.$("TextfieldA").html('<input type="text" value="" id="InputA"/>');

      sym.$("#InputA").css( {'font-size': 18, 'text-align':'left', 'height': '29px', 'width': '159px', 'color': '#4d4a4a'} );

       

      ^ If any of this seems odd please let me know.

       

      Once text is entered into these three text fields, I have a button which has a click event to go to the next part of the animation. On the click event, I'd like it to store what's been typed into the three textfields into localstorage (with names TextfieldA etc). This simulates the "Password Set Up" stage. The three text fields then disappear.

       

      Then, three new text fields appear in the same location as the previous three, and the user should then input the same text into the same fields. On the click event that follows, I want it to validate what's been entered into these new text fields with what's been stored in localstorage. If the input is the same as their corresponding localstorage, then the "Success" animation plays, if not then the "Wrong Password" animation plays.

       

      I've looked up ways which sends the text entry into local storage, but have not been able to get it working in my composition. Could anyone please help me out with this? Is the authentication process possible to do in Edge Animate?

       

      Many thanks.