348 lines
10 KiB
TypeScript
348 lines
10 KiB
TypeScript
import * as Yup from 'yup';
|
|
import { enqueueSnackbar, useSnackbar } from 'notistack';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
// @mui
|
|
import { styled } from '@mui/material/styles';
|
|
import { LoadingButton } from '@mui/lab';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Grid,
|
|
Stack,
|
|
Typography,
|
|
Chip,
|
|
Autocomplete,
|
|
InputAdornment,
|
|
IconButton,
|
|
} from '@mui/material';
|
|
|
|
// components
|
|
import { FormProvider, RHFTextField, RHFSwitch } from '../../components/hook-form';
|
|
import axios from '../../utils/axios';
|
|
import { JWTContextType } from '../../@types/auth';
|
|
|
|
// @mui
|
|
import { LinearProgress, linearProgressClasses, FormControlLabel } from '@mui/material';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
// components
|
|
import MuiDialog from '../../components/MuiDialog';
|
|
// React
|
|
import { ReactElement } from 'react';
|
|
import { Users } from '../../@types/user';
|
|
import Iconify from '../../components/Iconify';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const HeaderStyle = styled('header')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: theme.spacing(2),
|
|
justifyContent: 'space-between',
|
|
}));
|
|
|
|
const LabelStyle = styled(Typography)(({ theme }) => ({
|
|
...theme.typography.h6,
|
|
marginBottom: theme.spacing(2),
|
|
marginTop: theme.spacing(2),
|
|
}));
|
|
type DataContent = {
|
|
info: string;
|
|
date: string;
|
|
time: string;
|
|
};
|
|
|
|
type MuiDialogProps = {
|
|
title?: {
|
|
name?: string;
|
|
icon?: string;
|
|
};
|
|
openDialog: boolean;
|
|
setOpenDialog: Function;
|
|
content?: ReactElement;
|
|
data?: DataContent[];
|
|
};
|
|
|
|
type FormValuesProps = {
|
|
value: string;
|
|
active: boolean;
|
|
};
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const DialogFormPassword = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
|
const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
|
|
const [isDisabledButton, setIsDisabledButton] = useState(true);
|
|
const navigate = useNavigate();
|
|
|
|
const id = data;
|
|
|
|
const isEdit = id ? true : false;
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
// const [currentUsers, setCurrentUsers] = useState<JWTContextType>();
|
|
const [currentUsers, setCurrentUsers] = useState<Users>();
|
|
console.log('usernya masuk', currentUsers);
|
|
useEffect(() => {
|
|
if (isEdit) {
|
|
axios.get('/user/' + id).then((res) => {
|
|
setCurrentUsers(res.data);
|
|
});
|
|
}
|
|
}, [id]);
|
|
|
|
const Title = styled(Typography)(({ theme }) => ({
|
|
...theme.typography.h4,
|
|
boxShadow: 'none',
|
|
fontWeight: 700,
|
|
color: '#005B7F',
|
|
}));
|
|
|
|
console.log('currentUsers', currentUsers);
|
|
|
|
console.log('data Id masuk', data);
|
|
|
|
// const NewCorporateSchema = Yup.object().shape({
|
|
// active: Yup.boolean().required('Corporate Status is required'),
|
|
// // file: Yup.boolean().required('Corporate Status is required'),
|
|
// });
|
|
|
|
// const defaultValues = useMemo(
|
|
// () => ({
|
|
// id: currentUsers?.id || '',
|
|
// name: currentUsers?.name || '',
|
|
// value: currentUsers?.value || '',
|
|
// active: currentUsers?.active === 1 ? true : false,
|
|
// }),
|
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// [currentUsers]
|
|
// );
|
|
|
|
interface FormValuesProps extends Partial<Banner> {
|
|
taxes: boolean;
|
|
inStock: boolean;
|
|
}
|
|
|
|
type Props = {
|
|
isEdit: boolean;
|
|
currentBanners?: Banner;
|
|
};
|
|
|
|
// const profileSchema = Yup.object().shape({
|
|
// // password: Yup.string().required('katasandilama is required'),
|
|
// // katasandibaru: Yup.string().required('katasandibaru is required'),
|
|
// // konfirmasikatasandi: Yup.string().required('konfirmasikatasandi is required'),
|
|
// });
|
|
|
|
// const defaultValues = useMemo(
|
|
// () => ({
|
|
// new_password: currentUsers?.new_password,
|
|
// password2: currentUsers?.password2,
|
|
// }),
|
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// [currentUsers]
|
|
// );
|
|
|
|
const methods = useForm<FormValuesProps>({
|
|
// resolver: yupResolver(profileSchema),
|
|
// defaultValues,
|
|
});
|
|
|
|
// console.log('defaultValues', defaultValues);
|
|
const {
|
|
reset,
|
|
watch,
|
|
control,
|
|
setValue,
|
|
setError,
|
|
getValues,
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = methods;
|
|
|
|
const values = watch();
|
|
|
|
// useEffect(() => {
|
|
// if (isEdit && currentUsers) {
|
|
// reset(defaultValues);
|
|
// }
|
|
// if (!isEdit) {
|
|
// reset(defaultValues);
|
|
// }
|
|
|
|
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
// }, [isEdit, currentUsers]);
|
|
|
|
useEffect(() => {
|
|
if (openDialog === false) {
|
|
reset();
|
|
}
|
|
}, [openDialog, reset]);
|
|
|
|
const onSubmit = async (data: FormValuesProps) => {
|
|
console.log('data', data);
|
|
// const formData = new FormData();
|
|
// formData.append('password', password);
|
|
// formData.append('passworrd')
|
|
|
|
try {
|
|
if (!isEdit) {
|
|
const response = await axios.post('/reset-password', data);
|
|
} else {
|
|
const response = await axios.put('/reset-password/', data);
|
|
}
|
|
|
|
reset();
|
|
enqueueSnackbar(
|
|
!isEdit ? 'Password Created Successfully!' : 'Password Updated Successfully!',
|
|
{
|
|
variant: 'success',
|
|
}
|
|
);
|
|
|
|
setOpenDialog(false);
|
|
// navigate(0);
|
|
|
|
// window.location.reload();
|
|
// navigate('/general/bantuan/contact', { replace: true });
|
|
} catch (error: any) {
|
|
if (error && error.response.status === 422) {
|
|
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
|
setError(key, { message: value[0] });
|
|
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
} else {
|
|
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
}
|
|
|
|
const ascent = document?.querySelector('ascent');
|
|
if (ascent != null) {
|
|
ascent.innerHTML = '';
|
|
}
|
|
};
|
|
|
|
const [showPasswordOld, setShowPasswordOld] = useState(false);
|
|
const [showPasswordNew, setShowPasswordNew] = useState(false);
|
|
const [showPasswordConfirmNew, setShowPasswordConfirmNew] = useState(false);
|
|
|
|
const getContent = () => (
|
|
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
|
<HeaderStyle>
|
|
<Title>Ubah Kata Sandi</Title>
|
|
</HeaderStyle>
|
|
<Stack spacing={3}>
|
|
<Box sx={{ width: '100%', typography: 'body1', p: 2 }}>
|
|
<Grid item xs={12}>
|
|
<LabelStyle>Kata Sandi Lama </LabelStyle>
|
|
<RHFTextField
|
|
name="old_password"
|
|
label="Kata Sandi Lama"
|
|
type={showPasswordOld ? 'text' : 'password'}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton onClick={() => setShowPasswordOld(!showPasswordOld)} edge="end">
|
|
<Iconify icon={showPasswordOld ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<LabelStyle>Kata Sandi Baru </LabelStyle>
|
|
<RHFTextField
|
|
name="new_password"
|
|
label="Kata Sandi Baru"
|
|
type={showPasswordNew ? 'text' : 'password'}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton onClick={() => setShowPasswordNew(!showPasswordNew)} edge="end">
|
|
<Iconify icon={showPasswordNew ? 'eva:eye-fill' : 'eva:eye-off-fill'} />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<LabelStyle>Konfirmasi Kata Sandi </LabelStyle>
|
|
<RHFTextField
|
|
name="confirm_new_password"
|
|
label="Konfirmasi Kata Sandi"
|
|
type={showPasswordConfirmNew ? 'text' : 'password'}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton
|
|
onClick={() => setShowPasswordConfirmNew(!showPasswordConfirmNew)}
|
|
edge="end"
|
|
>
|
|
<Iconify
|
|
icon={showPasswordConfirmNew ? 'eva:eye-fill' : 'eva:eye-off-fill'}
|
|
/>
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Box sx={{ width: '100%', pt: 5 }}>
|
|
<Stack
|
|
alignItems="center"
|
|
justifyContent="end"
|
|
direction={{ xs: 'column', md: 'row' }}
|
|
// sx={{ textAlign: { xs: 'center', md: 'left' } }}
|
|
>
|
|
<Stack direction="row" spacing={1}>
|
|
<Button
|
|
sx={{
|
|
boxShadow: 'none',
|
|
}}
|
|
variant="outlined"
|
|
size="medium"
|
|
fullWidth={true}
|
|
onClick={() => setOpenDialog(false)}
|
|
>
|
|
Batal
|
|
</Button>
|
|
<LoadingButton
|
|
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
|
|
type="submit"
|
|
variant="contained"
|
|
size="medium"
|
|
fullWidth={true}
|
|
loading={isSubmitting}
|
|
>
|
|
{!isEdit ? 'Simpan' : 'Simpan'}
|
|
</LoadingButton>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
</Box>
|
|
</Stack>
|
|
</FormProvider>
|
|
);
|
|
|
|
return (
|
|
<MuiDialog
|
|
title={title}
|
|
openDialog={openDialog}
|
|
setOpenDialog={setOpenDialog}
|
|
content={getContent()}
|
|
maxWidth="sm"
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default DialogFormPassword;
|