From 24c14a13233f685dfd675e70f53a2ae7cb360ec0 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sun, 31 Mar 2024 18:09:03 +0800
Subject: [PATCH] Temporarily disable email signup

---
 .../components/templates/auth/EmailSignup.tsx | 337 +++++++++---------
 1 file changed, 174 insertions(+), 163 deletions(-)

diff --git a/packages/web/components/templates/auth/EmailSignup.tsx b/packages/web/components/templates/auth/EmailSignup.tsx
index e23a5f584..f45afb793 100644
--- a/packages/web/components/templates/auth/EmailSignup.tsx
+++ b/packages/web/components/templates/auth/EmailSignup.tsx
@@ -46,174 +46,185 @@ export function EmailSignup(): JSX.Element {
   )
 
   return (
-    <form action={`${fetchEndpoint}/auth/email-signup`} method="POST">
-      <VStack
-        alignment="center"
-        css={{
-          padding: '16px',
-          background: 'white',
-          minWidth: '340px',
-          width: '70vw',
-          maxWidth: '576px',
-          borderRadius: '8px',
-          border: '1px solid #3D3D3D',
-          boxShadow: '#B1B1B1 9px 9px 9px -9px',
-        }}
-      >
-        <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
-          Sign Up
-        </StyledText>
-        <VStack
-          css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
-        >
-          <SpanBox css={{ width: '100%' }}>
-            <FormLabel className="required">Email</FormLabel>
-            <BorderedFormInput
-              autoFocus={true}
-              key="email"
-              type="email"
-              name="email"
-              defaultValue={email}
-              placeholder="Email"
-              css={{ backgroundColor: 'white', color: 'black' }}
-              onChange={(e) => {
-                e.preventDefault()
-                setEmail(e.target.value)
-              }}
-              required
-            />
-          </SpanBox>
+    <VStack alignment="center">
+      <SpanBox css={{ color: 'red' }}>
+        We have temporarily suspended signup via email while we work to resolve
+        an issue with our email provider.
+      </SpanBox>
+      <SpanBox css={{ color: 'black' }}>
+        <a href="https://discord.gg/h2z5rppzz9">
+          Join our discord for more information
+        </a>
+      </SpanBox>
+    </VStack>
+    // <form action={`${fetchEndpoint}/auth/email-signup`} method="POST">
+    //   <VStack
+    //     alignment="center"
+    //     css={{
+    //       padding: '16px',
+    //       background: 'white',
+    //       minWidth: '340px',
+    //       width: '70vw',
+    //       maxWidth: '576px',
+    //       borderRadius: '8px',
+    //       border: '1px solid #3D3D3D',
+    //       boxShadow: '#B1B1B1 9px 9px 9px -9px',
+    //     }}
+    //   >
+    //     <StyledText style="subHeadline" css={{ color: '$omnivoreGray' }}>
+    //       Sign Up
+    //     </StyledText>
+    //     <VStack
+    //       css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}
+    //     >
+    //       <SpanBox css={{ width: '100%' }}>
+    //         <FormLabel className="required">Email</FormLabel>
+    //         <BorderedFormInput
+    //           autoFocus={true}
+    //           key="email"
+    //           type="email"
+    //           name="email"
+    //           defaultValue={email}
+    //           placeholder="Email"
+    //           css={{ backgroundColor: 'white', color: 'black' }}
+    //           onChange={(e) => {
+    //             e.preventDefault()
+    //             setEmail(e.target.value)
+    //           }}
+    //           required
+    //         />
+    //       </SpanBox>
 
-          <SpanBox css={{ width: '100%' }}>
-            <FormLabel className="required">Password</FormLabel>
-            <BorderedFormInput
-              key="password"
-              type="password"
-              name="password"
-              defaultValue={password}
-              placeholder="Password"
-              css={{ bg: 'white', color: 'black' }}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </SpanBox>
+    //       <SpanBox css={{ width: '100%' }}>
+    //         <FormLabel className="required">Password</FormLabel>
+    //         <BorderedFormInput
+    //           key="password"
+    //           type="password"
+    //           name="password"
+    //           defaultValue={password}
+    //           placeholder="Password"
+    //           css={{ bg: 'white', color: 'black' }}
+    //           onChange={(e) => setPassword(e.target.value)}
+    //           required
+    //         />
+    //       </SpanBox>
 
-          <SpanBox css={{ width: '100%' }}>
-            <FormLabel className="required">Full Name</FormLabel>
-            <BorderedFormInput
-              key="fullname"
-              type="text"
-              name="name"
-              defaultValue={fullname}
-              placeholder="Full Name"
-              css={{ bg: 'white', color: 'black' }}
-              onChange={(e) => setFullname(e.target.value)}
-              required
-            />
-          </SpanBox>
+    //       <SpanBox css={{ width: '100%' }}>
+    //         <FormLabel className="required">Full Name</FormLabel>
+    //         <BorderedFormInput
+    //           key="fullname"
+    //           type="text"
+    //           name="name"
+    //           defaultValue={fullname}
+    //           placeholder="Full Name"
+    //           css={{ bg: 'white', color: 'black' }}
+    //           onChange={(e) => setFullname(e.target.value)}
+    //           required
+    //         />
+    //       </SpanBox>
 
-          <SpanBox css={{ width: '100%' }}>
-            <FormLabel className="required">Username</FormLabel>
-            <BorderedFormInput
-              key="username"
-              type="text"
-              name="username"
-              defaultValue={username}
-              placeholder="Username"
-              css={{ bg: 'white', color: 'black' }}
-              onChange={handleUsernameChange}
-              required
-            />
-          </SpanBox>
-          {username && username.length > 0 && usernameErrorMessage && (
-            <StyledText
-              style="caption"
-              css={{
-                m: 0,
-                pl: '$2',
-                color: '$error',
-                alignSelf: 'flex-start',
-              }}
-            >
-              {usernameErrorMessage}
-            </StyledText>
-          )}
-          {isUsernameValid && (
-            <StyledText
-              style="caption"
-              css={{
-                m: 0,
-                pl: '$2',
-                alignSelf: 'flex-start',
-                color: '$omnivoreGray',
-              }}
-            >
-              Username is available.
-            </StyledText>
-          )}
-        </VStack>
+    //       <SpanBox css={{ width: '100%' }}>
+    //         <FormLabel className="required">Username</FormLabel>
+    //         <BorderedFormInput
+    //           key="username"
+    //           type="text"
+    //           name="username"
+    //           defaultValue={username}
+    //           placeholder="Username"
+    //           css={{ bg: 'white', color: 'black' }}
+    //           onChange={handleUsernameChange}
+    //           required
+    //         />
+    //       </SpanBox>
+    //       {username && username.length > 0 && usernameErrorMessage && (
+    //         <StyledText
+    //           style="caption"
+    //           css={{
+    //             m: 0,
+    //             pl: '$2',
+    //             color: '$error',
+    //             alignSelf: 'flex-start',
+    //           }}
+    //         >
+    //           {usernameErrorMessage}
+    //         </StyledText>
+    //       )}
+    //       {isUsernameValid && (
+    //         <StyledText
+    //           style="caption"
+    //           css={{
+    //             m: 0,
+    //             pl: '$2',
+    //             alignSelf: 'flex-start',
+    //             color: '$omnivoreGray',
+    //           }}
+    //         >
+    //           Username is available.
+    //         </StyledText>
+    //       )}
+    //     </VStack>
 
-        {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
+    //     {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
 
-        <StyledText
-          style="caption"
-          css={{
-            p: '0px',
-            color: '$omnivoreLightGray',
-          }}
-        >
-          Omnivore will send you daily tips for your first week as a new user.
-          If you don&apos;t like them you can unsubscribe.
-        </StyledText>
+    //     <StyledText
+    //       style="caption"
+    //       css={{
+    //         p: '0px',
+    //         color: '$omnivoreLightGray',
+    //       }}
+    //     >
+    //       Omnivore will send you daily tips for your first week as a new user.
+    //       If you don&apos;t like them you can unsubscribe.
+    //     </StyledText>
 
-        <HStack
-          alignment="center"
-          distribution="end"
-          css={{
-            gap: '10px',
-            width: '100%',
-            height: '80px',
-          }}
-        >
-          <Button
-            style={'ctaOutlineYellow'}
-            css={{ color: '$omnivoreGray', borderColor: 'rgba(0, 0, 0, 0.06)' }}
-            type="button"
-            onClick={async () => {
-              window.localStorage.removeItem('authVerified')
-              window.localStorage.removeItem('authToken')
-              try {
-                await logoutMutation()
-              } catch (e) {
-                console.log('error logging out', e)
-              }
-              window.location.href = '/'
-            }}
-          >
-            Cancel
-          </Button>
-          <Button type="submit" style={'ctaDarkYellow'}>
-            Sign Up
-          </Button>
-        </HStack>
+    //     <HStack
+    //       alignment="center"
+    //       distribution="end"
+    //       css={{
+    //         gap: '10px',
+    //         width: '100%',
+    //         height: '80px',
+    //       }}
+    //     >
+    //       <Button
+    //         style={'ctaOutlineYellow'}
+    //         css={{ color: '$omnivoreGray', borderColor: 'rgba(0, 0, 0, 0.06)' }}
+    //         type="button"
+    //         onClick={async () => {
+    //           window.localStorage.removeItem('authVerified')
+    //           window.localStorage.removeItem('authToken')
+    //           try {
+    //             await logoutMutation()
+    //           } catch (e) {
+    //             console.log('error logging out', e)
+    //           }
+    //           window.location.href = '/'
+    //         }}
+    //       >
+    //         Cancel
+    //       </Button>
+    //       <Button type="submit" style={'ctaDarkYellow'}>
+    //         Sign Up
+    //       </Button>
+    //     </HStack>
 
-        <StyledText
-          style="action"
-          css={{
-            pt: '16px',
-            color: '$omnivoreLightGray',
-            textAlign: 'center',
-          }}
-        >
-          Already have an account?{' '}
-          <Link href="/auth/email-login" passHref legacyBehavior>
-            <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
-              Login instead
-            </StyledTextSpan>
-          </Link>
-        </StyledText>
-        <TermAndConditionsFooter />
-      </VStack>
-    </form>
-  );
+    //     <StyledText
+    //       style="action"
+    //       css={{
+    //         pt: '16px',
+    //         color: '$omnivoreLightGray',
+    //         textAlign: 'center',
+    //       }}
+    //     >
+    //       Already have an account?{' '}
+    //       <Link href="/auth/email-login" passHref legacyBehavior>
+    //         <StyledTextSpan style="actionLink" css={{ color: '$omnivoreGray' }}>
+    //           Login instead
+    //         </StyledTextSpan>
+    //       </Link>
+    //     </StyledText>
+    //     <TermAndConditionsFooter />
+    //   </VStack>
+    // </form>
+  )
 }