Part 2: Sign Up
The Sign In template demonstrates the 4 functions of the Sign In component: Sign Up, Sign In, Sign Out, and Reset Password.
The Sign Up/Sign In functions will be demonstrated on the same screen. This screen looks so beautiful because it is based on a remix of the existing Sign In screen.
Sign Up Screen:
Sign In Screen:
Components
Because this is more complex than other Screens I have demonstrated in tutorials, I will show the component tree and explain which components are visible when a user is signing in or signing up.
Visible in both: Email Input, Password Input, RememberDetailsRow (containing RememberDetailsLabel and Remember_Switch), SignIn-Up, SwitchFunctionButton, and ResultLabel (when there is a result to be shown).
Visible only when signing up: Password Input 2
Visible only when signing in: ForgotPassword
Invisible Components: Alert1, Sign_In1
We’ll be setting the Title and Message of the Alert in the blocks, so you just need to set the Confirm Button text and the Cancel Button text for it in the Design tab.
Blocks
Begin by initialising some variables.
We will initialize some stored variables that can store the user’s email and password, and some app variables that will be displayed as the text of different Buttons depending on whether the user is signing in or signing up.
The user will see a Button saying ‘Sign In’ when they sign in and a Button saying ‘Sign Up’ when they sign up.
The user will see an option to switch to signing up on the Sign In screen, and to switch to signing in on the Sign Up screen.
We can turn these settings into functions.
When the user switches to ‘sign in’, we’ll show them the text described above, we’ll show them a password recovery option, and we’ll hide the second password input box.
When the user switches to ‘sign up’, we’ll show them the text described above, we’ll show the second password input box, and we’ll hide the ‘forgot password’ Button.
Sign Up Blocks
When the user clicks the ‘Sign Up’ button, which is the Button ‘signinup’ when the text says ‘sign up’, they will call the ‘sign up’ function seen below.
First, the blocks check if the passwords in both Password inputs match.
If they do, the ‘sign up’ function of the Sign In component will be called. The user will either be shown an error or will be asked to check their email to verify their email address.
Once they have verified their email address, they will be able to sign in.
The extra function saying ‘remember_details_cond’ is very simple: if the user has set the ‘remember my details’ switch to be true, the app will save their email and password as stored variables.
You can learn how to sign someone in with stored email and password details in the next post in this series.