2022-12-05 15:53:24 +01:00
|
|
|
import {
|
|
|
|
|
Accordion,
|
|
|
|
|
Button,
|
|
|
|
|
Group,
|
|
|
|
|
PasswordInput,
|
|
|
|
|
Stack,
|
2022-12-05 16:17:41 +01:00
|
|
|
Switch,
|
2022-12-05 15:53:24 +01:00
|
|
|
TextInput,
|
|
|
|
|
Title,
|
|
|
|
|
} from "@mantine/core";
|
|
|
|
|
import { useForm, yupResolver } from "@mantine/form";
|
|
|
|
|
import { ModalsContextProps } from "@mantine/modals/lib/context";
|
|
|
|
|
import * as yup from "yup";
|
|
|
|
|
import userService from "../../services/user.service";
|
|
|
|
|
import User from "../../types/user.type";
|
|
|
|
|
import toast from "../../utils/toast.util";
|
|
|
|
|
|
|
|
|
|
const showUpdateUserModal = (
|
|
|
|
|
modals: ModalsContextProps,
|
|
|
|
|
user: User,
|
|
|
|
|
getUsers: () => void
|
|
|
|
|
) => {
|
|
|
|
|
return modals.openModal({
|
|
|
|
|
title: <Title order={5}>Update {user.username}</Title>,
|
|
|
|
|
children: <Body user={user} modals={modals} getUsers={getUsers} />,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Body = ({
|
|
|
|
|
user,
|
|
|
|
|
modals,
|
|
|
|
|
getUsers,
|
|
|
|
|
}: {
|
|
|
|
|
modals: ModalsContextProps;
|
|
|
|
|
user: User;
|
|
|
|
|
getUsers: () => void;
|
|
|
|
|
}) => {
|
|
|
|
|
const accountForm = useForm({
|
|
|
|
|
initialValues: {
|
2022-12-05 16:17:41 +01:00
|
|
|
username: user.username,
|
|
|
|
|
email: user.email,
|
|
|
|
|
isAdmin: user.isAdmin,
|
2022-12-05 15:53:24 +01:00
|
|
|
},
|
|
|
|
|
validate: yupResolver(
|
|
|
|
|
yup.object().shape({
|
|
|
|
|
email: yup.string().email(),
|
|
|
|
|
username: yup.string().min(3),
|
|
|
|
|
})
|
|
|
|
|
),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const passwordForm = useForm({
|
|
|
|
|
initialValues: {
|
|
|
|
|
password: "",
|
|
|
|
|
},
|
|
|
|
|
validate: yupResolver(
|
|
|
|
|
yup.object().shape({
|
|
|
|
|
password: yup.string().min(8),
|
|
|
|
|
})
|
|
|
|
|
),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Stack>
|
|
|
|
|
<form
|
|
|
|
|
id="accountForm"
|
|
|
|
|
onSubmit={accountForm.onSubmit(async (values) => {
|
|
|
|
|
userService
|
2022-12-05 16:17:41 +01:00
|
|
|
.update(user.id, values)
|
2022-12-05 15:53:24 +01:00
|
|
|
.then(() => {
|
|
|
|
|
getUsers();
|
|
|
|
|
modals.closeAll();
|
|
|
|
|
})
|
|
|
|
|
.catch(toast.axiosError);
|
|
|
|
|
})}
|
|
|
|
|
>
|
|
|
|
|
<Stack>
|
|
|
|
|
<TextInput
|
|
|
|
|
label="Username"
|
|
|
|
|
{...accountForm.getInputProps("username")}
|
|
|
|
|
/>
|
2022-12-08 19:14:06 +01:00
|
|
|
<TextInput label="Email" {...accountForm.getInputProps("email")} />
|
2022-12-05 16:17:41 +01:00
|
|
|
<Switch
|
|
|
|
|
mt="xs"
|
|
|
|
|
labelPosition="left"
|
|
|
|
|
label="Admin privileges"
|
2022-12-05 16:54:15 +01:00
|
|
|
{...accountForm.getInputProps("isAdmin", { type: "checkbox" })}
|
2022-12-05 16:17:41 +01:00
|
|
|
/>
|
2022-12-05 15:53:24 +01:00
|
|
|
</Stack>
|
|
|
|
|
</form>
|
|
|
|
|
<Accordion>
|
|
|
|
|
<Accordion.Item sx={{ borderBottom: "none" }} value="changePassword">
|
2022-12-05 16:17:41 +01:00
|
|
|
<Accordion.Control>Change password</Accordion.Control>
|
2022-12-05 15:53:24 +01:00
|
|
|
<Accordion.Panel>
|
|
|
|
|
<form
|
|
|
|
|
onSubmit={passwordForm.onSubmit(async (values) => {
|
|
|
|
|
userService
|
|
|
|
|
.update(user.id, {
|
|
|
|
|
password: values.password,
|
|
|
|
|
})
|
|
|
|
|
.then(() => toast.success("Password changed successfully"))
|
|
|
|
|
.catch(toast.axiosError);
|
|
|
|
|
})}
|
|
|
|
|
>
|
|
|
|
|
<Stack>
|
|
|
|
|
<PasswordInput
|
|
|
|
|
label="New password"
|
|
|
|
|
{...passwordForm.getInputProps("password")}
|
|
|
|
|
/>
|
|
|
|
|
<Button variant="light" type="submit">
|
|
|
|
|
Save new password
|
|
|
|
|
</Button>
|
|
|
|
|
</Stack>
|
|
|
|
|
</form>
|
|
|
|
|
</Accordion.Panel>
|
|
|
|
|
</Accordion.Item>
|
|
|
|
|
</Accordion>
|
|
|
|
|
<Group position="right">
|
|
|
|
|
<Button type="submit" form="accountForm">
|
|
|
|
|
Save
|
|
|
|
|
</Button>
|
|
|
|
|
</Group>
|
|
|
|
|
</Stack>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default showUpdateUserModal;
|
