Email & Password

Open

Open

• Collect

  • Email Address

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Password

    • By default password is displayed as •••••••

    • When 👁 clicked show password for both Password and Password Confirm

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Password Confirm

    • By default password is displayed as •••••••

    • When 👁 clicked show password for both Password and Password Confirm

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Promo email opt-in (default checked)

• Validate

  • Email Address

    • Validate onkeyup

      • Display ✅ when validation rules satisfied

    • Validation rules

      • Must be a valid email address format

  • Email Address Confirm

    • Validate onkeyup

      • Display ✅ when validation rules satisfied

    • Validation rules

      • Must match Email Address

  • Password

    • Display validation rules on onfocusin

    • Validate onkeyup

      • Display ✅ when validation rules satisfied

    • Validate onfocusout

      • On validation error

        • Turn border red

        • Display error message:

          • Invalid Password

    • Validation rules

      • Min 10 characters

      • Min 1 lowercase letter

      • Min 1 uppercase letter

      • Min 1 number

      • Special characters optional

  • Password Confirm

    • Validate onkeyup

      • On validation error

        • Turn border for Password and Password Confirm red

        • Display error message:

          • Passwords do not match

    • Validation rules

      • Must match Password

• Display

  • Write it down! box

    • Display once email and password validation passed.

  • Create Account link

    • On click

      • Create Account

      • Email Confirmation email

      • Display Email Confirmation Page

  • Log-in link

    • On click display Log-in Page

Email Confirmation

Email Body

Confirmation Page

• Display

  • “Confirm your email address” until user validates email, then “Close browser tab”.

Create account

• Generate FIO Private/Public Key

• Store log-in credentials and FIO Private/Public Key as defined in “A Single-Sign-On Security Platform for Private and Decentralized Applications”.

• Record server-side unencrypted:

  • Email Address

• Send emails:

  • Account Created

• If promo email opt-in is checked add user to Marketing list

Account Create Confirmation

• Reload to Home Page Authenticated after 3 seconds or after account is created whichever is last.

• Once account created

  • If part of Purchase flow

    • Display next step in purchase

  • If part of Create Account flow

    • Display PIN Code Page

Flow variance

PIN Code

• Collect

  • PIN Code

• Validate

  • PIN Code

    • Validate onkeyup

      • No action if non-digit entered

    • Validation rules

      • Exactly 6 digits

• When 6 digits entered display PIN Code Confirm Page

• Display

  • Skip

    • On click

      • Display PIN Skip Page

PIN Code Confirm

• Collect

  • PIN Code Confirm

• Validate

  • PIN Code Confirm

    • Validate onkeyup

      • No action if non-digit entered

      • On validation error

        • Turn ••••••• red

        • Display link to PIN Code Page

    • Validation rules

      • Must match PIN Code

• When 6 digits entered and match record PIN and display Account Confirm Page

• Display

  • Back link

    • On click display PIN Code Page

  • Skip

    • On click

      • Display PIN Skip Confirm Page

PIN Skip Confirm

• Display

  • X

    • Display PIN Code Page

  • Skip

    • On click

      • Display Secret Questions Page

Secret Questions

• Overlay Secret Questions pop-up is shown only immediately after Account Creation

• Collect

  • Secret Question 1

  • Secret Question 2

• Validate

  • Secret Question 1

    • Validate on NEXT click

      • On validation error

        • Turn border for Secret Question 1 red

        • Display error message:

          • Please select question

      • Validation rules

        • Secret Question 1 selected

    • Secret Question 2

      • Validate on NEXT click

        • On validation error

          • Turn border for Secret Question 2 red

          • Display error message:

            • Please select question

      • Validation rules

        • Secret Question 2 selected

• Display

  • NEXT link

    • On click display Secret Questions Answer Page

  • Skip link

    • On click display Secret Questions Skip Confirm Page

  • X link

    • On click display Secret Questions Skip Confirm Page

• List of questions - as provided by EDGE API

Secret Questions Skip Confirm

• Display

  • SKIP ANYWAY link

    • On click show Home Page Authenticated Page with Secret Questions Skipped Warning

  • X link

    • On click show Home Page Authenticated Page with Secret Questions Skipped Warning

Secret Questions Answer

