Update Front end registration page to match API

frontend/compositions/profile-edit/index.tsx

@@ -25,10 +25,10 @@ export default function EditProfileInfo({ cancelEditMode }: EditProfileProps) {
     setLoading(true)
     setSubmitError(null)
     const values = {
-      firstName: formValues[FIRST_NAME],
-      lastName: formValues[LAST_NAME],
+      firstname: formValues[FIRST_NAME],
+      lastname: formValues[LAST_NAME],
       emailAddress: formValues[EMAIL_ADDRESS],
-      phoneNumber: formValues[PHONE_NUMBER],
+      phone_number: formValues[PHONE_NUMBER],
       createPw: formValues[CREATE_PASSWORD],
       confirmPw: formValues[CONFIRM_PASSWORD]
     }

frontend/helpers/api/api.ts

@@ -7,17 +7,17 @@ export interface User {
   role: string
   email: string
   emailConfirmedAt?: string
-  firstName?: string
-  lastName?: string
-  phoneNumber?: string
+  firstname?: string
+  lastname?: string
+  phone_number?: string
 }
 
 export interface NewUser {
   email: string
   password: string
-  firstName?: string
-  lastName?: string
-  phoneNumber?: string
+  firstname?: string
+  lastname?: string
+  phone_number?: string
 }
 
 export interface LoginCredentials {
@@ -168,9 +168,9 @@ export function whoami({ accessToken }: WhoamiRequest): Promise<User> {
     active,
     email,
     emailConfirmedAt: email_confirmed_at,
-    firstName: first_name,
-    lastName: last_name,
-    phoneNumber: phone_number,
+    firstname: first_name,
+    lastname: last_name,
+    phone_number: phone_number,
     role: role
   }))
 }

frontend/helpers/api/auth/auth.ts

@@ -53,9 +53,9 @@ export function whoami({ accessToken }: WhoamiRequest): Promise<User> {
     active,
     email,
     emailConfirmedAt: email_confirmed_at,
-    firstName: first_name,
-    lastName: last_name,
-    phoneNumber: phone_number,
+    firstname: first_name,
+    lastname: last_name,
+    phone_number: phone_number,
     role: role
   }))
 }

frontend/helpers/api/auth/types.ts

@@ -5,17 +5,17 @@ export interface User {
   role: string
   email: string
   emailConfirmedAt?: string
-  firstName?: string
-  lastName?: string
-  phoneNumber?: string
+  firstname?: string
+  lastname?: string
+  phone_number?: string
 }
 
 export interface NewUser {
   email: string
   password: string
-  firstName?: string
-  lastName?: string
-  phoneNumber?: string
+  firstname?: string
+  lastname?: string
+  phone_number?: string
 }
 
 export interface LoginCredentials {

frontend/helpers/api/mocks/data.ts

@@ -8,9 +8,9 @@ export const EXISTING_TEST_USER: TestUser = {
   emailConfirmedAt: null,
   email: "[email protected]",
   password: "password",
-  firstName: "Test",
-  lastName: "Example",
-  phoneNumber: "(123) 456-7890",
+  firstname: "Test",
+  lastname: "Example",
+  phone_number: "(123) 456-7890",
   role: "Public"
 }
 

frontend/helpers/api/mocks/handlers.ts

@@ -71,9 +71,9 @@ export const handlers = [
         active: user.active,
         email: user.email,
         email_confirmed_at: user.emailConfirmedAt,
-        first_name: user.firstName,
-        last_name: user.lastName,
-        phone_number: user.phoneNumber,
+        first_name: user.firstname,
+        last_name: user.lastname,
+        phone_number: user.phone_number,
         role: user.role
       })
     )

frontend/models/primary-input.tsx

@@ -7,18 +7,18 @@ export enum PrimaryInputNames {
   DATE_END = "dateEnd",
   DATE_START = "dateStart",
   EMAIL_ADDRESS = "emailAddress",
-  FIRST_NAME = "firstName",
+  FIRST_NAME = "First Name",
   INCIDENT_TYPE = "incidentType",
   DESCRIPTION = "description",
   KEY_WORDS = "keyWords",
-  LAST_NAME = "lastName",
+  LAST_NAME = "Last Name",
   LOCATION = "location",
   LOGIN_PASSWORD = "loginPassword",
   OFFICER_NAME = "officerName",
   PARTNER_NAME = "partnerName",
   PARTNER_URL = "partnerUrl",
   PARTNER_EMAIL = "partnerEmail",
-  PHONE_NUMBER = "phoneNumber",
+  PHONE_NUMBER = "Phone Number",
   STREET_ADDRESS = "streetAddress",
   ZIP_CODE = "zipCode"
 }

