bastion/nginx-proxy-manager
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Locales cleanup

Browse Source
This commit is contained in:
Jamie Curnow 2023-01-16 15:50:40 +10:00
parent af9349d4a7
commit 374447ccc7
26 changed files with 142 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/api/npm/createCertificate.ts Normal file
View File

@ -0,0 +1,16 @@
import * as api from "./base";
import { Certificate } from "./models";
export async function createCertificate(
data: Certificate,
abortController?: AbortController,
): Promise<Certificate> {
const { result } = await api.post(
{
url: "/certificates",
data,
},
abortController,
);
return result;
}

13
frontend/src/api/npm/getCertificate.ts Normal file
View File

@ -0,0 +1,13 @@
import * as api from "./base";
import { Certificate } from "./models";
export async function getCertificate(
id: number,
params = {},
): Promise<Certificate> {
const { result } = await api.get({
url: `/certificates/${id}`,
params,
});
return result;
}

3
frontend/src/api/npm/index.ts
View File

@ -1,7 +1,9 @@
export * from "./createCertificate";
export * from "./createCertificateAuthority";
export * from "./createDNSProvider";
export * from "./createUser";
export * from "./getAccessLists";
export * from "./getCertificate";
export * from "./getCertificateAuthorities";
export * from "./getCertificateAuthority";
export * from "./getCertificates";
@ -22,6 +24,7 @@ export * from "./models";
export * from "./refreshToken";
export * from "./responseTypes";
export * from "./setAuth";
export * from "./setCertificate";
export * from "./setCertificateAuthority";
export * from "./setDNSProvider";
export * from "./setUser";

17
frontend/src/api/npm/setCertificate.ts Normal file
View File

@ -0,0 +1,17 @@
import * as api from "./base";
import { Certificate } from "./models";
export async function setCertificate(
id: number,
data: any,
): Promise<Certificate> {
if (data.id) {
delete data.id;
}
const { result } = await api.put({
url: `/certificates/${id}`,
data,
});
return result;
}

1
frontend/src/hooks/index.ts
View File

@ -1,4 +1,5 @@
export * from "./useAccessLists";
export * from "./useCertificate";
export * from "./useCertificateAuthorities";
export * from "./useCertificateAuthority";
export * from "./useCertificates";

56
frontend/src/hooks/useCertificate.ts Normal file
View File

@ -0,0 +1,56 @@
import {
createCertificate,
getCertificate,
setCertificate,
Certificate,
} from "api/npm";
import { useMutation, useQuery, useQueryClient } from "react-query";
const fetchCertificate = (id: any) => {
return getCertificate(id);
};
const useCertificate = (id: number, options = {}) => {
return useQuery<Certificate, Error>(
["certificate", id],
() => fetchCertificate(id),
{
staleTime: 60 * 1000, // 1 minute
...options,
},
);
};
const useSetCertificate = () => {
const queryClient = useQueryClient();
return useMutation(
(values: Certificate) => {
return values.id
? setCertificate(values.id, values)
: createCertificate(values);
},
{
onMutate: (values) => {
const previousObject = queryClient.getQueryData([
"certificate",
values.id,
]);
queryClient.setQueryData(["certificate", values.id], (old: any) => ({
...old,
...values,
}));
return () =>
queryClient.setQueryData(["certificate", values.id], previousObject);
},
onError: (error, values, rollback: any) => rollback(),
onSuccess: async ({ id }: Certificate) => {
queryClient.invalidateQueries(["certificate", id]);
queryClient.invalidateQueries("certificate");
},
},
);
};
export { useCertificate, useSetCertificate };

8
frontend/src/locale/src/de.json
View File

