User Interface

Pages

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

Landing

Really simple and straightforward landing page view.

Sign Up Page

User Inputs

We decided to opt out of putting a confirm password input box.

• E-mail input
• Username input
• Password input

User Interactions

Login Button

Takes user to Login page.

Signup Button

Trigger validations on backend

• Username validations
  • Must have valid characters (alpha numberic characters only)
  • must be >= 1 character
  • Must not exist in the DB
• Email validation -> TODO: delete unconfirmed accounts.
  • Must be a valid email
  • Must not exist in the DB
• Password validation
  • greater than 8 characters If validation succeeds, takes the user to the Confirm Email Page.

/ - Root page

Checks the login status, displays 2 options

1. (LoggedIn) Shows Database Page

• Login Button

1. Renders login page

• Sign Up Button

1. Renders sign up page

Login Page

• Username Input

• Password Input

• Submit Button

1. Checks if e-mail confirmed
2. If e-mail is not confirmed, send them e-mail confirmation, render confirmation e-mail page.
3. If e-mail is confirmed, send user to database setup page.
4. If e-mail is confirmed and database password set, send user to databases page.

• Sign Up Button

1. renders sign up page

• Password Input

  Validation

1. Once all three inputs are populated, send a request to validation endpoint to make sure inputs meet the requirements and we have no duplicates and display prompt of either passing or failing.
2. A debounce function will determine when a user stops typing and a request will be sent at that point.

• Submit Button

1. Sends a post request with inputs email, username, password to the signup endpoint and creates user.
2. Sends user confirmation e-mail.
3. Renders e-mail confirmation page.

E-mail Confirmation Page

• Resend Button

1. Sends a post request to confirm endpoint to check if email is confirmed

Confirmation Email

• Confirm Email button

1. Will send the user to the database setup page

Databases

• Displays list of existing databases
• Displays selection box to create new Databases
• Displays list of databases with new database created.

1. Select Database, click create button to create new database.
2. Display new databases at the bottom of the database list.

• Logout Button

1. Sends a get request to logout endpoint
2. renders login page

Database Setup

• input password

1. The password is set and used to gain access to the databases page, where one can create new databases

• Set Button

1. Sends a request to database setup endpoint
2. Renders Databases page