feat: add user management

2026-04-19 05:23:14 +02:00 · 2022-12-05 15:53:24 +01:00
parent 31b3f6cb2f
commit 7a3967fd6f
25 changed files with 751 additions and 47 deletions
--- a/frontend/src/components/admin/showCreateUserModal.tsx
+++ b/frontend/src/components/admin/showCreateUserModal.tsx
@@ -0,0 +1,88 @@
+import {
+  Button,
+  Group,
+  Input,
+  PasswordInput,
+  Stack,
+  Switch,
+  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 toast from "../../utils/toast.util";
+
+const showCreateUserModal = (
+  modals: ModalsContextProps,
+  getUsers: () => void
+) => {
+  return modals.openModal({
+    title: <Title order={5}>Create user</Title>,
+    children: <Body modals={modals} getUsers={getUsers} />,
+  });
+};
+
+const Body = ({
+  modals,
+  getUsers,
+}: {
+  modals: ModalsContextProps;
+  getUsers: () => void;
+}) => {
+  const form = useForm({
+    initialValues: {
+      username: "",
+      email: "",
+      password: "",
+      isAdmin: false,
+    },
+    validate: yupResolver(
+      yup.object().shape({
+        email: yup.string().email(),
+        username: yup.string().min(3),
+        password: yup.string().min(8),
+      })
+    ),
+  });
+
+  return (
+    <Stack>
+      <form
+        onSubmit={form.onSubmit(async (values) => {
+          console.log(values)
+          userService
+            .create(values)
+            .then(() => {
+              getUsers();
+              modals.closeAll();
+            })
+            .catch(toast.axiosError);
+        })}
+      >
+        <Stack>
+          <TextInput label="Username" {...form.getInputProps("username")} />
+          <TextInput
+            type="email"
+            label="Email"
+            {...form.getInputProps("email")}
+          />
+          <PasswordInput
+            label="New password"
+            {...form.getInputProps("password")}
+          />
+
+
+            <Switch labelPosition="left" label="Admin privileges" {...form.getInputProps("isAdmin")} />
+
+          <Group position="right">
+            <Button type="submit">Create</Button>
+          </Group>
+        </Stack>
+      </form>
+    </Stack>
+  );
+};
+
+export default showCreateUserModal;