feat: DAH-2565 Create Account Errors

[chadbrokaw]

Description

This change introduces error handling to the Create Account page and also improves how we handle errors across the create account and account settings pages.

Jira ticket

DAH-2565

Checklist before requesting review

Version Control

• branch name begins with angular if it contains updates to Angular code
• branch name contains the Jira ticket number
• PR name follows type: TICKET-NUMBER Description format, e.g. feat: DAH-123 New Feature

Code quality

• the set of changes is small
• if the set of changes cannot be small, reviewers have been forewarned
• code meets test coverage thresholds
• code is properly formatted
• code is linted
• code irrelevant to the ticket is not modified e.g. changing indentation due to automated formatting
• automated tests pass
• if the code changes the UI, it matches the UI design exactly

Review instructions

• instructions specify which environment(s) it applies to
• instructions have already been performed at least once
• instructions can be followed by PA testers
• instructions specify if it can only be followed by an engineer

Request review

• PR has needs review label
• Use Housing Eng group to automatically assign reviewers, and/or assign specific engineers
• If time sensitive, notify engineers in Slack

[tallulahkay]

I feel like the complexity is coming from a lot of duplicated logic, so the logic can instead be reused for each error type

As just an example, could instead be something like:

export const handleNameServerErrors = (
  key: string,
  error: AxiosError<{
    errors: {
      email: string[]
      password: string[]
      DOB: string[]
      full_messages: string[]
      firstName: string[]
      lastName: string[]
    }
  }>
) => {
  if (error?.response?.status === 422 && error?.response?.data?.errors?.full_messages.length > 0) {
    if (error?.response?.data?.errors?.[key]) {
      // In the case that the name contains invalid characters (http, www, .), we will show the generic server error
      return error.response.data?.errors?.full_messages.includes("is empty")
        ? { message: `name:${key}`, shouldFocus: true }
        : { message: "name:server:generic", shouldFocus: true }
    }

    return { message: "name:server:generic", shouldFocus: true }
  }
}

and then in account-settings.tsx

    if (error.response?.data?.errors?.firstName) {
      setError("firstName", handleNameServerErrors("firstName", error))
    } else if (error.response?.data?.errors?.lastName) {
      setError("lastName", handleNameServerErrors("lastName", error))
    }

[chadbrokaw]

@tallulahkay Thank you for that suggestion! I pushed an update to the handleNameServerErrors function. I pretty much used your solution but I kept setError within the function

[tallulahkay]

same here

[tallulahkay]

Thanks for making those updates! Works well