Make digest refresh less

packages/web/components/templates/auth/EmailForgotPassword.tsx

@@ -1,128 +0,0 @@
-import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { useEffect, useRef, useState } from 'react'
-import { BorderedFormInput, FormLabel } from '../../elements/FormElements'
-import { fetchEndpoint } from '../../../lib/appConfig'
-import { logoutMutation } from '../../../lib/networking/mutations/logoutMutation'
-import { useRouter } from 'next/router'
-import { formatMessage } from '../../../locales/en/messages'
-import { parseErrorCodes } from '../../../lib/queryParamParser'
-import { Recaptcha } from '../../elements/Recaptcha'
-
-const ForgotPasswordForm = (): JSX.Element => {
-  const [email, setEmail] = useState<string | undefined>()
-
-  return (
-    <VStack css={{ width: '100%', minWidth: '320px', gap: '16px', pb: '16px' }}>
-      <VStack css={{ width: '100%', gap: '5px' }}>
-        <FormLabel className="required" css={{ color: '#D9D9D9' }}>
-          Email
-        </FormLabel>
-        <BorderedFormInput
-          key="email"
-          type="email"
-          name="email"
-          value={email}
-          placeholder="Email"
-          autoFocus={true}
-          css={{ backgroundColor: '#2A2A2A', color: 'white', border: 'unset' }}
-          onChange={(e) => {
-            e.preventDefault()
-            setEmail(e.target.value)
-          }}
-        />
-      </VStack>
-    </VStack>
-  )
-}
-
-export function EmailForgotPassword(): JSX.Element {
-  const router = useRouter()
-  const [email, setEmail] = useState<string>('')
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
-  const recaptchaTokenRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (!router.isReady) return
-    const errorCode = parseErrorCodes(router.query)
-    const errorMsg = errorCode
-      ? formatMessage({ id: `error.${errorCode}` })
-      : undefined
-    setErrorMessage(errorMsg)
-  }, [router.isReady, router.query])
-
-  return (
-    <form action={`${fetchEndpoint}/auth/forgot-password`} method="POST">
-      <VStack
-        alignment="center"
-        css={{
-          padding: '16px',
-          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' }}>
-          Reset your password
-        </StyledText>
-
-        <ForgotPasswordForm />
-
-        {process.env.NEXT_PUBLIC_RECAPTCHA_CHALLENGE_SITE_KEY && (
-          <>
-            <Recaptcha
-              setRecaptchaToken={(token) => {
-                if (recaptchaTokenRef.current) {
-                  recaptchaTokenRef.current.value = token
-                } else {
-                  console.log('error updating recaptcha token')
-                }
-              }}
-            />
-            <input
-              ref={recaptchaTokenRef}
-              type="hidden"
-              name="recaptchaToken"
-            />
-          </>
-        )}
-
-        {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-        <Button type="submit" style="ctaBlue" css={{ my: '20px' }}>
-          Reset Password
-        </Button>
-        <Button
-          style="ghost"
-          onClick={async (e) => {
-            e.preventDefault()
-            window.localStorage.removeItem('authVerified')
-            window.localStorage.removeItem('authToken')
-            try {
-              await logoutMutation()
-            } catch (e) {
-              console.log('error logging out', e)
-            }
-            window.location.href = '/'
-          }}
-        >
-          <StyledText
-            css={{
-              color: '$omnivoreLightGray',
-              textDecoration: 'underline',
-              cursor: 'pointer',
-            }}
-          >
-            Cancel
-          </StyledText>
-        </Button>
-      </VStack>
-    </form>
-  )
-}