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

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 message" 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 address".


Leave the next two controls 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 message" 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

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REFERENCE GUIDE