From 5c273787575f2fce5d4d4fbcfad0fea8e07ae961 Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 17 May 2024 21:31:47 +0800
Subject: [PATCH 1/5] Create composable and test

---
 composables/api/index.ts                      |  1 +
 .../api/useResendAccountConfirmation/index.ts | 25 +++++++++++++++++++
 .../useResendAccountConfirmation.test.ts      | 20 +++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 composables/api/useResendAccountConfirmation/index.ts
 create mode 100644 composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts

diff --git a/composables/api/index.ts b/composables/api/index.ts
index 93143d36..fff76ec6 100644
--- a/composables/api/index.ts
+++ b/composables/api/index.ts
@@ -7,3 +7,4 @@ export { default as useLogoutUser } from './useLogoutUser'
 export { default as useRecoverAccount } from './useRecoverAccount'
 export { default as useRegisterUser } from './useRegisterUser'
 export { default as useValidateRecoveryToken } from './useValidateRecoveryToken'
+export { default as useResendAccountConfirmation } from './useResendAccountConfirmation'
diff --git a/composables/api/useResendAccountConfirmation/index.ts b/composables/api/useResendAccountConfirmation/index.ts
new file mode 100644
index 00000000..1971b2a8
--- /dev/null
+++ b/composables/api/useResendAccountConfirmation/index.ts
@@ -0,0 +1,25 @@
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
+import { Account } from 'lib/api/Account'
+
+/**
+ * Resends the account confirmation email for a newly-registered user.
+ */
+export async function useResendAccountConfirmation(
+  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.confirmCreate(), {
+    onError,
+    onOkay,
+  })
+}
+
+export default useResendAccountConfirmation
diff --git a/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts b/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts
new file mode 100644
index 00000000..4dbcccc3
--- /dev/null
+++ b/composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts
@@ -0,0 +1,20 @@
+import { useResendAccountConfirmation } from '.'
+
+const mockSuccessResendAccount = vi.fn(() => Promise.resolve({ ok: true }))
+
+describe('useResendAccountConfirmation', () => {
+  describe('when everything is successful', () => {
+    it('changes the password for the user', async () => {
+      vi.mock('lib/api/Account', () => ({
+        Account: function Account() {
+          this.confirmCreate = mockSuccessResendAccount
+        },
+      }))
+
+      await useResendAccountConfirmation()
+
+      expect(mockSuccessResendAccount).toBeCalledTimes(1)
+      expect(mockSuccessResendAccount).toBeCalledWith()
+    })
+  })
+})

From d9284aa8118a070de20db2c8296aead547181e8c Mon Sep 17 00:00:00 2001
From: zysim <9867871+zysim@users.noreply.github.com>
Date: Fri, 17 May 2024 21:37:17 +0800
Subject: [PATCH 2/5] Annotate type imports in composables/api

---
 composables/api/useChangePassword/index.ts        | 6 +++++-
 composables/api/useConfirmAccount/index.ts        | 6 +++++-
 composables/api/useGetUserDetail/index.ts         | 6 +++++-
 composables/api/useLoginUser/index.ts             | 6 +++++-
 composables/api/useRegisterUser/index.ts          | 6 +++++-
 composables/api/useValidateRecoveryToken/index.ts | 6 +++++-
 6 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/composables/api/useChangePassword/index.ts b/composables/api/useChangePassword/index.ts
index cfa2ea89..d1e171f1 100644
--- a/composables/api/useChangePassword/index.ts
+++ b/composables/api/useChangePassword/index.ts
@@ -1,4 +1,8 @@
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 import type { ChangePasswordRequest } from 'lib/api/data-contracts'
 
