From 3dc34b2e41abf7e7a1f9fcd6bb29be70f72e6ea3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Aug 2024 14:14:30 +0800
Subject: [PATCH] Add page for handling verification token errors

---
 packages/web/pages/auth/confirm-email.tsx | 65 +++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/web/pages/auth/confirm-email.tsx

diff --git a/packages/web/pages/auth/confirm-email.tsx b/packages/web/pages/auth/confirm-email.tsx
new file mode 100644
index 000000000..a785cca6c
--- /dev/null
+++ b/packages/web/pages/auth/confirm-email.tsx
@@ -0,0 +1,65 @@
+import { useRouter } from 'next/router'
+import { HStack, VStack } from '../../components/elements/LayoutPrimitives'
+import { PageMetaData } from '../../components/patterns/PageMetaData'
+import { useEffect, useState } from 'react'
+import { parseErrorCodes } from '../../lib/queryParamParser'
+import { StyledText } from '../../components/elements/StyledText'
+import { Button } from '../../components/elements/Button'
+import { AuthLayout } from '../../components/templates/AuthLayout'
+
+export default function ConfirmEmailPage(): JSX.Element {
+  const router = useRouter()
+
+  return (
+    <AuthLayout>
+      <PageMetaData title="Confirm Email" path="/auth/confirm-email" />
+      <VStack
+        alignment="center"
+        css={{
+          padding: '20px',
+          minWidth: '340px',
+          width: '70vw',
+          maxWidth: '576px',
+          borderRadius: '8px',
+          background: '#343434',
+          border: '1px solid #6A6968',
+          boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.15)',
+        }}
+      >
+        <StyledText style="subHeadline" css={{ color: '#D9D9D9' }}>
+          Verification error
+        </StyledText>
+
+        <StyledText style="body" css={{ color: '#D9D9D9' }}>
+          The verification code supplied is invalid or has expired. Please login
+          with your email and password again to generate a new verification
+          email. Verifications can only be used once, and expire after five
+          minutes.
+        </StyledText>
+
+        <HStack
+          alignment="center"
+          distribution="center"
+          css={{
+            gap: '10px',
+            width: '100%',
+            height: '80px',
+          }}
+        >
+          <Button
+            type="submit"
+            style="ctaBlue"
+            css={{
+              padding: '10px 50px',
+            }}
+            onClick={(event) => {
+              router.push(`/auth/email-login`)
+            }}
+          >
+            Login
+          </Button>
+        </HStack>
+      </VStack>
+    </AuthLayout>
+  )
+}