Breaking Down "Registering User Account" Feature

[hannahmneal]

#2

Story

As a user, I should be able to fill out a form with my email address, and the username of my choice to register myself in the application

Acceptance Criteria

Given a user wants to use Nutshell
When the user first accesses the application
Then the user should see a welcome message

Given a user wants to register an account with Nutshell
When the user clicks the Register a new account hyperlink
Then a registration form should be displayed where the user can enter in an email address and a username
Given a user has filled out both fields of the registration form
When the user clicks the Register button
Then the system should check if the username is unique
And it should check if the email address is unique
And if both are unique, a new account should be created
And the user should be taken to the main view of Nutshell

• The registration screen is visible upon loading the browser (the user cannot see the landing page until logging in or registering).
• Create an alert/welcome div on the page that contains a welcome message (e.g., "Welcome to Sunset App!") and a registration button (eg., register-new-user button).
• Create the registration form (e.g., newUserForm). For MVP, this form should contain email address and username (see next section). It should also contain a submit button (submit-new-user button).
• eventListener / eventHandler: Add a hyperlink to the newUserForm on the register-new-user button (ultimately, when the register-new-user button is clicked the registration form will appear; Initially, however, just create a div that contains the header: "New User Form" and practice linking this div to the register-new-user button through a series of console.logs to test functionality and linkage).
• If/&& if / else: check that both username AND password are unique (ping the db.json). If both are unique, proceed to newUserForm
• if they are not unique, decide what to do (alert box that says, "Try registering as someone else"?)
• After newUserForm is filled out and "submit" button is clicked, eventListener (submit-new-user) is heard and eventHandler (handle-submit-new-user-form) is called. This function initiates the process of POSTING the new user to db.json and taking the new user to their Landing Page.