import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
useTranslate,
|
useNotify,
|
} from 'react-admin';
|
import { useForm, Controller, useWatch, FormProvider, useFormContext } from "react-hook-form";
|
import {
|
Stack,
|
Box,
|
Typography,
|
TextField,
|
Button,
|
CircularProgress,
|
InputAdornment,
|
IconButton,
|
} from '@mui/material';
|
import { requestResetPassword } from '@/api/auth';
|
import Visibility from '@mui/icons-material/Visibility';
|
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
|
const SecuritySettings = (props) => {
|
const translate = useTranslate();
|
const notify = useNotify();
|
const { userInfo } = props;
|
|
const { control, handleSubmit, watch, setValue, getValues, reset, formState: { errors }, setError } = useForm();
|
|
const oldPasswordVal = watch('oldPassword');
|
const newPasswordVal = watch('newPassword');
|
const confirmPasswordVal = watch('confirmPassword');
|
|
const [loading, setLoading] = useState(false);
|
const [showOldPassword, setShowOldPassword] = useState(false);
|
const [showNewPassword, setShowNewPassword] = useState(false);
|
|
useEffect(() => {
|
if (userInfo) {
|
}
|
}, [userInfo, setValue])
|
|
const onSubmit = (params) => {
|
setLoading(true);
|
requestResetPassword(params).then(res => {
|
setLoading(false);
|
const { code, msg, data } = res;
|
if (code === 200) {
|
notify(msg, { type: 'success', messageArgs: { _: msg } });
|
reset();
|
} else if (code === 10001) {
|
setError('oldPassword', {
|
message: msg,
|
});
|
} else {
|
notify(msg, { type: 'error', messageArgs: { _: msg } });
|
}
|
}).catch((error) => {
|
setLoading(false);
|
notify(error.message, { type: 'error', messageArgs: { _: error.message } });
|
console.error(error);
|
})
|
}
|
|
return (
|
<Box
|
sx={{
|
p: 3,
|
flex: 1,
|
overflow: 'auto',
|
}}
|
>
|
<form onSubmit={handleSubmit(onSubmit)} noValidate>
|
<Stack
|
direction='column'
|
spacing={3}
|
sx={{
|
width: '30%',
|
pt: 1
|
}}
|
>
|
<Controller
|
name="oldPassword"
|
control={control}
|
defaultValue=""
|
rules={{ required: translate('ra.validation.required') }}
|
render={({ field, fieldState: { error } }) => (
|
<TextField
|
{...field}
|
label={translate('page.settings.resetPwd.currPwd')}
|
type={showOldPassword ? 'text' : 'password'}
|
variant="outlined"
|
autoComplete="off"
|
error={Boolean(errors.oldPassword)}
|
helperText={errors.oldPassword?.message || ""}
|
InputProps={{
|
endAdornment: (
|
<InputAdornment position="end">
|
<IconButton
|
aria-label="toggle password visibility"
|
onClick={() => setShowOldPassword((show) => !show)}
|
onMouseDown={(event) => { event.preventDefault() }}
|
edge="end"
|
>
|
{showOldPassword ? <VisibilityOff /> : <Visibility />}
|
</IconButton>
|
</InputAdornment>
|
),
|
}}
|
/>
|
)}
|
/>
|
<Controller
|
name="newPassword"
|
control={control}
|
defaultValue=""
|
rules={{
|
required: translate('ra.validation.required'),
|
pattern: {
|
value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d\.]{6,13}$/,
|
message: translate('page.settings.resetPwd.tip.pwdInputLimit'),
|
},
|
validate: (value) => {
|
if (value === oldPasswordVal) {
|
return translate('page.settings.resetPwd.tip.pwdNotSameAsOld');
|
}
|
return true;
|
}
|
}}
|
render={({ field, fieldState: { error } }) => (
|
<TextField
|
{...field}
|
label={translate('page.settings.resetPwd.newPwd')}
|
type={showNewPassword ? 'text' : 'password'}
|
variant="outlined"
|
autoComplete="off"
|
error={Boolean(errors.newPassword)}
|
helperText={errors.newPassword?.message || ""}
|
InputProps={{
|
endAdornment: (
|
<InputAdornment position="end">
|
<IconButton
|
aria-label="toggle password visibility"
|
onClick={() => setShowNewPassword((show) => !show)}
|
onMouseDown={(event) => { event.preventDefault() }}
|
edge="end"
|
>
|
{showNewPassword ? <VisibilityOff /> : <Visibility />}
|
</IconButton>
|
</InputAdornment>
|
),
|
}}
|
/>
|
)}
|
/>
|
<Controller
|
name="confirmPassword"
|
control={control}
|
defaultValue=""
|
rules={{
|
required: translate('ra.validation.required'),
|
validate: value =>
|
value === newPasswordVal || translate('page.settings.resetPwd.tip.pwdNotMatch'),
|
}}
|
render={({ field, fieldState: { error } }) => (
|
<TextField
|
{...field}
|
label={translate('page.settings.resetPwd.confirmNewPwd')}
|
type={showNewPassword ? 'text' : 'password'}
|
variant="outlined"
|
autoComplete="off"
|
error={Boolean(errors.confirmPassword)}
|
helperText={errors.confirmPassword?.message || ""}
|
InputProps={{
|
endAdornment: (
|
<InputAdornment position="end">
|
<IconButton
|
aria-label="toggle password visibility"
|
onClick={() => setShowNewPassword((show) => !show)}
|
onMouseDown={(event) => { event.preventDefault() }}
|
edge="end"
|
>
|
{showNewPassword ? <VisibilityOff /> : <Visibility />}
|
</IconButton>
|
</InputAdornment>
|
),
|
}}
|
/>
|
)}
|
/>
|
<Button
|
type="submit"
|
variant="contained"
|
disabled={loading || !(oldPasswordVal && newPasswordVal && confirmPasswordVal)}
|
sx={{
|
alignSelf: 'flex-start',
|
width: '120px'
|
}}
|
>
|
{loading && <CircularProgress size={25} thickness={2} />}
|
{translate('page.settings.resetPwd.resetBtn')}
|
</Button>
|
</Stack>
|
</form>
|
|
</Box>
|
)
|
}
|
|
export default SecuritySettings;
|
