Register

[hannahhall]

User Story

As a potential user I would like to be able to create an account in the system so that I may use it's features.

AC

Given a potential user wants to create an account in the system
When they select the Register option from the menu
Then they should be directed to a form where they are prompted to enter their User Profile information

Given a potential user has entered their User Profile information
when they click the Register button
Then a new User Profile should be created in the database
And the User Profile should have a user type of Author
And the User Profile's creation datetime should be set to the current date end time
And the user should be directed to the homepage

The User Profile information is:

• First name
• Last name
• Display name
• Email

Dev Notes

• create register form

  <form className="form--login" onSubmit={handleRegister}>
              <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
              <fieldset>
                  <label htmlFor="firstName"> First Name </label>
                  <input ref={firstName} type="text" name="firstName" className="form-control" placeholder="First name" required autoFocus />
              </fieldset>
              <fieldset>
                  <label htmlFor="lastName"> Last Name </label>
                  <input ref={lastName} type="text" name="lastName" className="form-control" placeholder="Last name" required />
              </fieldset>
              <fieldset>
                  <label htmlFor="inputEmail"> Email address </label>
                  <input ref={email} type="email" name="email" className="form-control" placeholder="Email address" required />
              </fieldset>
              <fieldset>
                  <label htmlFor="inputPassword"> Password </label>
                  <input ref={password} type="password" name="password" className="form-control" placeholder="Password" required />
              </fieldset>
              <fieldset>
                  <label htmlFor="verifyPassword"> Verify Password </label>
                  <input ref={verifyPassword} type="password" name="verifyPassword" className="form-control" placeholder="Verify password" required />
              </fieldset>
              <fieldset>
                  <label htmlFor="verifyPassword"> Verify Password </label>
                  <textarea ref={bio} name="bio" className="form-control" placeholder="Let other gamers know a little bit about you..." />
              </fieldset>
              <fieldset style={{
                  textAlign: "center"
              }}>
                  <button className="btn btn-1 btn-sep icon-send" type="submit">Register</button>
              </fieldset>
          </form> 

• create a function that creates a new user and sends it to the database

  export const Register = (props) => {
  const firstName = useRef()
  const lastName = useRef()
  const email = useRef()
  const bio = useRef()
  const password = useRef()
  const verifyPassword = useRef()
  const passwordDialog = useRef()
  
  const handleRegister = (e) => {
      e.preventDefault()
  
      if (password.current.value === verifyPassword.current.value) {
          const newUser = {
              "username": email.current.value,
              "first_name": firstName.current.value,
              "last_name": lastName.current.value,
              "bio": bio.current.value,
              "email": email.current.value,
              "password": password.current.value
          }
  
          return fetch("http://127.0.0.1:8088/register", {
              method: "POST",
              headers: {
                  "Content-Type": "application/json",
                  "Accept": "application/json"
              },
              body: JSON.stringify(newUser)
          })
              .then(res => res.json())
              .then(res => {
                  if ("valid" in res && res.valid) {
                      localStorage.setItem("rare_user_id", res.token)
                      props.history.push("/")
                  }
              })
      } else {
          passwordDialog.current.showModal()
      }
  }

[MarkyAaronYoung]

2 point