Add token to endpoint call and create component folder

components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import useResendAccountConfirmation from 'composables/api/useResendAccountConfirmation'
+import { useModalAlert } from 'composables/useModalAlert'
+
+// Might need definePageMeta and to create a middleware??
+
+const errorText = ref('')
+const showErrorText = ref(false)
+const { showAlert } = useModalAlert()
+
+async function resend() {
+  await useResendAccountConfirmation({
+    onError: () => {
+      errorText.value =
+        'Something went wrong. Reach out to support if the problem persists'
+      showErrorText.value = true
+    },
+    onOkay: () => {
+      showAlert({
+        body: 'If you have a valid account with us, you should receive an email from us soon.',
+        title: 'Confirmation Request Received',
+        type: 'info',
+      })
+    },
+  })
+}
+</script>
+
+<template>
+  <div>
+    <button @click="resend">Confirm</button>
+    <p v-if="showErrorText" class="text-red-600">{{ errorText }}</p>
+  </div>
+</template>

composables/api/useResendAccountConfirmation/index.ts

@@ -1,25 +1,33 @@
 import {
+  useApi,
   type ApiResponse,
   type optionalParameters,
-  useApi,
 } from 'composables/useApi'
+import { useSessionToken } from 'composables/useSessionToken'
 import { Account } from 'lib/api/Account'
 
 /**
  * Resends the account confirmation email for a newly-registered user.
  */
-export async function useResendAccountConfirmation(
+export default async function useResendAccountConfirmation(
   opts: optionalParameters<void> = {},
 ): Promise<ApiResponse<void>> {
   const { onError, onOkay } = opts
+  const authToken = useSessionToken()
   const account = new Account({
     baseUrl: useRuntimeConfig().public.BACKEND_BASE_URL,
   })
 
-  return await useApi<void>(async () => await account.confirmCreate(), {
-    onError,
-    onOkay,
-  })
+  return await useApi<void>(
+    async () =>
+      await account.confirmCreate({
+        headers: {
+          Authorization: `Bearer ${authToken.value}`,
+        },
+      }),
+    {
+      onError,
+      onOkay,
+    },
+  )
 }
-
-export default useResendAccountConfirmation

composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts

@@ -1,20 +1,36 @@
-import { useResendAccountConfirmation } from '.'
+import { useLoginUser } from '../useLoginUser'
+import useResendAccountConfirmation from '.'
 
+const mockSuccessLogin = vi.fn(() =>
+  Promise.resolve({ data: { token: 'token' }, ok: true }),
+)
 const mockSuccessResendAccount = vi.fn(() => Promise.resolve({ ok: true }))
+const onOkaySpy = vi.fn()
+const email = '[email protected]'
+const password = 'Password1'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.clearAllMocks()
+})
 
 describe('useResendAccountConfirmation', () => {
   describe('when everything is successful', () => {
     it('changes the password for the user', async () => {
       vi.mock('lib/api/Account', () => ({
         Account: function Account() {
+          this.loginCreate = mockSuccessLogin
           this.confirmCreate = mockSuccessResendAccount
         },
       }))
 
+      await useLoginUser({ email, password }, { onOkay: onOkaySpy })
       await useResendAccountConfirmation()
 
       expect(mockSuccessResendAccount).toBeCalledTimes(1)
-      expect(mockSuccessResendAccount).toBeCalledWith()
+      expect(mockSuccessResendAccount).toBeCalledWith({
+        headers: { Authorization: 'Bearer token' },
+      })
     })
   })
 })