@ -56,9 +56,6 @@
"certificate-authority.max-domains": {
"defaultMessage": "Maximale Domains pro Zertifikat"
},
"certificate-authority.name": {
"defaultMessage": "Name"
},
"certificate.create": {
"defaultMessage": "Zertifikat erstellen"
},
@ -86,9 +83,6 @@
"column.max-domains": {
"defaultMessage": "Domänen pro Zertifikat"
},
"column.name": {
"defaultMessage": "Name"
},
"column.servers": {
"defaultMessage": "Servers"
},
@ -140,7 +134,7 @@
"dns-provider.create": {
"defaultMessage": "Erstellen Sie einen DNS-Anbieter"
},
"dns-provider.name": {
"name": {
"defaultMessage": "Name"
},
"dns-providers.title": {

8
frontend/src/locale/src/en.json
View File

@ -332,9 +332,6 @@
"certificate-authority.max-domains": {
"defaultMessage": "Maximum Domains per Certificate"
},
"certificate-authority.name": {
"defaultMessage": "Name"
},
"certificate.create": {
"defaultMessage": "Create Certificate"
},
@ -362,9 +359,6 @@
"column.max-domains": {
"defaultMessage": "Domains per Cert"
},
"column.name": {
"defaultMessage": "Name"
},
"column.servers": {
"defaultMessage": "Servers"
},
@ -416,7 +410,7 @@
"dns-provider.create": {
"defaultMessage": "Create DNS Provider"
},
"dns-provider.name": {
"name": {
"defaultMessage": "Name"
},
"dns-providers.title": {

8
frontend/src/locale/src/fa.json
View File

@ -56,9 +56,6 @@
"certificate-authority.max-domains": {
"defaultMessage": "حداکثر دامنه در هر گواهی"
},
"certificate-authority.name": {
"defaultMessage": "نام"
},
"certificate.create": {
"defaultMessage": "ایجاد گواهی"
},
@ -86,9 +83,6 @@
"column.max-domains": {
"defaultMessage": "دامنه در هر گواهی"
},
"column.name": {
"defaultMessage": "نام"
},
"column.servers": {
"defaultMessage": "Servers"
},
@ -140,7 +134,7 @@
"dns-provider.create": {
"defaultMessage": "ارائه دهنده DNS ایجاد کنید"
},
"dns-provider.name": {
"name": {
"defaultMessage": "نام"
},
"dns-providers.title": {

4
frontend/src/modals/AccessListCreateModal.tsx
View File

@ -97,14 +97,14 @@ function AccessListCreateModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>{form.errors.name}</FormErrorMessage>

4
frontend/src/modals/CertificateAuthorityCreateModal.tsx
View File

@ -96,14 +96,14 @@ function CertificateAuthorityCreateModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>{form.errors.name}</FormErrorMessage>

4
frontend/src/modals/CertificateAuthorityEditModal.tsx
View File

@ -109,14 +109,14 @@ function CertificateAuthorityEditModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>

111
frontend/src/modals/CertificateCreateModal.tsx
View File

@ -1,6 +1,5 @@
import {
Button,
Checkbox,
FormControl,
FormErrorMessage,
FormLabel,
@ -15,12 +14,12 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { CertificateAuthority } from "api/npm";
import { Certificate } from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { useSetCertificateAuthority } from "hooks";
import { useSetCertificate } from "hooks";
import { intl } from "locale";
import { validateNumber, validateString } from "modules/Validations";
import { validateString } from "modules/Validations";
interface CertificateCreateModalProps {
isOpen: boolean;
@ -31,10 +30,10 @@ function CertificateCreateModal({
onClose,
}: CertificateCreateModalProps) {
const toast = useToast();
const { mutate: setCertificateAuthority } = useSetCertificateAuthority();
const { mutate: setCertificate } = useSetCertificate();
const onSubmit = async (
payload: CertificateAuthority,
payload: Certificate,
{ setErrors, setSubmitting }: any,
) => {
const showErr = (msg: string) => {
@ -49,7 +48,7 @@ function CertificateCreateModal({
});
};
setCertificateAuthority(payload, {
setCertificate(payload, {
onError: (err: any) => {
if (err.message === "ca-bundle-does-not-exist") {
setErrors({
@ -78,13 +77,13 @@ function CertificateCreateModal({
caBundle: "",
maxDomains: 5,
isWildcardSupported: false,
} as CertificateAuthority
} as Certificate
}
onSubmit={onSubmit}>
{({ isSubmitting }) => (
<Form>
<ModalHeader>
{intl.formatMessage({ id: "certificate-authority.create" })}
{intl.formatMessage({ id: "certificate.create" })}
</ModalHeader>
<ModalCloseButton />
<ModalBody>
@ -96,110 +95,20 @@ function CertificateCreateModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "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>

4
frontend/src/modals/CertificateEditModal.tsx
View File

@ -109,14 +109,14 @@ function CertificateEditModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>

4
frontend/src/modals/DNSProviderCreateModal.tsx
View File

@ -227,14 +227,14 @@ function DNSProviderCreateModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "dns-provider.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "dns-provider.name",
id: "name",
})}
/>
<FormErrorMessage>

229
frontend/src/modals/DNSProviderEditModal.tsx.disabled
View File

@ -1,229 +0,0 @@
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 {
useDNSProvider,
useSetDNSProvider,
useDNSProvidersAcmesh,
} from "hooks";
import { intl } from "locale";
import { validateString } from "modules/Validations";
interface DNSProviderEditModalProps {
editId: number;
isOpen: boolean;
onClose: () => void;
}
function DNSProviderEditModal({
editId,
isOpen,
onClose,
}: DNSProviderEditModalProps) {
const toast = useToast();
const { status, data } = useDNSProvider(editId);
const { mutate: setDNSProvider } = useSetDNSProvider();
const onSubmit = async (
payload: DNSProvider,
{ setErrors, setSubmitting }: any,
) => {
// 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) => {
showErr(err.message);
},
onSuccess: () => onClose(),
onSettled: () => setSubmitting(false),
});
};
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="name" validate={validateString(1, 100)}>
{({ field, form }: any) => (
<FormControl
isRequired
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "dns-provider.name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "dns-provider.name",
})}
/>
<FormErrorMessage>
{form.errors.name}
</FormErrorMessage>
</FormControl>
)}
</Field>
<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: any) => {
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 { DNSProviderEditModal };

4
frontend/src/modals/HostCreateModal.tsx
View File

@ -93,14 +93,14 @@ function HostCreateModal({ isOpen, onClose }: HostCreateModalProps) {
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>{form.errors.name}</FormErrorMessage>

4
frontend/src/modals/UpstreamCreateModal.tsx
View File

@ -94,14 +94,14 @@ function UpstreamCreateModal({ isOpen, onClose }: UpstreamCreateModalProps) {
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>{form.errors.name}</FormErrorMessage>

4
frontend/src/modals/UpstreamEditModal.tsx
View File

@ -110,14 +110,14 @@ function UpstreamEditModal({
isInvalid={form.errors.name && form.touched.name}>
<FormLabel htmlFor="name">
{intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
</FormLabel>
<Input
{...field}
id="name"
placeholder={intl.formatMessage({
id: "certificate-authority.name",
id: "name",
})}
/>
<FormErrorMessage>

2
frontend/src/pages/AccessLists/Table.tsx
View File

@ -37,7 +37,7 @@ function Table({
sortable: true,
},
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/CertificateAuthorities/Table.tsx
View File

@ -33,7 +33,7 @@ function Table({
const [columns, tableData] = useMemo(() => {
const columns = [
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/Certificates/Table.tsx
View File

@ -49,7 +49,7 @@ function Table({
sortable: true,
},
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/DNSProviders/Table.tsx
View File

@ -39,7 +39,7 @@ function Table({
sortable: true,
},
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/NginxTemplates/NginxTemplatesTable.tsx
View File

@ -50,7 +50,7 @@ function NginxTemplatesTable({
sortable: true,
},
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/Settings/SettingsTable.tsx
View File

@ -41,7 +41,7 @@ function SettingsTable({
const [columns, tableData] = useMemo(() => {
const columns = [
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,

2
frontend/src/pages/Upstreams/Table.tsx
View File

@ -47,7 +47,7 @@ function Table({
className: "w-80",
},
{
Header: intl.formatMessage({ id: "column.name" }),
Header: intl.formatMessage({ id: "name" }),
accessor: "name",
sortable: true,
Filter: TextFilter,