122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
'use client'
|
|
import Button from '@/components/ui/Button'
|
|
import Typography from '@/components/ui/Typography'
|
|
import FormGroup from '@/components/ui/form/FormGroup'
|
|
import Input from '@/components/ui/form/Input'
|
|
import PasswordInput from '@/components/ui/form/PasswordInput'
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch'
|
|
import useManageError from '@/hooks/useManageError'
|
|
import { addAlert } from '@/state/feedbackSlice'
|
|
import { nanoid } from '@reduxjs/toolkit'
|
|
import { register } from 'entgamers-database/frontend/session'
|
|
import { useFormik } from 'formik'
|
|
import { type FC } from 'react'
|
|
import { object, ref, string } from 'yup'
|
|
|
|
interface RegisterData {
|
|
email: string
|
|
password: string
|
|
passwordConfirmation: string
|
|
}
|
|
|
|
const RegisterSchema = object({
|
|
email: string().email('El correo electrónico no es válido').required('El correo electrónico es requerido'),
|
|
password: string()
|
|
.min(6, 'La contraseña debe tener al menos 6 caracteres')
|
|
.matches(/[a-z]/, 'La contraseña debe tener al menos una letra minúscula')
|
|
.matches(/[A-Z]/, 'La contraseña debe tener al menos una letra mayúscula')
|
|
.matches(/[0-9]/, 'La contraseña debe tener al menos un número')
|
|
.required('La contraseña es requerida'),
|
|
passwordConfirmation: string().oneOf([ref('password')], 'Las contraseñas no coinciden').required('La confirmación de la contraseña es requerida')
|
|
})
|
|
|
|
const RegisterForm: FC = () => {
|
|
const dispatch = useAppDispatch()
|
|
const { manageError } = useManageError()
|
|
|
|
const formik = useFormik<RegisterData>({
|
|
initialValues: {
|
|
email: '',
|
|
password: '',
|
|
passwordConfirmation: ''
|
|
},
|
|
onSubmit: async ({ email, password }) => {
|
|
try {
|
|
await register(email, password)
|
|
dispatch(addAlert({
|
|
id: nanoid(),
|
|
title: 'Registro completado',
|
|
message: 'Ahora puedes iniciar sesión',
|
|
severity: 'success'
|
|
}))
|
|
formik.resetForm()
|
|
} catch (error) {
|
|
manageError(error, 'Error mientras se registraba', 'Error desconocido mientras se registraba', 'error')
|
|
}
|
|
},
|
|
validationSchema: RegisterSchema,
|
|
validateOnMount: true
|
|
})
|
|
|
|
return (
|
|
<form
|
|
onSubmit={formik.handleSubmit}
|
|
>
|
|
<FormGroup>
|
|
<label htmlFor="email">Correo electrónico</label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
onChange={formik.handleChange}
|
|
value={formik.values.email}
|
|
status={formik.touched.email !== undefined && formik.errors.email !== undefined ? 'danger' : undefined}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
/>
|
|
{formik.touched.email !== undefined && formik.errors.email !== undefined && (
|
|
<Typography variant="caption" color="danger">{formik.errors.email}</Typography>
|
|
)}
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<label htmlFor="password">Contraseña</label>
|
|
<PasswordInput
|
|
id="password"
|
|
name="password"
|
|
onChange={formik.handleChange}
|
|
value={formik.values.password}
|
|
status={formik.touched.password !== undefined && formik.errors.password !== undefined ? 'danger' : undefined}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
/>
|
|
{formik.touched.password !== undefined && formik.errors.password !== undefined && (
|
|
<Typography variant="caption" color="danger">{formik.errors.password}</Typography>
|
|
)}
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<label htmlFor="passwordConfirmation">Confirmación de la contraseña</label>
|
|
<PasswordInput
|
|
id="passwordConfirmation"
|
|
name="passwordConfirmation"
|
|
onChange={formik.handleChange}
|
|
value={formik.values.passwordConfirmation}
|
|
status={formik.touched.passwordConfirmation !== undefined && formik.errors.passwordConfirmation !== undefined ? 'danger' : undefined}
|
|
onBlur={formik.handleBlur}
|
|
fullWidth
|
|
/>
|
|
{formik.touched.passwordConfirmation !== undefined && formik.errors.passwordConfirmation !== undefined && (
|
|
<Typography variant="caption" color="danger">{formik.errors.passwordConfirmation}</Typography>
|
|
)}
|
|
</FormGroup>
|
|
<FormGroup>
|
|
<Button
|
|
type="submit"
|
|
>
|
|
Registrarse
|
|
</Button>
|
|
</FormGroup>
|
|
</form>
|
|
)
|
|
}
|
|
export default RegisterForm
|