Files
omnivore/packages/web/pages/auth/confirm-email.tsx
2024-08-27 14:14:30 +08:00

66 lines
2.0 KiB
TypeScript

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