Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4332 from omnivore-app/fix/web-confirm-verification-tokens

Browse Source 
Handle email verification error messages
This commit is contained in:
Jackson Harper
2024-08-27 14:38:02 +08:00
committed by GitHub
parent 1a2dbf6034 3dc34b2e41
commit 825da30d3d
5 changed files with 73 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/components/elements/StyledText.tsx
View File

@ -4,7 +4,7 @@ const textVariants = {
style: {
body: {
fontSize: '$2',
lineHeight: '1.25',
lineHeight: '1.50',
},
logoTitle: {
fontFamily: 'Inter',

7
packages/web/components/templates/auth/EmailForgotPassword.tsx
View File

@ -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',

7
packages/web/components/templates/auth/EmailLogin.tsx
View File

@ -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',

2
packages/web/components/templates/auth/EmailSignup.tsx
View File

@ -150,7 +150,7 @@ export function EmailSignup(): JSX.Element {
<VStack
alignment="center"
css={{
padding: '16px',
padding: '20px',
minWidth: '340px',
width: '70vw',
maxWidth: '576px',

65
packages/web/pages/auth/confirm-email.tsx Normal file
View File

@ -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>
)
}