From 62a88b784b9590108050005ee8778a0e42324691 Mon Sep 17 00:00:00 2001
From: Edward Runkel <eddierunkel@gmail.com>
Date: Wed, 22 Nov 2023 22:43:14 -0500
Subject: [PATCH] Create `/confirm-account` route

---
 middleware/confirm-account.ts | 29 +++++++++++++++++++++++++++++
 pages/confirm-account.test.ts | 23 +++++++++++++++++++++++
 pages/confirm-account.vue     | 12 ++++++++++++
 pages/index.test.ts           |  8 +-------
 4 files changed, 65 insertions(+), 7 deletions(-)
 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/middleware/confirm-account.ts b/middleware/confirm-account.ts
new file mode 100644
index 00000000..14e5582a
--- /dev/null
+++ b/middleware/confirm-account.ts
@@ -0,0 +1,29 @@
+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 (from !== `/confirm-account?code=${confirmationCode}`) {
+    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/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)