Create Account Confirmation Resend Button Thingy

components/blocks/ResendConfirmationBar/ResendConfirmationBar.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+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: () => {
+      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',
+      })
+      unconfirmed.value = false
+    },
+  })
+}
+</script>
+
+<template>
+  <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 />
+        <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>

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>

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'

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'
 

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(

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'
 
@@ -10,6 +14,7 @@ export async function useGetUserDetail(
   const { onError, onOkay } = opts
   const responseData = ref<UserViewModel>({
     id: '',
+    role: 'Banned',
     username: '',
   })
 

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'

composables/api/useLogoutUser/index.ts

@@ -8,6 +8,7 @@ export function useLogoutUser(): void {
   authToken.value = ''
   currentUser.value = {
     id: '',
+    role: 'Banned',
     username: '',
   }
 }

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'
 

composables/api/useResendAccountConfirmation/index.ts

@@ -0,0 +1,33 @@
+import {
+  useApi,
+  type ApiResponse,
+  type optionalParameters,
+} 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 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({
+        headers: {
+          Authorization: `Bearer ${authToken.value}`,
+        },
+      }),
+    {
+      onError,
+      onOkay,
+    },
+  )
+}

composables/api/useResendAccountConfirmation/useResendAccountConfirmation.test.ts

@@ -0,0 +1,36 @@
+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({
+        headers: { Authorization: 'Bearer token' },
+      })
+    })
+  })
+})

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(

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

i18n/language.ts

@@ -1,5 +1,8 @@
 export interface LanguageIndexFile {
   welcome: string
-  signup?: string
   login?: string
+  logout?: string
+  needToConfirm?: string
+  resendConfirmation?: string
+  signup?: string
 }

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>