Skip to main content

Account login tutorial

In this tutorial, you'll learn how to make a login form that uses conditional logic to validate the user's credentials.

info

Click here to download the completed RP file for this tutorial.

1. Page and widget setup​

initial page and widget setup

Page 1 – The login form​

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag two text field widgets onto the canvas. Name one text field Email Field and the other Password Field. (You can optionally label each with a label widget.)

    tip

    To mask the Password Field's text, set its input type to Password.

  3. Drag a button widget onto the canvas and set its text to Log In.

  4. Drag a Heading 3 widget onto the canvas. Set its text to Invalid email and/or password and name it Error Message.

  1. Change the error message's font color to red, and hide it by clicking the Hidden icon in the style toolbar or the Style pane.

Page 2 – The successful login page​

  1. Add a new page to the project and open it on the canvas.

  2. Drag a Heading 1 widget onto the canvas and set its text to Thank you for logging in!

2. The successful login case​

Link to the second page​

  1. Select the Login Button and click Click or tap → Open link in the Interactions pane. Select Page 2 in the dropdown that appears, and click OK.

    the Click or Tap → Open Link common interaction button

Add a condition that validates the text fields​

  1. Hover over the Click or Tap heading and click Add case to the right, and then click Add condition. In the Condition builder dialog that appears, name the case Successful Login and click New condition.

    creating the successful login case

  2. In the condition row that appears, select the Email field text field in the second dropdown and enter test@domain.com in the field to the right.

  3. Click Add Row to add another conditional statement. Select the Password field text field in the second dropdown and enter 123456 in the field to the right.

    the successful login conditions

    The summary at the bottom of the dialog should read: If text on Email Field equals "test@domain.com" and text on Password Field equals "123456". This condition will be met only if both statements are true when the Login button is clicked.

  4. Click OK to close the Condition builder.

3. The incorrect login case​

  1. With the Login Button selected, hover over the Click or tap heading and click Add case to the right. In the Condition builder dialog that appears, name the new case Incorrect Login and click OK without adding any logic.

    adding a second case with no conditional logic

  1. In the Interactions pane, click the Insert action icon below the new case heading. Select Show/hide in the list that appears, and target the Error message widget. Leave Show selected and click OK.
info

Notice that even though we didn't set up a condition for this case, it has the condition ELSE IF true. This case, also known as a "default" case, will fire if the first case's condition doesn't pass (if the wrong email and/or password is provided in the form).

showing the error message in the second case

4. Preview the interaction​

  1. Preview the page and click the Log in button. The error message should appear since you haven't yet provided the correct login information.

  2. Now enter test@domain.com in the Email field and 123456 in the Password field, and click the Log in button again. You should be taken to Page 2 of the prototype.

Hide the error message when the text fields are focused​

If you would like the error message to be hidden again when the user clicks on one of the text fields, set up a Show/hide action under the Got Focus event for each text field.

Add set error state actions​

  1. Select the Email Field text field, head over to the Interactions pane, then click Add style effect under the Text field properties section, and then select Error style from the dropdown. Set the Line color to red.

  1. Select the Password Field text field, and repeat the actions from step 1.

  2. With the Login Button selected, hover over the + icon under the Incorrect Login case, and click Add action.

  1. Select Set Error State from the dropdown, and then select the Email Field widget.

  1. Repeat Steps 3 and 4 again, and this time select the Password field Widget.

  1. Preview the prototype to test out the interaction.