Account Login Tutorial - Axure Docs

In this tutorial, you'll learn how to make a login form that uses [conditional logic][conditions] to validate the user's credentials. ›ComplexInteractionsTheBasicsInteractiveButtonHidingandShowingWidgetsPassTexttoNextPageAnchorLinkEmbeddingMediaFullWidthImageorBannerScrollingRegionRotatingCarousel/SlideshowNavigationMenuTooltipsTabMenuAccordionMenuDragandDropComplexInteractionsAccountLoginAutoTabFieldsBlinkingTextDynamicallySetDroplistOptionsSetTextwithDroplistRequiredFieldsScrollActivatedStickyHeaderSetDynamicPanelStateonNextPageSliderControlTermsandConditionsTimerMobilePatternsSwipingSlideshowToggleSwitchInthistutorial,you'lllearnhowtomakealoginformthatusesconditionallogictovalidatetheuser'scredentials. Note ClickheretodownloadthecompletedRPfileforthistutorial. 1.PageandWidgetSetup Page1–TheLoginForm OpenanewRPfileandopenPage1onthecanvas. Dragtwotextfieldwidgetsontothecanvas.NameonetextfieldEmailFieldandtheotherPasswordField.(Youcanoptionallylabeleachwithalabelwidget.) Tip TomaskthePasswordField'stext,setitsinputtypetoPassword. DragabuttonwidgetontothecanvasandsetitstexttoLogIn. DragaHeading3widgetontothecanvas.SetitstexttoInvalidemailand/orpasswordandnameitErrorMessage. Changetheerrormessage'sfontcolortored,andhideitbyclickingtheHiddeniconinthestyletoolbarortheStylepane. Page2–TheSuccessfulLoginPage Addanewpagetotheprojectandopenitonthecanvas. DragaHeading1widgetontothecanvasandsetitstexttoThankyouforloggingin! 2.TheSuccessfulLoginCase LinktotheSecondPage SelecttheLoginButtonandclickClickorTap→OpenLinkintheInteractionspane.SelectPage2inthedropdownthatappears,andclickOK. AddaConditionThatValidatestheTextFields HoverovertheClickorTapheadingandclickEnableCasestotheright.IntheConditionBuilderdialogthatappears,namethecaseSuccessfulLoginandclickAddLogic. Intheconditionrowthatappears,selecttheEmailFieldtextfieldintheseconddropdownandentertest@domain.cominthefieldtotheright. ClickAddRowtoaddanotherconditionalstatement.SelectthePasswordFieldtextfieldintheseconddropdownandenter123456inthefieldtotheright. Thesummaryatthebottomofthedialogshouldread:IftextonEmailFieldequals"[email protected]"andtextonPasswordFieldequals"123456".ThisconditionwillbemetonlyifbothstatementsaretruewhentheLoginButtonisclicked. ClickOKtoclosetheConditionBuilder. 3.TheIncorrectLoginCase WiththeLoginButtonselected,hoverovertheClickorTapheadingandclickAddCasetotheright.IntheConditionBuilderdialogthatappears,namethenewcaseIncorrectLoginandclickOKwithoutaddinganylogic. IntheInteractionspane,clicktheInsertActioniconbelowthenewcaseheading.SelectShow/Hideinthelistthatappears,andtargettheErrorMessagewidget.LeaveShowselectedandclickOK. Note Noticethateventhoughwedidn'tsetupaconditionforthiscase,ithastheconditionELSEIFtrue.Thiscase,alsoknownasa"default"case,willfireifthefirstcase'sconditiondoesn'tpass(ifthewrongemailand/orpasswordisprovidedintheform). 4.PreviewtheInteraction PreviewthepageandclicktheLogInbutton.Theerrormessageshouldappearsinceyouhaven'tyetprovidedthecorrectlogininformation. Nowentertest@domain.comintheEmailfieldand123456inthePasswordfield,andclicktheLogInbuttonagain.YoushouldbetakentoPage2oftheprototype. AdditionalInformationandTips HidetheErrorMessageWhentheTextFieldsAreFocused Ifyouwouldliketheerrormessagetobehiddenagainwhentheuserclicksononeofthetextfields,setupaShow/HideactionundertheGotFocuseventforeachtextfield. ←DragandDropAutoTabFields→1.PageandWidgetSetupPage1–TheLoginFormPage2–TheSuccessfulLoginPage2.TheSuccessfulLoginCaseLinktotheSecondPageAddaConditionThatValidatestheTextFields3.TheIncorrectLoginCase4.PreviewtheInteractionAdditionalInformationandTipsHidetheErrorMessageWhentheTextFieldsAreFocused