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

Refactor acme.sh dns providers

Browse Source 
- updated chakra and typescript
- added locales for dns provider configs
This commit is contained in:
Jamie Curnow
2023-01-12 16:25:43 +10:00
parent 1d5d3ecd7a
commit 5d3bc0fabd
57 changed files with 2204 additions and 2161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/package.json
View File

@ -3,9 +3,9 @@
"version": "3.0.0",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.2.4",
"@emotion/react": "^11",
"@emotion/styled": "^11.9.3",
"@chakra-ui/react": "^2.4.7",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@testing-library/jest-dom": "5.16.4",
"@testing-library/react": "13.3.0",
"@types/humps": "^2.0.2",
@ -34,7 +34,7 @@
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"formik": "^2.2.9",
"framer-motion": "^6",
"framer-motion": "^8.4.2",
"humps": "^2.0.1",
"jest-date-mock": "1.0.8",
"jest-fetch-mock": "3.0.3",
@ -59,7 +59,7 @@
"react-table": "7.8.0",
"rooks": "5.11.8",
"tmp": "^0.2.1",
"typescript": "^4.7.4"
"typescript": "^4.9.4"
},
"scripts": {
"start": "react-scripts start",

9
frontend/src/api/npm/base.ts
View File

@ -28,21 +28,22 @@ function buildBody(data?: Record<string, any>) {
}
}
async function processResponse(response: Response) {
async function processResponse(response: Response, skipCamelize = false) {
const payload = await response.json();
if (!response.ok) {
throw new Error(payload.error.message);
}
return camelizeKeys(payload) as any;
return (skipCamelize ? payload : camelizeKeys(payload)) as any;
}
interface GetArgs {
url: string;
params?: queryString.StringifiableRecord;
skipCamelize?: boolean;
}
export async function get(
{ url, params }: GetArgs,
{ url, params, skipCamelize }: GetArgs,
abortController?: AbortController,
) {
const apiUrl = buildUrl({ url, params });
@ -50,7 +51,7 @@ export async function get(
const signal = abortController?.signal;
const headers = buildAuthHeader();
const response = await fetch(apiUrl, { method, headers, signal });
return processResponse(response);
return processResponse(response, skipCamelize);
}
interface PostArgs {

2
frontend/src/api/npm/getDNSProvidersAcmesh.ts
View File

@ -7,6 +7,8 @@ export async function getDNSProvidersAcmesh(
const { result } = await api.get(
{
url: "dns-providers/acmesh",
// Important for this endpoint:
skipCamelize: true,
},
abortController,
);

21
frontend/src/api/npm/models.ts
View File

@ -74,18 +74,25 @@ export interface DNSProvider {
meta: any;
}
export interface DNSProvidersAcmeshField {
name: string;
export interface DNSProvidersAcmeshProperty {
title: string;
type: string;
metaKey: string;
isRequired: boolean;
additionalProperties: boolean;
minimum: number;
maximum: number;
minLength: number;
maxLength: number;
pattern: string;
isSecret: boolean;
}
export interface DNSProvidersAcmesh {
name: string;
acmeshName: string;
fields: DNSProvidersAcmeshField[];
title: string;
type: string;
additionalProperties: boolean;
minProperties: number;
required: string[];
properties: any;
}
export interface Host {

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

@ -137,6 +137,108 @@
"acmesh.dns_zonomi": {
"defaultMessage": "Zonomi"
},
"acmesh-property.access-key-id": {
"defaultMessage": "Access Key ID"
},
"acmesh-property.account-id": {
"defaultMessage": "Account ID"
},
"acmesh-property.api-key": {
"defaultMessage": "API Key"
},
"acmesh-property.api-url": {
"defaultMessage": "API URL"
},
"acmesh-property.app-id": {
"defaultMessage": "APP ID"
},
"acmesh-property.auth-id": {
"defaultMessage": "Auth ID"
},
"acmesh-property.base-url": {
"defaultMessage": "Base URL"
},
"acmesh-property.client-id": {
"defaultMessage": "Client ID"
},
"acmesh-property.client-secret": {
"defaultMessage": "Client Secret"
},
"acmesh-property.credentials": {
"defaultMessage": "Credentials"
},
"acmesh-property.context": {
"defaultMessage": "Context"
},
"acmesh-property.customer": {
"defaultMessage": "Customer"
},
"acmesh-property.email": {
"defaultMessage": "Email"
},
"acmesh-property.id": {
"defaultMessage": "ID"
},
"acmesh-property.insecure": {
"defaultMessage": "Insecure"
},
"acmesh-property.key": {
"defaultMessage": "Key"
},
"acmesh-property.oauth-token": {
"defaultMessage": "OAuth Token"
},
"acmesh-property.otp-secret": {
"defaultMessage": "OTP Secret"
},
"acmesh-property.password": {
"defaultMessage": "Password"
},
"acmesh-property.secret": {
"defaultMessage": "Secret"
},
"acmesh-property.secret-access-key": {
"defaultMessage": "Secret Access Key"
},
"acmesh-property.server": {
"defaultMessage": "Server"
},
"acmesh-property.server-id": {
"defaultMessage": "Server ID"
},
"acmesh-property.slow-rate": {
"defaultMessage": "Slow Rate"
},
"acmesh-property.subdomain": {
"defaultMessage": "Subdomain"
},
"acmesh-property.subscription-id": {
"defaultMessage": "Subscription ID"
},
"acmesh-property.sub-auth-id": {
"defaultMessage": "Sub-Auth ID"
},
"acmesh-property.tenant-id": {
"defaultMessage": "Tenant ID"
},
"acmesh-property.token": {
"defaultMessage": "Token"
},
"acmesh-property.ttl": {
"defaultMessage": "TTL"
},
"acmesh-property.user": {
"defaultMessage": "User"
},
"acmesh-property.username": {
"defaultMessage": "Username"
},
"acmesh-property.url": {
"defaultMessage": "URL"
},
"acmesh-property.zone-id": {
"defaultMessage": "Zone ID"
},
"action.edit": {
"defaultMessage": "Edit"
},

284
frontend/src/modals/DNSProviderCreateModal copy.tsx Normal file
View File

@ -0,0 +1,284 @@
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,
DNSProvidersAcmeshProperty,
} from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { useSetDNSProvider, useDNSProvidersAcmesh } from "hooks";
import { intl } from "locale";
import { validateString } from "modules/Validations";
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,
) => {
// 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.title === name);
};
const fullItem = getAcmeshItem(acmeshItem);
const itemProperties = fullItem?.properties;
const renderInputType = (
field: any,
fieldName: string,
f: DNSProvidersAcmeshProperty,
value: any,
) => {
if (f.type === "bool") {
return (
<Checkbox {...field} size="md" colorScheme="orange" isChecked={value}>
{f.title}
</Checkbox>
);
}
let type = "text";
let props: any = {};
if (fullItem?.required.indexOf(fieldName) !== -1) {
// This is required
props.required = true;
}
if (f.type === "string") {
props.minLength = f.minLength || null;
props.maxLength = f.maxLength || null;
props.pattern = f.pattern || null;
}
if (f.type === "integer") {
type = "number";
props.min = f.minimum || null;
props.max = f.maximum || null;
}
if (f.isSecret) {
type = "password";
}
return (
<Input
{...field}
id={fieldName}
type={type}
defaultValue={value}
{...props}
/>
);
};
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.title} value={item.title}>
{intl.formatMessage({
id: `acmesh.${item.title}`,
})}
</option>
);
})}
</Select>
<FormErrorMessage>
{form.errors.acmeshName}
</FormErrorMessage>
</FormControl>
)}
</Field>
{acmeshItem !== "" ? <hr /> : null}
{itemProperties
? Object.keys(itemProperties).map((fieldName, _) => {
const f = itemProperties[fieldName];
const name = `meta[${fieldName}]`;
return (
<Field
name={fieldName}
type={
f.type === "boolean" ? "checkbox" : undefined
}>
{({ field, form }: any) => (
<FormControl
isRequired={f.isRequired}
isInvalid={
form.errors[name] && form.touched[name]
}>
{f.type !== "bool" ? (
<FormLabel htmlFor={name}>
{f.title}
{/* todo: locale for this*/}
</FormLabel>
) : null}
{renderInputType(
field,
fieldName,
f,
values.meta[f.title],
)}
<FormErrorMessage>
{form.errors[name]}
</FormErrorMessage>
</FormControl>
)}
</Field>
);
})
: null}
</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 };

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

