From a335bfacfcdad25e5bcf2070168bea2c1a839dd6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 25 Jul 2022 23:29:22 -0700
Subject: [PATCH] Add verify email component, make email reset url match
 backend naming

---
 .../web/components/templates/VerifyEmail.tsx  | 53 +++++++++++++++++++
 packages/web/pages/forgot-password.tsx        | 36 +++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 packages/web/components/templates/VerifyEmail.tsx
 create mode 100644 packages/web/pages/forgot-password.tsx

diff --git a/packages/web/components/templates/VerifyEmail.tsx b/packages/web/components/templates/VerifyEmail.tsx
new file mode 100644
index 000000000..28a9103c5
--- /dev/null
+++ b/packages/web/components/templates/VerifyEmail.tsx
@@ -0,0 +1,53 @@
+import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives'
+import type { LoginFormProps } from './LoginForm'
+import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
+import { theme } from '../tokens/stitches.config'
+
+export function VerifyEmail(props: LoginFormProps): JSX.Element {
+  return (
+    <>
+      <HStack
+        alignment="center"
+        distribution="start"
+        css={{
+          width: '100vw',
+          height: '100vh',
+          bg: '$omnivoreYellow',
+          overflowY: 'clip'
+        }}
+      >
+      <Box css={{
+        width: '100%',
+        margin: '40px',
+        color: '$omnivoreGray',
+        '@xl': { margin: '138px' },
+        }}>
+        <h1>Verify your email address</h1>
+        <Box>
+          We sent a verification link to the email you provided. Click the link to verify your email. You may need to check your spam folder.
+        </Box>
+      </Box>
+    </HStack>
+      
+
+      <Box
+        css={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          p: '0px 15px 0px 15px',
+          height: '68px',
+          minHeight: '68px',
+          display: 'flex',
+          alignItems: 'center',
+          '@md': { width: '50%' },
+          '@xsDown': { height: '48px' },
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+      >
+        <OmnivoreNameLogo color={theme.colors.omnivoreGray.toString()} href='/login' />
+      </Box>
+    </>
+  )
+}
diff --git a/packages/web/pages/forgot-password.tsx b/packages/web/pages/forgot-password.tsx
new file mode 100644
index 000000000..3ad70ee63
--- /dev/null
+++ b/packages/web/pages/forgot-password.tsx
@@ -0,0 +1,36 @@
+import { PageMetaData } from '../components/patterns/PageMetaData'
+import { ProfileLayout } from '../components/templates/ProfileLayout'
+import { EmailResetPassword } from '../components/templates/EmailResetPassword'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import toast, { Toaster } from 'react-hot-toast'
+import { showSuccessToast } from '../lib/toastHelpers'
+
+export default function ForgotPassword(): JSX.Element {
+  const router = useRouter()
+
+  useEffect(() => {
+    if (router && router.isReady && router.query.message === 'SUCCESS') {
+      showSuccessToast('Reset password email sent')
+      setTimeout(() => {
+        window.location.href = '/email-login'
+      }, 2000)
+    }
+  }, [router])
+
+
+  return (
+    <>
+      <PageMetaData title="Reset your password - Omnivore" path="/email-reset-password" />
+      <Toaster
+        containerStyle={{
+          top: '5rem',
+        }}
+      />
+      <ProfileLayout>
+        <EmailResetPassword />
+      </ProfileLayout>
+      <div data-testid="email-reset-password-page-tag" />
+    </>
+  )
+}