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

Certificates table compliance and other stuff

Browse Source
This commit is contained in:
Jamie Curnow 2023-01-16 14:57:14 +10:00
parent 9a5cbbba49
commit e890bfcf10
16 changed files with 666 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/locale/src/HelpDoc/en/AccessLists.md Normal file
View File

@ -0,0 +1,3 @@
# Access Lists Help
todo

3
frontend/src/locale/src/HelpDoc/en/Certificates.md Normal file
View File

@ -0,0 +1,3 @@
# Certificates Help
todo

3
frontend/src/locale/src/HelpDoc/en/NginxTemplates.md Normal file
View File

@ -0,0 +1,3 @@
# Nginx Templates Help
todo

3
frontend/src/locale/src/HelpDoc/en/index.ts
View File

@ -1,2 +1,5 @@
export * as AccessLists from "./AccessLists.md";
export * as Certificates from "./Certificates.md";
export * as CertificateAuthorities from "./CertificateAuthorities.md";
export * as DNSProviders from "./DNSProviders.md";
export * as NginxTemplates from "./NginxTemplates.md";

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

@ -311,6 +311,9 @@
"capability.users.manage": {
"defaultMessage": "Manage Users"
},
"certificate.create": {
"defaultMessage": "Create Certificate"
},
"certificate-authorities.title": {
"defaultMessage": "Certificate Authorities"
},
@ -380,9 +383,6 @@
"create-access-list-title": {
"defaultMessage": "There are no Access Lists"
},
"create-certificate": {
"defaultMessage": "Create Certificate"
},
"create-certificate-title": {
"defaultMessage": "There are no Certificates"
},

221
frontend/src/modals/CertificateCreateModal.tsx Normal file
View 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 CertificateCreateModalProps {
isOpen: boolean;
onClose: () => void;
}
function CertificateCreateModal({
isOpen,
onClose,
}: CertificateCreateModalProps) {
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 { CertificateCreateModal };

240
frontend/src/modals/CertificateEditModal.tsx Normal file
View 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 CertificateEditModalProps {
editId: number;
isOpen: boolean;
onClose: () => void;
}
function CertificateEditModal({
editId,
isOpen,
onClose,
}: CertificateEditModalProps) {
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 { CertificateEditModal };

2
frontend/src/modals/index.ts
View File

@ -1,6 +1,8 @@
export * from "./AccessListCreateModal";
export * from "./CertificateAuthorityCreateModal";
export * from "./CertificateAuthorityEditModal";
export * from "./CertificateCreateModal";
export * from "./CertificateEditModal";
export * from "./ChangePasswordModal";
export * from "./DNSProviderCreateModal";
// export * from "./DNSProviderEditModal.tsx.disabled";

12
frontend/src/pages/AccessLists/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useAccessLists } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-access-list-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}

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

