mirror of
https://github.com/NginxProxyManager/nginx-proxy-manager.git
synced 2025-08-02 15:33:32 +00:00
Moved v3 code from NginxProxyManager/nginx-proxy-manager-3 to NginxProxyManager/nginx-proxy-manager
This commit is contained in:
Jamie Curnow
221
frontend/src/modals/CertificateAuthorityCreateModal.tsx
Normal file
221
frontend/src/modals/CertificateAuthorityCreateModal.tsx
Normal file
@@ -0,0 +1,221 @@
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { CertificateAuthority } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useSetCertificateAuthority } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateNumber, validateString } from "modules/Validations";
|
||||
|
||||
interface CertificateAuthorityCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function CertificateAuthorityCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: CertificateAuthorityCreateModalProps) {
|
||||
const toast = useToast();
|
||||
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
|
||||
|
||||
const onSubmit = async (
|
||||
payload: CertificateAuthority,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setCertificateAuthority(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
name: "",
|
||||
acmeshServer: "",
|
||||
caBundle: "",
|
||||
maxDomains: 5,
|
||||
isWildcardSupported: false,
|
||||
} as CertificateAuthority
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "certificate-authority.create" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>{form.errors.name}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="acmeshServer" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshServer && form.touched.acmeshServer
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshServer">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.acmesh-server",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="acmeshServer"
|
||||
placeholder="https://example.com/acme/directory"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshServer}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="caBundle" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.caBundle && form.touched.caBundle
|
||||
}>
|
||||
<FormLabel htmlFor="caBundle">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.ca-bundle",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="caBundle"
|
||||
placeholder="/path/to/certs/custom-ca-bundle.crt"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.caBundle}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="maxDomains"
|
||||
validate={validateNumber(1)}
|
||||
type="number">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.maxDomains && form.touched.maxDomains
|
||||
}>
|
||||
<FormLabel htmlFor="maxDomains">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.max-domains",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input {...field} id="maxDomains" type="number" />
|
||||
<FormErrorMessage>
|
||||
{form.errors.maxDomains}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="isWildcardSupported" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isWildcardSupported &&
|
||||
form.touched.isWildcardSupported
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="green">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.has-wildcard-support",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isWildcardSupported}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { CertificateAuthorityCreateModal };
|
||||
240
frontend/src/modals/CertificateAuthorityEditModal.tsx
Normal file
240
frontend/src/modals/CertificateAuthorityEditModal.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { CertificateAuthority } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useCertificateAuthority, useSetCertificateAuthority } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateNumber, validateString } from "modules/Validations";
|
||||
|
||||
interface CertificateAuthorityEditModalProps {
|
||||
editId: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function CertificateAuthorityEditModal({
|
||||
editId,
|
||||
isOpen,
|
||||
onClose,
|
||||
}: CertificateAuthorityEditModalProps) {
|
||||
const toast = useToast();
|
||||
const { status, data } = useCertificateAuthority(editId);
|
||||
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
|
||||
|
||||
const onSubmit = async (
|
||||
payload: CertificateAuthority,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setCertificateAuthority(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
onClose();
|
||||
}}
|
||||
closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
{status === "loading" ? (
|
||||
// todo nicer
|
||||
<p>loading</p>
|
||||
) : (
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
id: data?.id,
|
||||
name: data?.name,
|
||||
acmeshServer: data?.acmeshServer,
|
||||
caBundle: data?.caBundle,
|
||||
maxDomains: data?.maxDomains,
|
||||
isWildcardSupported: data?.isWildcardSupported,
|
||||
} as CertificateAuthority
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "certificate-authority.edit" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="name" validate={validateString(1, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.name && form.touched.name}>
|
||||
<FormLabel htmlFor="name">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="name"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "certificate-authority.name",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.name}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="acmeshServer"
|
||||
validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshServer &&
|
||||
form.touched.acmeshServer
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshServer">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.acmesh-server",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="acmeshServer"
|
||||
placeholder="https://example.com/acme/directory"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshServer}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="caBundle" validate={validateString(2, 255)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.caBundle && form.touched.caBundle
|
||||
}>
|
||||
<FormLabel htmlFor="caBundle">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.ca-bundle",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="caBundle"
|
||||
placeholder="/path/to/certs/custom-ca-bundle.crt"
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.caBundle}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field
|
||||
name="maxDomains"
|
||||
validate={validateNumber(1)}
|
||||
type="number">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.maxDomains && form.touched.maxDomains
|
||||
}>
|
||||
<FormLabel htmlFor="maxDomains">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.max-domains",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Input {...field} id="maxDomains" type="number" />
|
||||
<FormErrorMessage>
|
||||
{form.errors.maxDomains}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="isWildcardSupported" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isWildcardSupported &&
|
||||
form.touched.isWildcardSupported
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="green">
|
||||
{intl.formatMessage({
|
||||
id: "certificate-authority.has-wildcard-support",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isWildcardSupported}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { CertificateAuthorityEditModal };
|
||||
174
frontend/src/modals/ChangePasswordModal.tsx
Normal file
174
frontend/src/modals/ChangePasswordModal.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { setAuth } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { intl } from "locale";
|
||||
import { validateString } from "modules/Validations";
|
||||
|
||||
interface ChangePasswordModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
|
||||
const toast = useToast();
|
||||
|
||||
const onSubmit = async (payload: any, { setSubmitting, setErrors }: any) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
await setAuth("me", {
|
||||
type: "password",
|
||||
secret: payload.password,
|
||||
currentSecret: payload.current,
|
||||
});
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
if (err.message === "current-password-invalid") {
|
||||
setErrors({
|
||||
current: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={{}}
|
||||
onSubmit={onSubmit}
|
||||
validate={(values: any) => {
|
||||
const errors = {} as any;
|
||||
if (values.password !== values.password2) {
|
||||
errors.password2 = "New passwords do not match";
|
||||
}
|
||||
return errors;
|
||||
}}>
|
||||
{({ isSubmitting, values }: any) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "change-password" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="current" validate={validateString(8, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={form.errors.current && form.touched.current}>
|
||||
<FormLabel htmlFor="current">
|
||||
{intl.formatMessage({ id: "password.current" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="current"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "password.current",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.current}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password" validate={validateString(8, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.password && form.touched.password
|
||||
}>
|
||||
<FormLabel htmlFor="password">
|
||||
{intl.formatMessage({ id: "password.new" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "password.new",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.password}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password2" validate={validateString(8, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.password2 && form.touched.password2
|
||||
}>
|
||||
<FormLabel htmlFor="password2">
|
||||
{intl.formatMessage({ id: "password.confirm" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="password2"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "password.confirm",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.password2}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { ChangePasswordModal };
|
||||
226
frontend/src/modals/DNSProviderCreateModal.tsx
Normal file
226
frontend/src/modals/DNSProviderCreateModal.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Select,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
DNSProvider,
|
||||
DNSProvidersAcmesh,
|
||||
DNSProvidersAcmeshField,
|
||||
} from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useSetDNSProvider, useDNSProvidersAcmesh } from "hooks";
|
||||
import { intl } from "locale";
|
||||
|
||||
interface DNSProviderCreateModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function DNSProviderCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: DNSProviderCreateModalProps) {
|
||||
const toast = useToast();
|
||||
const { mutate: setDNSProvider } = useSetDNSProvider();
|
||||
const {
|
||||
isLoading: acmeshIsLoading,
|
||||
// isError: acmeshIsError,
|
||||
// error: acmeshError,
|
||||
data: acmeshDataResp,
|
||||
} = useDNSProvidersAcmesh();
|
||||
|
||||
const [acmeshData, setAcmeshData] = useState([] as DNSProvidersAcmesh[]);
|
||||
const [acmeshItem, setAcmeshItem] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setAcmeshData(acmeshDataResp || []);
|
||||
}, [acmeshDataResp]);
|
||||
|
||||
const onSubmit = async (
|
||||
payload: DNSProvider,
|
||||
{ setErrors, setSubmitting }: any,
|
||||
) => {
|
||||
console.log("PAYLOAD:", payload);
|
||||
return;
|
||||
|
||||
// TODO: filter out the meta object and only include items that apply to the acmesh provider selected
|
||||
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setDNSProvider(payload, {
|
||||
onError: (err: any) => {
|
||||
if (err.message === "ca-bundle-does-not-exist") {
|
||||
setErrors({
|
||||
caBundle: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
},
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
const getAcmeshItem = (name: string): DNSProvidersAcmesh | undefined => {
|
||||
return acmeshData.find((item) => item.acmeshName === name);
|
||||
};
|
||||
|
||||
const renderInputType = (
|
||||
field: any,
|
||||
f: DNSProvidersAcmeshField,
|
||||
value: any,
|
||||
) => {
|
||||
if (f.type === "bool") {
|
||||
return (
|
||||
<Checkbox {...field} size="md" colorScheme="orange" isChecked={value}>
|
||||
{f.name}
|
||||
</Checkbox>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Input {...field} id={f.metaKey} type={f.type} defaultValue={value} />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
{acmeshIsLoading ? (
|
||||
"loading"
|
||||
) : (
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
acmeshName: "",
|
||||
name: "",
|
||||
dnsSleep: 0,
|
||||
meta: {},
|
||||
} as DNSProvider
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting, handleChange, values, setValues }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "dns-provider.create" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="acmeshName">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.acmeshName && form.touched.acmeshName
|
||||
}>
|
||||
<FormLabel htmlFor="acmeshName">
|
||||
{intl.formatMessage({
|
||||
id: "dns-provider.acmesh-name",
|
||||
})}
|
||||
</FormLabel>
|
||||
<Select
|
||||
{...field}
|
||||
id="acmeshName"
|
||||
onChange={(e: any) => {
|
||||
handleChange(e);
|
||||
setAcmeshItem(e.target.value);
|
||||
}}>
|
||||
<option value="" />
|
||||
{acmeshData.map((item: DNSProvidersAcmesh) => {
|
||||
return (
|
||||
<option
|
||||
key={item.acmeshName}
|
||||
value={item.acmeshName}>
|
||||
{intl.formatMessage({
|
||||
id: `acmesh.${item.acmeshName}`,
|
||||
})}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
<FormErrorMessage>
|
||||
{form.errors.acmeshName}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
{acmeshItem !== "" ? <hr /> : null}
|
||||
{getAcmeshItem(acmeshItem)?.fields.map((f) => {
|
||||
const name = `meta[${f.metaKey}]`;
|
||||
return (
|
||||
<Field
|
||||
name={name}
|
||||
type={f.type === "bool" ? "checkbox" : undefined}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired={f.isRequired}
|
||||
isInvalid={
|
||||
form.errors[name] && form.touched[name]
|
||||
}>
|
||||
{f.type !== "bool" ? (
|
||||
<FormLabel htmlFor={name}>{f.name}</FormLabel>
|
||||
) : null}
|
||||
{renderInputType(
|
||||
field,
|
||||
f,
|
||||
values.meta[f.metaKey],
|
||||
)}
|
||||
<FormErrorMessage>
|
||||
{form.errors[name]}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { DNSProviderCreateModal };
|
||||
156
frontend/src/modals/ProfileModal.tsx
Normal file
156
frontend/src/modals/ProfileModal.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useUser, useSetUser } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateEmail, validateString } from "modules/Validations";
|
||||
|
||||
interface ProfileModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function ProfileModal({ isOpen, onClose }: ProfileModalProps) {
|
||||
const toast = useToast();
|
||||
const user = useUser("me");
|
||||
const { mutate: setUser } = useSetUser();
|
||||
|
||||
const onSubmit = (payload: any, { setSubmitting }: any) => {
|
||||
payload.id = "me";
|
||||
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setUser(payload, {
|
||||
onError: (err: any) => showErr(err.message),
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={{
|
||||
name: user.data?.name,
|
||||
nickname: user.data?.nickname,
|
||||
email: user.data?.email,
|
||||
}}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting, values }: any) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "profile.title" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<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"
|
||||
defaultValue={values.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"
|
||||
defaultValue={values.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"
|
||||
defaultValue={values.email}
|
||||
placeholder={intl.formatMessage({
|
||||
id: "user.email",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>{form.errors.email}</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { ProfileModal };
|
||||
152
frontend/src/modals/SetPasswordModal.tsx
Normal file
152
frontend/src/modals/SetPasswordModal.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import { setAuth } from "api/npm";
|
||||
import { PrettyButton } from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { intl } from "locale";
|
||||
import { validateString } from "modules/Validations";
|
||||
|
||||
interface SetPasswordModalProps {
|
||||
userId: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function SetPasswordModal({ userId, isOpen, onClose }: SetPasswordModalProps) {
|
||||
const toast = useToast();
|
||||
|
||||
const onSubmit = async (payload: any, { setSubmitting, setErrors }: any) => {
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
try {
|
||||
await setAuth(userId, {
|
||||
type: "password",
|
||||
secret: payload.password,
|
||||
});
|
||||
onClose();
|
||||
} catch (err: any) {
|
||||
if (err.message === "current-password-invalid") {
|
||||
setErrors({
|
||||
current: intl.formatMessage({
|
||||
id: `error.${err.message}`,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
showErr(err.message);
|
||||
}
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<Formik
|
||||
initialValues={{}}
|
||||
onSubmit={onSubmit}
|
||||
validate={(values: any) => {
|
||||
const errors = {} as any;
|
||||
if (values.password !== values.password2) {
|
||||
errors.password2 = "New passwords do not match";
|
||||
}
|
||||
return errors;
|
||||
}}>
|
||||
{({ isSubmitting, values }: any) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "set-password" })}
|
||||
</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Stack spacing={4}>
|
||||
<Field name="password" validate={validateString(8, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.password && form.touched.password
|
||||
}>
|
||||
<FormLabel htmlFor="password">
|
||||
{intl.formatMessage({ id: "password.new" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "password.new",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.password}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
<Field name="password2" validate={validateString(8, 100)}>
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={
|
||||
form.errors.password2 && form.touched.password2
|
||||
}>
|
||||
<FormLabel htmlFor="password2">
|
||||
{intl.formatMessage({ id: "password.confirm" })}
|
||||
</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
id="password2"
|
||||
type="password"
|
||||
placeholder={intl.formatMessage({
|
||||
id: "password.confirm",
|
||||
})}
|
||||
/>
|
||||
<FormErrorMessage>
|
||||
{form.errors.password2}
|
||||
</FormErrorMessage>
|
||||
</FormControl>
|
||||
)}
|
||||
</Field>
|
||||
</Stack>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<PrettyButton mr={3} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.save" })}
|
||||
</PrettyButton>
|
||||
<Button onClick={onClose} isLoading={isSubmitting}>
|
||||
{intl.formatMessage({ id: "form.cancel" })}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export { SetPasswordModal };
|
||||
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 };
|
||||
272
frontend/src/modals/UserEditModal.tsx
Normal file
272
frontend/src/modals/UserEditModal.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
FormControl,
|
||||
FormErrorMessage,
|
||||
FormLabel,
|
||||
Input,
|
||||
Modal,
|
||||
ModalOverlay,
|
||||
ModalContent,
|
||||
ModalHeader,
|
||||
ModalCloseButton,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
Stack,
|
||||
Tab,
|
||||
Tabs,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
useToast,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
AdminPermissionSelector,
|
||||
PermissionSelector,
|
||||
PrettyButton,
|
||||
} from "components";
|
||||
import { Formik, Form, Field } from "formik";
|
||||
import { useUser, useSetUser } from "hooks";
|
||||
import { intl } from "locale";
|
||||
import { validateEmail, validateString } from "modules/Validations";
|
||||
|
||||
interface UserEditModalProps {
|
||||
userId: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
function UserEditModal({ userId, isOpen, onClose }: UserEditModalProps) {
|
||||
const toast = useToast();
|
||||
const { status, data } = useUser(userId);
|
||||
const { mutate: setUser } = useSetUser();
|
||||
|
||||
const [capabilities, setCapabilities] = useState(data?.capabilities || []);
|
||||
const [capabilityOption, setCapabilityOption] = useState(
|
||||
data?.capabilities?.indexOf("full-admin") === -1 ? "restricted" : "admin",
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setCapabilities(data?.capabilities || []);
|
||||
setCapabilityOption(
|
||||
data?.capabilities?.indexOf("full-admin") === -1 ? "restricted" : "admin",
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
const onSubmit = async (values: any, { setSubmitting }: any) => {
|
||||
const { ...payload } = {
|
||||
id: userId,
|
||||
...values,
|
||||
...{
|
||||
capabilities,
|
||||
},
|
||||
};
|
||||
|
||||
const showErr = (msg: string) => {
|
||||
toast({
|
||||
description: intl.formatMessage({
|
||||
id: `error.${msg}`,
|
||||
}),
|
||||
status: "error",
|
||||
position: "top",
|
||||
duration: 3000,
|
||||
isClosable: true,
|
||||
});
|
||||
};
|
||||
|
||||
setUser(payload, {
|
||||
onError: (err: any) => showErr(err.message),
|
||||
onSuccess: () => onClose(),
|
||||
onSettled: () => setSubmitting(false),
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setCapabilityOption("admin");
|
||||
setCapabilities(["full-admin"]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
resetForm();
|
||||
onClose();
|
||||
}}
|
||||
closeOnOverlayClick={false}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
{status === "loading" ? (
|
||||
// todo nicer
|
||||
<p>loading</p>
|
||||
) : (
|
||||
<Formik
|
||||
initialValues={
|
||||
{
|
||||
name: data?.name,
|
||||
nickname: data?.nickname,
|
||||
email: data?.email,
|
||||
isDisabled: data?.isDisabled,
|
||||
} as any
|
||||
}
|
||||
onSubmit={onSubmit}>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<ModalHeader>
|
||||
{intl.formatMessage({ id: "user.edit" })}
|
||||
</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="isDisabled" type="checkbox">
|
||||
{({ field, form }: any) => (
|
||||
<FormControl
|
||||
isInvalid={
|
||||
form.errors.isDisabled &&
|
||||
form.touched.isDisabled
|
||||
}>
|
||||
<Checkbox
|
||||
{...field}
|
||||
isChecked={field.checked}
|
||||
size="md"
|
||||
colorScheme="red">
|
||||
{intl.formatMessage({
|
||||
id: "user.disabled",
|
||||
})}
|
||||
</Checkbox>
|
||||
<FormErrorMessage>
|
||||
{form.errors.isDisabled}
|
||||
</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 { UserEditModal };
|
||||
8
frontend/src/modals/index.ts
Normal file
8
frontend/src/modals/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export * from "./CertificateAuthorityCreateModal";
|
||||
export * from "./CertificateAuthorityEditModal";
|
||||
export * from "./ChangePasswordModal";
|
||||
export * from "./DNSProviderCreateModal";
|
||||
export * from "./ProfileModal";
|
||||
export * from "./SetPasswordModal";
|
||||
export * from "./UserCreateModal";
|
||||
export * from "./UserEditModal";
|
||||
Reference in New Issue
Block a user