@ -21,7 +21,7 @@ import {
import {
DNSProvider,
DNSProvidersAcmesh,
DNSProvidersAcmeshField,
DNSProvidersAcmeshProperty,
} from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
@ -53,11 +53,17 @@ function DNSProviderCreateModal({
setAcmeshData(acmeshDataResp || []);
}, [acmeshDataResp]);
const onModalClose = () => {
setAcmeshItem("");
onClose();
};
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
console.log("PAYLOAD:", payload);
const showErr = (msg: string) => {
toast({
@ -83,35 +89,63 @@ function DNSProviderCreateModal({
showErr(err.message);
}
},
onSuccess: () => onClose(),
onSuccess: () => onModalClose(),
onSettled: () => setSubmitting(false),
});
};
const getAcmeshItem = (name: string): DNSProvidersAcmesh | undefined => {
return acmeshData.find((item) => item.acmeshName === name);
return acmeshData.find((item) => item.title === name);
};
const fullItem = getAcmeshItem(acmeshItem);
const itemProperties = fullItem?.properties;
const renderInputType = (
field: any,
f: DNSProvidersAcmeshField,
fieldName: string,
f: DNSProvidersAcmeshProperty,
value: any,
) => {
if (f.type === "bool") {
if (["bool", "boolean"].indexOf(f.type) !== -1) {
return (
<Checkbox {...field} size="md" colorScheme="orange" isChecked={value}>
{f.name}
<Checkbox size="md" colorScheme="orange" isChecked={value} {...field}>
{f.title}
</Checkbox>
);
}
let type = "text";
let props: any = {};
if (f.type === "string") {
props.minLength = f.minLength || null;
props.maxLength = f.maxLength || null;
props.pattern = f.pattern || null;
}
if (f.type === "integer") {
type = "number";
props.min = f.minimum || null;
props.max = f.maximum || null;
}
if (f.isSecret) {
type = "password";
}
return (
<Input {...field} id={f.metaKey} type={f.type} defaultValue={value} />
<Input
{...field}
id={fieldName}
type={type}
defaultValue={value}
placeholder={fieldName}
{...props}
/>
);
};
return (
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
<Modal isOpen={isOpen} onClose={onModalClose} closeOnOverlayClick={false}>
<ModalOverlay />
<ModalContent>
{acmeshIsLoading ? (
@ -135,29 +169,6 @@ function DNSProviderCreateModal({
<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
@ -180,11 +191,9 @@ function DNSProviderCreateModal({
<option value="" />
{acmeshData.map((item: DNSProvidersAcmesh) => {
return (
<option
key={item.acmeshName}
value={item.acmeshName}>
<option key={item.title} value={item.title}>
{intl.formatMessage({
id: `acmesh.${item.acmeshName}`,
id: `acmesh.${item.title}`,
})}
</option>
);
@ -196,42 +205,84 @@ function DNSProviderCreateModal({
</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}>
{acmeshItem !== "" ? (
<>
<Field name="name" validate={validateString(1, 100)}>
{({ 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],
)}
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]}
{form.errors.name}
</FormErrorMessage>
</FormControl>
)}
</Field>
);
})}
{itemProperties
? Object.keys(itemProperties).map((fieldName, _) => {
const f = itemProperties[fieldName];
const name = `meta[${fieldName}]`;
return (
<Field
name={`meta[${fieldName}]`}
type={
f.type === "boolean"
? "checkbox"
: undefined
}>
{({ field, form }: any) => (
<FormControl
isRequired={
fullItem?.required.indexOf(
fieldName,
) !== -1
}
isInvalid={
form.errors[name] && form.touched[name]
}>
{f.type !== "bool" ? (
<FormLabel htmlFor={name}>
{intl.formatMessage({
id: `acmesh-property.${f.title}`,
})}
</FormLabel>
) : null}
{renderInputType(
field,
fieldName,
f,
values.meta[f.title],
)}
<FormErrorMessage>
{form.errors[name]}
</FormErrorMessage>
</FormControl>
)}
</Field>
);
})
: null}
</>
) : null}
</Stack>
</ModalBody>
<ModalFooter>
<PrettyButton mr={3} isLoading={isSubmitting}>
{intl.formatMessage({ id: "form.save" })}
</PrettyButton>
<Button onClick={onClose} isLoading={isSubmitting}>
<Button onClick={onModalClose} isLoading={isSubmitting}>
{intl.formatMessage({ id: "form.cancel" })}
</Button>
</ModalFooter>

1511
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff