Page six: ‘Reset password’ mode

Here we also start with fading out the placeholder texts.

    else if mode is "resetPassword"
        # Hide the ‘Sign in’ placeholder text
        placeholders_sign_in.animate
            opacity: 0
            options:
                time: 0.25

Next, we reposition the small ‘Cancel’ text so that it’s on top of the ‘Reset Password’ text. We don’t make it visible yet.

        # Reposition small ‘Cancel’ text
        cancel_small.y = 338

Then, a quarter of a second later, we make a few things appear and disappear:

• Hide the small ‘Reset Password’ text (that was tapped to get to this mode). We change its visible (instead of changing its opacity) so that it cannot be tapped.
• Show the small ‘Cancel’ text (that’s now in the place where ‘Reset Password’ was).
• Hide the ‘Sign in’ button label.
• Show the ‘Reset password’ button label.
• Hide ‘Don’t have an account? Sign up!’.
• Have the form_fields layer move up, so only one field is visible.

        Utils.delay 0.25, ->
            # Hide small ‘Reset Password’ text
            reset_password_small.visible = no
            # Show small ‘Cancel’ text
            cancel_small.opacity = 1
            # Hide ‘Sign in’ button label
            label_sign_in.visible = no
            # Show ‘Reset password’ button label
            label_reset_password.visible = yes
            # Hide ‘Don’t have an account?’ text
            banner_sign_up.visible = no
            # Resize to 1 input field
            form_fields.animate "resetPassword"

While all this is happening, we also slide the small ‘Cancel’ text upwards by animating its y location. It moves up together with the resizing of form_fields.

        # Move small ‘Cancel’ text upwards
        cancel_small.animate
            y: 285
            options:
                time: 0.20
                delay: 0.25

After that, we can fade in the correct placeholder text for this mode.

        # Show ‘Reset password’ placeholder text
        placeholder_reset_password.animate
            opacity: 1
            options:
                time: 0.25
                delay: 0.50

To trigger it all: an event handler on the small ‘Reset Password’ text link.

reset_password_small.onTap ->
    switchToMode "resetPassword"

And another one on the small ‘Cancel’ text, for returning to ‘Sign in’ mode.

cancel_small.onTap ->
    switchToMode "signIn"

Works beautifully.

There are a few problems, though: the ‘Cancel’ text link stays visible when we return to ‘Sign in’ mode, and there’s also something wrong with the button label.

We can fix that, but here’s the snag: there’s a difference between:

Going from ‘Create Account’ mode to ‘Sign in’ mode.

and

Returning from ‘Reset password’ mode to ‘Sign in’ mode.

We’ll have to differentiate.

In order to know which was the previous mode (the one we’re transitioning from), we’ll save it in a variable: currentMode. Its initial value will be the "createAccount" mode.

When the desired mode is "signIn", we can now check if we’re returning from "resetPassword" or not.

# Function to switch between modes
currentMode = "createAccount"
switchToMode = (mode) ->
    if mode is "signIn"
        if currentMode == "resetPassword"
            # When returning from ‘Reset password’
        else
            # When coming from ‘Create Account’
        # Code that should run in both cases

(By the way, you can delete the code that’s currently in the if mode is "signIn" block. We’ll replace all of it.)

Naturally we now also have to update currentMode at the end of our function, when the interface changes are completed:

    currentMode = mode

Let’s do the interface changes for when returning from ‘Reset password’ mode.

First, as always, we fade out the placeholder text.

    if currentMode is "resetPassword"
        # When returning from ‘Reset password’
        # Hide ‘Reset password’ placeholder text
        placeholder_reset_password.animate
            opacity: 0
            options:
                time: 0.25

We hide the small ‘Cancel’ text link, then show the ‘Reset Password’ text and place it where ‘Cancel’ was.

        # Hide small ‘Cancel’ text
        cancel_small.opacity = 0
        # Make ‘Reset Password’ text visible again
        reset_password_small.visible = yes
        # … and reposition it
        reset_password_small.y = 285

We then slide ‘Reset Password’ downwards (this will happen simultaneously with the resizing of the input fields).

        # Move small ‘Reset password’ text down
        reset_password_small.animate
            y: 338.5
            options:
                time: 0.20
                delay: 0.25

In the alternative case, when ‘Create Account’ was the previous mode, we do just one thing: hide its placeholder texts.

    else
        # When coming from ‘Create Account’
        # Hide ‘Create account’ placeholder text
        placeholders_create_account.animate
            opacity: 0
            options:
                time: 0.25

The rest of the code, which will run in both cases, is the same as earlier, with one addition: we now also hide the white button’s ‘Reset password’ label.

    # Code that should run in both cases
    Utils.delay 0.25, ->
        # Hide ‘Reset password’ button label
        label_reset_password.visible = no
        # Hide ‘Create Account’ button label
        label_create_account.visible = no
        # Show ‘Sign in’ button label
        label_sign_in.visible = yes
        # Hide ‘Already have an account?’ text
        banner_sign_in.visible = no
        # Show ‘Don’t have an account?’ text
        banner_sign_up.visible = yes
        # Resize to only 2 input fields
        form_fields.animate "signIn"

    # Show small ‘Reset Password’ text
    reset_password_small.animate
        opacity: 1
        options:
            time: 0.50
            delay: 0.25

    # Show ‘Sign in’ placeholder text
    placeholders_sign_in.animate
        opacity: 1
        options:
            time: 0.25
            delay: 0.50

Congratulations! Now the only difference between your prototype and the original is that you can’t actually create an account or sign in.