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.
To create a login form with a Data Master, follow the steps below:
- 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”.
- 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.
- 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.
- 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).
- 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”.
And that’s it! Click “Simulate” to interact with your prototype.
You can download our example here.