From f59fb2d131678a87a27ae1b862de905ba8e18703 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Sat, 18 May 2024 15:49:35 +0800
Subject: [PATCH] Add token to endpoint call and create component folder

---
 .../ResendConfirmationBar.vue                 | 35 +++++++++++++++++++
 .../api/useResendAccountConfirmation/index.ts | 24 ++++++++-----
 .../useResendAccountConfirmation.test.ts      | 20 +++++++++--
 3 files changed, 69 insertions(+), 10 deletions(-)
 create mode 100644 components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue

diff --git a/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue b/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
new file mode 100644
index 00000000..5b751137
--- /dev/null
+++ b/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>
diff --git a/composables/api/useResendAccountConfirmation/index.ts b/composables/api/useResendAccountConfirmation/index.ts
index 1971b2a8..fdd2d5b9 100644
--- a/composables/api/useResendAccountConfirmation/index.ts
+++ b/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
diff --git a/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts b/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts
index 4dbcccc3..c91fa4ce 100644
--- a/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts
+++ b/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 = 'test@lb.gg'
+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' },
+      })
     })
   })
 })