From d0f3c2eb91ba99bc17a9f42d37ddf173f5700084 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 27 Aug 2024 14:13:30 +0800
Subject: [PATCH 1/2] Layout improvements for auth pages

---
 packages/web/components/elements/StyledText.tsx            | 2 +-
 .../web/components/templates/auth/EmailForgotPassword.tsx  | 7 +++----
 packages/web/components/templates/auth/EmailLogin.tsx      | 7 +++----
 packages/web/components/templates/auth/EmailSignup.tsx     | 2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 6c2fd86cb..057b785a4 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -4,7 +4,7 @@ const textVariants = {
   style: {
     body: {
       fontSize: '$2',
-      lineHeight: '1.25',
+      lineHeight: '1.50',
     },
     logoTitle: {
       fontFamily: 'Inter',
diff --git a/packages/web/components/templates/auth/EmailForgotPassword.tsx b/packages/web/components/templates/auth/EmailForgotPassword.tsx
index 760c43c43..6de0ed443 100644
--- a/packages/web/components/templates/auth/EmailForgotPassword.tsx
+++ b/packages/web/components/templates/auth/EmailForgotPassword.tsx
@@ -40,9 +40,8 @@ const ForgotPasswordForm = (): JSX.Element => {
 export function EmailForgotPassword(): JSX.Element {
   const router = useRouter()
   const [email, setEmail] = useState<string>('')
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
   const recaptchaTokenRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -59,7 +58,7 @@ export function EmailForgotPassword(): JSX.Element {
       <VStack
         alignment="center"
         css={{
-          padding: '16px',
+          padding: '20px',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
diff --git a/packages/web/components/templates/auth/EmailLogin.tsx b/packages/web/components/templates/auth/EmailLogin.tsx
index 67cd5d3c9..aff6b65a7 100644
--- a/packages/web/components/templates/auth/EmailLogin.tsx
+++ b/packages/web/components/templates/auth/EmailLogin.tsx
@@ -52,9 +52,8 @@ const LoginForm = (): JSX.Element => {
 
 export function EmailLogin(): JSX.Element {
   const router = useRouter()
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
+  const [errorMessage, setErrorMessage] =
+    useState<string | undefined>(undefined)
   const recaptchaTokenRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -71,7 +70,7 @@ export function EmailLogin(): JSX.Element {
       <VStack
         alignment="center"
         css={{
-          padding: '16px',
+          padding: '20px',
           minWidth: '340px',
           width: '70vw',
           maxWidth: '576px',
diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index 8fa43db10..db4f4550a 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -150,7 +150,7 @@ export function EmailSignup(): JSX.Element {
         <VStack
           alignment="center"
           css={{
-            padding: '16px',
+            padding: '20px',
             minWidth: '340px',
             width: '70vw',
             maxWidth: '576px',

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 2/2] 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>
+  )
+}