Skip to content

User Interface

Song Zheng edited this page May 28, 2020 · 58 revisions

Mockup_UI_edited_3_4

Pages

  • Forget password feature is unplanned. During development, please don't forget your credentials!

Landing

Really simple and straightforward landing page view.

  • Signup button -> Takes user to signup page
  • Login button -> Takes user to login page

Sign Up

Decisions

  • Keeping it simple, validation is only done once when users submit. May upgrade to input validations as users type later.
  • We decided to opt out of putting a confirm password input box.
  • Validations done on the signup route.
  • TODO: delete unconfirmed accounts.

User Interactions

  • E-mail input
  • Username input
  • Password input
  • Login Button - Takes user to Login page.
  • Signup Button - Sends a POST request to server which responds with:
    • Error - Display the errors on signup page
    • Success - takes the user to the Confirm Email Page.

Validations

  • Username validations
    • Must have valid characters (alpha numberic characters only)
    • must be >= 1 character
    • Must not exist in the DB
  • Email validation
    • Must be a valid email
    • Must not exist in the DB
  • Password validation
    • greater than 8 characters

Confirm Email

Renders a reminder for users to confirm their email.

User Interactions

  • Logout
  • Resend Email - Results in Your email has been sent message.

(External Page) Email Confirmation

Update - Replaced by reset password

  • Button / link for users to confirm their email.

Database Setup

A place for user to specify the database password they want to setup their database password. This password is not encrypted because our system needs to know about it in order to create the database.

Tradeoffs

  • V1 - Will not be providing an option to allow users to change their database password.

User Interactions

  • Logout
  • Input password - Greater than 8 characters
  • Submit - Takes users to Database Page

Login

Page for user to login.

User Interaction

  • Email Input
  • Password Input
  • Signup button - Takes the user to signup page.
  • Login Button - sends a POST request to server which responds with:
    • Error - Display the errors on login page
    • Success - Look at login validations below.

Login Validations

  1. If e-mail is not confirmed, render confirm e-mail page.
  2. If database password has not been set, send user to database setup page.
  3. Send user to database page.

Databases

  • Displays list of database cards
    • If database has been created, show credentials button
    • Show Create Database button.
  • Logout Button - Sends a get request to logout endpoint
Clone this wiki locally