Merge pull request #57 from Lemoncode/feature/#37-Front-End_Build-layout-reset-password-on-Editar-Usuario

Feature/#37 front end build layout reset password on editar usuario

Author: manudous

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

@@ -0,0 +1,42 @@
+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 { Visibility, VisibilityOff, ContentCopy } from '@mui/icons-material';
+import { usePassword } from '../create/use-password.hook';
+
+export const EditResetPasswordComponent: React.FC = () => {
+  const { showPassword, toggleShowPassword } = usePassword();
+  const classes = useWithTheme(innerClasses);
+  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>
+
+        <div className={classes.buttonContainer}>
+          <Button type="submit" variant="contained">
+            Resetear Clave de Usuario
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,5 +1,11 @@
 import React from 'react';
+import { EditResetPasswordComponent } from './edit-reset-password.component';
 
-export const EditResetPassword: React.FC = () => {
-  return <h3>Reset Password</h3>;
+interface Props {
+  id: string;
+}
+
+export const EditResetPassword: React.FC<Props> = props => {
+  const { id } = props;
+  return <EditResetPasswordComponent id={id} />;
 };

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

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

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

@@ -1 +1,3 @@
 export * from './edit-reset-password.pod';
+export * from './edit-reset-password.component';
+export * from './edit-reset-password.styles';

src/scenes/_auth/edit-user/edit-user.scene.tsx

@@ -31,7 +31,7 @@ export const UserScene: React.FC = () => {
           <EditUserSheet id={id} />
         </TabPanel>
         <TabPanel value={activeTab} index={TabIndex.RESET_PASSWORD}>
-          <EditResetPassword />
+          <EditResetPassword id={id} />
         </TabPanel>
       </Paper>
     </div>