Add page for handling verification token errors
This commit is contained in:
65
packages/web/pages/auth/confirm-email.tsx
Normal file
65
packages/web/pages/auth/confirm-email.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user