INTERMEDIO - feature/#73-Funcionalidad-reset-password-en-Editar-Usuario-a-mock-server

src/modules/users/edit-reset-password/api/edit-reset-password.api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export const updatePassword = async (password: string, id: string): Promise<boolean> => {
+  const response = await axios.put<boolean>(`/api/user/${id}`, { contraseña: password });
+
+  return response.data;
+};

src/modules/users/edit-reset-password/api/index.ts

@@ -0,0 +1 @@
+export * from './edit-reset-password.api';

src/modules/users/edit-reset-password/components/alerts-reset-password.componet.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Alert } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+
+interface Props {
+  handleClose: () => void;
+}
+
+export const SuccessAlertResetPassword: React.FC<Props> = props => {
+  const { handleClose } = props;
+  return (
+    <Alert icon={<CheckIcon fontSize="inherit" />} severity="success" onClose={handleClose}>
+      Contraseña reseteada exitosamente.
+    </Alert>
+  );
+};
+
+export const ErrorAlertResetPassword: React.FC<Props> = props => {
+  const { handleClose } = props;
+  return (
+    <Alert icon={<CheckIcon fontSize="inherit" />} severity="error" onClose={handleClose}>
+      Error: La contraseña no ha podido ser cambiada. Intente de nuevo.
+    </Alert>
+  );
+};

src/modules/users/edit-reset-password/components/confirm-reset-dialog.component.tsx

@@ -5,33 +5,39 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import { Spinner } from '#common/components/spinner/spinner.component.tsx';
 
 interface Props {
   open: boolean;
   handleClose: () => void;
+  onConfirm: () => void;
+  isLoading: boolean;
 }
 
 export const ConfirmResetDialog: React.FC<Props> = props => {
-  const { open, handleClose } = props;
+  const { open, handleClose, onConfirm, isLoading } = props;
 
   return (
-    <React.Fragment>
-      <Dialog open={open} onClose={handleClose}>
-        <DialogTitle id="alert-dialog-title">
-          {'¿Está seguro que desea resetear la contraseña de este usuario?'}
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            Si está seguro de cambiar la contraseña presiona CONFIRMAR, de lo contrario presiona CANCELAR
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleClose}>Cancelar</Button>
-          <Button onClick={handleClose} variant="contained" autoFocus>
-            Confirmar
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </React.Fragment>
+    <>
+      <Spinner isSpinnerShowing={isLoading} />
+      <React.Fragment>
+        <Dialog open={open} onClose={handleClose}>
+          <DialogTitle id="alert-dialog-title">
+            {'¿Está seguro que desea resetear la contraseña de este usuario?'}
+          </DialogTitle>
+          <DialogContent>
+            <DialogContentText id="alert-dialog-description">
+              Si está seguro de cambiar la contraseña presiona CONFIRMAR, de lo contrario presiona CANCELAR
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose}>Cancelar</Button>
+            <Button onClick={onConfirm} variant="contained" autoFocus>
+              Confirmar
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    </>
   );
 };

src/modules/users/edit-reset-password/components/index.ts

@@ -1 +1,2 @@
 export * from './confirm-reset-dialog.component';
+export * from './alerts-reset-password.componet';

src/modules/users/edit-reset-password/edit-reset-password.component.tsx

@@ -10,11 +10,25 @@ import { ConfirmResetDialog } from './components';
 import { handleCopyPassword } from './edit-reset-password.business';
 import { createEmptyInitialResetPassword } from './edit-reset-password.vm';
 import * as classes from './edit-reset-password.styles';
+import { useUpdateUserPasswordMutation } from './edit-reset-password.query.hook';
+import { ErrorAlertResetPassword, SuccessAlertResetPassword } from './components/alerts-reset-password.componet';
 
