feat: invite new user with email
This commit is contained in:
Elias Schneider
86
frontend/src/components/admin/users/ManageUserTable.tsx
Normal file
86
frontend/src/components/admin/users/ManageUserTable.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { ActionIcon, Box, Group, Skeleton, Table } from "@mantine/core";
|
||||
import { useModals } from "@mantine/modals";
|
||||
import { TbCheck, TbEdit, TbTrash } from "react-icons/tb";
|
||||
import User from "../../../types/user.type";
|
||||
import showUpdateUserModal from "./showUpdateUserModal";
|
||||
|
||||
const ManageUserTable = ({
|
||||
users,
|
||||
getUsers,
|
||||
deleteUser,
|
||||
isLoading,
|
||||
}: {
|
||||
users: User[];
|
||||
getUsers: () => void;
|
||||
deleteUser: (user: User) => void;
|
||||
isLoading: boolean;
|
||||
}) => {
|
||||
const modals = useModals();
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "block", overflowX: "auto" }}>
|
||||
<Table verticalSpacing="sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Admin</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{isLoading
|
||||
? skeletonRows
|
||||
: users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td>{user.username}</td>
|
||||
<td>{user.email}</td>
|
||||
<td>{user.isAdmin && <TbCheck />}</td>
|
||||
<td>
|
||||
<Group position="right">
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="primary"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
showUpdateUserModal(modals, user, getUsers)
|
||||
}
|
||||
>
|
||||
<TbEdit />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
onClick={() => deleteUser(user)}
|
||||
>
|
||||
<TbTrash />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const skeletonRows = [...Array(10)].map((v, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<Skeleton key={i} height={20} />
|
||||
</td>
|
||||
<td>
|
||||
<Skeleton key={i} height={20} />
|
||||
</td>
|
||||
<td>
|
||||
<Skeleton key={i} height={20} />
|
||||
</td>
|
||||
<td>
|
||||
<Skeleton key={i} height={20} />
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
export default ManageUserTable;
|
||||
110
frontend/src/components/admin/users/showCreateUserModal.tsx
Normal file
110
frontend/src/components/admin/users/showCreateUserModal.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
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,
|
||||
smtpEnabled: boolean,
|
||||
getUsers: () => void
|
||||
) => {
|
||||
return modals.openModal({
|
||||
title: <Title order={5}>Create user</Title>,
|
||||
children: (
|
||||
<Body modals={modals} smtpEnabled={smtpEnabled} getUsers={getUsers} />
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
const Body = ({
|
||||
modals,
|
||||
smtpEnabled,
|
||||
getUsers,
|
||||
}: {
|
||||
modals: ModalsContextProps;
|
||||
smtpEnabled: boolean;
|
||||
getUsers: () => void;
|
||||
}) => {
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
username: "",
|
||||
email: "",
|
||||
password: undefined,
|
||||
isAdmin: false,
|
||||
setPasswordManually: false,
|
||||
},
|
||||
validate: yupResolver(
|
||||
yup.object().shape({
|
||||
email: yup.string().email(),
|
||||
username: yup.string().min(3),
|
||||
password: yup.string().min(8).optional(),
|
||||
})
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<form
|
||||
onSubmit={form.onSubmit(async (values) => {
|
||||
userService
|
||||
.create(values)
|
||||
.then(() => {
|
||||
getUsers();
|
||||
modals.closeAll();
|
||||
})
|
||||
.catch(toast.axiosError);
|
||||
})}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput label="Username" {...form.getInputProps("username")} />
|
||||
<TextInput label="Email" {...form.getInputProps("email")} />
|
||||
{smtpEnabled && (
|
||||
<Switch
|
||||
mt="xs"
|
||||
labelPosition="left"
|
||||
label="Set password manually"
|
||||
description="If not checked, the user will receive an email with a link to set their password."
|
||||
{...form.getInputProps("setPasswordManually", {
|
||||
type: "checkbox",
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
{form.values.setPasswordManually || !smtpEnabled && (
|
||||
<PasswordInput
|
||||
label="Password"
|
||||
{...form.getInputProps("password")}
|
||||
/>
|
||||
)}
|
||||
<Switch
|
||||
styles={{
|
||||
body: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
mt="xs"
|
||||
labelPosition="left"
|
||||
label="Admin privileges"
|
||||
description="If checked, the user will be able to access the admin panel."
|
||||
{...form.getInputProps("isAdmin", { type: "checkbox" })}
|
||||
/>
|
||||
<Group position="right">
|
||||
<Button type="submit">Create</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</form>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default showCreateUserModal;
|
||||
127
frontend/src/components/admin/users/showUpdateUserModal.tsx
Normal file
127
frontend/src/components/admin/users/showUpdateUserModal.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import {
|
||||
Accordion,
|
||||
Button,
|
||||
Group,
|
||||
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 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: {
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
isAdmin: user.isAdmin,
|
||||
},
|
||||
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
|
||||
.update(user.id, values)
|
||||
.then(() => {
|
||||
getUsers();
|
||||
modals.closeAll();
|
||||
})
|
||||
.catch(toast.axiosError);
|
||||
})}
|
||||
>
|
||||
<Stack>
|
||||
<TextInput
|
||||
label="Username"
|
||||
{...accountForm.getInputProps("username")}
|
||||
/>
|
||||
<TextInput label="Email" {...accountForm.getInputProps("email")} />
|
||||
<Switch
|
||||
mt="xs"
|
||||
labelPosition="left"
|
||||
label="Admin privileges"
|
||||
{...accountForm.getInputProps("isAdmin", { type: "checkbox" })}
|
||||
/>
|
||||
</Stack>
|
||||
</form>
|
||||
<Accordion>
|
||||
<Accordion.Item sx={{ borderBottom: "none" }} value="changePassword">
|
||||
<Accordion.Control px={0}>Change password</Accordion.Control>
|
||||
<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;
|
||||
Reference in New Issue
Block a user