feat: invite new user with email

This commit is contained in:
Elias Schneider
2023-02-21 08:51:04 +01:00
parent 759c55f625
commit f9840505b8
10 changed files with 111 additions and 29 deletions

View File

@@ -1,7 +1,7 @@
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 User from "../../../types/user.type";
import showUpdateUserModal from "./showUpdateUserModal";
const ManageUserTable = ({

View File

@@ -10,38 +10,44 @@ import {
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";
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} getUsers={getUsers} />,
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: "",
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),
password: yup.string().min(8).optional(),
})
),
});
@@ -62,14 +68,34 @@ const Body = ({
<Stack>
<TextInput label="Username" {...form.getInputProps("username")} />
<TextInput label="Email" {...form.getInputProps("email")} />
<PasswordInput
label="New password"
{...form.getInputProps("password")}
/>
{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">

View File

@@ -11,9 +11,9 @@ import {
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";
import userService from "../../../services/user.service";
import User from "../../../types/user.type";
import toast from "../../../utils/toast.util";
const showUpdateUserModal = (
modals: ModalsContextProps,
@@ -90,7 +90,7 @@ const Body = ({
</form>
<Accordion>
<Accordion.Item sx={{ borderBottom: "none" }} value="changePassword">
<Accordion.Control>Change password</Accordion.Control>
<Accordion.Control px={0}>Change password</Accordion.Control>
<Accordion.Panel>
<form
onSubmit={passwordForm.onSubmit(async (values) => {

View File

@@ -2,9 +2,10 @@ import { Button, Group, Space, Text, Title } from "@mantine/core";
import { useModals } from "@mantine/modals";
import { useEffect, useState } from "react";
import { TbPlus } from "react-icons/tb";
import ManageUserTable from "../../components/admin/ManageUserTable";
import showCreateUserModal from "../../components/admin/showCreateUserModal";
import ManageUserTable from "../../components/admin/users/ManageUserTable";
import showCreateUserModal from "../../components/admin/users/showCreateUserModal";
import Meta from "../../components/Meta";
import useConfig from "../../hooks/config.hook";
import userService from "../../services/user.service";
import User from "../../types/user.type";
import toast from "../../utils/toast.util";
@@ -12,6 +13,8 @@ import toast from "../../utils/toast.util";
const Users = () => {
const [users, setUsers] = useState<User[]>([]);
const [isLoading, setIsLoading] = useState(true);
const config = useConfig();
const modals = useModals();
const getUsers = () => {
@@ -54,7 +57,9 @@ const Users = () => {
User management
</Title>
<Button
onClick={() => showCreateUserModal(modals, getUsers)}
onClick={() =>
showCreateUserModal(modals, config.get("SMTP_ENABLED"), getUsers)
}
leftIcon={<TbPlus size={20} />}
>
Create

View File

@@ -9,7 +9,7 @@ type User = {
export type CreateUser = {
username: string;
email: string;
password: string;
password?: string;
isAdmin?: boolean;
};