© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

ACCOUNT LOGIN

Build a login form that uses conditional logic to validate the user credentials. In this prototype, you'll have one possible valid email address, <rose@classyharbor.com>, and one possible password, "password1". (Don't make that your bank password, folks. Practice good password hygiene! Check out www.passwordsgenerator.net.) Both the email and password need to be correct in order to log in.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

In the training document, open the page "Account login". The page includes a login form made up of an email field, password field, and submit button. The page also includes an error message widget that shows after an incorrect login attempt.


Select the password field. In the Properties tab, locate the "Type" dropdown and choose "Password".


Hide the widget named "Error" by clicking the "Hidden" checkbox in the Style tab.

STEP 2: SUCCESSFUL LOGIN

If the correct email and password are entered, the “Account Home” page will open.


Select the "submit" button. In the Properties tab, double-click "OnClick" to add a new OnClick case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


Leave the first dropdown on the option "text on widget". In the second dropdown, choose the widget "Email".


Leave the next two widgets set to "equals" and "value". In the final field, type <rose@classyharbor.com> (without brackets).


Click the green "+" icon on the right to add another condition.


Leave the first dropdown on the option "text on widget". In the second dropdown, choose the widget "Password".


Leave the next two controls set to "equals" and "value". In the final field, type "password1” (without quotes).


At the top of the Condition Builder is a dropdown after the word "Satisfy". Make sure it is set to "all".


Click "OK" to close the Condition Builder.


In the left column of the Case Editor, click the "Open Link" action.


In the right column, click the page "Account home".


Click "OK" to close the Case Editor.

STEP 3: FAILED LOGIN

If the conditions set in Case 1 are not met, the error message should show.


With "Submit button" still selected, double-click "OnClick" in the Properties tab again to make a second OnClick case, Case 2. In the center column, notice the text "Else if true". This new case will only fire if the previous case does not.


In the left column, click the action "Show".


In the right column, click the checkbox for the "Error" widget.


Click "OK" to close the Case Editor.

STEP 4: PREVIEW

Click Preview.


Try clicking the "submit" button with incorrect information in the fields to see the error message. Then try entering the correct email and password to log in to the “Account home” page.

OPTIONAL: ADDITIONAL LOGINS

You may wish to include multiple valid logins in your prototype. This is useful if you want to show different controls or permissions in different accounts. Try adding another OnClick case to the submit button that checks for a different valid username and password of your choosing. (Make sure to move this new case above Case 2 using [CTRL] / [CMD] + [↑]—otherwise it will never fire.) If you need help, email us at <support@axure.com>.

MORE RESOURCES

SUBMIT

Please check username and password

and try again.

CORE TRAINING

TUTORIALS