Skip to content

Commit 83a9666

Browse files
jc21jc21
committed
Nicer cert type create select
1 parent 6681da6 commit 83a9666

File tree

7 files changed

+93
-84
lines changed

7 files changed

+93
-84
lines changed

‎frontend/src/components/LocalePicker.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ function LocalePicker({ onChange, className }: LocalPickerProps) {
4747
<MenuItem
4848
icon={<Flag countryCode={getFlagCodeForLocale(item[0])} />}
4949
onClick={() => changeTo(item[0])}
50-
// rel={item[1]}
5150
key={`locale-${item[0]}`}>
5251
<span>{intl.formatMessage({ id: `locale-${item[1]}` })}</span>
5352
</MenuItem>

‎frontend/src/components/Navigation/NavigationMenu.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,6 @@ const DesktopNavigation: FC = () => {
173173
navItems.findIndex((item) => {
174174
// Find the nav item whose ___location / sub items ___location is the beginning of the currently active path
175175
if (item.to) {
176-
// console.debug(item.to, path);
177176
if (item.to === "/") {
178177
return path === item.to;
179178
}

‎frontend/src/components/PrettyMenuButton.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Button, MenuButton, MenuButtonProps } from "@chakra-ui/react";
2+
import { FiChevronDown } from "react-icons/fi";
3+
4+
function PrettyMenuButton(props: MenuButtonProps) {
5+
return (
6+
<MenuButton
7+
size="sm"
8+
as={Button}
9+
fontFamily="heading"
10+
bgGradient="linear(to-r, red.400,pink.400)"
11+
color="white"
12+
rightIcon={<FiChevronDown />}
13+
_hover={{
14+
bgGradient: "linear(to-r, red.400,pink.400)",
15+
boxShadow: "xl",
16+
}}
17+
{...props}>
18+
{props.children}
19+
</MenuButton>
20+
);
21+
}
22+
23+
export { PrettyMenuButton };

‎frontend/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export * from "./Monospace";
99
export * from "./Navigation";
1010
export * from "./Permissions";
1111
export * from "./PrettyButton";
12+
export * from "./PrettyMenuButton";
1213
export * from "./SiteWrapper";
1314
export * from "./SpinnerPage";
1415
export * from "./Table";

‎frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx

Lines changed: 29 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import { useState } from "react";
2-
31
import {
42
Button,
5-
ButtonGroup,
63
FormControl,
74
FormErrorMessage,
85
FormLabel,
@@ -24,23 +21,25 @@ import { useSetCertificate } from "hooks";
2421
import { intl } from "locale";
2522
import { validateString } from "modules/Validations";
2623

24+
import CustomForm from "./CustomForm";
25+
import DNSForm from "./DNSForm";
2726
import HTTPForm from "./HTTPForm";
2827

2928
interface CertificateCreateModalProps {
3029
isOpen: boolean;
3130
onClose: () => void;
31+
certType: string;
3232
}
3333
function CertificateCreateModal({
3434
isOpen,
3535
onClose,
36+
certType,
3637
}: CertificateCreateModalProps) {
37-
const [certType, setCertType] = useState("");
3838
const toast = useToast();
3939
const { mutate: setCertificate } = useSetCertificate();
4040

4141
const onModalClose = () => {
4242
onClose();
43-
setCertType("");
4443
};
4544

4645
const onSubmit = async (
@@ -98,60 +97,33 @@ function CertificateCreateModal({
9897
</ModalHeader>
9998
<ModalCloseButton />
10099
<ModalBody>
101-
{certType === "" ? (
102-
<FormControl>
103-
<FormLabel htmlFor="type">
104-
Select the Certificate Validation method
105-
</FormLabel>
106-
<ButtonGroup style={{ width: "100%" }}>
107-
<Button
108-
onClick={() => setCertType("http")}
109-
style={{ width: "33%" }}>
110-
{intl.formatMessage({ id: "type.http" })}
111-
</Button>
112-
<Button
113-
onClick={() => setCertType("dns")}
114-
style={{ width: "34%" }}>
115-
{intl.formatMessage({ id: "type.dns" })}
116-
</Button>
117-
<Button
118-
onClick={() => setCertType("custom")}
119-
style={{ width: "33%" }}>
120-
{intl.formatMessage({ id: "type.custom" })}
121-
</Button>
122-
</ButtonGroup>
123-
</FormControl>
124-
) : null}
125-
126-
{certType !== "" ? (
127-
<Stack spacing={4}>
128-
<Field name="name" validate={validateString(1, 100)}>
129-
{({ field, form }: any) => (
130-
<FormControl
131-
isRequired
132-
isInvalid={form.errors.name && form.touched.name}>
133-
<FormLabel htmlFor="name">
134-
{intl.formatMessage({
135-
id: "name",
136-
})}
137-
</FormLabel>
138-
<Input
139-
{...field}
140-
id="name"
141-
placeholder={intl.formatMessage({
142-
id: "name",
143-
})}
144-
/>
145-
<FormErrorMessage>
146-
{form.errors.name}
147-
</FormErrorMessage>
148-
</FormControl>
149-
)}
150-
</Field>
151-
</Stack>
152-
) : null}
100+
<Stack spacing={4}>
101+
<Field name="name" validate={validateString(1, 100)}>
102+
{({ field, form }: any) => (
103+
<FormControl
104+
isRequired
105+
isInvalid={form.errors.name && form.touched.name}>
106+
<FormLabel htmlFor="name">
107+
{intl.formatMessage({
108+
id: "name",
109+
})}
110+
</FormLabel>
111+
<Input
112+
{...field}
113+
id="name"
114+
placeholder={intl.formatMessage({
115+
id: "name",
116+
})}
117+
/>
118+
<FormErrorMessage>{form.errors.name}</FormErrorMessage>
119+
</FormControl>
120+
)}
121+
</Field>
122+
</Stack>
153123

154124
{certType === "http" ? <HTTPForm /> : null}
125+
{certType === "dns" ? <DNSForm /> : null}
126+
{certType === "custom" ? <CustomForm /> : null}
155127
</ModalBody>
156128
<ModalFooter>
157129
{certType !== "" ? (

‎frontend/src/pages/Certificates/TableWrapper.tsx

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import { useEffect, useReducer, useState } from "react";
22

33
import { Alert, AlertIcon } from "@chakra-ui/react";
4-
import {
5-
EmptyList,
6-
PrettyButton,
7-
SpinnerPage,
8-
tableEventReducer,
9-
} from "components";
4+
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
105
import { useCertificates } from "hooks";
116
import { intl } from "locale";
127

@@ -23,11 +18,7 @@ const initialState = {
2318
],
2419
filters: [],
2520
};
26-
27-
interface TableWrapperProps {
28-
onCreateClick?: () => void;
29-
}
30-
function TableWrapper({ onCreateClick }: TableWrapperProps) {
21+
function TableWrapper() {
3122
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
3223
tableEventReducer,
3324
initialState,
@@ -68,11 +59,6 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
6859
<EmptyList
6960
title={intl.formatMessage({ id: "create-certificate-title" })}
7061
summary={intl.formatMessage({ id: "create-hint" })}
71-
createButton={
72-
<PrettyButton mt={5} onClick={onCreateClick}>
73-
{intl.formatMessage({ id: "lets-go" })}
74-
</PrettyButton>
75-
}
7662
/>
7763
);
7864
}

‎frontend/src/pages/Certificates/index.tsx

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import { useState } from "react";
22

3-
import { Heading, HStack } from "@chakra-ui/react";
4-
import { HelpDrawer, PrettyButton } from "components";
3+
import {
4+
Heading,
5+
HStack,
6+
Menu,
7+
MenuList,
8+
MenuItem,
9+
MenuDivider,
10+
} from "@chakra-ui/react";
11+
import { HelpDrawer, PrettyMenuButton } from "components";
512
import { intl } from "locale";
613
import { CertificateCreateModal } from "modals";
14+
import { FiGlobe, FiServer, FiUpload } from "react-icons/fi";
715

816
import TableWrapper from "./TableWrapper";
917

1018
function Certificates() {
11-
const [createShown, setCreateShown] = useState(false);
19+
const [createShown, setCreateShown] = useState("");
1220

1321
return (
1422
<>
@@ -18,15 +26,36 @@ function Certificates() {
1826
</Heading>
1927
<HStack>
2028
<HelpDrawer section="Certificates" />
21-
<PrettyButton size="sm" onClick={() => setCreateShown(true)}>
22-
{intl.formatMessage({ id: "certificate.create" })}
23-
</PrettyButton>
29+
<Menu>
30+
<PrettyMenuButton>
31+
{intl.formatMessage({ id: "certificate.create" })}
32+
</PrettyMenuButton>
33+
<MenuList>
34+
<MenuItem
35+
icon={<FiGlobe />}
36+
onClick={() => setCreateShown("http")}>
37+
{intl.formatMessage({ id: "type.http" })}
38+
</MenuItem>
39+
<MenuItem
40+
icon={<FiServer />}
41+
onClick={() => setCreateShown("dns")}>
42+
{intl.formatMessage({ id: "type.dns" })}
43+
</MenuItem>
44+
<MenuDivider />
45+
<MenuItem
46+
icon={<FiUpload />}
47+
onClick={() => setCreateShown("custom")}>
48+
{intl.formatMessage({ id: "type.custom" })}
49+
</MenuItem>
50+
</MenuList>
51+
</Menu>
2452
</HStack>
2553
</HStack>
26-
<TableWrapper onCreateClick={() => setCreateShown(true)} />
54+
<TableWrapper />
2755
<CertificateCreateModal
28-
isOpen={createShown}
29-
onClose={() => setCreateShown(false)}
56+
isOpen={createShown !== ""}
57+
certType={createShown}
58+
onClose={() => setCreateShown("")}
3059
/>
3160
</>
3261
);

0 commit comments

Comments
 (0)