|  |  | 
 |  |  |     DeleteButton, | 
 |  |  |     PasswordInput, | 
 |  |  | } from 'react-admin'; | 
 |  |  | import { useWatch, useFormContext } from "react-hook-form"; | 
 |  |  | import { useFormContext } from 'react-hook-form'; | 
 |  |  | import { Stack, Grid, Box, Typography } from '@mui/material'; | 
 |  |  | import * as Common from '@/utils/common'; | 
 |  |  | import { EDIT_MODE } from '@/config/setting'; | 
 |  |  | 
 |  |  | import TreeSelectInput from "../components/TreeSelectInput"; | 
 |  |  |  | 
 |  |  | const FormToolbar = () => { | 
 |  |  |     const { getValues } = useFormContext(); | 
 |  |  |     const { setValue, getValues } = useFormContext(); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Toolbar sx={{ justifyContent: 'space-between' }}> | 
 |  |  |             <SaveButton /> | 
 |  |  |             <DeleteButton mutationMode="optimistic" /> | 
 |  |  |         </Toolbar> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const PasswordInputContainer = () => { | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const { setValue } = useFormContext(); | 
 |  |  |     const record = useRecordContext(); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         setTimeout(() => { | 
 |  |  |             if (record && record.password) { | 
 |  |  |                 setValue('password', ''); | 
 |  |  |             } | 
 |  |  |         }, 200) | 
 |  |  |     }, [setValue, record]); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <Typography variant="h6" gutterBottom> | 
 |  |  |                 {translate('common.edit.title.changePwd')} | 
 |  |  |             </Typography> | 
 |  |  |             <Stack direction='row' gap={2}> | 
 |  |  |                 <PasswordInput | 
 |  |  |                     label="table.field.user.password" | 
 |  |  |                     source="password" | 
 |  |  |                 /> | 
 |  |  |                 <PasswordInput | 
 |  |  |                     label="table.field.user.confirmPwd" | 
 |  |  |                     source="confirmPassword" | 
 |  |  |                 /> | 
 |  |  |             </Stack> | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } | 
 |  |  |  | 
 |  |  | 
 |  |  |             warnWhenUnsavedChanges | 
 |  |  |             toolbar={<FormToolbar />} | 
 |  |  |             mode="onTouched" | 
 |  |  |             defaultValues={{}} | 
 |  |  |             validate={(values) => { | 
 |  |  |                 const errors = {}; | 
 |  |  |                 if (!values.username) { | 
 |  |  | 
 |  |  |                         errors.email = error; | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |                 if (!values.password) { | 
 |  |  |                     errors.password = 'ra.validation.required'; | 
 |  |  |                 } | 
 |  |  |                 if (values.password && values.password !== values.confirmPassword) { | 
 |  |  |                     errors.confirmPassword = 'validate.pwdMisMatch'; | 
 |  |  |                 } | 
 |  |  |                 console.log(values); | 
 |  |  |  | 
 |  |  |                 return errors; | 
 |  |  |             }} | 
 |  |  |         > | 
 |  |  | 
 |  |  |                             parse={v => v} | 
 |  |  |                         /> | 
 |  |  |                     </Stack> | 
 |  |  |                     <Typography variant="h6" gutterBottom> | 
 |  |  |                         {translate('common.edit.title.changePwd')} | 
 |  |  |                     </Typography> | 
 |  |  |                     <Stack direction='row' gap={2}> | 
 |  |  |                         <PasswordInput | 
 |  |  |                             label="table.field.user.password" | 
 |  |  |                             source="password" | 
 |  |  |                         /> | 
 |  |  |                         <PasswordInput | 
 |  |  |                             label="table.field.user.confirmPwd" | 
 |  |  |                             source="confirmPassword" | 
 |  |  |                             value={record?.password} | 
 |  |  |                         /> | 
 |  |  |                     </Stack> | 
 |  |  |                     <PasswordInputContainer /> | 
 |  |  |                 </Grid> | 
 |  |  |                 <Grid item xs={12} md={4}> | 
 |  |  |                     <Typography variant="h6" gutterBottom> |