edit user pass

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'

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<typeof editUserPasswordSchema>
+
 export function Settings() {
+  const { openUpdateProfileModal, openAlertErrorModal } = useModalContext()
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<EditUserPasswordSchema>({
+    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 (
     <SettingsContainer>
       <Link to="/meus-projetos">
@@ -24,7 +69,7 @@ export function Settings() {
       <Avatar alt="" src={avatarPlaceholder} sx={{ width: 122, height: 122 }} />
 
       <MainContainer>
-        <InputsContainer>
+        <InputsContainer onSubmit={handleSubmit(handleUpdateUserPassword)}>
           <InputLabel htmlFor="currentPassword">
             Digite a senha atual
           </InputLabel>
@@ -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,
             }}
           ></TextField>
+          <StyledButton fullWidth type="submit" variant="contained">
+            Atualizar Senha
+          </StyledButton>
         </InputsContainer>
-        <StyledButton fullWidth type="button" variant="contained">
-          Atualizar
-        </StyledButton>
 
         <Link to="/editar-perfil" className="Settings">
           Clique aqui para editar seu perfil

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;