From cf5c7d98b9c736631fd156770afe6be3dfa2e09d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 25 Jul 2022 21:46:27 -0700
Subject: [PATCH] Add confirm email landing page

---
 packages/web/pages/confirm-email/[token].tsx | 60 ++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 packages/web/pages/confirm-email/[token].tsx

diff --git a/packages/web/pages/confirm-email/[token].tsx b/packages/web/pages/confirm-email/[token].tsx
new file mode 100644
index 000000000..235d3b199
--- /dev/null
+++ b/packages/web/pages/confirm-email/[token].tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Toaster } from 'react-hot-toast'
+
+import { applyStoredTheme } from '../../lib/themeUpdater'
+
+import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
+
+import { HStack, SpanBox } from '../../components/elements/LayoutPrimitives'
+import { Loader } from '../../components/templates/SavingRequest'
+import { fetchEndpoint } from '../../lib/appConfig'
+import { LoadingView } from '../../components/patterns/LoadingView'
+
+export default function ConfirmEmail(): JSX.Element {
+  const router = useRouter()
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
+
+  applyStoredTheme(false)
+
+  useEffect(() => {
+    if (!router || !router.isReady) {
+      return
+    }
+
+    const token = router.query.token
+    fetch(`${fetchEndpoint}/auth/confirm-email`, {
+      method: 'POST',
+      redirect: 'follow',
+      mode: 'cors',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ token }),
+    }).then((response) => {
+      if (response.status === 200) {
+        window.localStorage.setItem('authVerified', 'true')
+        window.location.href = '/'
+      } else {
+        setErrorMessage('Error confirming email')
+      }
+    })
+
+  }, [router])
+
+  return (
+    <PrimaryLayout pageTestId={'api-keys'}>
+      <Toaster
+        containerStyle={{
+          top: '5rem',
+        }}
+      />
+      <HStack css={{ bg: '$grayBg', padding: '24px', width: '100%', height: '100%'}}>
+        {errorMessage ? (
+          <SpanBox >{errorMessage}</SpanBox>
+        ) : <LoadingView />}
+      </HStack>
+    </PrimaryLayout>
+  )
+}