frontend/models/profile.tsx

@@ -43,63 +43,63 @@ export enum UserRoles {
 // User Information
 export interface UserDataType {
   active: boolean
-  firstName: string
-  lastName: string
+  firstname: string
+  lastname: string
   email: string
   phone: string
   role: UserRoles
 }
 
 export const emptyUser: UserDataType = {
   active: false,
-  firstName: "",
-  lastName: "",
+  firstname: "",
+  lastname: "",
   email: "",
   phone: "",
   role: 0
 }
 
 export const publicUser = (user: User): UserDataType => ({
-  firstName: user.firstName || "",
-  lastName: user.lastName || "",
+  firstname: user.firstname || "",
+  lastname: user.lastname || "",
   email: user.email,
-  phone: user.phoneNumber,
+  phone: user.phone_number,
   active: user.active,
   role: UserRoles.PUBLIC
 })
 
 export const passportUser = (user: User): UserDataType => ({
-  firstName: user.firstName || "",
-  lastName: user.lastName || "",
+  firstname: user.firstname || "",
+  lastname: user.lastname || "",
   email: user.email,
-  phone: user.phoneNumber,
+  phone: user.phone_number,
   active: user.active,
   role: UserRoles.PASSPORT
 })
 
 export const contributorUser = (user: User): UserDataType => ({
-  firstName: user.firstName || "",
-  lastName: user.lastName || "",
+  firstname: user.firstname || "",
+  lastname: user.lastname || "",
   email: user.email,
-  phone: user.phoneNumber,
+  phone: user.phone_number,
   active: user.active,
   role: UserRoles.CONTRIBUTOR
 })
 
 export const adminUser = (user: User): UserDataType => ({
-  firstName: user.firstName || "",
-  lastName: user.lastName || "",
+  firstname: user.firstname || "",
+  lastname: user.lastname || "",
   email: user.email,
-  phone: user.phoneNumber,
+  phone: user.phone_number,
   active: user.active,
   role: UserRoles.ADMIN
 })
 
 export const someUser = (user: User, role: UserRoles): UserDataType => ({
-  firstName: user.firstName || "",
-  lastName: user.lastName || "",
+  firstname: user.firstname || "",
+  lastname: user.lastname || "",
   email: user.email,
-  phone: user.phoneNumber,
+  phone: user.phone_number,
   active: user.active,
   role: role
 })

frontend/pages/register/index.tsx

@@ -35,11 +35,11 @@ export default function ViewerRegistration() {
     setSubmitError(null)
     try {
       await register({
-        firstName: formValues[FIRST_NAME],
-        lastName: formValues[LAST_NAME],
+        firstname: formValues[FIRST_NAME],
+        lastname: formValues[LAST_NAME],
         email: formValues[EMAIL_ADDRESS],
         password: formValues[CREATE_PASSWORD],
-        phoneNumber: formValues[PHONE_NUMBER]
+        phone_number: formValues[PHONE_NUMBER]
       })
     } catch (e) {
       if (existingAccount(e)) {
@@ -54,8 +54,8 @@ export default function ViewerRegistration() {
 
   function existingAccount(e?: AxiosError) {
     return (
-      e.response?.status === 400 &&
-      e.response?.data?.message?.match(/email matches existing account/i)
+      e.response?.status === 409 &&
+      e.response?.data?.message?.match(/Email matches existing account/i)
     )
   }
 

frontend/tests/helpers/api.test.ts

@@ -25,9 +25,9 @@ describe("api", () => {
         active: true,
         email: "[email protected]",
         emailConfirmedAt: null,
-        firstName: "Test",
-        lastName: "Example",
-        phoneNumber: "(123) 456-7890",
+        firstname: "Test",
+        lastname: "Example",
+        phone_number: "(123) 456-7890",
         role: "Public"
       })
     })
@@ -43,27 +43,27 @@ describe("api", () => {
       const newUser: api.NewUser = {
         email: uniqueEmail(),
         password: "password",
-        firstName: "June",
-        lastName: "Grey",
-        phoneNumber: "(555) 555-5555"
+        firstname: "June",
+        lastname: "Grey",
+        phone_number: "(555) 555-5555"
       }
 
       const accessToken = await api.register(newUser)
       expect(accessToken).toBeTruthy()
       const user = await api.whoami({ accessToken })
 
       expect(user.email).toEqual(newUser.email)
-      expect(user.firstName).toEqual(newUser.firstName)
-      expect(user.lastName).toEqual(newUser.lastName)
-      expect(user.phoneNumber).toEqual(newUser.phoneNumber)
+      expect(user.firstname).toEqual(newUser.firstname)
+      expect(user.lastname).toEqual(newUser.lastname)
+      expect(user.phone_number).toEqual(newUser.phone_number)
     })
 
     it("rejects existing accounts", async () => {
       const newUser: api.NewUser = {
         email: EXISTING_TEST_USER.email,
         password: "password",
-        firstName: "June",
-        lastName: "Grey"
+        firstname: "June",
+        lastname: "Grey"
       }
 
       let error = await api.register(newUser).catch((e) => e)

frontend/tests/snapshots/register.test.tsx

@@ -18,9 +18,9 @@ describe("behaviors", () => {
       email: getByRole("textbox", { name: /email address/i }),
       createPassword: getByLabelText(/create password/i),
       confirmPassword: getByLabelText(/confirm password/i),
-      firstName: getByRole("textbox", { name: /first name/i }),
-      lastName: getByRole("textbox", { name: /last name/i }),
-      phoneNumber: getByRole("textbox", { name: /phone number/i }),
+      firstname: getByRole("textbox", { name: /first name/i }),
+      lastname: getByRole("textbox", { name: /last name/i }),
+      phone_number: getByRole("textbox", { name: /phone number/i }),
       submit: getByRole("button", { name: /submit/i })
     }
   }
@@ -38,9 +38,9 @@ describe("behaviors", () => {
       "email",
       "createPassword",
       "confirmPassword",
-      "firstName",
-      "lastName",
-      "phoneNumber"
+      "firstname",
+      "lastname",
+      "phone_number"
     ]) {
       expect(elements[k].getAttribute("aria-invalid")).toBeTruthy()
     }
@@ -49,7 +49,7 @@ describe("behaviors", () => {
   it("checks phone number length", async () => {
     const r = renderPage()
     act(() => {
-      userEvent.type(r.phoneNumber, "5555555555555")
+      userEvent.type(r.phone_number, "5555555555555")
       userEvent.click(r.submit)
     })
     await expect(r.findByText(/phone number is required/)).resolves.toBeInTheDocument()
@@ -79,10 +79,10 @@ describe("behaviors", () => {
   it("requires matching passwords", async () => {
     const r = renderPage()
     act(() => {
-      userEvent.type(r.firstName, "Spencer")
-      userEvent.type(r.lastName, "Bool")
+      userEvent.type(r.firstname, "Spencer")
+      userEvent.type(r.lastname, "Bool")
       userEvent.type(r.email, "[email protected]")
-      userEvent.type(r.phoneNumber, "555 555 5555")
+      userEvent.type(r.phone_number, "555 555 5555")
       userEvent.type(r.createPassword, "aA1!asdfasdf")
       userEvent.type(r.confirmPassword, "mistmatch")
       userEvent.click(r.submit)
@@ -93,10 +93,10 @@ describe("behaviors", () => {
   it("should create a new user", async () => {
     const r = renderPage()
     act(() => {
-      userEvent.type(r.firstName, "Spencer")
-      userEvent.type(r.lastName, "Bool")
+      userEvent.type(r.firstname, "Spencer")
+      userEvent.type(r.lastname, "Bool")
       userEvent.type(r.email, uniqueEmail())
-      userEvent.type(r.phoneNumber, "555 555 5555")
+      userEvent.type(r.phone_number, "555 555 5555")
       userEvent.type(r.createPassword, "aA1!asdfasdf")
       userEvent.type(r.confirmPassword, "aA1!asdfasdf")
 
@@ -108,10 +108,10 @@ describe("behaviors", () => {
   it("should reject existing accounts", async () => {
     const r = renderPage()
     act(() => {
-      userEvent.type(r.firstName, "Spencer")
-      userEvent.type(r.lastName, "Bool")
+      userEvent.type(r.firstname, "Spencer")
+      userEvent.type(r.lastname, "Bool")
       userEvent.type(r.email, "[email protected]")
-      userEvent.type(r.phoneNumber, "555 555 5555")
+      userEvent.type(r.phone_number, "555 555 5555")
       userEvent.type(r.createPassword, "aA1!asdfasdf")
       userEvent.type(r.confirmPassword, "aA1!asdfasdf")