144 lines
4.0 KiB
TypeScript
144 lines
4.0 KiB
TypeScript
import { zodResolver } from '@hookform/resolvers/zod';
|
||
import Box from '@mui/material/Box';
|
||
import Button from '@mui/material/Button';
|
||
import IconButton from '@mui/material/IconButton';
|
||
import InputAdornment from '@mui/material/InputAdornment';
|
||
import Link from '@mui/material/Link';
|
||
import { useBoolean } from 'minimal-shared/hooks';
|
||
import { useForm } from 'react-hook-form';
|
||
import { AnimateLogoRotate } from 'src/components/animate';
|
||
import { Field, Form } from 'src/components/hook-form';
|
||
import { Iconify } from 'src/components/iconify';
|
||
import { RouterLink } from 'src/routes/components';
|
||
import { paths } from 'src/routes/paths';
|
||
import { z as zod } from 'zod';
|
||
import { FormDivider } from '../../../components/form-divider';
|
||
import { FormHead } from '../../../components/form-head';
|
||
import { FormSocials } from '../../../components/form-socials';
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
export type SignInSchemaType = zod.infer<typeof SignInSchema>;
|
||
|
||
export const SignInSchema = zod.object({
|
||
email: zod
|
||
.string()
|
||
.min(1, { message: 'Email is required!' })
|
||
.email({ message: 'Email must be a valid email address!' }),
|
||
password: zod
|
||
.string()
|
||
.min(1, { message: 'Password is required!' })
|
||
.min(6, { message: 'Password must be at least 6 characters!' }),
|
||
});
|
||
|
||
// ----------------------------------------------------------------------
|
||
|
||
export function CenteredSignInView() {
|
||
const showPassword = useBoolean();
|
||
|
||
const defaultValues: SignInSchemaType = {
|
||
email: '',
|
||
password: '',
|
||
};
|
||
|
||
const methods = useForm<SignInSchemaType>({
|
||
resolver: zodResolver(SignInSchema),
|
||
defaultValues,
|
||
});
|
||
|
||
const {
|
||
handleSubmit,
|
||
formState: { isSubmitting },
|
||
} = methods;
|
||
|
||
const onSubmit = handleSubmit(async (data) => {
|
||
try {
|
||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||
console.info('DATA', data);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
});
|
||
|
||
const renderForm = () => (
|
||
<Box sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
|
||
<Field.Text name="email" label="Email address" slotProps={{ inputLabel: { shrink: true } }} />
|
||
|
||
<Box sx={{ gap: 1.5, display: 'flex', flexDirection: 'column' }}>
|
||
<Link
|
||
component={RouterLink}
|
||
href={paths.authDemo.centered.resetPassword}
|
||
variant="body2"
|
||
color="inherit"
|
||
sx={{ alignSelf: 'flex-end' }}
|
||
>
|
||
Forgot password?
|
||
</Link>
|
||
|
||
<Field.Text
|
||
name="password"
|
||
label="Password"
|
||
placeholder="6+ characters"
|
||
type={showPassword.value ? 'text' : 'password'}
|
||
slotProps={{
|
||
inputLabel: { shrink: true },
|
||
input: {
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton onClick={showPassword.onToggle} edge="end">
|
||
<Iconify
|
||
icon={showPassword.value ? 'solar:eye-bold' : 'solar:eye-closed-bold'}
|
||
/>
|
||
</IconButton>
|
||
</InputAdornment>
|
||
),
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
<Button
|
||
fullWidth
|
||
color="inherit"
|
||
size="large"
|
||
type="submit"
|
||
variant="contained"
|
||
loading={isSubmitting}
|
||
loadingIndicator="Sign in..."
|
||
>
|
||
Sign in
|
||
</Button>
|
||
</Box>
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<AnimateLogoRotate sx={{ mb: 3, mx: 'auto' }} />
|
||
|
||
<FormHead
|
||
title="Sign in to your account"
|
||
description={
|
||
<>
|
||
{`Don’t have an account? `}
|
||
<Link component={RouterLink} href={paths.authDemo.centered.signUp} variant="subtitle2">
|
||
Get started
|
||
</Link>
|
||
</>
|
||
}
|
||
/>
|
||
|
||
<Form methods={methods} onSubmit={onSubmit}>
|
||
{renderForm()}
|
||
</Form>
|
||
|
||
<FormDivider />
|
||
|
||
<FormSocials
|
||
signInWithGoogle={() => {}}
|
||
singInWithGithub={() => {}}
|
||
signInWithTwitter={() => {}}
|
||
/>
|
||
</>
|
||
);
|
||
}
|