// ** React Imports import { ReactNode } from 'react' // ** Next Import import Link from 'next/link' // ** MUI Components import Button from '@mui/material/Button' import TextField from '@mui/material/TextField' import Box, { BoxProps } from '@mui/material/Box' import useMediaQuery from '@mui/material/useMediaQuery' import { styled, useTheme } from '@mui/material/styles' import Typography, { TypographyProps } from '@mui/material/Typography' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Configs import themeConfig from 'src/configs/themeConfig' // ** Layout Import import BlankLayout from 'src/@core/layouts/BlankLayout' // ** Hooks import { useSettings } from 'src/@core/hooks/useSettings' // ** Demo Imports import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2' // Styled Components const ForgotPasswordIllustrationWrapper = styled(Box)(({ theme }) => ({ padding: theme.spacing(20), paddingRight: '0 !important', [theme.breakpoints.down('lg')]: { padding: theme.spacing(10) } })) const ForgotPasswordIllustration = styled('img')(({ theme }) => ({ maxWidth: '48rem', [theme.breakpoints.down('xl')]: { maxWidth: '38rem' }, [theme.breakpoints.down('lg')]: { maxWidth: '30rem' } })) const RightWrapper = styled(Box)(({ theme }) => ({ width: '100%', [theme.breakpoints.up('md')]: { maxWidth: 400 }, [theme.breakpoints.up('lg')]: { maxWidth: 450 } })) const BoxWrapper = styled(Box)(({ theme }) => ({ width: '100%', [theme.breakpoints.down('md')]: { maxWidth: 400 } })) const TypographyStyled = styled(Typography)(({ theme }) => ({ fontWeight: 600, letterSpacing: '0.18px', marginBottom: theme.spacing(1.5), [theme.breakpoints.down('md')]: { marginTop: theme.spacing(8) } })) const LinkStyled = styled(Link)(({ theme }) => ({ display: 'flex', '& svg': { mr: 1.5 }, alignItems: 'center', textDecoration: 'none', justifyContent: 'center', color: theme.palette.primary.main })) const ForgotPassword = () => { // ** Hooks const theme = useTheme() const { settings } = useSettings() // ** Vars const { skin } = settings const hidden = useMediaQuery(theme.breakpoints.down('md')) const imageSource = skin === 'bordered' ? 'auth-v2-forgot-password-illustration-bordered' : 'auth-v2-forgot-password-illustration' return ( {!hidden ? ( ) : null} {themeConfig.templateName} Forgot Password? 🔒 Enter your email and we′ll send you instructions to reset your password
e.preventDefault()}> Back to login
) } ForgotPassword.guestGuard = true ForgotPassword.getLayout = (page: ReactNode) => {page} export default ForgotPassword