@ -17,7 +17,7 @@ function AccessLists() {
{intl.formatMessage({ id: "access-lists.title" })}
</Heading>
<HStack>
<HelpDrawer section="Access-Lists" />
<HelpDrawer section="AccessLists" />
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
{intl.formatMessage({ id: "access-list.create" })}
</PrettyButton>

47
frontend/src/pages/Certificates/CertificatesTable.tsx → frontend/src/pages/Certificates/Table.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import {
tableEvents,
@ -15,34 +15,25 @@ import {
TextFilter,
} from "components";
import { intl } from "locale";
import { CertificateEditModal } from "modals";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
const rowActions = [
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,
show: (data: any) => !data.isSystem,
},
];
export interface CertificatesTableProps {
export interface TableProps {
data: any;
pagination: TablePagination;
sortBy: TableSortBy[];
filters: TableFilter[];
onTableEvent: any;
}
function CertificatesTable({
function Table({
data,
pagination,
onTableEvent,
sortBy,
filters,
}: CertificatesTableProps) {
}: TableProps) {
const [editId, setEditId] = useState(0);
const [columns, tableData] = useMemo(() => {
const columns = [
{
@ -79,8 +70,17 @@ function CertificatesTable({
{
id: "actions",
accessor: "id",
Cell: ActionsFormatter(rowActions),
className: "w-80",
Cell: ActionsFormatter([
{
title: intl.formatMessage({
id: "action.edit",
}),
onClick: (e: any, { id }: any) => setEditId(id),
icon: <FiEdit />,
disabled: (data: any) => data.isReadonly,
},
]),
},
];
return [columns, data];
@ -156,7 +156,18 @@ function CertificatesTable({
});
}, [onTableEvent, tableInstance.state.filters]);
return <TableLayout pagination={pagination} {...tableInstance} />;
return (
<>
<TableLayout pagination={pagination} {...tableInstance} />
{editId ? (
<CertificateEditModal
isOpen
editId={editId}
onClose={() => setEditId(0)}
/>
) : null}
</>
);
}
export { CertificatesTable };
export default Table;

97
frontend/src/pages/Certificates/TableWrapper.tsx Normal file
View File

@ -0,0 +1,97 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useCertificates } from "hooks";
import { intl } from "locale";
import Table from "./Table";
const initialState = {
offset: 0,
limit: 10,
sortBy: [
{
id: "name",
desc: false,
},
],
filters: [],
};
interface TableWrapperProps {
onCreateClick?: () => void;
}
function TableWrapper({ onCreateClick }: TableWrapperProps) {
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
tableEventReducer,
initialState,
);
const [tableData, setTableData] = useState(null);
const { isFetching, isLoading, isError, error, data } = useCertificates(
offset,
limit,
sortBy,
filters,
);
useEffect(() => {
setTableData(data as any);
}, [data]);
if (isFetching || isLoading || !tableData) {
return <SpinnerPage />;
}
if (isError) {
return (
<Alert status="error">
<AlertIcon />
{error?.message || "Unknown error"}
</Alert>
);
}
if (isFetching || isLoading || !tableData) {
return <SpinnerPage />;
}
// When there are no items and no filters active, show the nicer empty view
if (data?.total === 0 && filters?.length === 0) {
return (
<EmptyList
title={intl.formatMessage({ id: "create-certificate-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}
const pagination = {
offset: data?.offset || initialState.offset,
limit: data?.limit || initialState.limit,
total: data?.total || 0,
};
return (
<Table
data={data?.items || []}
pagination={pagination}
sortBy={sortBy}
filters={filters}
onTableEvent={dispatch}
/>
);
}
export default TableWrapper;

96
frontend/src/pages/Certificates/index.tsx
View File

@ -1,79 +1,14 @@
import { useEffect, useReducer, useState } from "react";
import { useState } from "react";
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useCertificates } from "hooks";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { CertificateCreateModal } from "modals";
import { CertificatesTable } from "./CertificatesTable";
const initialState = {
offset: 0,
limit: 10,
sortBy: [
{
id: "name",
desc: false,
},
],
filters: [],
};
import TableWrapper from "./TableWrapper";
function Certificates() {
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
tableEventReducer,
initialState,
);
const [tableData, setTableData] = useState(null);
const { isFetching, isLoading, error, data } = useCertificates(
offset,
limit,
sortBy,
filters,
);
useEffect(() => {
setTableData(data as any);
}, [data]);
if (error || (!tableData && !isFetching && !isLoading)) {
return (
<Alert status="error">
<AlertIcon />
{error?.message || "Unknown error"}
</Alert>
);
}
if (isFetching || isLoading || !tableData) {
return <SpinnerPage />;
}
if (data?.total === 0 && filters?.length === 0) {
return (
<EmptyList
title={intl.formatMessage({ id: "create-certificate-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}
const pagination = {
offset: data?.offset || initialState.offset,
limit: data?.limit || initialState.limit,
total: data?.total || 0,
};
const [createShown, setCreateShown] = useState(false);
return (
<>
@ -81,16 +16,17 @@ function Certificates() {
<Heading mb={2}>
{intl.formatMessage({ id: "certificates.title" })}
</Heading>
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-certificate" })}
</PrettyButton>
<HStack>
<HelpDrawer section="Certificates" />
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
{intl.formatMessage({ id: "certificate.create" })}
</PrettyButton>
</HStack>
</HStack>
<CertificatesTable
data={data?.items || []}
pagination={pagination}
sortBy={sortBy}
filters={filters}
onTableEvent={dispatch}
<TableWrapper onCreateClick={() => setCreateShown(true)} />
<CertificateCreateModal
isOpen={createShown}
onClose={() => setCreateShown(false)}
/>
</>
);

12
frontend/src/pages/DNSProviders/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useDNSProviders } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-dns-provider-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}

16
frontend/src/pages/NginxTemplates/index.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
import { PrettyButton, SpinnerPage, tableEventReducer } from "components";
import {
HelpDrawer,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useNginxTemplates } from "hooks";
import { intl } from "locale";
@ -62,9 +67,12 @@ function NginxTemplates() {
<Heading mb={2}>
{intl.formatMessage({ id: "nginx-templates.title" })}
</Heading>
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-nginx-template" })}
</PrettyButton>
<HStack>
<HelpDrawer section="NginxTemplates" />
<PrettyButton size="sm">
{intl.formatMessage({ id: "create-nginx-template" })}
</PrettyButton>
</HStack>
</HStack>
<NginxTemplatesTable
data={data?.items || []}

12
frontend/src/pages/Upstreams/TableWrapper.tsx
View File

@ -1,7 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useUpstreams } from "hooks";
import { intl } from "locale";
@ -63,6 +68,11 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
<EmptyList
title={intl.formatMessage({ id: "create-upstream-title" })}
summary={intl.formatMessage({ id: "create-hint" })}
createButton={
<PrettyButton mt={5} onClick={onCreateClick}>
{intl.formatMessage({ id: "lets-go" })}
</PrettyButton>
}
/>
);
}