Designing a login form using Data Masters

With Justinmind, you can create a login form that requires users to log in in order to access the rest of the site or app. This is done using Data Masters.

 

log_in_data_master

To create a login form with a Data Master, follow the steps below:

  1. Start by creating a Data Master and name it “Users”.
    • Add two Data Master fields: and name them “Username” and “Password”.
    • Change the type to “password” for the password field, by selecting the field and clicking on the gear icon on the right-hand side.
    • Click “OK”.
  2. In the Data Masters palette, double click on the Data Master and select the “View and edit records” tad.
    • Write some example usernames and passwords here.
  3. Go to the Screens palette and create a second screen (click the ‘+’ icon).
    • Drag the Data Master into it. Notice that you’ll the input fields for both fields will automatically appear.
  4. Drag a Button to the canvas and create a third screen.
    • This screen will be the one that displays if the user logs in correctly (if the data they enter matches the data in the Data Master).
  5. Go back to Screen 1, select the Button and go to the Events palette.
    • Click on the “add condition” link on the left of the “Link To” event. 
    • The Condition builder will pop up. Build the following condition: 
    • Drag the “Filter” function to the term in the conditional expression.
    • In the first term after the “Filter” function, drag the Data Master from the Data Masters tab, followed by the “Equals” function.
    • In the first term after the “Equals” function, drag the “Username” Field from the Data Master in the Data Masters tab.
    • In the second term, drag the Input Text Field that allows the user to enter a username.
    • Then, drag the “And” function between the last parenthesis and the parenthesis on the right of the “Equals” function, so that the first statement applies to the “Equals” function.
    • In the second term, add another “Equals” function and repeat the above steps for the “Username” Field for the “Password” Field.
    • Then, drag the “Count” function to the left of the “Filter” function.
    • Drag another “Equals” to the right-end of the conditional expression. 
    • Finally, write ‘1’ in the last term.
    • Click “OK”.
    • log-in-events

 

And that’s it! Click “Simulate” to interact with your prototype.

You can download our example here