Page six: Switching back to ‘Create Account’ mode
We want to be able to switch back to ‘Create Account,’ so we add it as a possible
mode to our function:
else if mode is "createAccount"
Here we do more or less the opposite.
First, we fade out the current placeholder texts underneath the input fields.
# Hide the ‘Sign in’ placeholder text placeholders_sign_in.animate opacity: 0 options: time: 0.25
Same for the small ‘Reset Password’ text: we animate it to zero opacity. (This time a bit faster.)
# Hide small ‘Reset Password’ text reset_password_small.animate opacity: 0 options: time: 0.25 delay: 0.25
Next up, also after a
0.25” 🛠 Delay:
- Hide the ‘Sign in’ button label.
- Show the ‘Create Account’ button label.
- Hide ‘Don’t have an account? Sign up!’.
- Show ‘Already have an account? Sign in!’.
- Slide the
form_fieldslayer back down, to three visible fields.
Utils.delay 0.25, -> # Hide ‘Sign in’ button label label_sign_in.visible = no # Show ‘Create Account’ button label label_create_account.visible = yes # Hide ‘Don’t have an account?’ text banner_sign_up.visible = no # Show ‘Already have an account?’ text banner_sign_in.visible = yes # Resize to 3 input fields form_fields.animate "createAccount"
And finally, we fade in the placeholder texts.
# Show ‘Create Account’ placeholder text placeholders_create_account.animate opacity: 1 options: time: 0.25 delay: 0.50
And we’ll trigger all this with a tap on the ‘Don’t have an account? Sign up!’ text at the bottom of the screen.
banner_sign_up.onTap -> switchToMode "createAccount"