From ab475f1a92ff70f70959476a5af6f18d5b7d285e Mon Sep 17 00:00:00 2001
From: Edward Runkel <eddierunkel@gmail.com>
Date: Tue, 28 Nov 2023 22:46:55 -0500
Subject: [PATCH] LBGG-564: Account confirmation (#580)

* Update version requirements in `package`

* Update API library

* Create `useConfirmAccount` composable

* Create `BasicAlert` component, and add it to the default layout

* Create `Loader` component

* Create `/confirm-account` route

* Fix rendering error messages on signup

* Actually fix rendering errors on signup failure

* Fix confrimation aborting, when no code or from path mismatch

* Switch composable definitions to use function declarations over function expressions

* Pin the latest `pnpm` version
---
 assets/sprite/svg/circle-check.svg            |   1 +
 assets/sprite/svg/circle-exclamation.svg      |   1 +
 assets/sprite/svg/circle-info.svg             |   1 +
 assets/sprite/svg/spinner.svg                 |   1 +
 assets/sprite/svg/triangle-exclamation.svg    |   1 +
 components.d.ts                               |   5 +
 components/blocks/Loader/Loader.vue           |  31 ++++++
 .../cards/BasicAlert/BasicAlert.test.ts       |  60 +++++++++++
 .../blocks/cards/BasicAlert/BasicAlert.vue    |  99 +++++++++++++++++
 .../blocks/cards/SignUpCard/SignUpCard.vue    |  11 +-
 composables/api/index.ts                      |   1 +
 composables/api/useConfirmAccount/index.ts    |  20 ++++
 .../useConfirmAccount.test.ts                 |  24 +++++
 .../api/useGetLeaderboardDetail/index.ts      |   4 +-
 composables/api/useGetUserDetail/index.ts     |   4 +-
 composables/api/useLoginUser/index.ts         |   4 +-
 composables/api/useLogoutUser/index.ts        |   2 +-
 composables/api/useRegisterUser/index.ts      |   4 +-
 composables/useApi/index.ts                   |   4 +-
 composables/useCurrentUser.ts                 |   5 +-
 composables/useModalAlert.ts                  |  17 +++
 composables/useSessionToken.ts                |   4 +-
 layouts/default.vue                           |   2 +
 lib/api/Account.ts                            |  92 ++++++++++++++++
 lib/api/AccountRoute.ts                       | 102 ++++++++++++++++++
 lib/api/data-contracts.ts                     |  18 ++++
 lib/helpers.ts                                |  18 ++++
 middleware/confirm-account.ts                 |  32 ++++++
 package.json                                  |   6 +-
 pages/confirm-account.test.ts                 |  23 ++++
 pages/confirm-account.vue                     |  12 +++
 pages/index.test.ts                           |   8 +-
 testUtils.ts                                  |   7 ++
 33 files changed, 594 insertions(+), 30 deletions(-)
 create mode 100644 assets/sprite/svg/circle-check.svg
 create mode 100644 assets/sprite/svg/circle-exclamation.svg
 create mode 100644 assets/sprite/svg/circle-info.svg
 create mode 100644 assets/sprite/svg/spinner.svg
 create mode 100644 assets/sprite/svg/triangle-exclamation.svg
 create mode 100644 components/blocks/Loader/Loader.vue
 create mode 100644 components/blocks/cards/BasicAlert/BasicAlert.test.ts
 create mode 100644 components/blocks/cards/BasicAlert/BasicAlert.vue
 create mode 100644 composables/api/useConfirmAccount/index.ts
 create mode 100644 composables/api/useConfirmAccount/useConfirmAccount.test.ts
 create mode 100644 composables/useModalAlert.ts
 create mode 100644 middleware/confirm-account.ts
 create mode 100644 pages/confirm-account.test.ts
 create mode 100644 pages/confirm-account.vue

diff --git a/assets/sprite/svg/circle-check.svg b/assets/sprite/svg/circle-check.svg
new file mode 100644
index 00000000..9ba4259b
--- /dev/null
+++ b/assets/sprite/svg/circle-check.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>
\ No newline at end of file
diff --git a/assets/sprite/svg/circle-exclamation.svg b/assets/sprite/svg/circle-exclamation.svg
new file mode 100644
index 00000000..81b3768a
--- /dev/null
+++ b/assets/sprite/svg/circle-exclamation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
\ No newline at end of file
diff --git a/assets/sprite/svg/circle-info.svg b/assets/sprite/svg/circle-info.svg
new file mode 100644
index 00000000..652acbee
--- /dev/null
+++ b/assets/sprite/svg/circle-info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>
\ No newline at end of file
diff --git a/assets/sprite/svg/spinner.svg b/assets/sprite/svg/spinner.svg
new file mode 100644
index 00000000..cc611eb4
--- /dev/null
+++ b/assets/sprite/svg/spinner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg>
\ No newline at end of file
diff --git a/assets/sprite/svg/triangle-exclamation.svg b/assets/sprite/svg/triangle-exclamation.svg
new file mode 100644
index 00000000..0a695fd2
--- /dev/null
+++ b/assets/sprite/svg/triangle-exclamation.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index f4d661fe..0c95ff40 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,12 +7,17 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ISvgCircleCheck: typeof import('~icons/svg/circle-check')['default']
+    ISvgCircleExclamation: typeof import('~icons/svg/circle-exclamation')['default']
+    ISvgCircleInfo: typeof import('~icons/svg/circle-info')['default']
     ISvgClock: typeof import('~icons/svg/clock')['default']
     ISvgClose: typeof import('~icons/svg/close')['default']
     ISvgEyeHidden: typeof import('~icons/svg/eye-hidden')['default']
     ISvgEyeVisible: typeof import('~icons/svg/eye-visible')['default']
     ISvgMenu: typeof import('~icons/svg/menu')['default']
     ISvgSearch: typeof import('~icons/svg/search')['default']
+    ISvgSpinner: typeof import('~icons/svg/spinner')['default']
+    ISvgTriangleExclamation: typeof import('~icons/svg/triangle-exclamation')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/components/blocks/Loader/Loader.vue b/components/blocks/Loader/Loader.vue
new file mode 100644
index 00000000..262f7674
--- /dev/null
+++ b/components/blocks/Loader/Loader.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="loader__container">
+    <i-svg-spinner class="loader__spinner" />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.loader__container {
+  @apply flex justify-center items-center h-screen w-full;
+}
+
+.loader__spinner {
+  @apply h-20 w-20 fill-current;
+  animation: spin 1.25s steps(9, end) infinite;
+
+  @media (prefers-reduced-motion) {
+    animation-duration: 9s;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>
diff --git a/components/blocks/cards/BasicAlert/BasicAlert.test.ts b/components/blocks/cards/BasicAlert/BasicAlert.test.ts
new file mode 100644
index 00000000..ad18ac93
--- /dev/null
+++ b/components/blocks/cards/BasicAlert/BasicAlert.test.ts
@@ -0,0 +1,60 @@
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import { useModalAlert } from 'composables/useModalAlert'
+import { getByClass, getByTestId, getHTMLElement } from 'root/testUtils'
+import BasicAlert from './BasicAlert.vue'
+
+function getBasicAlertWrapper() {
+  return mount(BasicAlert)
+}
+
+beforeEach(() => {
+  const modalAlertState = useModalAlert()
+  modalAlertState.value = {
+    body: 'This is a test',
+    show: true,
+    title: 'A test alert?',
+    type: 'info',
+  }
+})
+
+enableAutoUnmount(afterEach)
+
+afterEach(() => {
+  fetchMock.resetMocks()
+  vi.restoreAllMocks()
+})
+
+describe('<BasicAlert />', () => {
+  it('should render without crashing', () => {
+    const wrapper = getBasicAlertWrapper()
+
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('renders with the correct information', () => {
+    const wrapper = getBasicAlertWrapper()
+
+    expect(
+      getHTMLElement(getByClass(wrapper, 'basic-modal-alert__header'))
+        .childElementCount,
+    ).toEqual(3)
+    expect(getByClass(wrapper, 'basic-modal-alert__title').text()).toEqual(
+      'A test alert?',
+    )
+    expect(getByClass(wrapper, 'basic-modal-alert__body').text()).toEqual(
+      'This is a test',
+    )
+  })
+
+  describe('when the close button is clicked', () => {
+    it('should emit the close event', async () => {
+      const wrapper = getBasicAlertWrapper()
+
+      await getByTestId(wrapper, 'basic-modal-alert-close-button').trigger(
+        'click',
+      )
+
+      expect(wrapper.isVisible()).toBe(false)
+    })
+  })
+})
diff --git a/components/blocks/cards/BasicAlert/BasicAlert.vue b/components/blocks/cards/BasicAlert/BasicAlert.vue
new file mode 100644
index 00000000..73763d23
--- /dev/null
+++ b/components/blocks/cards/BasicAlert/BasicAlert.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import BaseModal from 'elements/modals/BaseModal/BaseModal.vue'
+import CloseButton from 'elements/buttons/CloseButton/CloseButton.vue'
+import Card from 'elements/cards/Card/Card.vue'
+import CardHeader from 'elements/cards/CardHeader/CardHeader.vue'
+import CardBody from 'elements/cards/CardBody/CardBody.vue'
+import { useModalAlert } from 'composables/useModalAlert'
+
+const modalAlertState = useModalAlert()?.value
+
+function close() {
+  modalAlertState.body = ''
+  modalAlertState.show = false
+  modalAlertState.title = ''
+  modalAlertState.type = ''
+}
+</script>
+
+<template>
+  <transition
+    v-if="modalAlertState.show"
+    enter-active-class="transition-opacity duration-200"
+    leave-active-class="transition-opacity duration-200"
+    enter-to-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <BaseModal v-show="modalAlertState.show" @close="close">
+      <Card
+        id="basicModalAlert"
+        :class="['basic-modal-alert', modalAlertState.type]"
+        data-testid="basic-modal-alert"
+      >
+        <CardHeader class="basic-modal-alert__header">
+          <i-svg-circle-info v-if="modalAlertState.type === 'info'" />
+          <i-svg-circle-check v-if="modalAlertState.type === 'success'" />
+          <i-svg-circle-exclamation v-if="modalAlertState.type === 'error'" />
+          <i-svg-triangle-exclamation
+            v-if="modalAlertState.type === 'warning'"
+          />
+          <h2 class="basic-modal-alert__title">
+            {{ modalAlertState.title }}
+          </h2>
+          <CloseButton
+            class="basic-modal-alert__close-button"
+            data-testid="basic-modal-alert-close-button"
+            @click.prevent="close"
+          />
+        </CardHeader>
+        <CardBody class="basic-modal-alert__body">
+          {{ modalAlertState.body }}
+        </CardBody>
+      </Card>
+    </BaseModal>
+  </transition>
+</template>
+
+<style lang="postcss" scoped>
+.basic-modal-alert {
+  @apply bg-white w-full max-w-xl;
+
+  svg {
+    @apply h-5 w-5 mr-2;
+  }
+
+  &.info svg {
+    @apply fill-blue-500;
+  }
+
+  &.success svg {
+    @apply fill-green-500;
+  }
+
+  &.error svg {
+    @apply fill-red-500;
+  }
+
+  &.warning svg {
+    @apply fill-yellow-500;
+  }
+
+  & .basic-modal-alert__header {
+    @apply flex flex-row items-center;
+  }
+
+  & .basic-modal-alert__title,
+  & .basic-modal-alert__body {
+    @apply flex flex-1;
+  }
+
+  & .basic-modal-alert__title {
+    @apply text-lg font-medium py-2;
+    @apply flex items-center;
+  }
+
+  & .basic-modal-alert__body {
+    @apply justify-center m-8;
+  }
+}
+</style>
diff --git a/components/blocks/cards/SignUpCard/SignUpCard.vue b/components/blocks/cards/SignUpCard/SignUpCard.vue
index 508224f2..17de6c8c 100644
--- a/components/blocks/cards/SignUpCard/SignUpCard.vue
+++ b/components/blocks/cards/SignUpCard/SignUpCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { type Ref, ref } from 'vue'
+import { sentenceCase } from 'lib/helpers'
 import BaseInput from 'elements/inputs/BaseInput/BaseInput.vue'
 import HideShowPassword from 'elements/buttons/HideShowPassword/HideShowPassword.vue'
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
@@ -98,12 +99,10 @@ async function signup() {
     },
     {
       onError: (val: any) => {
-        errorText.value = `Error(s): ${(
-          Object.values(val.error.errors) as string[]
-        ).reduce(
-          (accumulator: string, val: string) => `${accumulator} ${val}`,
-          '',
-        )}`
+        const errors = Object.values(val.error?.errors) as string[][]
+        errorText.value = `Error(s): ${errors
+          .map((errorType) => errorType.map(sentenceCase))
+          .join(', ')}`
         showErrorsText.value = true
       },
       onOkay: () => {
diff --git a/composables/api/index.ts b/composables/api/index.ts
index 9a2bba31..1010c161 100644
--- a/composables/api/index.ts
+++ b/composables/api/index.ts
@@ -1,3 +1,4 @@
+export { default as useConfirmAccount } from './useConfirmAccount'
 export { default as useGetLeaderboardDetail } from './useGetLeaderboardDetail'
 export { default as useGetUserDetail } from './useGetUserDetail'
 export { default as useLoginUser } from './useLoginUser'
diff --git a/composables/api/useConfirmAccount/index.ts b/composables/api/useConfirmAccount/index.ts
new file mode 100644
index 00000000..eed04ce3
--- /dev/null
+++ b/composables/api/useConfirmAccount/index.ts
@@ -0,0 +1,20 @@
+import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import { Account } from 'lib/api/Account'
+
+export async function useConfirmAccount(
+  confirmationToken: string,
+  opts: optionalParameters<void> = {},
+): Promise<ApiResponse<void>> {
+  const { onError, onOkay } = opts
+
+  const account = new Account({
+    baseUrl: useRuntimeConfig().public.BACKEND_BASE_URL,
+  })
+
+  return await useApi<void>(
+    async () => await account.confirmUpdate(confirmationToken),
+    { onError, onOkay },
+  )
+}
+
+export default useConfirmAccount
diff --git a/composables/api/useConfirmAccount/useConfirmAccount.test.ts b/composables/api/useConfirmAccount/useConfirmAccount.test.ts
new file mode 100644
index 00000000..1c26163a
--- /dev/null
+++ b/composables/api/useConfirmAccount/useConfirmAccount.test.ts
@@ -0,0 +1,24 @@
+import { useConfirmAccount } from '.'
+
+const mockSuccessAccountConfirmation = vi.fn(() =>
+  Promise.resolve({ ok: true }),
+)
+
+describe('useConfirmUser', () => {
+  describe('when everything is successful', () => {
+    const confirmationCode = '123'
+
+    it('creates a PUT request to confirm the account', async () => {
+      vi.mock('lib/api/Account', () => ({
+        Account: function Account() {
+          this.confirmUpdate = mockSuccessAccountConfirmation
+        },
+      }))
+
+      await useConfirmAccount(confirmationCode)
+
+      expect(mockSuccessAccountConfirmation).toBeCalledTimes(1)
+      expect(mockSuccessAccountConfirmation).toBeCalledWith(confirmationCode)
+    })
+  })
+})
diff --git a/composables/api/useGetLeaderboardDetail/index.ts b/composables/api/useGetLeaderboardDetail/index.ts
index ee32a4ab..ef1dd406 100644
--- a/composables/api/useGetLeaderboardDetail/index.ts
+++ b/composables/api/useGetLeaderboardDetail/index.ts
@@ -3,10 +3,10 @@ import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
 import { Leaderboards } from 'lib/api/Leaderboards'
 import type { LeaderboardViewModel } from 'lib/api/data-contracts'
 
-export const useGetLeaderboardDetail = async (
+export async function useGetLeaderboardDetail(
   leaderboardSlug: string,
   opts: optionalParameters<LeaderboardViewModel> = {},
-): Promise<ApiResponse<LeaderboardViewModel>> => {
+): Promise<ApiResponse<LeaderboardViewModel>> {
   const { onError, onOkay } = opts
   const responseData = ref<LeaderboardViewModel>({
     categories: [],
diff --git a/composables/api/useGetUserDetail/index.ts b/composables/api/useGetUserDetail/index.ts
index df3be964..3e7b2897 100644
--- a/composables/api/useGetUserDetail/index.ts
+++ b/composables/api/useGetUserDetail/index.ts
@@ -3,10 +3,10 @@ import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
 import { Users } from 'lib/api/Users'
 import type { UserViewModel } from 'lib/api/data-contracts'
 
-export const useGetUserDetail = async (
+export async function useGetUserDetail(
   userId: string,
   opts: optionalParameters<UserViewModel> = {},
-): Promise<ApiResponse<UserViewModel>> => {
+): Promise<ApiResponse<UserViewModel>> {
   const { onError, onOkay } = opts
   const responseData = ref<UserViewModel>({
     id: '',
diff --git a/composables/api/useLoginUser/index.ts b/composables/api/useLoginUser/index.ts
index 04b914d0..8d47bee2 100644
--- a/composables/api/useLoginUser/index.ts
+++ b/composables/api/useLoginUser/index.ts
@@ -9,10 +9,10 @@ import type {
   UserViewModel,
 } from 'lib/api/data-contracts'
 
-export const useLoginUser = async (
+export async function useLoginUser(
   requestData: LoginRequest,
   opts: optionalParameters<UserViewModel> = {},
-): Promise<ApiResponse<LoginResponse>> => {
+): Promise<ApiResponse<LoginResponse>> {
   const { onError, onOkay } = opts
   const authToken = useSessionToken()
   const currentUser = useCurrentUser()
diff --git a/composables/api/useLogoutUser/index.ts b/composables/api/useLogoutUser/index.ts
index 4b39d06f..b534ab50 100644
--- a/composables/api/useLogoutUser/index.ts
+++ b/composables/api/useLogoutUser/index.ts
@@ -1,7 +1,7 @@
 import { useCurrentUser } from 'composables/useCurrentUser'
 import { useSessionToken } from 'composables/useSessionToken'
 
-export const useLogoutUser = (): void => {
+export function useLogoutUser(): void {
   const authToken = useSessionToken()
   const currentUser = useCurrentUser()
 
diff --git a/composables/api/useRegisterUser/index.ts b/composables/api/useRegisterUser/index.ts
index 7beb70db..de9f1b91 100644
--- a/composables/api/useRegisterUser/index.ts
+++ b/composables/api/useRegisterUser/index.ts
@@ -3,10 +3,10 @@ import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 import type { RegisterRequest, UserViewModel } from 'lib/api/data-contracts'
 
-export const useRegisterUser = async (
+export async function useRegisterUser(
   requestData: RegisterRequest,
   opts: optionalParameters<UserViewModel> = {},
-): Promise<ApiResponse<UserViewModel>> => {
+): Promise<ApiResponse<UserViewModel>> {
   const { onError, onOkay } = opts
   const responseData = ref<UserViewModel>({
     id: '',
diff --git a/composables/useApi/index.ts b/composables/useApi/index.ts
index 19604ae2..6607764e 100644
--- a/composables/useApi/index.ts
+++ b/composables/useApi/index.ts
@@ -32,10 +32,10 @@ export interface optionalParameters<T> {
  * @param {optionalParameters<T>} [opts = {}] - optional parameters. `onOkay`: a `function` to call when the API request succeeds. `responseData`: a `ref` to set the data to when the API request succeeds. If not passed it, a ref is created on a successful API call
  * @returns {Promise<ApiResponse<T>>} returns an `ApiResponse` object, but the `data` property is not guaranteed to be present
  */
-export const useApi = async <T>(
+export async function useApi<T>(
   apiRequest: () => Promise<HttpResponse<T, void | ProblemDetails>>,
   opts: optionalParameters<T> = {},
-): Promise<ApiResponse<T>> => {
+): Promise<ApiResponse<T>> {
   const responseError = ref<ProblemDetails | null | void>(null)
   const responseErrors = ref<ValidationProblemDetails | null | void>(null)
   const responseLoading = ref(true)
diff --git a/composables/useCurrentUser.ts b/composables/useCurrentUser.ts
index 8d095767..8c9114ee 100644
--- a/composables/useCurrentUser.ts
+++ b/composables/useCurrentUser.ts
@@ -1,9 +1,10 @@
 import type { UserViewModel } from 'lib/api/data-contracts'
 
-export const useCurrentUser = () =>
-  useState<UserViewModel>('current_user', () => ({
+export function useCurrentUser() {
+  return useState<UserViewModel>('current_user', () => ({
     id: '',
     username: '',
   }))
+}
 
 export default useCurrentUser
diff --git a/composables/useModalAlert.ts b/composables/useModalAlert.ts
new file mode 100644
index 00000000..2ade177c
--- /dev/null
+++ b/composables/useModalAlert.ts
@@ -0,0 +1,17 @@
+interface ModalAlertState {
+  body: string
+  show: boolean
+  title: string
+  type: string
+}
+
+export function useModalAlert() {
+  return useState<ModalAlertState>('modal_alert', () => ({
+    body: '',
+    show: false,
+    title: '',
+    type: '',
+  }))
+}
+
+export default useModalAlert
diff --git a/composables/useSessionToken.ts b/composables/useSessionToken.ts
index 1b3f42be..daec49d1 100644
--- a/composables/useSessionToken.ts
+++ b/composables/useSessionToken.ts
@@ -1,3 +1,5 @@
-export const useSessionToken = () => useState<string>('session_token')
+export function useSessionToken() {
+  return useState<string>('session_token')
+}
 
 export default useSessionToken
diff --git a/layouts/default.vue b/layouts/default.vue
index db30e2c9..ecf23152 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import BasicAlert from 'blocks/cards/BasicAlert/BasicAlert.vue'
 import SiteFooter from 'blocks/SiteFooter/SiteFooter.vue'
 import SiteNavbar from 'blocks/nav/SiteNavbar/SiteNavbar.vue'
 </script>
 
 <template>
   <div class="mx-auto flex h-screen flex-col">
+    <BasicAlert />
     <SiteNavbar />
     <slot />
     <SiteFooter />
diff --git a/lib/api/Account.ts b/lib/api/Account.ts
index fd2f91be..8568d7f3 100644
--- a/lib/api/Account.ts
+++ b/lib/api/Account.ts
@@ -10,9 +10,11 @@
  */
 
 import {
+  ChangePasswordRequest,
   LoginRequest,
   LoginResponse,
   ProblemDetails,
+  RecoverAccountRequest,
   RegisterRequest,
   UserViewModel,
   ValidationProblemDetails,
@@ -34,6 +36,7 @@ export class Account<
    * @response `400` `void` The request was malformed.
    * @response `409` `ValidationProblemDetails` A `User` with the specified username or email already exists.<br /><br /> Validation error codes by property: - **Username**: - **UsernameTaken**: the username is already in use - **Email**: - **EmailAlreadyUsed**: the email is already in use
    * @response `422` `void` The request contains errors.<br /><br /> Validation error codes by property: - **Username**: - **UsernameFormat**: Invalid username format - **Password**: - **PasswordFormat**: Invalid password format - **Email**: - **EmailValidator**: Invalid email format
+   * @response `500` `void` Server Error
    */
   registerCreate = (data: RegisterRequest, params: RequestParams = {}) =>
     this.request<UserViewModel, void | ValidationProblemDetails>({
@@ -92,4 +95,93 @@ export class Account<
       secure: true,
       ...params,
     })
+  /**
+   * No description
+   *
+   * @tags Account
+   * @name RecoverCreate
+   * @summary Sends an account recovery email.
+   * @request POST:/Account/recover
+   * @secure
+   * @response `200` `void` This endpoint returns 200 OK regardless of whether the email was sent successfully or not.
+   * @response `400` `ProblemDetails` The request object was malformed.
+   */
+  recoverCreate = (data: RecoverAccountRequest, params: RequestParams = {}) =>
+    this.request<void, ProblemDetails>({
+      path: `/Account/recover`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      ...params,
+    })
+  /**
+   * No description
+   *
+   * @tags Account
+   * @name ConfirmUpdate
+   * @summary Confirms a user account.
+   * @request PUT:/Account/confirm/{id}
+   * @secure
+   * @response `200` `void` The account was confirmed successfully.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `404` `ProblemDetails` The token provided was invalid or expired.
+   * @response `409` `ProblemDetails` The user's account was either already confirmed or banned.
+   */
+  confirmUpdate = (id: string, params: RequestParams = {}) =>
+    this.request<void, ProblemDetails>({
+      path: `/Account/confirm/${id}`,
+      method: 'PUT',
+      secure: true,
+      ...params,
+    })
+  /**
+   * No description
+   *
+   * @tags Account
+   * @name RecoverDetail
+   * @summary Tests an account recovery token for validity.
+   * @request GET:/Account/recover/{id}
+   * @secure
+   * @response `200` `void` The token provided is valid.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `404` `ProblemDetails` The token provided is invalid or expired, or the user is banned.
+   */
+  recoverDetail = (id: string, params: RequestParams = {}) =>
+    this.request<void, ProblemDetails>({
+      path: `/Account/recover/${id}`,
+      method: 'GET',
+      secure: true,
+      ...params,
+    })
+  /**
+   * No description
+   *
+   * @tags Account
+   * @name RecoverCreate2
+   * @summary Recover the user's account by resetting their password to a new value.
+   * @request POST:/Account/recover/{id}
+   * @originalName recoverCreate
+   * @duplicate
+   * @secure
+   * @response `200` `void` The user's password was reset successfully.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `403` `ProblemDetails` The user is banned.
+   * @response `404` `ProblemDetails` The token provided is invalid or expired.
+   * @response `409` `ProblemDetails` The new password is the same as the user's existing password.
+   * @response `422` `ValidationProblemDetails` The request body contains errors.<br /> A **PasswordFormat** Validation error on the Password field indicates that the password format is invalid.
+   */
+  recoverCreate2 = (
+    id: string,
+    data: ChangePasswordRequest,
+    params: RequestParams = {},
+  ) =>
+    this.request<void, ProblemDetails | ValidationProblemDetails>({
+      path: `/Account/recover/${id}`,
+      method: 'POST',
+      body: data,
+      secure: true,
+      type: ContentType.Json,
+      ...params,
+    })
 }
diff --git a/lib/api/AccountRoute.ts b/lib/api/AccountRoute.ts
index b90b9893..f27622b8 100644
--- a/lib/api/AccountRoute.ts
+++ b/lib/api/AccountRoute.ts
@@ -10,8 +10,10 @@
  */
 
 import {
+  ChangePasswordRequest,
   LoginRequest,
   LoginResponse,
+  RecoverAccountRequest,
   RegisterRequest,
   UserViewModel,
 } from './data-contracts'
@@ -28,6 +30,7 @@ export namespace Account {
    * @response `400` `void` The request was malformed.
    * @response `409` `ValidationProblemDetails` A `User` with the specified username or email already exists.<br /><br /> Validation error codes by property: - **Username**: - **UsernameTaken**: the username is already in use - **Email**: - **EmailAlreadyUsed**: the email is already in use
    * @response `422` `void` The request contains errors.<br /><br /> Validation error codes by property: - **Username**: - **UsernameFormat**: Invalid username format - **Password**: - **PasswordFormat**: Invalid password format - **Email**: - **EmailValidator**: Invalid email format
+   * @response `500` `void` Server Error
    */
   export namespace RegisterCreate {
     export type RequestParams = {}
@@ -80,4 +83,103 @@ export namespace Account {
     export type RequestHeaders = {}
     export type ResponseBody = void
   }
+
+  /**
+   * No description
+   * @tags Account
+   * @name RecoverCreate
+   * @summary Sends an account recovery email.
+   * @request POST:/Account/recover
+   * @secure
+   * @response `200` `void` This endpoint returns 200 OK regardless of whether the email was sent successfully or not.
+   * @response `400` `ProblemDetails` The request object was malformed.
+   */
+  export namespace RecoverCreate {
+    export type RequestParams = {}
+    export type RequestQuery = {}
+    export type RequestBody = RecoverAccountRequest
+    export type RequestHeaders = {}
+    export type ResponseBody = void
+  }
+
+  /**
+   * No description
+   * @tags Account
+   * @name ConfirmUpdate
+   * @summary Confirms a user account.
+   * @request PUT:/Account/confirm/{id}
+   * @secure
+   * @response `200` `void` The account was confirmed successfully.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `404` `ProblemDetails` The token provided was invalid or expired.
+   * @response `409` `ProblemDetails` The user's account was either already confirmed or banned.
+   */
+  export namespace ConfirmUpdate {
+    export type RequestParams = {
+      /**
+       * The confirmation token.
+       * @pattern ^[a-zA-Z0-9-_]{22}$
+       */
+      id: string
+    }
+    export type RequestQuery = {}
+    export type RequestBody = never
+    export type RequestHeaders = {}
+    export type ResponseBody = void
+  }
+
+  /**
+   * No description
+   * @tags Account
+   * @name RecoverDetail
+   * @summary Tests an account recovery token for validity.
+   * @request GET:/Account/recover/{id}
+   * @secure
+   * @response `200` `void` The token provided is valid.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `404` `ProblemDetails` The token provided is invalid or expired, or the user is banned.
+   */
+  export namespace RecoverDetail {
+    export type RequestParams = {
+      /**
+       * The recovery token.
+       * @pattern ^[a-zA-Z0-9-_]{22}$
+       */
+      id: string
+    }
+    export type RequestQuery = {}
+    export type RequestBody = never
+    export type RequestHeaders = {}
+    export type ResponseBody = void
+  }
+
+  /**
+   * No description
+   * @tags Account
+   * @name RecoverCreate2
+   * @summary Recover the user's account by resetting their password to a new value.
+   * @request POST:/Account/recover/{id}
+   * @originalName recoverCreate
+   * @duplicate
+   * @secure
+   * @response `200` `void` The user's password was reset successfully.
+   * @response `400` `ProblemDetails` Bad Request
+   * @response `403` `ProblemDetails` The user is banned.
+   * @response `404` `ProblemDetails` The token provided is invalid or expired.
+   * @response `409` `ProblemDetails` The new password is the same as the user's existing password.
+   * @response `422` `ValidationProblemDetails` The request body contains errors.<br /> A **PasswordFormat** Validation error on the Password field indicates that the password format is invalid.
+   */
+  export namespace RecoverCreate2 {
+    export type RequestParams = {
+      /**
+       * The recovery token.
+       * @pattern ^[a-zA-Z0-9-_]{22}$
+       */
+      id: string
+    }
+    export type RequestQuery = {}
+    export type RequestBody = ChangePasswordRequest
+    export type RequestHeaders = {}
+    export type ResponseBody = void
+  }
 }
diff --git a/lib/api/data-contracts.ts b/lib/api/data-contracts.ts
index 94e2afa5..ffad3b27 100644
--- a/lib/api/data-contracts.ts
+++ b/lib/api/data-contracts.ts
@@ -43,6 +43,10 @@ export interface CategoryViewModel {
   rules?: string | null
 }
 
+export interface ChangePasswordRequest {
+  password: string
+}
+
 /** This request object is sent when creating a `Category`. */
 export interface CreateCategoryRequest {
   /**
@@ -186,6 +190,20 @@ export interface ProblemDetails {
   [key: string]: any
 }
 
+export interface RecoverAccountRequest {
+  /**
+   * The user's name.
+   * @minLength 1
+   */
+  username: string
+  /**
+   * The user's email address.
+   * @format email
+   * @minLength 1
+   */
+  email: string
+}
+
 /** This request object is sent when a `User` is attempting to register. */
 export interface RegisterRequest {
   /**
diff --git a/lib/helpers.ts b/lib/helpers.ts
index b4f382fb..cf3d302a 100644
--- a/lib/helpers.ts
+++ b/lib/helpers.ts
@@ -32,7 +32,25 @@ export function isValidationProblemDetails(o: unknown): boolean {
   )
 }
 
+/**
+ * Takes a string and returns a sentence case version of it.
+ *
+ * **Note:** This function assumes that the string is camelCase or PascalCase.
+ *
+ * @param string The string to convert.
+ * @returns string
+ */
+export function sentenceCase(string: string): string {
+  let words = string.split(/(?=[A-Z])/)
+  words = words.map((word) => word.toLowerCase())
+
+  let sentence = words.join(' ')
+  sentence = sentence.charAt(0).toUpperCase() + sentence.slice(1)
+  return sentence
+}
+
 export default {
   isProblemDetails,
   isValidationProblemDetails,
+  sentenceCase,
 }
diff --git a/middleware/confirm-account.ts b/middleware/confirm-account.ts
new file mode 100644
index 00000000..52244d62
--- /dev/null
+++ b/middleware/confirm-account.ts
@@ -0,0 +1,32 @@
+import { useConfirmAccount } from 'composables/api'
+import { useModalAlert } from 'composables/useModalAlert'
+
+export default defineNuxtRouteMiddleware((_to, from) => {
+  const route = useRoute()
+  const confirmationCode = route.query?.code as string
+  const modalAlertState = useModalAlert().value
+
+  if (
+    !confirmationCode ||
+    from?.fullPath !== `/confirm-account?code=${confirmationCode}`
+  ) {
+    return navigateTo('/', { replace: true })
+  }
+
+  useConfirmAccount(confirmationCode, {
+    onError: () => {
+      modalAlertState.show = true
+      modalAlertState.title = 'Something went wrong...'
+      modalAlertState.body = 'Unable to confirm account.'
+      modalAlertState.type = 'error'
+      navigateTo('/', { replace: true })
+    },
+    onOkay: () => {
+      modalAlertState.show = true
+      modalAlertState.title = 'Success!'
+      modalAlertState.body = 'Account confirmed successfully!'
+      modalAlertState.type = 'success'
+      navigateTo('/', { replace: true })
+    },
+  })
+})
diff --git a/package.json b/package.json
index c62cb342..58265392 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,11 @@
   "version": "1.0.0",
   "private": true,
   "engines": {
-    "node": ">=20.0.0",
-    "pnpm": "8.7.5"
+    "node": ">=18.0.0",
+    "pnpm": "8.11.0"
   },
   "engineStrict": true,
-  "packageManager": "pnpm@8.7.5",
+  "packageManager": "pnpm@8.11.0",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
diff --git a/pages/confirm-account.test.ts b/pages/confirm-account.test.ts
new file mode 100644
index 00000000..a3d4de05
--- /dev/null
+++ b/pages/confirm-account.test.ts
@@ -0,0 +1,23 @@
+import { mount, enableAutoUnmount } from '@vue/test-utils'
+import { getByClass } from 'root/testUtils'
+import confirmAccount from 'pages/confirm-account.vue'
+
+function getConfirmAccountWrapper() {
+  return mount(confirmAccount)
+}
+
+vi.stubGlobal('definePageMeta', () => {})
+
+enableAutoUnmount(afterEach)
+
+describe('/confirm-account?code=<CONFIRMATION_CODE>', () => {
+  it('should render without crashing', () => {
+    const wrapper = getConfirmAccountWrapper()
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should render the loader', () => {
+    const wrapper = getConfirmAccountWrapper()
+    expect(getByClass(wrapper, 'loader__container').isVisible()).toBe(true)
+  })
+})
diff --git a/pages/confirm-account.vue b/pages/confirm-account.vue
new file mode 100644
index 00000000..b50fbfdf
--- /dev/null
+++ b/pages/confirm-account.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Loader from 'blocks/Loader/Loader.vue'
+
+definePageMeta({
+  layout: false,
+  middleware: 'confirm-account',
+})
+</script>
+
+<template>
+  <Loader />
+</template>
diff --git a/pages/index.test.ts b/pages/index.test.ts
index 6366c8b8..0adcb9ab 100644
--- a/pages/index.test.ts
+++ b/pages/index.test.ts
@@ -3,13 +3,7 @@ import { mount, enableAutoUnmount } from '@vue/test-utils'
 import index from 'pages/index.vue'
 
 function getIndexWrapper() {
-  return mount(index, {
-    global: {
-      mocks: {
-        $t: (msg: any) => msg,
-      },
-    },
-  })
+  return mount(index)
 }
 
 enableAutoUnmount(afterEach)
diff --git a/testUtils.ts b/testUtils.ts
index bffe0fec..1fe1c347 100644
--- a/testUtils.ts
+++ b/testUtils.ts
@@ -1,6 +1,13 @@
 import { DOMWrapper, VueWrapper } from '@vue/test-utils'
 type WrappedElement = Omit<DOMWrapper<Element>, 'exists'>
 
+export function getByClass(
+  wrapper: VueWrapper<any>,
+  className: string,
+): WrappedElement {
+  return wrapper.get(`.${className}`)
+}
+
 export function getByTestId(
   wrapper: VueWrapper<any>,
   testId: string,