1 Table of Contents
2 UX
- 2.1 Click model
- 2.2 UX Assets
  - 2.2.1 Mobile views
3 Create Account
- 3.1 Email & Password
- 3.2 Email Confirmation
  - 3.2.1 Email Body
  - 3.2.2 Confirmation Page
- 3.3 Create account
- 3.4 Account Create Confirmation
- 3.5 Flow variance
- 3.6 PIN Code
- 3.7 PIN Code Confirm
- 3.8 PIN Skip Confirm
- 3.9 Secret Questions
- 3.10 Secret Questions Skip Confirm
- 3.11 Secret Questions Answer
- 3.12 Secret Question and Answers Saved
- 3.13 Home Page Authenticated Page with Account Created Notice
- 3.14 Home Page Authenticated Page with Secret Questions Skipped Warning
4 Sign-in
- 4.1 Sign-in
- 4.2 Forgot Password
- 4.3 Sign-in with PIN
5 Sign Transaction
- 5.1 Sign using password
- 5.2 Sign using PIN
6 New Device Approval
- 6.1 Sign-in blocked by New Device Approval
- 6.2 Approve New Device Sign-in
7 Password Recovery
- 7.1 Landing
8 Partial registration recovery

UX

Click model

UX Assets

https://www.figma.com/file/IupeqfBPpD8SLWGmqI2sXr/New-Dashboard-Authentication?type=design&node-id=0-1&mode=design&t=0CIehCzliCpV6yQi-0

https://gpworrell428458.invisionapp.com/console/share/GN28XA643A

Mobile views

https://gpworrell428458.invisionapp.com/overview/FIO---Account-Creation---Mobile-Views---April-12th--2021-cknewdhnf00kf0115be92b111/screens

Create Account

Visual	Functionality

Visual	Functionality
Email & Password	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

Visual	Functionality

Visual

Functionality

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 Transaction

Visual	Functionality

Visual

Functionality

Sign using password

Sign using PIN

New Device Approval

Visual	Functionality

Visual

Functionality

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

Password Recovery

Visual	Functionality

Visual

Functionality

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

Partial registration recovery

This functionality attempts to recover a mismatch of registrations between EDGE and Dashboard.

User is signing in
1. No user in Dashboard
  1. If user exists in EDGE and pass match
    1. Automatically create user in Dashboard and log them in
  2. If user exists in EDGE and pass does not match
    1. Display invalid password
2. User in Dashboard, but not in EDGE
  1. Create user in EDGE with supplied pass
User creates account
1. No user in Dashboard
  1. User exists in EDGE and pass match
    1. “adopt” the user and continue registration
2. User in dashboard
  1. No user in EDGE
    1. Create user in EDGE and continue registration

Contributors DAO

Account

Table of Contents

UX

Click model

UX Assets

Mobile views

Create Account

Email & Password

Email Confirmation

Email Body

Confirmation Page

Create account

Account Create Confirmation

Flow variance

PIN Code

PIN Code Confirm

PIN Skip Confirm

Secret Questions

Secret Questions Skip Confirm

Secret Questions Answer

Secret Question and Answers Saved

Home Page Authenticated Page with Account Created Notice

Home Page Authenticated Page with Secret Questions Skipped Warning

Sign-in

Sign-in

Forgot Password

Sign-in with PIN

Sign Transaction

Sign using password

Sign using PIN

New Device Approval

Sign-in blocked by New Device Approval

Approve New Device Sign-in

Password Recovery

Landing

Partial registration recovery

Related content