diff --git a/frontend/src/components/LocalePicker.tsx b/frontend/src/components/LocalePicker.tsx
index 27ed3f1c..53e76771 100644
--- a/frontend/src/components/LocalePicker.tsx
+++ b/frontend/src/components/LocalePicker.tsx
@@ -47,7 +47,6 @@ function LocalePicker({ onChange, className }: LocalPickerProps) {
}
onClick={() => changeTo(item[0])}
- // rel={item[1]}
key={`locale-${item[0]}`}>
{intl.formatMessage({ id: `locale-${item[1]}` })}
diff --git a/frontend/src/components/Navigation/NavigationMenu.tsx b/frontend/src/components/Navigation/NavigationMenu.tsx
index 62edb3b7..8ee4abb2 100644
--- a/frontend/src/components/Navigation/NavigationMenu.tsx
+++ b/frontend/src/components/Navigation/NavigationMenu.tsx
@@ -173,7 +173,6 @@ const DesktopNavigation: FC = () => {
navItems.findIndex((item) => {
// Find the nav item whose location / sub items location is the beginning of the currently active path
if (item.to) {
- // console.debug(item.to, path);
if (item.to === "/") {
return path === item.to;
}
diff --git a/frontend/src/components/PrettyMenuButton.tsx b/frontend/src/components/PrettyMenuButton.tsx
new file mode 100644
index 00000000..554a078c
--- /dev/null
+++ b/frontend/src/components/PrettyMenuButton.tsx
@@ -0,0 +1,23 @@
+import { Button, MenuButton, MenuButtonProps } from "@chakra-ui/react";
+import { FiChevronDown } from "react-icons/fi";
+
+function PrettyMenuButton(props: MenuButtonProps) {
+ return (
+ }
+ _hover={{
+ bgGradient: "linear(to-r, red.400,pink.400)",
+ boxShadow: "xl",
+ }}
+ {...props}>
+ {props.children}
+
+ );
+}
+
+export { PrettyMenuButton };
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 47caaa09..3f88be3e 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -9,6 +9,7 @@ export * from "./Monospace";
export * from "./Navigation";
export * from "./Permissions";
export * from "./PrettyButton";
+export * from "./PrettyMenuButton";
export * from "./SiteWrapper";
export * from "./SpinnerPage";
export * from "./Table";
diff --git a/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx b/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx
index fc43c45b..6c899fb4 100644
--- a/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx
+++ b/frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx
@@ -1,8 +1,5 @@
-import { useState } from "react";
-
import {
Button,
- ButtonGroup,
FormControl,
FormErrorMessage,
FormLabel,
@@ -24,23 +21,25 @@ import { useSetCertificate } from "hooks";
import { intl } from "locale";
import { validateString } from "modules/Validations";
+import CustomForm from "./CustomForm";
+import DNSForm from "./DNSForm";
import HTTPForm from "./HTTPForm";
interface CertificateCreateModalProps {
isOpen: boolean;
onClose: () => void;
+ certType: string;
}
function CertificateCreateModal({
isOpen,
onClose,
+ certType,
}: CertificateCreateModalProps) {
- const [certType, setCertType] = useState("");
const toast = useToast();
const { mutate: setCertificate } = useSetCertificate();
const onModalClose = () => {
onClose();
- setCertType("");
};
const onSubmit = async (
@@ -98,60 +97,33 @@ function CertificateCreateModal({
- {certType === "" ? (
-
-
- Select the Certificate Validation method
-
-
-
-
-
-
-
- ) : null}
-
- {certType !== "" ? (
-
-
- {({ field, form }: any) => (
-
-
- {intl.formatMessage({
- id: "name",
- })}
-
-
-
- {form.errors.name}
-
-
- )}
-
-
- ) : null}
+
+
+ {({ field, form }: any) => (
+
+
+ {intl.formatMessage({
+ id: "name",
+ })}
+
+
+ {form.errors.name}
+
+ )}
+
+
{certType === "http" ? : null}
+ {certType === "dns" ? : null}
+ {certType === "custom" ? : null}
{certType !== "" ? (
diff --git a/frontend/src/pages/Certificates/TableWrapper.tsx b/frontend/src/pages/Certificates/TableWrapper.tsx
index b1f51c55..e585da2b 100644
--- a/frontend/src/pages/Certificates/TableWrapper.tsx
+++ b/frontend/src/pages/Certificates/TableWrapper.tsx
@@ -1,12 +1,7 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
-import {
- EmptyList,
- PrettyButton,
- SpinnerPage,
- tableEventReducer,
-} from "components";
+import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import { useCertificates } from "hooks";
import { intl } from "locale";
@@ -23,11 +18,7 @@ const initialState = {
],
filters: [],
};
-
-interface TableWrapperProps {
- onCreateClick?: () => void;
-}
-function TableWrapper({ onCreateClick }: TableWrapperProps) {
+function TableWrapper() {
const [{ offset, limit, sortBy, filters }, dispatch] = useReducer(
tableEventReducer,
initialState,
@@ -68,11 +59,6 @@ function TableWrapper({ onCreateClick }: TableWrapperProps) {
- {intl.formatMessage({ id: "lets-go" })}
-
- }
/>
);
}
diff --git a/frontend/src/pages/Certificates/index.tsx b/frontend/src/pages/Certificates/index.tsx
index e76f006f..6477d4d2 100644
--- a/frontend/src/pages/Certificates/index.tsx
+++ b/frontend/src/pages/Certificates/index.tsx
@@ -1,14 +1,22 @@
import { useState } from "react";
-import { Heading, HStack } from "@chakra-ui/react";
-import { HelpDrawer, PrettyButton } from "components";
+import {
+ Heading,
+ HStack,
+ Menu,
+ MenuList,
+ MenuItem,
+ MenuDivider,
+} from "@chakra-ui/react";
+import { HelpDrawer, PrettyMenuButton } from "components";
import { intl } from "locale";
import { CertificateCreateModal } from "modals";
+import { FiGlobe, FiServer, FiUpload } from "react-icons/fi";
import TableWrapper from "./TableWrapper";
function Certificates() {
- const [createShown, setCreateShown] = useState(false);
+ const [createShown, setCreateShown] = useState("");
return (
<>
@@ -18,15 +26,36 @@ function Certificates() {
- setCreateShown(true)}>
- {intl.formatMessage({ id: "certificate.create" })}
-
+
- setCreateShown(true)} />
+
setCreateShown(false)}
+ isOpen={createShown !== ""}
+ certType={createShown}
+ onClose={() => setCreateShown("")}
/>
);