Merge pull request #273 from rosyntow/bugfix-#272

modified the phone number regex to accept more valid formats during signup

Author: mikeyavorsky

frontend/models/primary-input.tsx

@@ -22,6 +22,7 @@ export enum PrimaryInputNames {
 const passwordRgx: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s]).{8,}$/
 const nameRgx: RegExp = new RegExp("^[' -]*[a-z]+[a-z' -]+$", "i")
 const anyString: RegExp = new RegExp("[sS]*")
+const phoneNumberRgx: RegExp = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/
 
 export const primaryInputValidation = {
   [PrimaryInputNames.BADGE_NUMBER]: {
@@ -81,8 +82,8 @@ export const primaryInputValidation = {
     inputType: "text"
   },
   [PrimaryInputNames.PHONE_NUMBER]: {
-    errorMessage: 'A phone number is required, formatted as "123 456 7890"',
-    pattern: /\d{3} \d{3} \d{4}/,
+    errorMessage: "A valid phone number is required",
+    pattern: phoneNumberRgx,
     inputType: "tel"
   },
   [PrimaryInputNames.LOGIN_PASSWORD]: {

frontend/tests/snapshots/register.test.tsx

@@ -46,10 +46,10 @@ describe("behaviors", () => {
     }
   })
 
-  it("checks phone formatting", async () => {
+  it("checks phone number length", async () => {
     const r = renderPage()
     act(() => {
-      userEvent.type(r.phoneNumber, "5555555555")
+      userEvent.type(r.phoneNumber, "5555555555555")
       userEvent.click(r.submit)
     })
     await expect(r.findByText(/phone number is required/)).resolves.toBeInTheDocument()