128 lines
3.9 KiB
TypeScript
128 lines
3.9 KiB
TypeScript
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: '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' }}>
|
|
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>
|
|
)
|
|
}
|