diff --git a/composables/api/useConfirmAccount/index.ts b/composables/api/useConfirmAccount/index.ts
index eed04ce3..70c27f51 100644
--- a/composables/api/useConfirmAccount/index.ts
+++ b/composables/api/useConfirmAccount/index.ts
@@ -1,4 +1,8 @@
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 
 export async function useConfirmAccount(
diff --git a/composables/api/useGetUserDetail/index.ts b/composables/api/useGetUserDetail/index.ts
index 3e7b2897..ae80d45e 100644
--- a/composables/api/useGetUserDetail/index.ts
+++ b/composables/api/useGetUserDetail/index.ts
@@ -1,5 +1,9 @@
 import { ref } from 'vue'
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { Users } from 'lib/api/Users'
 import type { UserViewModel } from 'lib/api/data-contracts'
 
diff --git a/composables/api/useLoginUser/index.ts b/composables/api/useLoginUser/index.ts
index 8d47bee2..929cdba9 100644
--- a/composables/api/useLoginUser/index.ts
+++ b/composables/api/useLoginUser/index.ts
@@ -1,4 +1,8 @@
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { useCurrentUser } from 'composables/useCurrentUser'
 import { useSessionToken } from 'composables/useSessionToken'
 import { Account } from 'lib/api/Account'
diff --git a/composables/api/useRegisterUser/index.ts b/composables/api/useRegisterUser/index.ts
index de9f1b91..b9ac9986 100644
--- a/composables/api/useRegisterUser/index.ts
+++ b/composables/api/useRegisterUser/index.ts
@@ -1,5 +1,9 @@
 import { ref } from 'vue'
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 import type { RegisterRequest, UserViewModel } from 'lib/api/data-contracts'
 
diff --git a/composables/api/useValidateRecoveryToken/index.ts b/composables/api/useValidateRecoveryToken/index.ts
index 91fd3041..91263eb1 100644
--- a/composables/api/useValidateRecoveryToken/index.ts
+++ b/composables/api/useValidateRecoveryToken/index.ts
@@ -1,4 +1,8 @@
-import { ApiResponse, optionalParameters, useApi } from 'composables/useApi'
+import {
+  type ApiResponse,
+  type optionalParameters,
+  useApi,
+} from 'composables/useApi'
 import { Account } from 'lib/api/Account'
 
 export async function useValidateRecoveryToken(

From 3a732a2b19950f6ec92d09ac1d5e5ee16223de7d 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 3/5] 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' },
+      })
     })
   })
 })

From 6ac676a211d08451ef05a7e94b0e0562a9591f37 Mon Sep 17 00:00:00 2001
From: Edward Runkel <eddierunkel@gmail.com>
Date: Tue, 25 Jun 2024 10:59:54 -0400
Subject: [PATCH 4/5] Style the resend banner

