diff --git a/src/pages/EditProfile/index.tsx b/src/pages/EditProfile/index.tsx index 2c82619..17f97fd 100644 --- a/src/pages/EditProfile/index.tsx +++ b/src/pages/EditProfile/index.tsx @@ -3,7 +3,6 @@ import CreateOutlinedIcon from '@mui/icons-material/CreateOutlined' import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore' import { Avatar, InputLabel, MenuItem, TextField } from '@mui/material' import * as countriesList from 'countries-list' -import { useState } from 'react' import { useForm } from 'react-hook-form' import { Link } from 'react-router-dom' import { z } from 'zod' diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx index 24f4d26..4bbdc2a 100644 --- a/src/pages/Settings/index.tsx +++ b/src/pages/Settings/index.tsx @@ -1,8 +1,13 @@ +import { zodResolver } from '@hookform/resolvers/zod' import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore' import { Avatar, InputLabel, TextField } from '@mui/material' +import { useForm } from 'react-hook-form' import { Link } from 'react-router-dom' +import { z } from 'zod' import avatarPlaceholder from '../../assets/avatarPlaceholder.png' +import { useModalContext } from '../../contexts/ModalContext' +import { api } from '../../lib/axios' import { InputsContainer, MainContainer, @@ -11,7 +16,47 @@ import { TextContainer, } from './styles' +const editUserPasswordSchema = z.object({ + oldPassword: z.string().min(6, 'Password must be at least 6 characters'), + newPassword: z.string().min(6, 'Password must be at least 6 characters'), + confirmPassword: z.string().min(6, 'Password must be at least 6 characters'), +}) + +type EditUserPasswordSchema = z.infer + export function Settings() { + const { openUpdateProfileModal, openAlertErrorModal } = useModalContext() + + const { + register, + handleSubmit, + reset, + formState: { errors }, + } = useForm({ + resolver: zodResolver(editUserPasswordSchema), + }) + + async function handleUpdateUserPassword(data: EditUserPasswordSchema) { + const { oldPassword, newPassword, confirmPassword } = data + + if (newPassword === confirmPassword) { + const editUserPassResponse = await api.put(`/user/edit/pass`, { + newPassword, + oldPassword, + }) + + if (editUserPassResponse.status === 200) { + openUpdateProfileModal() + } else { + openAlertErrorModal() + } + } else { + openAlertErrorModal() + } + + reset() + } + return ( @@ -24,7 +69,7 @@ export function Settings() { - + Digite a senha atual @@ -33,7 +78,8 @@ export function Settings() { fullWidth type="text" id="currentPassword" - name="currentPassword" + error={!!errors.oldPassword} + {...register('oldPassword')} placeholder="Digite a senha atual" InputLabelProps={{ shrink: true, @@ -46,8 +92,9 @@ export function Settings() { fullWidth type="text" id="newPassword" - name="newPassword" placeholder="Digite a nova senha" + error={!!errors.newPassword} + {...register('newPassword')} InputLabelProps={{ shrink: true, }} @@ -59,16 +106,17 @@ export function Settings() { fullWidth type="text" id="confirmPassword" - name="confirmPassword" placeholder="Repita a senha" + error={!!errors.confirmPassword} + {...register('confirmPassword')} InputLabelProps={{ shrink: true, }} > + + Atualizar Senha + - - Atualizar - Clique aqui para editar seu perfil diff --git a/src/pages/Settings/styles.ts b/src/pages/Settings/styles.ts index 7373379..0a7e035 100644 --- a/src/pages/Settings/styles.ts +++ b/src/pages/Settings/styles.ts @@ -39,7 +39,7 @@ export const MainContainer = styled.div` } ` -export const InputsContainer = styled.div` +export const InputsContainer = styled.form` display: flex; flex-direction: column; gap: 0.2rem;