120 lines
4.1 KiB
TypeScript
120 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
// Next Imports
|
|
import Link from 'next/link'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
// MUI Imports
|
|
import useMediaQuery from '@mui/material/useMediaQuery'
|
|
import { styled, useTheme } from '@mui/material/styles'
|
|
import Typography from '@mui/material/Typography'
|
|
import Button from '@mui/material/Button'
|
|
|
|
// Third-party Imports
|
|
import classnames from 'classnames'
|
|
|
|
// Type Imports
|
|
import type { SystemMode } from '@core/types'
|
|
import type { Locale } from '@configs/i18n'
|
|
|
|
// Component Imports
|
|
import DirectionalIcon from '@components/DirectionalIcon'
|
|
import Logo from '@components/layout/shared/Logo'
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
// Hook Imports
|
|
import { useImageVariant } from '@core/hooks/useImageVariant'
|
|
import { useSettings } from '@core/hooks/useSettings'
|
|
|
|
// Util Imports
|
|
import { getLocalizedUrl } from '@/utils/i18n'
|
|
|
|
// Styled Custom Components
|
|
const ForgotPasswordIllustration = styled('img')(({ theme }) => ({
|
|
zIndex: 2,
|
|
blockSize: 'auto',
|
|
maxBlockSize: 650,
|
|
maxInlineSize: '100%',
|
|
margin: theme.spacing(12),
|
|
[theme.breakpoints.down(1536)]: {
|
|
maxBlockSize: 550
|
|
},
|
|
[theme.breakpoints.down('lg')]: {
|
|
maxBlockSize: 450
|
|
}
|
|
}))
|
|
|
|
const MaskImg = styled('img')({
|
|
blockSize: 'auto',
|
|
maxBlockSize: 355,
|
|
inlineSize: '100%',
|
|
position: 'absolute',
|
|
insetBlockEnd: 0,
|
|
zIndex: -1
|
|
})
|
|
|
|
const ForgotPassword = ({ mode }: { mode: SystemMode }) => {
|
|
// Vars
|
|
const darkImg = '/images/pages/auth-mask-dark.png'
|
|
const lightImg = '/images/pages/auth-mask-light.png'
|
|
const darkIllustration = '/images/illustrations/auth/v2-forgot-password-dark.png'
|
|
const lightIllustration = '/images/illustrations/auth/v2-forgot-password-light.png'
|
|
|
|
// Hooks
|
|
const { lang: locale } = useParams()
|
|
const { settings } = useSettings()
|
|
const theme = useTheme()
|
|
const hidden = useMediaQuery(theme.breakpoints.down('md'))
|
|
const authBackground = useImageVariant(mode, lightImg, darkImg)
|
|
|
|
const characterIllustration = useImageVariant(mode, lightIllustration, darkIllustration)
|
|
|
|
return (
|
|
<div className='flex bs-full justify-center'>
|
|
<div
|
|
className={classnames(
|
|
'flex bs-full items-center justify-center flex-1 min-bs-[100dvh] relative p-6 max-md:hidden',
|
|
{
|
|
'border-ie': settings.skin === 'bordered'
|
|
}
|
|
)}
|
|
>
|
|
<ForgotPasswordIllustration src={characterIllustration} alt='character-illustration' />
|
|
{!hidden && <MaskImg alt='mask' src={authBackground} />}
|
|
</div>
|
|
<div className='flex justify-center items-center bs-full bg-backgroundPaper !min-is-full p-6 md:!min-is-[unset] md:p-12 md:is-[480px]'>
|
|
<Link
|
|
href={getLocalizedUrl('/login', locale as Locale)}
|
|
className='absolute block-start-5 sm:block-start-[33px] inline-start-6 sm:inline-start-[38px]'
|
|
>
|
|
<Logo />
|
|
</Link>
|
|
<div className='flex flex-col gap-6 is-full sm:is-auto md:is-full sm:max-is-[400px] md:max-is-[unset] mbs-8 sm:mbs-11 md:mbs-0'>
|
|
<div className='flex flex-col gap-1'>
|
|
<Typography variant='h4'>Forgot Password 🔒</Typography>
|
|
<Typography>Enter your email and we'll send you instructions to reset your password</Typography>
|
|
</div>
|
|
<form noValidate autoComplete='off' onSubmit={e => e.preventDefault()} className='flex flex-col gap-6'>
|
|
<CustomTextField autoFocus fullWidth label='Email' placeholder='Enter your email' />
|
|
<Button fullWidth variant='contained' type='submit'>
|
|
Send Reset Link
|
|
</Button>
|
|
<Typography className='flex justify-center items-center' color='primary.main'>
|
|
<Link href={getLocalizedUrl('/login', locale as Locale)} className='flex items-center gap-1.5'>
|
|
<DirectionalIcon
|
|
ltrIconClass='tabler-chevron-left'
|
|
rtlIconClass='tabler-chevron-right'
|
|
className='text-xl'
|
|
/>
|
|
<span>Back to login</span>
|
|
</Link>
|
|
</Typography>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ForgotPassword
|