---
 .../ResendConfirmationBar.vue                 | 41 ++++++++++++++++---
 .../buttons/LogoutButton/LogoutButton.vue     |  4 +-
 i18n/en/index.ts                              |  3 ++
 i18n/language.ts                              |  5 ++-
 layouts/default.vue                           |  2 +
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue b/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
index 5b751137..fecf6893 100644
--- a/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
+++ b/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import BaseButton from 'elements/buttons/BaseButton/BaseButton.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()
@@ -28,8 +27,40 @@ async function resend() {
 </script>
 
 <template>
-  <div>
-    <button @click="resend">Confirm</button>
-    <p v-if="showErrorText" class="text-red-600">{{ errorText }}</p>
+  <div class="resend-confirmation-bar__container">
+    <div class="resend-confirmation-bar__content">
+      <div class="resend-confirmation-bar__text">
+        <i-svg-circle-info />
+        <span>{{ $t('needToConfirm') }}</span>
+      </div>
+      <BaseButton class="resend-confirmation__button" @click="resend">
+        {{ $t('resendConfirmation') }}
+      </BaseButton>
+    </div>
+    <p v-if="showErrorText" class="error-text">{{ errorText }}</p>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.resend-confirmation-bar__container,
+.resend-confirmation-bar__content {
+  @apply flex flex-col items-center justify-center;
+}
+
+.resend-confirmation-bar__content {
+  @apply mt-4 gap-y-2 md:flex-row md:gap-x-2;
+  @apply fill-blue-500;
+}
+
+.resend-confirmation-bar__text {
+  @apply flex items-center gap-x-2;
+}
+
+.resend-confirmation__button {
+  @apply mx-1 py-1 bg-blue-100 hover:bg-blue-300;
+}
+
+.error-text {
+  @apply text-red-600;
+}
+</style>
diff --git a/components/elements/buttons/LogoutButton/LogoutButton.vue b/components/elements/buttons/LogoutButton/LogoutButton.vue
index b8f66e00..8819318e 100644
--- a/components/elements/buttons/LogoutButton/LogoutButton.vue
+++ b/components/elements/buttons/LogoutButton/LogoutButton.vue
@@ -3,7 +3,9 @@ import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
 </script>
 
 <template>
-  <BaseButton class="logout-button" v-bind="$attrs"> Log Out </BaseButton>
+  <BaseButton class="logout-button" v-bind="$attrs">
+    {{ $t('logout') }}
+  </BaseButton>
 </template>
 
 <style lang="postcss" scoped>
diff --git a/i18n/en/index.ts b/i18n/en/index.ts
index 9b787ec7..f0c1d819 100644
--- a/i18n/en/index.ts
+++ b/i18n/en/index.ts
@@ -2,6 +2,9 @@ import type { LanguageIndexFile } from '../language'
 
 export const English = {
   login: 'Log In',
+  logout: 'Log Out',
+  needToConfirm: 'Looks like you still need to confirm your email address.',
+  resendConfirmation: 'Resend confirmation',
   signup: 'Sign Up',
   welcome: 'Welcome',
 } satisfies LanguageIndexFile
diff --git a/i18n/language.ts b/i18n/language.ts
index a62e1d3f..98da053a 100644
--- a/i18n/language.ts
+++ b/i18n/language.ts
@@ -1,5 +1,8 @@
 export interface LanguageIndexFile {
   welcome: string
-  signup?: string
   login?: string
+  logout?: string
+  needToConfirm?: string
+  resendConfirmation?: string
+  signup?: string
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index ecf23152..df8f4141 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BasicAlert from 'blocks/cards/BasicAlert/BasicAlert.vue'
+import ResendConfirmationBar from 'blocks/ResendConfirmationBar/ResendConfirmationBar.vue'
 import SiteFooter from 'blocks/SiteFooter/SiteFooter.vue'
 import SiteNavbar from 'blocks/nav/SiteNavbar/SiteNavbar.vue'
 </script>
@@ -8,6 +9,7 @@ import SiteNavbar from 'blocks/nav/SiteNavbar/SiteNavbar.vue'
   <div class="mx-auto flex h-screen flex-col">
     <BasicAlert />
     <SiteNavbar />
+    <ResendConfirmationBar />
     <slot />
     <SiteFooter />
   </div>

From 91c3dfe082ca27cbdd7bfda0d35eda367d532ac1 Mon Sep 17 00:00:00 2001
From: Edward Runkel <eddierunkel@gmail.com>
Date: Tue, 25 Jun 2024 11:36:20 -0400
Subject: [PATCH 5/5] Show resend confirmation bar, when user is registered.

---
 .../ResendConfirmationBar/ResendConfirmationBar.vue      | 9 ++++++++-
 composables/api/useGetUserDetail/index.ts                | 1 +
 composables/api/useLogoutUser/index.ts                   | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue b/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
index fecf6893..9525ed43 100644
--- a/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
+++ b/components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue
@@ -2,12 +2,18 @@
 import { ref } from 'vue'
 import BaseButton from 'elements/buttons/BaseButton/BaseButton.vue'
 import useResendAccountConfirmation from 'composables/api/useResendAccountConfirmation'
+import { useCurrentUser } from 'composables/useCurrentUser'
 import { useModalAlert } from 'composables/useModalAlert'
 
+const currentUser = useCurrentUser()
 const errorText = ref('')
 const showErrorText = ref(false)
 const { showAlert } = useModalAlert()
 
+const unconfirmed = ref(
+  !!currentUser.value?.username && currentUser.value?.role === 'Registered',
+)
+
 async function resend() {
   await useResendAccountConfirmation({
     onError: () => {
@@ -21,13 +27,14 @@ async function resend() {
         title: 'Confirmation Request Received',
         type: 'info',
       })
+      unconfirmed.value = false
     },
   })
 }
 </script>
 
 <template>
-  <div class="resend-confirmation-bar__container">
+  <div v-if="unconfirmed" class="resend-confirmation-bar__container">
     <div class="resend-confirmation-bar__content">
       <div class="resend-confirmation-bar__text">
         <i-svg-circle-info />
diff --git a/composables/api/useGetUserDetail/index.ts b/composables/api/useGetUserDetail/index.ts
index ae80d45e..2f470029 100644
--- a/composables/api/useGetUserDetail/index.ts
+++ b/composables/api/useGetUserDetail/index.ts
@@ -14,6 +14,7 @@ export async function useGetUserDetail(
   const { onError, onOkay } = opts
   const responseData = ref<UserViewModel>({
     id: '',
+    role: 'Banned',
     username: '',
   })
 
diff --git a/composables/api/useLogoutUser/index.ts b/composables/api/useLogoutUser/index.ts
index b534ab50..b8c4e9aa 100644
--- a/composables/api/useLogoutUser/index.ts
+++ b/composables/api/useLogoutUser/index.ts
@@ -8,6 +8,7 @@ export function useLogoutUser(): void {
   authToken.value = ''
   currentUser.value = {
     id: '',
+    role: 'Banned',
     username: '',
   }
 }