• Collect

  • Secret Question 1 Answer

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Secret Question 2 Answer

    • X appears when first character is entered

      • When licked it clears the content and disappears

• Validate

  • Secret Question 1 Answer

    • Validate onfocusout

      • On validation error

        • Turn border for Secret Question 1 Answer red

        • Display error message:

          • Please enter at least 3 characters

      • Validation rules

        • Min 3 characters

  • Secret Question 2 Answer

    • Validate onfocusout

      • On validation error

        • Turn border for Secret Question 2 Answer red

        • Display error message:

          • Please enter at least 3 characters

      • Validation rules

        • Min 3 characters

• Display

  • NEXT link

    • On click record secret questions as defined in “A Single-Sign-On Security Platform for Private and Decentralized Applications” and answers and display Home Page Authenticated Page with Account Created Notice

  • Skip link

    • On click show Secret Questions Skip Confirm Page

  • X link

    • On click show Secret Questions Skip Confirm Page

Secret Question and Answers Saved

• Display

  • Link

    • Close or X

      • On click

        • Display Home Page Authenticated Page

Home Page Authenticated Page with Account Created Notice

• This notice is shown only once, when the user is lands on the Home Page directly after registration.

Home Page Authenticated Page with Secret Questions Skipped Warning

• Copy

  • Password Recovery - You have skipped setting up password recovery. Please make sure to complete this so you do not lose access.

• This notice is shown continuously on the Home Page until on of the 2 things happen:

  • User sets up Password Recovery

  • User clicks X

Sign-in

• Collect

  • Email Address

    • X appears when first character is entered

      • When licked it clears the content and disappears

  • Password

    • By default password is displayed as •••••••

    • When 👁 clicked show Password

    • X appears when first character is entered

      • When licked it clears the content and disappears

• Validate

  • Email Address

    • Validate onfocusout

    • On validation error

      • Turn border for Email red

      • Display error message:

        • Invalid Email Address

    • Validation rules

      • Must be a valid email address format

  • Log-in

    • Validate on Sign In click

    • On validation error

      • Turn border for Email and Password red

      • Display error message:

        • Invalid Email Address or Password

    • Validation rules

      • Email/Password match

• Display

  • Links

    • Sign-in with Opera

      • Display only if user is on Opera on Android and window.fio is available

      • On click Authenticate with Opera

    • Sign-in with Metamask

      • Display only if user has Metamask installed

      • On click Authenticate with Metamask

      • “Want more info…” link

        • On click display overlay.

    • Sign in with Metamask

    • Email/Password Sign In

      • On click display Home Page Authenticated Page

    • Forgot Password

      • On click display Forgot Password Page

    • Create Account

      • On click display Create Account → Email & Password Page

Forgot Password

• Display

  • Ok link

    • On click display Sign-in Page

  • X link

    • On click display Sign-in Page

Sign-in with PIN

• This page is displayed by default if user has been logged automatically due to inactivity and clicks Sign-in or tries to access a page which requires log-in.

• It is not shown when user logs out by clicking Sign-out button.

• Collect

  • PIN

Sign using password

Sign using PIN

Sign-in blocked by New Device Approval

• This page is displayed when a user log-in is blocked by a New Device Approval. See https://fioprotocol.atlassian.net/wiki/spaces/DAO/pages/151879691 for details.

• Collect

  • Back-up code

    • On complete entry validate and if correct add device IP and display Sign-in page

Approve New Device Sign-in

• This page is displayed on the known device when New Device Approval is enabled. It takes over a screen once user logs in or transitions to another page while signed in.

• Display

  • Links

    • It was me…

      • On click

        • Add new device IP to New Device Approval list

    • Not me… or X

      • On click

        • Do not show this request anymore

Landing

• This page is displayed when link in Password Recovery email link is clicked

• Display

  • Secret questions

  • Confirm

    • On click

      • Change password and redirect to Sign-in Page

  • Cance

    • On click

      • Display Home Page

• Collect

  • Secret Answers

  • New password (not yet on UX)

• Validate

  • Secret Answers

    • On Confirm click

      • On validation error

        • Turn border red

        • Display error message:

          • Invalid Answer

  • New Password

    • Validate onfocusout

      • On validation error

        • Turn border red

        • Display error message:

          • Invalid Password