New Device Approval

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

Image Removed

Image Added

Collect
- Email Address
  - X appears when first character is entered
    - When licked it clears the content and disappears
- Email Address Confirm
  - 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
  - Validate onfocusout
    - On validation error
      - Turn border red
      - Display error message:
        Invalid Email Address
        This Email Address is already registered, Sign-in instead
  - Validation rules
    - Must be a valid email address format
    - Must be not yet registered
- Email Address Confirm
  - Validate onkeyup
    - Display ✅ when validation rules satisfied
  - Validate onfocusout
    - On validation error
      - Turn border for Email Address and Email Address Confirm red
      - Display error message:
        Email Addresses do not match
  - 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

display PIN Code Page

- - - Create Account
    - Display Account Create Confirmation
- Log-in link
  - On click display Log-in Page

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

Image Added

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

Image Removed

- - Page

Flow variance

Zenuml graph macro lite

uuid	31edaf6d-e8dc-4e97-a445-d955319b3077
customContentId	613711877
updatedAt	2023-01-31T21:29:46Z

PIN Code

Image Added

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

Back link

- Skip
  - On click

display Email & Password

- - - Display PIN Skip Page

PIN Code Confirm

Image Removed

Image Added

Image Modified

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

Account Confirm

- Skip

Image Removed

- - On click
    - Display

on Show Account Information click

Email Address
Password
PIN

Display

CREATE ACCOUNT link
- On click display Account Creation Confirmation Page and create account

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:
- Confirm email
- Account Created
If promo email opt-in is checked add user to Marketing list

Account Create Confirmation

Image Removed

Reload to Home Page Authenticated after 3 seconds or after account is created whichever is last.
Force Verify Email Blocker Page after this step

Secret Questions

Image Removed

PIN Skip Confirm Page
PIN Skip Confirm Image Added	Display X Display PIN Code Page Skip On click Display Secret Questions Page
Secret Questions Image Added	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

Image Removed

Image Added

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

Image Modified

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

Record

Secret

Questions

Question and Answers

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

Saved

Image Added

Display
- Link
  - Close or X
    - On click
      - Display Home Page Authenticated Page

Home Page Authenticated Page with Account Created Notice

Image Modified

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

Image Removed

Image Added

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

Visual	Functionality
Sign-in

Image Removed

Image Added

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 link

- - -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

link

- - - On click display Forgot Password Page
  - Create Account

link

On click display Create Account → Email & Password Page
Forgot Password Image Modified	Display Ok link On click display Sign-in Page X link On click display Sign-in Page
Sign-in with PIN Image Modified	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

Initial account creation

Image Removed

This page is displayed after user creates a new account and it cannot removed (do not show the X)
If users logs-in again and email has not been verified, show this page
Display
- Links
  - Send Again
    - On click
      - Re-sends Verification Email

Email change

Image Removed

This page is displayed after changes email and it cannot removed
If users logs-in again and email has not been verified, show this page
Display
- Links
  - Revert to Original
    - On click
      - Cancel the email change and revert to the original email and display Settings Main Page

...

Sign using password

Image Added

Sign using PIN

Image Added

New Device Approval

Visual	Functionality
Sign-in blocked by

2FA

Image Removed

New Device Approval

Image Added

This page is displayed when a user log-in is blocked by a

2FA

New Device Approval. See /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

2FA

New Device Sign-in

Image Removed

Image Added

This page is displayed on the known device when

2FA

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

2FA

- - - - New Device Approval list
  - Not me… or X
    - On click
      - Do not show this request anymore

Password Recovery

Visual

Functionality

Landing

Image Modified

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

Page Comparison

Versions Compared

Old Version 13

New Version Current

Key

Table of Contents

UX

Click model

UX Assets

Mobile views

Create Account

Email & Password

Create account

Account Create Confirmation

Flow variance

PIN Code

PIN Code Confirm

Create account

Account Create Confirmation

Secret Questions

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

Image Added

Sign-in

Sign-in

Forgot Password

Sign-in with PIN

Sign Transaction

Initial account creation

Email change

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