alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

TODO GLD User password validation

master
Anna Ho hace 1 año
padre
a483b58e8d
commit
6613c9a705
Se han modificado 1 ficheros con 64 adiciones y 57 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +64
    -57
      src/pages/User/DetailPage/UserInformationCard.js

+ 64
- 57
src/pages/User/DetailPage/UserInformationCard.js Ver fichero

@@ -1,16 +1,16 @@
// material-ui
import {
FormControl,
FormControl,
IconButton,
Grid,
InputAdornment,
Grid,
InputAdornment,
Typography, FormLabel,
OutlinedInput,
} from '@mui/material';
import MainCard from "../../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useEffect, useState} from "react";
import { useForm } from "react-hook-form";
import { useEffect, useState } from "react";
import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
@@ -20,13 +20,13 @@ import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewRecord}) => {
const UserInformationCard = ({ isCollectData, updateUserObject, userData, isNewRecord }) => {
//const params = useParams();
const [currentUserData, setCurrentUserData] = React.useState({});
const [locked, setLocked] = useState(false);
const [showPassword, setShowPassword] = React.useState(false);
const [onReady, setOnReady] = useState(false);
const {register, getValues} = useForm()
const { register, getValues, formState: { errors }, } = useForm()

const handleClickShowPassword = () => setShowPassword((show) => !show);
const handleMouseDownPassword = () => setShowPassword(!showPassword);
@@ -40,10 +40,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco

useEffect(() => {
//if state data are ready and assign to different field
if (Object.keys(userData).length > 0 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
if (Object.keys(userData).length > 0 && currentUserData !== undefined && currentUserData.id !== undefined) {
setLocked(currentUserData.locked);
setOnReady(true);
}else if(isNewRecord){
} else if (isNewRecord) {
setLocked(false);
setOnReady(true);
}
@@ -52,7 +52,7 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
useEffect(() => {
//upload latest data to parent
const values = getValues();
const objectData ={
const objectData = {
...values,
locked: locked,
}
@@ -62,23 +62,23 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco

return (
!onReady ?
<LoadingComponent/>
<LoadingComponent />
:
<MainCard elevation={0}
border={false}
content={false}
sx={{margin: 0}}
border={false}
content={false}
sx={{ margin: 0 }}
>
<Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black"}}>
<Typography variant="h6" sx={{ mt: 2, ml: 3, mr: 1, borderBottom: "1px solid black" }}>
Information
</Typography>

<form>
<Grid container>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel required>Username:</FormLabel>
</Grid>

@@ -100,46 +100,53 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
</Grid>
</Grid>
{
isNewRecord?
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
<FormLabel required>Password:</FormLabel>
</Grid>
isNewRecord ?
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel required>Password:</FormLabel>
</Grid>

<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
{...register("password")}
id='password'
type={showPassword ? 'text' : 'password'}
disabled = {!isNewRecord}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
<Grid item xs={7} s={7} md={7} lg={6}>
<FormControl variant="outlined" fullWidth required>
<OutlinedInput
fullWidth
size="small"
{...register("password", {
minLength: {
value: 8,
message: "Must be at least 8 characters long",
},
validate: (value) => value % 2 === 0 || "The number of servings must be an even number",
})}
id='password'
type={showPassword ? 'text' : 'password'}
disabled={!isNewRecord}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Grid>
<span style={{ "color": "red" }}>{errors.password?.message}</span>
</Grid>
</Grid>
</Grid>: null
</Grid> : null
}

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel required >Full Name:</FormLabel>
</Grid>

@@ -168,10 +175,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
</Grid>
</Grid>

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel>Post:</FormLabel>
</Grid>

@@ -191,10 +198,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
</Grid>
</Grid>

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: 3 }}>
<Grid container alignItems={"center"}>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
sx={{ ml: 3, mr: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel required>Email:</FormLabel>
</Grid>

@@ -237,10 +244,10 @@ const UserInformationCard = ({isCollectData, updateUserObject,userData,isNewReco
</Grid>
</Grid> */}

<Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3}}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3 }}>
<Grid container>
<Grid item xs={4} s={4} md={4} lg={4}
sx={{ml: 3, mr: 3, mb:3, display: 'flex', alignItems: 'center'}}>
sx={{ ml: 3, mr: 3, mb: 3, display: 'flex', alignItems: 'center' }}>
<FormLabel required>Locked:</FormLabel>
</Grid>



Escribir Vista previa
Cargando…
Cancelar
Guardar