-export const EditResetPasswordComponent: React.FC = () => {
+interface Props {
+  userId: string;
+}
+
+export const EditResetPasswordComponent: React.FC<Props> = (props: Props) => {
+  const { userId } = props;
   const { showPassword, toggleShowPassword } = usePassword();
+  const { isOpen: isOpenDialog, onToggle: onToggleDialog } = useToggle(false);
+  const { isOpen: isOpenAlert, onToggle: onToggleAlert } = useToggle(false);
+  const { savePassword, isPending, isSuccess, isError } = useUpdateUserPasswordMutation();
 
-  const { isOpen, onToggle } = useToggle(false);
+  const handleConfirmPassword = (newPassword: string, userId: string) => {
+    savePassword({ password: newPassword, id: userId });
+    onToggleDialog();
+    onToggleAlert();
+  };
 
   return (
     <div className={classes.root}>
@@ -25,43 +39,54 @@ export const EditResetPasswordComponent: React.FC = () => {
           validate={formValidation.validateForm}
           onSubmit={() => {}}
         >
-          {({ values, isValid, dirty }) => (
-            <Form className={classes.formContainer}>
-              <div className={classes.passwordFieldContainer}>
-                <TextFieldForm
-                  name="contraseña"
-                  label="Contraseña"
-                  type={showPassword ? 'text' : 'password'}
-                  slotProps={{
-                    input: {
-                      endAdornment: (
-                        <IconButton onClick={toggleShowPassword}>
-                          {showPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                      ),
-                    },
-                  }}
-                />
-                <IconButton
-                  onClick={() => {
-                    handleCopyPassword(values.contraseña || '');
-                  }}
-                  className={classes.icon}
-                >
-                  <ContentCopy />
-                </IconButton>
-              </div>
+          {({ values, isValid, dirty, resetForm }) => (
+            <>
+              <Form className={classes.formContainer}>
+                <div className={classes.passwordFieldContainer}>
+                  <TextFieldForm
+                    name="contraseña"
+                    label="Contraseña"
+                    type={showPassword ? 'text' : 'password'}
+                    slotProps={{
+                      input: {
+                        endAdornment: (
+                          <IconButton onClick={toggleShowPassword}>
+                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                          </IconButton>
+                        ),
+                      },
+                    }}
+                  />
+                  <IconButton
+                    onClick={() => {
+                      handleCopyPassword(values.contraseña || '');
+                    }}
+                    className={classes.icon}
+                  >
+                    <ContentCopy />
+                  </IconButton>
+                </div>
 
-              <div className={classes.buttonContainer}>
-                <Button type="button" variant="contained" disabled={!isValid || !dirty} onClick={onToggle}>
-                  Resetear Clave de Usuario
-                </Button>
-              </div>
-            </Form>
+                <div className={classes.buttonContainer}>
+                  <Button type="button" variant="contained" disabled={!isValid || !dirty} onClick={onToggleDialog}>
+                    Resetear Clave de Usuario
+                  </Button>
+                </div>
+              </Form>
+              <ConfirmResetDialog
+                open={isOpenDialog}
+                isLoading={isPending}
+                handleClose={onToggleDialog}
+                onConfirm={() => {
+                  handleConfirmPassword(values.contraseña, userId);
+                  resetForm();
+                }}
+              />
+            </>
           )}
         </Formik>
-
-        <ConfirmResetDialog open={isOpen} handleClose={onToggle} />
+        {isSuccess && isOpenAlert && <SuccessAlertResetPassword handleClose={onToggleAlert} />}
+        {isError && isOpenAlert && <ErrorAlertResetPassword handleClose={onToggleAlert} />}
       </div>
     </div>
   );

src/modules/users/edit-reset-password/edit-reset-password.pod.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { EditResetPasswordComponent } from './edit-reset-password.component';
 
-// TO DO: prop id se usará cuando el endpoint de reseteo de clave esté listo
 interface Props {
   id: string;
 }
 
-export const EditResetPassword: React.FC<Props> = () => {
-  // const { id } = props;
+export const EditResetPassword: React.FC<Props> = props => {
+  const { id } = props;
   return (
     <>
-      <EditResetPasswordComponent />
+      <EditResetPasswordComponent userId={id} />
     </>
   );
 };

src/modules/users/edit-reset-password/edit-reset-password.query.hook.ts

@@ -0,0 +1,32 @@
+import { useMutation } from '@tanstack/react-query';
+import { updatePassword } from './api';
+
+interface ParamsMutationPassword {
+  password: string;
+  id: string;
+}
+
+interface UseSavePasswordMutationResult {
+  savePassword: (params: ParamsMutationPassword) => void;
+  isPending: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+}
+
+export const useUpdateUserPasswordMutation = (): UseSavePasswordMutationResult => {
+  const {
+    mutate: savePassword,
+    isPending,
+    isSuccess,
+    isError,
+  } = useMutation({
+    mutationFn: ({ password, id }: ParamsMutationPassword) => updatePassword(password, id),
+  });
+
+  return {
+    savePassword,
+    isPending,
+    isSuccess,
+    isError,
+  };
+};