Merge pull request #72 from Lemoncode/feature/#65-reset-password-user-edit

feature/#65 reset user password

Author: manudous

src/common/hooks/index.ts

@@ -1 +1,2 @@
 export * from './form-field.hook';
+export * from './toogle.hook';

src/common/hooks/toogle.hook.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export const useToggle = (initialState: boolean) => {
+  const [isOpen, setIsOpen] = React.useState(initialState);
+
+  const onToggle = () => setIsOpen(!isOpen);
+
+  return {
+    isOpen,
+    onToggle,
+    setIsOpen,
+  };
+};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+interface Props {
+  open: boolean;
+  handleClose: () => void;
+}
+
+export const ConfirmResetDialog: React.FC<Props> = props => {
+  const { open, handleClose } = 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>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './confirm-reset-dialog.component';

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

@@ -0,0 +1,2 @@
+// TODO: ADD TESTS
+export const handleCopyPassword = (password: string) => navigator.clipboard.writeText(password);

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

@@ -1,41 +1,67 @@
 import React from 'react';
-import * as innerClasses from './edit-reset-password.styles';
-import { useWithTheme } from '#core/theme';
-import { Button, IconButton, TextField } from '@mui/material';
+import { Form, Formik } from 'formik';
+import { Button, IconButton } from '@mui/material';
 import { Visibility, VisibilityOff, ContentCopy } from '@mui/icons-material';
+import { TextFieldForm } from '#common/components';
+import { useToggle } from '#common/hooks';
+import { formValidation } from './validations';
 import { usePassword } from '../create/use-password.hook';
+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';
 
 export const EditResetPasswordComponent: React.FC = () => {
   const { showPassword, toggleShowPassword } = usePassword();
-  const classes = useWithTheme(innerClasses);
+
+  const { isOpen, onToggle } = useToggle(false);
+
   return (
     <div className={classes.root}>
       <div className={classes.sectionContainer}>
-        <div className={classes.passwordFieldContainer}>
-          <TextField
-            name="contraseña"
-            label="Nueva Contraseña"
-            type={showPassword ? 'text' : 'password'}
-            slotProps={{
-              input: {
-                endAdornment: (
-                  <IconButton onClick={toggleShowPassword}>
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                ),
-              },
-            }}
-          />
-          <IconButton onClick={() => {}} className={classes.icon}>
-            <ContentCopy />
-          </IconButton>
-        </div>
+        <Formik
+          initialValues={createEmptyInitialResetPassword()}
+          enableReinitialize={true}
+          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>
+
+              <div className={classes.buttonContainer}>
+                <Button type="button" variant="contained" disabled={!isValid || !dirty} onClick={onToggle}>
+                  Resetear Clave de Usuario
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
 
-        <div className={classes.buttonContainer}>
-          <Button type="submit" variant="contained">
-            Resetear Clave de Usuario
-          </Button>
-        </div>
+        <ConfirmResetDialog open={isOpen} handleClose={onToggle} />
       </div>
     </div>
   );

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

@@ -1,11 +1,16 @@
 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> = props => {
-  const { id } = props;
-  return <EditResetPasswordComponent id={id} />;
+export const EditResetPassword: React.FC<Props> = () => {
+  // const { id } = props;
+  return (
+    <>
+      <EditResetPasswordComponent />
+    </>
+  );
 };

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

@@ -1,28 +1,37 @@
 import { css } from '@emotion/css';
-import { Theme } from '@mui/material';
+import { theme } from '#core/theme';
 
-export const root = (theme: Theme) => css`
+export const root = css`
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: ${theme.spacing(4)};
 `;
 
-export const sectionContainer = (theme: Theme) => css`
+export const sectionContainer = css`
   border: 1px solid ${theme.palette.grey[300]};
   border-radius: 4px;
   padding: ${theme.spacing(3)};
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   min-height: 200px;
   gap: 16px;
 `;
 
+export const formContainer = css`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+`;
+
 export const passwordFieldContainer = css`
   display: flex;
   justify-content: center;
   gap: 16px;
+  width: 400px;
 
   @media (max-width: 768px) {
     grid-template-columns: 1fr;

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

@@ -0,0 +1,7 @@
+export interface InitalResetPassword {
+  contraseña: string;
+}
+
+export const createEmptyInitialResetPassword = (): InitalResetPassword => ({
+  contraseña: '',
+});

src/modules/users/edit-reset-password/validations/edit-reset-password.literals.ts

@@ -0,0 +1,3 @@
+export const validationMessages = {
+  contraseña: { notValid: 'Introduce una contraseña de al menos 8 caracteres.' },
+};

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

@@ -0,0 +1,16 @@
+import { createFormikValidation } from '@lemoncode/fonk-formik';
+import { validationMessages } from './edit-reset-password.literals';
+import { passwordValidation } from './password.validator';
+
+const validationSchema = {
+  field: {
+    contraseña: [
+      {
+        validator: passwordValidation,
+        message: validationMessages.contraseña.notValid,
+      },
+    ],
+  },
+};
+
+export const formValidation = createFormikValidation(validationSchema);

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

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

src/modules/users/edit-reset-password/validations/password.validator.ts

@@ -0,0 +1,16 @@
+import { FieldValidationFunctionAsync } from '@lemoncode/fonk';
+
+const validatorType = 'CHECK_PASSWORD_CHARACTER';
+let defaultMessage = 'Contraseña debe tener al menos 8 caracteres';
+
+export const passwordValidation: FieldValidationFunctionAsync = async fieldValidatorArgs => {
+  const { value, message = defaultMessage } = fieldValidatorArgs;
+
+  const succeeded = typeof value === 'string' && value.length >= 8;
+
+  return {
+    type: validatorType,
+    succeeded: succeeded,
+    message: succeeded ? '' : (message as string),
+  };
+};