Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager
This commit is contained in:
Jamie Curnow
275
frontend/src/modals/UserCreateModal.tsx
Normal file
275
frontend/src/modals/UserCreateModal.tsx
Normal file
@ -0,0 +1,275 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
Tab,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { createUser } from "api/npm";
|
||||
import {
|
||||
AdminPermissionSelector,
|
||||
PermissionSelector,
|
||||
PrettyButton,
|
||||
} from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { intl } from "locale";
|
||||
import { validateEmail, validateString } from "modules/Validations";
|
||||
import { useQueryClient } from "react-query";
|
||||
|
||||
interface Payload {
|
||||
name: string;
|
||||
nickname: string;
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
interface UserCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
|
||||
const toast = useToast();
|
||||
const queryClient = useQueryClient();
|
||||
const [capabilities, setCapabilities] = useState(["full-admin"]);
|
||||
const [capabilityOption, setCapabilityOption] = useState("admin");
|
||||
|
||||
const onSubmit = async (values: Payload, { setSubmitting }: any) => {
|
||||
const { password, ...payload } = {
|
||||
...values,
|
||||
...{
|
||||
isDisabled: false,
|
||||
auth: {
|
||||
type: "password",
|
||||
secret: values.password,
|
||||
},
|
||||
capabilities,
|
||||
},
|
||||
};
|
||||
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await createUser(payload);
|
||||
if (response && typeof response.id !== "undefined" && response.id) {
|
||||
// ok
|
||||
queryClient.invalidateQueries("users");
|
||||
onClose();
|
||||
resetForm();
|
||||
} else {
|
||||
showErr("cannot_create_user");
|
||||
}
|
||||
} catch (err: any) {
|
||||
showErr(err.message);
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setCapabilityOption("admin");
|
||||
setCapabilities(["full-admin"]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
resetForm();
|
||||
onClose();
|
||||
}}
|
||||
closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
name: "",
|
||||
nickname: "",
|
||||
email: "",
|
||||
password: "",
|
||||
} as Payload
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "user.create" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab>{intl.formatMessage({ id: "profile.title" })}</Tab>
|
||||
<Tab>{intl.formatMessage({ id: "permissions.title" })}</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(2, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({ id: "user.name" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "user.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.name}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="nickname"
|
||||
validate={validateString(2, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.nickname && form.touched.nickname
|
||||
}>
|
||||
<FormLabel htmlFor="nickname">
|
||||
{intl.formatMessage({ id: "user.nickname" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="nickname"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "user.nickname",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.nickname}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="email" validate={validateEmail()}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.email && form.touched.email
|
||||
}>
|
||||
<FormLabel htmlFor="email">
|
||||
{intl.formatMessage({ id: "user.email" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "user.email",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.email}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="password"
|
||||
validate={validateString(8, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.password && form.touched.password
|
||||
}>
|
||||
<FormLabel htmlFor="password">
|
||||
{intl.formatMessage({ id: "user.password" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "user.password",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.password}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<AdminPermissionSelector
|
||||
selected={capabilityOption === "admin"}
|
||||
onClick={() => {
|
||||
setCapabilityOption("admin");
|
||||
setCapabilities(["full-admin"]);
|
||||
}}
|
||||
/>
|
||||
<PermissionSelector
|
||||
onClick={() => {
|
||||
if (capabilityOption === "admin") {
|
||||
setCapabilities([]);
|
||||
}
|
||||
setCapabilityOption("restricted");
|
||||
}}
|
||||
onChange={setCapabilities}
|
||||
capabilities={capabilities}
|
||||
selected={capabilityOption === "restricted"}
|
||||
/>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button
|
||||
onClick={() => {
|
||||
resetForm();
|
||||
onClose();
|
||||
}}
|
||||
isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { UserCreateModal };
|
||||
Reference in New Issue
Block a user