Mirrored_Repos/nginx-proxy-manager
1
0
Fork 0
mirror of https://github.com/jc21/nginx-proxy-manager.git synced 2024-08-30 18:22:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Converted to Vite since create-react-app is no longer being developed

Browse Source
This commit is contained in:
Jamie Curnow 2023-07-20 15:11:41 +10:00
parent 824a22efad
commit 6d6021c9bb
No known key found for this signature in database
GPG Key ID: FFBB624C43388E9E
115 changed files with 2511 additions and 10015 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker/rootfs/etc/nginx/conf.d/dev.conf
View File

@ -34,6 +34,6 @@ server {
proxy_set_header X-Forwarded-Scheme $scheme;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_pass http://127.0.0.1:9000;
proxy_pass http://127.0.0.1:5173;
}
}

2
docker/rootfs/etc/s6-overlay/s6-rc.d/frontend/run
View File

@ -20,7 +20,7 @@ if [ "$(is_true "$DEVELOPMENT")" = '1' ]; then
log_info 'Starting frontend ...'
s6-setuidgid "$PUID:$PGID" yarn install
exec s6-setuidgid "$PUID:$PGID" yarn start
exec s6-setuidgid "$PUID:$PGID" yarn dev
else
exit 0
fi

4
frontend/.env.development
View File

@ -1,4 +0,0 @@
PORT=9000
IMAGE_INLINE_SIZE_LIMIT=20000
REACT_APP_VERSION=development
REACT_APP_COMMIT=local

123
frontend/.eslintrc
View File

@ -1,123 +0,0 @@
{
"parser": "@typescript-eslint/parser",
"plugins": [
"prettier",
],
"extends": [
"react-app",
"eslint-config-prettier",
"plugin:prettier/recommended",
"prettier"
],
"env": {
"jest": true,
"browser": true,
"commonjs": true
},
"rules": {
"prettier/prettier": [
"error"
],
"@typescript-eslint/ban-ts-comment": [
"error",
{
"ts-ignore": "allow-with-description"
}
],
"@typescript-eslint/consistent-type-definitions": [
"error",
"interface"
],
"@typescript-eslint/explicit-function-return-type": [
"off"
],
"@typescript-eslint/explicit-module-boundary-types": [
"off"
],
"@typescript-eslint/explicit-member-accessibility": [
"off"
],
"@typescript-eslint/no-empty-function": [
"off"
],
"@typescript-eslint/no-explicit-any": [
"off"
],
"@typescript-eslint/no-non-null-assertion": [
"off"
],
"@typescript-eslint/naming-convention": [
"error",
{
"selector": "default",
"format": [
"camelCase",
"PascalCase",
"UPPER_CASE"
],
"leadingUnderscore": "allow",
"trailingUnderscore": "allow"
}
],
"react-hooks/rules-of-hooks": [
"error"
],
"react-hooks/exhaustive-deps": [
"warn",
{
"additionalHooks": "useAction|useReduxAction"
}
],
"react/jsx-curly-brace-presence": [
"warn",
{
"props": "never",
"children": "never",
}
],
"no-restricted-globals": [
"off"
],
"import/extensions": 0, // We let webpack handle resolving file extensions
"import/order": [
"error",
{
"alphabetize": {
"order": "asc",
"caseInsensitive": true
},
"newlines-between": "always",
"pathGroups": [
{
"pattern": "@(react)",
"group": "external",
"position": "before"
},
{
"pattern": "@/@(fixtures|jest)/**",
"group": "internal",
"position": "before"
},
{
"pattern": "@/**",
"group": "internal"
}
],
"pathGroupsExcludedImportTypes": [
"builtin",
"internal"
],
"groups": [
"builtin",
"external",
"internal",
[
"parent",
"sibling",
"index"
]
]
}
]
}
}

113
frontend/.eslintrc.cjs Normal file
View File

@ -0,0 +1,113 @@
module.exports = {
env: {
browser: true,
es2020: true,
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:prettier/recommended",
"plugin:react/recommended",
"prettier",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
},
plugins: ["react-refresh"],
settings: {
"import/resolver": {
// You will also need to install and configure the TypeScript resolver
// See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
typescript: true,
node: true,
},
},
rules: {
"import/default": 0,
"import/no-named-as-default-member": 0,
"import/no-named-as-default": 0,
"react-refresh/only-export-components": 0,
"react/react-in-jsx-scope": 0,
"prettier/prettier": ["error"],
"@typescript-eslint/ban-ts-comment": [
"error",
{
"ts-ignore": "allow-with-description",
},
],
"@typescript-eslint/consistent-type-definitions": ["error", "interface"],
"@typescript-eslint/explicit-function-return-type": ["off"],
"@typescript-eslint/explicit-module-boundary-types": ["off"],
"@typescript-eslint/explicit-member-accessibility": ["off"],
"@typescript-eslint/no-empty-function": ["off"],
"@typescript-eslint/no-explicit-any": ["off"],
"@typescript-eslint/no-non-null-assertion": ["off"],
"@typescript-eslint/naming-convention": [
"error",
{
selector: "default",
format: ["camelCase", "PascalCase", "UPPER_CASE"],
leadingUnderscore: "allow",
trailingUnderscore: "allow",
filter: {
regex: "^(2xl)$",
match: false,
},
},
],
"react-hooks/rules-of-hooks": ["error"],
"react-hooks/exhaustive-deps": [
"warn",
{
additionalHooks: "useAction|useReduxAction",
},
],
"react/jsx-curly-brace-presence": [
"warn",
{
props: "never",
children: "never",
},
],
"no-restricted-globals": ["off"],
"import/extensions": 0, // We let webpack handle resolving file extensions
"import/order": [
"error",
{
alphabetize: {
order: "asc",
caseInsensitive: true,
},
"newlines-between": "always",
pathGroups: [
{
pattern: "@(react)",
group: "external",
position: "before",
},
{
pattern: "@/@(fixtures|jest)/**",
group: "internal",
position: "before",
},
{
pattern: "@/**",
group: "internal",
},
],
pathGroupsExcludedImportTypes: ["builtin", "internal"],
groups: [
"builtin",
"external",
"internal",
["parent", "sibling", "index"],
],
},
],
},
};

24
frontend/public/index.html → frontend/index.html
View File

@ -1,18 +1,16 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Nginx Proxy Manager</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta http-equiv="Content-Language" content="en" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
content="black-translucent" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="HandheldFriendly" content="True" />
@ -20,36 +18,32 @@
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/favicon/apple-touch-icon.png"
/>
href="/images/favicon/apple-touch-icon.png" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/images/favicon/favicon-32x32.png"
/>
href="/images/favicon/favicon-32x32.png" />
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/images/favicon/favicon-16x16.png"
/>
href="/images/favicon/favicon-16x16.png" />
<link rel="manifest" href="/images/favicon/site.webmanifest" />
<link
rel="mask-icon"
href="/images/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
color="#5bbad5" />
<link rel="shortcut icon" href="/images/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#333333" />
<meta
name="msapplication-config"
content="/images/favicon/browserconfig.xml"
/>
content="/images/favicon/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

161
frontend/package.json
View File

@ -2,114 +2,77 @@
"name": "nginxproxymanager",
"version": "3.0.0",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.5.5",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
"@types/humps": "^2.0.2",
"@types/jest": "29.5.0",
"@types/lodash": "4.14.192",
"@types/node": "18.15.11",
"@types/react": "18.0.34",
"@types/react-dom": "18.0.11",
"@types/react-router-dom": "5.3.3",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/react-table": "^7.7.14",
"@types/styled-components": "5.1.26",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"ajv": "^8.12.0",
"babel-eslint": "^10.1.0",
"chakra-react-select": "^4.6.0",
"classnames": "^2.3.2",
"country-flag-icons": "^1.5.7",
"date-fns": "2.29.3",
"eslint": "^8.38.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-react-app": "^7.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"formik": "^2.2.9",
"framer-motion": "^10.11.2",
"humps": "^2.0.1",
"jest-date-mock": "1.0.8",
"jest-fetch-mock": "3.0.3",
"jest-junit": "^15.0.0",
"jest-localstorage-mock": "2.4.26",
"jest-runner-eslint": "2.0.0",
"lodash": "4.17.21",
"moment": "2.29.4",
"node-sass": "^8.0.0",
"prettier": "2.8.7",
"query-string": "8.1.0",
"react": "^18.2.0",
"react-async": "10.0.1",
"react-dom": "18.2.0",
"react-focus-lock": "^2.9.4",
"react-icons": "^4.8.0",
"react-intl": "^6.3.2",
"react-markdown": "^8.0.6",
"react-query": "^3.39.3",
"react-router-dom": "^6.10.0",
"react-scripts": "5.0.1",
"react-syntax-highlighter": "^15.5.0",
"react-table": "7.8.0",
"rooks": "7.11.0",
"tmp": "^0.2.1",
"typescript": "^5.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "yarn jest --config jest.eslint.js --watch",
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint:ci": "yarn lint --watchAll=false",
"test": "react-scripts test",
"test:coverage": "yarn test --coverage --watchAll=false",
"test:ci": "yarn test:coverage",
"eject": "react-scripts eject",
"lint:fix": "eslint --fix --ext .ts --ext .tsx .",
"preview": "vite preview",
"prettier": "prettier \"**/*.+(js|json|yml|css|ts|tsx)\"",
"format": "yarn prettier -- --write",
"lint:fix": "eslint --fix --ext .ts --ext .tsx .",
"locale-extract": "formatjs extract 'src/**/*.tsx'",
"locale-compile": "formatjs compile-folder src/locale/src src/locale/lang",
"check-locales": "./check-locales.js"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"globalSetup": "<rootDir>/globalSetup.js",
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/testUtils/*"
],
"coverageThreshold": {
"global": {
"branches": 0,
"functions": 0,
"lines": 0,
"statements": 0
}
}
"dependencies": {
"@chakra-ui/react": "^2.8.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@tanstack/react-query": "^4.29.25",
"@tanstack/react-query-devtools": "^4.29.25",
"ajv": "^8.12.0",
"chakra-react-select": "^4.6.0",
"classnames": "^2.3.2",
"country-flag-icons": "^1.5.7",
"date-fns": "2.30.0",
"formik": "^2.4.2",
"framer-motion": "^10.13.0",
"humps": "^2.0.1",
"lodash": "4.17.21",
"moment": "2.29.4",
"query-string": "8.1.0",
"react": "^18.2.0",
"react-async": "10.0.1",
"react-dom": "18.2.0",
"react-focus-lock": "^2.9.5",
"react-icons": "^4.10.1",
"react-intl": "^6.4.4",
"react-markdown": "^8.0.7",
"react-router-dom": "^6.14.2",
"react-syntax-highlighter": "^15.5.0",
"react-table": "7.8.0",
"rooks": "7.14.1",
"tmp": "^0.2.1"
},
"devDependencies": {
"@formatjs/cli": "^6.0.4",
"@types/country-flag-icons": "^1.2.0"
"@formatjs/cli": "^6.1.3",
"@types/country-flag-icons": "^1.2.0",
"@types/humps": "^2.0.3",
"@types/lodash": "4.14.195",
"@types/node": "20.4.2",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",
"@types/react-router-dom": "5.3.3",
"@types/react-syntax-highlighter": "^15.5.7",
"@types/react-table": "^7.7.14",
"@types/styled-components": "5.1.26",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"prettier": "^3.0.0",
"sass": "^1.64.0",
"typescript": "^5.1.6",
"vite": "^4.4.4",
"vite-plugin-checker": "^0.6.1"
}
}

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2 → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-700.woff2
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2 → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-700italic.woff2
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2 → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-italic.woff2
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff
View File

0
frontend/src/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2 → frontend/public/fonts/source-sans-pro/source-sans-pro-v14-latin-regular.woff2
View File

11
frontend/src/App.test.tsx
View File

@ -1,11 +0,0 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import App from "./App";
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

11
frontend/src/App.tsx
View File

@ -1,9 +1,10 @@
import { ChakraProvider } from "@chakra-ui/react";
import { AuthProvider, LocaleProvider } from "context";
import { intl } from "locale";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { RawIntlProvider } from "react-intl";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import { AuthProvider, LocaleProvider } from "src/context";
import { intl } from "src/locale";
import Router from "./Router";
import lightTheme from "./theme/customTheme";
@ -21,7 +22,7 @@ function App() {
<Router />
</AuthProvider>
</ChakraProvider>
<ReactQueryDevtools />
<ReactQueryDevtools position="bottom-right" panelPosition="right" />
</QueryClientProvider>
</LocaleProvider>
</RawIntlProvider>

33
frontend/src/Router.tsx
View File

@ -1,25 +1,26 @@
import { lazy, Suspense } from "react";
import { SiteWrapper, SpinnerPage, Unhealthy } from "components";
import { useAuthState, useLocaleState } from "context";
import { useHealth } from "hooks";
import { BrowserRouter, Routes, Route } from "react-router-dom";
const AccessLists = lazy(() => import("pages/AccessLists"));
const AuditLog = lazy(() => import("pages/AuditLog"));
const Certificates = lazy(() => import("pages/Certificates"));
import { SiteWrapper, SpinnerPage, Unhealthy } from "src/components";
import { useAuthState, useLocaleState } from "src/context";
import { useHealth } from "src/hooks";
const AccessLists = lazy(() => import("src/pages/AccessLists"));
const AuditLog = lazy(() => import("src/pages/AuditLog"));
const Certificates = lazy(() => import("src/pages/Certificates"));
const CertificateAuthorities = lazy(
() => import("pages/CertificateAuthorities"),
() => import("src/pages/CertificateAuthorities"),
);
const Dashboard = lazy(() => import("pages/Dashboard"));
const DNSProviders = lazy(() => import("pages/DNSProviders"));
const Hosts = lazy(() => import("pages/Hosts"));
const NginxTemplates = lazy(() => import("pages/NginxTemplates"));
const Login = lazy(() => import("pages/Login"));
const GeneralSettings = lazy(() => import("pages/Settings"));
const Setup = lazy(() => import("pages/Setup"));
const Upstreams = lazy(() => import("pages/Upstreams"));
const Users = lazy(() => import("pages/Users"));
const Dashboard = lazy(() => import("src/pages/Dashboard"));
const DNSProviders = lazy(() => import("src/pages/DNSProviders"));
const Hosts = lazy(() => import("src/pages/Hosts"));
const NginxTemplates = lazy(() => import("src/pages/NginxTemplates"));
const Login = lazy(() => import("src/pages/Login"));
const GeneralSettings = lazy(() => import("src/pages/Settings"));
const Setup = lazy(() => import("src/pages/Setup"));
const Upstreams = lazy(() => import("src/pages/Upstreams"));
const Users = lazy(() => import("src/pages/Users"));
function Router() {
const health = useHealth();

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

@ -1,7 +1,8 @@
import { camelizeKeys, decamelizeKeys } from "humps";
import AuthStore from "modules/AuthStore";
import queryString from "query-string";
import AuthStore from "src/modules/AuthStore";
const contentTypeHeader = "Content-Type";
interface BuildUrlArgs {

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

@ -9,7 +9,7 @@ export async function createDNSProvider(
): Promise<DNSProvider> {
// Because the meta property of the data should not be decamelized,
// we're going to decamelize the rest here instead of in base.ts
let dcData: any = decamelizeKeys(data);
const dcData: any = decamelizeKeys(data);
if (typeof data.meta !== "undefined") {
dcData.meta = data.meta;
}

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

@ -13,7 +13,7 @@ export async function setDNSProvider(
// Because the meta property of the data should not be decamelized,
// we're going to decamelize the rest here instead of in base.ts
let dcData: any = decamelizeKeys(data);
const dcData: any = decamelizeKeys(data);
if (typeof data.meta !== "undefined") {
dcData.meta = data.meta;
}

0
frontend/src/img/logo-256.png → frontend/src/assets/logo-256.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 30 KiB

0
frontend/src/img/logo-text-vertical-grey.png → frontend/src/assets/logo-text-vertical-grey.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

7
frontend/src/components/Footer.tsx
View File

@ -7,7 +7,8 @@ import {
Tooltip,
useColorModeValue,
} from "@chakra-ui/react";
import { intl } from "locale";
import { intl } from "src/locale";
function Footer() {
return (
@ -47,12 +48,12 @@ function Footer() {
rel="noopener noreferrer">
{intl.formatMessage({ id: "footer.github" })}
</Link>
<Tooltip label={process.env.REACT_APP_COMMIT}>
<Tooltip label={import.meta.env.VITE_APP_COMMIT}>
<Link
href="https://github.com/NginxProxyManager/nginx-proxy-manager/releases?utm_source=npm"
isExternal
rel="noopener noreferrer">
v{process.env.REACT_APP_VERSION}
v{import.meta.env.VITE_APP_VERSION}
</Link>
</Tooltip>
</Stack>

4
frontend/src/components/HelpDrawer/HelpDrawer.tsx
View File

@ -8,11 +8,11 @@ import {
DrawerBody,
useDisclosure,
} from "@chakra-ui/react";
import { getLocale } from "locale";
import { FiHelpCircle } from "react-icons/fi";
import ReactMarkdown from "react-markdown";
import { getHelpFile } from "../../locale/src/HelpDoc";
import { getLocale } from "src/locale";
import { getHelpFile } from "src/locale/src/HelpDoc";
interface HelpDrawerProps {
/**

3
frontend/src/components/Loading.tsx
View File

@ -1,5 +1,6 @@
import { Box } from "@chakra-ui/react";
import { Loader } from "components";
import { Loader } from "src/components";
function Loading() {
return (

7
frontend/src/components/LocalePicker.tsx
View File

@ -7,14 +7,15 @@ import {
MenuList,
MenuItem,
} from "@chakra-ui/react";
import { Flag } from "components";
import { useLocaleState } from "context";
import { Flag } from "src/components";
import { useLocaleState } from "src/context";
import {
changeLocale,
getFlagCodeForLocale,
intl,
localeOptions,
} from "locale";
} from "src/locale";
interface LocalPickerProps {
onChange?: any;

3
frontend/src/components/Navigation/Navigation.tsx
View File

@ -1,5 +1,6 @@
import { useDisclosure } from "@chakra-ui/react";
import { NavigationHeader, NavigationMenu } from "components";
import { NavigationHeader, NavigationMenu } from "src/components";
function Navigation() {
const {

11
frontend/src/components/Navigation/NavigationHeader.tsx
View File

@ -17,13 +17,14 @@ import {
useColorModeValue,
useDisclosure,
} from "@chakra-ui/react";
import { LocalePicker, ThemeSwitcher } from "components";
import { useAuthState } from "context";
import { useUser } from "hooks";
import { intl } from "locale";
import { ChangePasswordModal, ProfileModal } from "modals";
import { FiLock, FiLogOut, FiMenu, FiUser, FiX } from "react-icons/fi";
import { LocalePicker, ThemeSwitcher } from "src/components";
import { useAuthState } from "src/context";
import { useUser } from "src/hooks";
import { intl } from "src/locale";
import { ChangePasswordModal, ProfileModal } from "src/modals";
interface NavigationHeaderProps {
mobileNavIsOpen: boolean;
toggleMobileNav: () => void;

3
frontend/src/components/Navigation/NavigationMenu.tsx
View File

@ -19,7 +19,6 @@ import {
Container,
useBreakpointValue,
} from "@chakra-ui/react";
import { intl } from "locale";
import {
FiHome,
FiSettings,
@ -32,6 +31,8 @@ import {
} from "react-icons/fi";
import { Link as RouterLink, useLocation } from "react-router-dom";
import { intl } from "src/locale";
interface NavItem {
/** Displayed label */
label: string;

3
frontend/src/components/Permissions/AdminPermissionSelector.tsx
View File

@ -1,7 +1,8 @@
import { MouseEventHandler } from "react";
import { Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { intl } from "locale";
import { intl } from "src/locale";
interface AdminPermissionSelectorProps {
selected?: boolean;

3
frontend/src/components/Permissions/PermissionSelector.tsx
View File

@ -8,7 +8,8 @@ import {
Text,
useColorModeValue,
} from "@chakra-ui/react";
import { intl } from "locale";
import { intl } from "src/locale";
interface PermissionSelectorProps {
capabilities: string[];

13
frontend/src/components/SiteWrapper.tsx
View File

@ -1,11 +1,12 @@
import { useEffect, ReactNode } from "react";
import { Box, Container, useToast } from "@chakra-ui/react";
import { getSSEToken, SSEMessage } from "api/npm";
import { Footer, Navigation } from "components";
import { intl } from "locale";
import AuthStore from "modules/AuthStore";
import { useQueryClient } from "react-query";
import { useQueryClient } from "@tanstack/react-query";
import { getSSEToken, SSEMessage } from "src/api/npm";
import { Footer, Navigation } from "src/components";
import { intl } from "src/locale";
import AuthStore from "src/modules/AuthStore";
interface Props {
children?: ReactNode;
@ -26,7 +27,7 @@ function SiteWrapper({ children }: Props) {
const j: SSEMessage = JSON.parse(e.data);
if (j) {
if (j.affects) {
queryClient.invalidateQueries(j.affects);
queryClient.invalidateQueries([j.affects]);
}
if (j.type) {
toast({

7
frontend/src/components/Table/Formatters.tsx
View File

@ -9,9 +9,10 @@ import {
PopoverArrow,
PopoverBody,
} from "@chakra-ui/react";
import { Monospace, RowAction, RowActionsMenu } from "components";
import { intl } from "locale";
import getNiceDNSProvider from "modules/Acmesh";
import { Monospace, RowAction, RowActionsMenu } from "src/components";
import { intl } from "src/locale";
import getNiceDNSProvider from "src/modules/Acmesh";
const errorColor = "red.400";

19
frontend/src/components/Table/TableLayout.tsx
View File

@ -17,8 +17,6 @@ import {
Tr,
VStack,
} from "@chakra-ui/react";
import { TablePagination } from "components";
import { intl } from "locale";
import {
FiChevronsLeft,
FiChevronLeft,
@ -29,6 +27,9 @@ import {
FiX,
} from "react-icons/fi";
import { TablePagination } from "src/components";
import { intl } from "src/locale";
export interface TableLayoutProps {
pagination: TablePagination;
getTableProps: any;
@ -102,10 +103,11 @@ function TableLayout({
<>
<Table size="sm" {...getTableProps()}>
<Thead>
{headerGroups.map((headerGroup: any) => (
<Tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any) => (
{headerGroups.map((headerGroup: any, idx: any) => (
<Tr key={idx} {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any, idx2: any) => (
<Th
key={idx2}
userSelect="none"
className={column.className}
isNumeric={column.isNumeric}>
@ -134,12 +136,13 @@ function TableLayout({
</Thead>
<Tbody {...getTableBodyProps()}>
{rows.length
? rows.map((row: any) => {
? rows.map((row: any, idx: any) => {
prepareRow(row);
return (
<Tr {...row.getRowProps()}>
{row.cells.map((cell: any) => (
<Tr key={idx} {...row.getRowProps()}>
{row.cells.map((cell: any, idx2: any) => (
<Td
key={idx2}
{...cell.getCellProps([
{
className: cell.column.className,

7
frontend/src/components/Table/TextFilter.tsx
View File

@ -13,13 +13,14 @@ import {
useDisclosure,
Select,
} from "@chakra-ui/react";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { intl } from "locale";
import { validateString } from "modules/Validations";
import FocusLock from "react-focus-lock";
import { FiFilter } from "react-icons/fi";
import { PrettyButton } from "src/components";
import { intl } from "src/locale";
import { validateString } from "src/modules/Validations";
function TextFilter({ column: { filterValue, setFilter } }: any) {
const { onOpen, onClose, isOpen } = useDisclosure();

3
frontend/src/components/ThemeSwitcher.tsx
View File

@ -4,9 +4,10 @@ import {
IconButtonProps,
useColorMode,
} from "@chakra-ui/react";
import { intl } from "locale";
import { FiSun, FiMoon } from "react-icons/fi";
import { intl } from "src/locale";
interface ThemeSwitcherProps {
background?: "normal" | "transparent";
}

5
frontend/src/components/Unhealthy.tsx
View File

@ -1,8 +1,9 @@
import { Box, Flex, Heading, Text, Stack } from "@chakra-ui/react";
import { LocalePicker, ThemeSwitcher } from "components";
import { intl } from "locale";
import { FaTimes } from "react-icons/fa";
import { LocalePicker, ThemeSwitcher } from "src/components";
import { intl } from "src/locale";
function Unhealthy() {
return (
<>

9
frontend/src/context/AuthContext.tsx
View File

@ -1,10 +1,11 @@
import { ReactNode, createContext, useContext, useState } from "react";
import { getToken, refreshToken, TokenResponse } from "api/npm";
import AuthStore from "modules/AuthStore";
import { useQueryClient } from "react-query";
import { useQueryClient } from "@tanstack/react-query";
import { useIntervalWhen } from "rooks";
import { getToken, refreshToken, TokenResponse } from "src/api/npm";
import AuthStore from "src/modules/AuthStore";
// Context
export interface AuthContextType {
authenticated: boolean;
@ -44,7 +45,7 @@ function AuthProvider({
const logout = () => {
AuthStore.clear();
setAuthenticated(false);
queryClient.invalidateQueries("user");
queryClient.clear();
};
const refresh = async () => {

2
frontend/src/context/LocaleContext.tsx
View File

@ -1,6 +1,6 @@
import { createContext, ReactNode, useContext, useState } from "react";
import { getLocale } from "locale";
import { getLocale } from "src/locale";
// Context
export interface LocaleContextType {

21
frontend/src/hooks/useAccessLists.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getAccessLists,
AccessListsResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchAccessLists = (
offset = 0,
@ -27,15 +28,13 @@ const useAccessLists = (
filters?: any,
options = {},
) => {
return useQuery<AccessListsResponse, Error>(
["access-lists", { offset, limit, sortBy, filters }],
() => fetchAccessLists(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<AccessListsResponse, Error>({
queryKey: ["access-lists", { offset, limit, sortBy, filters }],
queryFn: () => fetchAccessLists(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { useAccessLists };

23
frontend/src/hooks/useCertificate.ts
View File

@ -1,24 +1,23 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
createCertificate,
getCertificate,
setCertificate,
Certificate,
} from "api/npm";
import { useMutation, useQuery, useQueryClient } from "react-query";
} from "src/api/npm";
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,
},
);
return useQuery<Certificate, Error>({
queryKey: ["certificate", id],
queryFn: () => fetchCertificate(id),
staleTime: 60 * 1000, // 1 minute
...options,
});
};
const useSetCertificate = () => {
@ -44,10 +43,10 @@ const useSetCertificate = () => {
return () =>
queryClient.setQueryData(["certificate", values.id], previousObject);
},
onError: (error, values, rollback: any) => rollback(),
onError: (_, __, rollback: any) => rollback(),
onSuccess: async ({ id }: Certificate) => {
queryClient.invalidateQueries(["certificate", id]);
queryClient.invalidateQueries("certificates");
queryClient.invalidateQueries(["certificates"]);
},
},
);

21
frontend/src/hooks/useCertificateAuthorities.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
CertificateAuthoritiesResponse,
getCertificateAuthorities,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchCertificateAuthorities = (
offset = 0,
@ -27,15 +28,13 @@ const useCertificateAuthorities = (
filters?: any,
options = {},
) => {
return useQuery<CertificateAuthoritiesResponse, Error>(
["certificate-authorities", { offset, limit, sortBy, filters }],
() => fetchCertificateAuthorities(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<CertificateAuthoritiesResponse, Error>({
queryKey: ["certificate-authorities", { offset, limit, sortBy, filters }],
queryFn: () => fetchCertificateAuthorities(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchCertificateAuthorities, useCertificateAuthorities };

23
frontend/src/hooks/useCertificateAuthority.ts
View File

@ -1,24 +1,23 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
createCertificateAuthority,
getCertificateAuthority,
setCertificateAuthority,
CertificateAuthority,
} from "api/npm";
import { useMutation, useQuery, useQueryClient } from "react-query";
} from "src/api/npm";
const fetchCertificateAuthority = (id: any) => {
return getCertificateAuthority(id);
};
const useCertificateAuthority = (id: number, options = {}) => {
return useQuery<CertificateAuthority, Error>(
["certificate-authority", id],
() => fetchCertificateAuthority(id),
{
staleTime: 60 * 1000, // 1 minute
...options,
},
);
return useQuery<CertificateAuthority, Error>({
queryKey: ["certificate-authority", id],
queryFn: () => fetchCertificateAuthority(id),
staleTime: 60 * 1000, // 1 minute
...options,
});
};
const useSetCertificateAuthority = () => {
@ -50,10 +49,10 @@ const useSetCertificateAuthority = () => {
previousObject,
);
},
onError: (error, values, rollback: any) => rollback(),
onError: (_, __, rollback: any) => rollback(),
onSuccess: async ({ id }: CertificateAuthority) => {
queryClient.invalidateQueries(["certificate-authority", id]);
queryClient.invalidateQueries("certificate-authorities");
queryClient.invalidateQueries(["certificate-authorities"]);
},
},
);

21
frontend/src/hooks/useCertificates.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getCertificates,
CertificatesResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchCertificates = (
offset = 0,
@ -27,15 +28,13 @@ const useCertificates = (
filters?: any,
options = {},
) => {
return useQuery<CertificatesResponse, Error>(
["certificates", { offset, limit, sortBy, filters }],
() => fetchCertificates(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<CertificatesResponse, Error>({
queryKey: ["certificates", { offset, limit, sortBy, filters }],
queryFn: () => fetchCertificates(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchCertificates, useCertificates };

23
frontend/src/hooks/useDNSProvider.ts
View File

@ -1,24 +1,23 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
createDNSProvider,
getDNSProvider,
setDNSProvider,
DNSProvider,
} from "api/npm";
import { useMutation, useQuery, useQueryClient } from "react-query";
} from "src/api/npm";
const fetchDNSProvider = (id: any) => {
return getDNSProvider(id);
};
const useDNSProvider = (id: number, options = {}) => {
return useQuery<DNSProvider, Error>(
["dns-provider", id],
() => fetchDNSProvider(id),
{
staleTime: 60 * 1000, // 1 minute
...options,
},
);
return useQuery<DNSProvider, Error>({
queryKey: ["dns-provider", id],
queryFn: () => fetchDNSProvider(id),
staleTime: 60 * 1000, // 1 minute
...options,
});
};
const useSetDNSProvider = () => {
@ -44,10 +43,10 @@ const useSetDNSProvider = () => {
return () =>
queryClient.setQueryData(["dns-provider", values.id], previousObject);
},
onError: (error, values, rollback: any) => rollback(),
onError: (_, __, rollback: any) => rollback(),
onSuccess: async ({ id }: DNSProvider) => {
queryClient.invalidateQueries(["dns-provider", id]);
queryClient.invalidateQueries("dns-providers");
queryClient.invalidateQueries(["dns-providers"]);
},
},
);

21
frontend/src/hooks/useDNSProviders.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getDNSProviders,
DNSProvidersResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchDNSProviders = (
offset = 0,
@ -27,15 +28,13 @@ const useDNSProviders = (
filters?: any,
options = {},
) => {
return useQuery<DNSProvidersResponse, Error>(
["dns-providers", { offset, limit, sortBy, filters }],
() => fetchDNSProviders(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<DNSProvidersResponse, Error>({
queryKey: ["dns-providers", { offset, limit, sortBy, filters }],
queryFn: () => fetchDNSProviders(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { useDNSProviders };

21
frontend/src/hooks/useDNSProvidersAcmesh.ts
View File

@ -1,16 +1,15 @@
import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "api/npm";
import { useQuery } from "react-query";
import { useQuery } from "@tanstack/react-query";
import { DNSProvidersAcmesh, getDNSProvidersAcmesh } from "src/api/npm";
const useDNSProvidersAcmesh = (options = {}) => {
return useQuery<DNSProvidersAcmesh[], Error>(
["dns-providers-acmesh"],
() => getDNSProvidersAcmesh(),
{
keepPreviousData: true,
staleTime: 60 * 60 * 1000, // 1 hour
...options,
},
);
return useQuery<DNSProvidersAcmesh[], Error>({
queryKey: ["dns-providers-acmesh"],
queryFn: () => getDNSProvidersAcmesh(),
keepPreviousData: true,
staleTime: 60 * 60 * 1000, // 1 hour
...options,
});
};
export { useDNSProvidersAcmesh };

9
frontend/src/hooks/useHealth.ts
View File

@ -1,10 +1,13 @@
import { getHealth, HealthResponse } from "api/npm";
import { useQuery } from "react-query";
import { useQuery } from "@tanstack/react-query";
import { getHealth, HealthResponse } from "src/api/npm";
const fetchHealth = () => getHealth();
const useHealth = (options = {}) => {
return useQuery<HealthResponse, Error>("health", fetchHealth, {
return useQuery<HealthResponse, Error>({
queryKey: ["health"],
queryFn: fetchHealth,
refetchOnWindowFocus: false,
retry: 5,
refetchInterval: 15 * 1000, // 15 seconds

21
frontend/src/hooks/useHosts.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getHosts,
HostsResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchHosts = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
return getHosts(
@ -22,15 +23,13 @@ const useHosts = (
filters?: any,
options = {},
) => {
return useQuery<HostsResponse, Error>(
["hosts", { offset, limit, sortBy, filters }],
() => fetchHosts(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<HostsResponse, Error>({
queryKey: ["hosts", { offset, limit, sortBy, filters }],
queryFn: () => fetchHosts(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchHosts, useHosts };

21
frontend/src/hooks/useNginxTemplates.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getNginxTemplates,
NginxTemplatesResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchNginxTemplates = (
offset = 0,
@ -27,15 +28,13 @@ const useNginxTemplates = (
filters?: any,
options = {},
) => {
return useQuery<NginxTemplatesResponse, Error>(
["nginx-templates", { offset, limit, sortBy, filters }],
() => fetchNginxTemplates(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<NginxTemplatesResponse, Error>({
queryKey: ["nginx-templates", { offset, limit, sortBy, filters }],
queryFn: () => fetchNginxTemplates(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchNginxTemplates, useNginxTemplates };

21
frontend/src/hooks/useSettings.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getSettings,
SettingsResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchSettings = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
return getSettings(
@ -22,15 +23,13 @@ const useSettings = (
filters?: any,
options = {},
) => {
return useQuery<SettingsResponse, Error>(
["settings", { offset, limit, sortBy, filters }],
() => fetchSettings(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<SettingsResponse, Error>({
queryKey: ["settings", { offset, limit, sortBy, filters }],
queryFn: () => fetchSettings(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchSettings, useSettings };

19
frontend/src/hooks/useUpstreamNginxConfig.ts
View File

@ -1,19 +1,18 @@
import { getUpstreamNginxConfig } from "api/npm";
import { useQuery } from "react-query";
import { useQuery } from "@tanstack/react-query";
import { getUpstreamNginxConfig } from "src/api/npm";
const fetchUpstreamNginxConfig = (id: any) => {
return getUpstreamNginxConfig(id);
};
const useUpstreamNginxConfig = (id: number, options = {}) => {
return useQuery<string, Error>(
["upstream-nginx-config", id],
() => fetchUpstreamNginxConfig(id),
{
staleTime: 30 * 1000, // 30 seconds
...options,
},
);
return useQuery<string, Error>({
queryKey: ["upstream-nginx-config", id],
queryFn: () => fetchUpstreamNginxConfig(id),
staleTime: 30 * 1000, // 30 seconds
...options,
});
};
export { useUpstreamNginxConfig };

21
frontend/src/hooks/useUpstreams.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getUpstreams,
HostsResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchUpstreams = (
offset = 0,
@ -27,15 +28,13 @@ const useUpstreams = (
filters?: any,
options = {},
) => {
return useQuery<HostsResponse, Error>(
["upstreams", { offset, limit, sortBy, filters }],
() => fetchUpstreams(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<HostsResponse, Error>({
queryKey: ["upstreams", { offset, limit, sortBy, filters }],
queryFn: () => fetchUpstreams(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchUpstreams, useUpstreams };

13
frontend/src/hooks/useUser.ts
View File

@ -1,12 +1,15 @@
import { getUser, setUser, User } from "api/npm";
import { useMutation, useQuery, useQueryClient } from "react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getUser, setUser, User } from "src/api/npm";
const fetchUser = (id: any) => {
return getUser(id, { expand: "capabilities" });
};
const useUser = (id: string | number, options = {}) => {
return useQuery<User, Error>(["user", id], () => fetchUser(id), {
return useQuery<User, Error>({
queryKey: ["user", id],
queryFn: () => fetchUser(id),
staleTime: 60 * 1000, // 1 minute
...options,
});
@ -26,10 +29,10 @@ const useSetUser = () => {
return () =>
queryClient.setQueryData(["user", values.id], previousObject);
},
onError: (error, values, rollback: any) => rollback(),
onError: (_, __, rollback: any) => rollback(),
onSuccess: async ({ id }: User) => {
queryClient.invalidateQueries(["user", id]);
queryClient.invalidateQueries("users");
queryClient.invalidateQueries(["users"]);
},
});
};

21
frontend/src/hooks/useUsers.ts
View File

@ -1,10 +1,11 @@
import { useQuery } from "@tanstack/react-query";
import {
getUsers,
UsersResponse,
tableSortToAPI,
tableFiltersToAPI,
} from "api/npm";
import { useQuery } from "react-query";
} from "src/api/npm";
const fetchUsers = (offset = 0, limit = 10, sortBy?: any, filters?: any) => {
return getUsers(
@ -22,15 +23,13 @@ const useUsers = (
filters?: any,
options = {},
) => {
return useQuery<UsersResponse, Error>(
["users", { offset, limit, sortBy, filters }],
() => fetchUsers(offset, limit, sortBy, filters),
{
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
},
);
return useQuery<UsersResponse, Error>({
queryKey: ["users", { offset, limit, sortBy, filters }],
queryFn: () => fetchUsers(offset, limit, sortBy, filters),
keepPreviousData: true,
staleTime: 15 * 1000, // 15 seconds
...options,
});
};
export { fetchUsers, useUsers };

5
frontend/src/index.tsx → frontend/src/main.tsx
View File

@ -19,10 +19,7 @@ declare global {
}
}
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement,
);
root.render(
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
<App />

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

@ -16,12 +16,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface AccessListCreateModalProps {
isOpen: boolean;

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

@ -15,12 +15,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface CertificateAuthorityCreateModalProps {
isOpen: boolean;

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

@ -15,12 +15,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface CertificateAuthorityEditModalProps {
editId: number;

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

@ -10,11 +10,12 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { Certificate } from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form } from "formik";
import { useSetCertificate } from "hooks";
import { intl } from "locale";
import { Certificate } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetCertificate } from "src/hooks";
import { intl } from "src/locale";
import CustomForm from "./CustomForm";
import DNSForm from "./DNSForm";

7
frontend/src/modals/CertificateCreateModal/Common/CertificateAuthorityField.tsx
View File

@ -4,10 +4,11 @@ import {
FormLabel,
Select,
} from "@chakra-ui/react";
import { CertificateAuthority } from "api/npm";
import { Field, useFormikContext } from "formik";
import { useCertificateAuthorities } from "hooks";
import { intl } from "locale";
import { CertificateAuthority } from "src/api/npm";
import { useCertificateAuthorities } from "src/hooks";
import { intl } from "src/locale";
const fieldName = "certificateAuthorityId";

7
frontend/src/modals/CertificateCreateModal/Common/DNSProviderField.tsx
View File

@ -4,10 +4,11 @@ import {
FormLabel,
Select,
} from "@chakra-ui/react";
import { DNSProvider } from "api/npm";
import { Field, useFormikContext } from "formik";
import { useDNSProviders } from "hooks";
import { intl } from "locale";
import { DNSProvider } from "src/api/npm";
import { useDNSProviders } from "src/hooks";
import { intl } from "src/locale";
const fieldName = "dnsProviderId";

12
frontend/src/modals/CertificateCreateModal/Common/DomainNamesField.tsx
View File

@ -6,7 +6,8 @@ import {
} from "@chakra-ui/react";
import { CreatableSelect, OptionBase } from "chakra-react-select";
import { Field, useFormikContext } from "formik";
import { intl } from "locale";
import { intl } from "src/locale";
interface SelectOption extends OptionBase {
label: string;
@ -16,13 +17,12 @@ interface DomainNamesFieldProps {
maxDomains?: number;
isWildcardPermitted?: boolean;
dnsProviderWildcardSupported?: boolean;
onChange?: (i: string[]) => any;
// onChange?: (i: string[]) => any;
}
function DomainNamesField({
maxDomains,
isWildcardPermitted,
dnsProviderWildcardSupported,
onChange,
dnsProviderWildcardSupported, // onChange,
}: DomainNamesFieldProps) {
const { values, setFieldValue } = useFormikContext();
@ -76,7 +76,7 @@ function DomainNamesField({
setFieldValue("domainNames", doms);
};
let helperTexts: string[] = [];
const helperTexts: string[] = [];
if (maxDomains) {
helperTexts.push(
intl.formatMessage({ id: "domain_names.max" }, { count: maxDomains }),
@ -110,7 +110,7 @@ function DomainNamesField({
/>
{helperTexts.length
? helperTexts.map((i) => {
return <FormHelperText>{i}</FormHelperText>;
return <FormHelperText key={i}>{i}</FormHelperText>;
})
: null}
<FormErrorMessage>{form.errors.domainNames}</FormErrorMessage>

3
frontend/src/modals/CertificateCreateModal/Common/EccField.tsx
View File

@ -5,7 +5,8 @@ import {
Switch,
} from "@chakra-ui/react";
import { Field } from "formik";
import { intl } from "locale";
import { intl } from "src/locale";
const fieldName = "isEcc";

5
frontend/src/modals/CertificateCreateModal/Common/NameField.tsx
View File

@ -5,8 +5,9 @@ import {
Input,
} from "@chakra-ui/react";
import { Field } from "formik";
import { intl } from "locale";
import { validateString } from "modules/Validations";
import { intl } from "src/locale";
import { validateString } from "src/modules/Validations";
function NameField() {
return (

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

@ -15,12 +15,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface CertificateEditModalProps {
editId: number;

11
frontend/src/modals/ChangePasswordModal.tsx
View File

@ -14,11 +14,12 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { setAuth } from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { intl } from "locale";
import { validateString } from "modules/Validations";
import { setAuth } from "src/api/npm";
import { PrettyButton } from "src/components";
import { intl } from "src/locale";
import { validateString } from "src/modules/Validations";
interface ChangePasswordModalProps {
isOpen: boolean;
@ -75,7 +76,7 @@ function ChangePasswordModal({ isOpen, onClose }: ChangePasswordModalProps) {
}
return errors;
}}>
{({ isSubmitting, values }: any) => (
{({ isSubmitting }: any) => (
<Form data-testid="change-password">
<ModalHeader>
{intl.formatMessage({ id: "change-password" })}

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

@ -19,16 +19,17 @@ import {
useToast,
} from "@chakra-ui/react";
import Ajv, { Schema } from "ajv";
import { Formik, Form, Field, getIn } from "formik";
import {
DNSProvider,
DNSProvidersAcmesh,
DNSProvidersAcmeshProperty,
} from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field, getIn } from "formik";
import { useSetDNSProvider, useDNSProvidersAcmesh } from "hooks";
import { intl } from "locale";
import { validateString } from "modules/Validations";
} from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetDNSProvider, useDNSProvidersAcmesh } from "src/hooks";
import { intl } from "src/locale";
import { validateString } from "src/modules/Validations";
interface DNSProviderCreateModalProps {
isOpen: boolean;
@ -82,7 +83,7 @@ function DNSProviderCreateModal({
try {
const valid = ajv.validate(fullItem as Schema, payload.meta);
if (!valid) {
let errs: any = {};
const errs: any = {};
ajv.errors?.forEach((e: any) => {
errs["meta"] = {
[e.instancePath.substring(1)]: e.message,
@ -129,7 +130,7 @@ function DNSProviderCreateModal({
}
let type = "text";
let props: any = {};
const props: any = {};
if (f.type === "string") {
props.minLength = f.minLength || null;
@ -174,7 +175,7 @@ function DNSProviderCreateModal({
} as DNSProvider
}
onSubmit={onSubmit}>
{({ isSubmitting, handleChange, values, setValues }) => (
{({ isSubmitting, handleChange, values }) => (
<Form>
<ModalHeader>
{intl.formatMessage({ id: "dns-provider.create" })}
@ -244,11 +245,12 @@ function DNSProviderCreateModal({
)}
</Field>
{itemProperties
? Object.keys(itemProperties).map((fieldName, _) => {
? Object.keys(itemProperties).map((fieldName) => {
const f = itemProperties[fieldName];
const name = `meta[${fieldName}]`;
return (
<Field
key={fieldName}
name={`meta[${fieldName}]`}
type={
f.type === "boolean"

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

@ -15,12 +15,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface HostCreateModalProps {
isOpen: boolean;

9
frontend/src/modals/ProfileModal.tsx
View File

@ -14,11 +14,12 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { useUser, useSetUser } from "hooks";
import { intl } from "locale";
import { validateEmail, validateString } from "modules/Validations";
import { PrettyButton } from "src/components";
import { useUser, useSetUser } from "src/hooks";
import { intl } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
interface ProfileModalProps {
isOpen: boolean;

11
frontend/src/modals/SetPasswordModal.tsx
View File

@ -14,11 +14,12 @@ import {
Stack,
useToast,
} from "@chakra-ui/react";
import { setAuth } from "api/npm";
import { PrettyButton } from "components";
import { Formik, Form, Field } from "formik";
import { intl } from "locale";
import { validateString } from "modules/Validations";
import { setAuth } from "src/api/npm";
import { PrettyButton } from "src/components";
import { intl } from "src/locale";
import { validateString } from "src/modules/Validations";
interface SetPasswordModalProps {
userId: number;
@ -75,7 +76,7 @@ function SetPasswordModal({ userId, isOpen, onClose }: SetPasswordModalProps) {
}
return errors;
}}>
{({ isSubmitting, values }: any) => (
{({ isSubmitting }: any) => (
<Form>
<ModalHeader>
{intl.formatMessage({ id: "set-password" })}

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

@ -16,12 +16,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface UpstreamCreateModalProps {
isOpen: boolean;

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

@ -16,12 +16,13 @@ import {
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";
import { CertificateAuthority } from "src/api/npm";
import { PrettyButton } from "src/components";
import { useCertificateAuthority, useSetCertificateAuthority } from "src/hooks";
import { intl } from "src/locale";
import { validateNumber, validateString } from "src/modules/Validations";
interface UpstreamEditModalProps {
editId: number;

5
frontend/src/modals/UpstreamNginxConfigModal.tsx
View File

@ -6,12 +6,13 @@ import {
ModalCloseButton,
ModalBody,
} from "@chakra-ui/react";
import { useUpstreamNginxConfig } from "hooks";
import { intl } from "locale";
import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import sh from "react-syntax-highlighter/dist/esm/languages/hljs/bash";
import nord from "react-syntax-highlighter/dist/esm/styles/hljs/nord";
import { useUpstreamNginxConfig } from "src/hooks";
import { intl } from "src/locale";
interface UpstreamNginxConfigModalProps {
upstreamId: number;
isOpen: boolean;

17
frontend/src/modals/UserCreateModal.tsx
View File

@ -21,16 +21,17 @@ import {
TabPanels,
useToast,
} from "@chakra-ui/react";
import { createUser } from "api/npm";
import { useQueryClient } from "@tanstack/react-query";
import { Formik, Form, Field } from "formik";
import { createUser } from "src/api/npm";
import {
AdminPermissionSelector,
PermissionSelector,
PrettyButton,
} from "components";
import { Formik, Form, Field } from "formik";
import { intl } from "locale";
import { validateEmail, validateString } from "modules/Validations";
import { useQueryClient } from "react-query";
} from "src/components";
import { intl } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
interface Payload {
name: string;
@ -50,7 +51,7 @@ function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
const [capabilityOption, setCapabilityOption] = useState("admin");
const onSubmit = async (values: Payload, { setSubmitting }: any) => {
const { password, ...payload } = {
const { ...payload } = {
...values,
...{
isDisabled: false,
@ -78,7 +79,7 @@ function UserCreateModal({ isOpen, onClose }: UserCreateModalProps) {
const response = await createUser(payload);
if (response && typeof response.id !== "undefined" && response.id) {
// ok
queryClient.invalidateQueries("users");
queryClient.invalidateQueries(["users"]);
onClose();
resetForm();
} else {

11
frontend/src/modals/UserEditModal.tsx
View File

@ -22,15 +22,16 @@ import {
TabPanels,
useToast,
} from "@chakra-ui/react";
import { Formik, Form, Field } from "formik";
import {
AdminPermissionSelector,
PermissionSelector,
PrettyButton,
} from "components";
import { Formik, Form, Field } from "formik";
import { useUser, useSetUser } from "hooks";
import { intl } from "locale";
import { validateEmail, validateString } from "modules/Validations";
} from "src/components";
import { useUser, useSetUser } from "src/hooks";
import { intl } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
interface UserEditModalProps {
userId: number;

2
frontend/src/modules/AuthStore.ts
View File

@ -1,4 +1,4 @@
import { TokenResponse } from "api/npm";
import { TokenResponse } from "src/api/npm";
export const TOKEN_KEY = "authentications";

2
frontend/src/modules/Validations.tsx
View File

@ -1,4 +1,4 @@
import { intl } from "locale";
import { intl } from "src/locale";
const validateString = (minLength = 0, maxLength = 0) => {
if (minLength <= 0 && maxLength <= 0) {

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

@ -1,5 +1,8 @@
import { useEffect, useMemo } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -9,10 +12,8 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
export interface TableProps {
data: any;
@ -48,7 +49,7 @@ function Table({
Cell: ActionsFormatter([
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
onClick: (_: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,

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

@ -1,14 +1,15 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useAccessLists } from "hooks";
import { intl } from "locale";
} from "src/components";
import { useAccessLists } from "src/hooks";
import { intl } from "src/locale";
import Table from "./Table";

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

@ -1,9 +1,10 @@
import { useState } from "react";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { AccessListCreateModal } from "modals";
import { HelpDrawer, PrettyButton } from "src/components";
import { intl } from "src/locale";
import { AccessListCreateModal } from "src/modals";
import TableWrapper from "./TableWrapper";

3
frontend/src/pages/AuditLog/index.tsx
View File

@ -1,5 +1,6 @@
import { Heading } from "@chakra-ui/react";
import { intl } from "locale";
import { intl } from "src/locale";
function AuditLog() {
return (

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

@ -1,5 +1,8 @@
import { useEffect, useMemo, useState } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -9,11 +12,9 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { CertificateAuthorityEditModal } from "modals";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
import { CertificateAuthorityEditModal } from "src/modals";
export interface TableProps {
data: any;
@ -58,7 +59,7 @@ function Table({
title: intl.formatMessage({
id: "action.edit",
}),
onClick: (e: any, { id }: any) => setEditId(id),
onClick: (_: any, { id }: any) => setEditId(id),
icon: <FiEdit />,
disabled: (data: any) => data.isReadonly,
},

5
frontend/src/pages/CertificateAuthorities/TableWrapper.tsx
View File

@ -1,8 +1,9 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import { SpinnerPage, tableEventReducer } from "components";
import { useCertificateAuthorities } from "hooks";
import { SpinnerPage, tableEventReducer } from "src/components";
import { useCertificateAuthorities } from "src/hooks";
import Table from "./Table";

7
frontend/src/pages/CertificateAuthorities/index.tsx
View File

@ -1,9 +1,10 @@
import { useState } from "react";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { CertificateAuthorityCreateModal } from "modals";
import { HelpDrawer, PrettyButton } from "src/components";
import { intl } from "src/locale";
import { CertificateAuthorityCreateModal } from "src/modals";
import TableWrapper from "./TableWrapper";

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

@ -1,5 +1,8 @@
import { useEffect, useMemo, useState } from "react";
import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -13,11 +16,9 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { CertificateEditModal } from "modals";
import { FiDownload, FiEdit, FiRefreshCw, FiTrash2 } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
import { CertificateEditModal } from "src/modals";
export interface TableProps {
data: any;
@ -78,7 +79,7 @@ function Table({
title: intl.formatMessage({
id: "action.edit",
}),
onClick: (e: any, { id }: any) => alert(id),
onClick: (_: any, { id }: any) => alert(id),
icon: <FiEdit />,
disabled: (data: any) =>
data.type === "dns" || data.type === "http",
@ -87,7 +88,7 @@ function Table({
title: intl.formatMessage({
id: "action.renew",
}),
onClick: (e: any, { id }: any) => onRenewal(id),
onClick: (_: any, { id }: any) => onRenewal(id),
icon: <FiRefreshCw />,
disabled: (data: any) =>
data.type !== "dns" && data.type !== "http",
@ -96,7 +97,7 @@ function Table({
title: intl.formatMessage({
id: "action.download",
}),
onClick: (e: any, { id }: any) => alert(id),
onClick: (_: any, { id }: any) => alert(id),
icon: <FiDownload />,
disabled: (data: any) => data.isReadonly,
},
@ -104,7 +105,7 @@ function Table({
title: intl.formatMessage({
id: "action.delete",
}),
onClick: (e: any, { id }: any) => alert(id),
onClick: (_: any, { id }: any) => alert(id),
icon: <FiTrash2 />,
disabled: (data: any) => data.isReadonly,
},

13
frontend/src/pages/Certificates/TableWrapper.tsx
View File

@ -1,11 +1,12 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon, useToast } from "@chakra-ui/react";
import { renewCertificate } from "api/npm";
import { EmptyList, SpinnerPage, tableEventReducer } from "components";
import { useCertificates } from "hooks";
import { intl } from "locale";
import { useQueryClient } from "react-query";
import { useQueryClient } from "@tanstack/react-query";
import { renewCertificate } from "src/api/npm";
import { EmptyList, SpinnerPage, tableEventReducer } from "src/components";
import { useCertificates } from "src/hooks";
import { intl } from "src/locale";
import Table from "./Table";
@ -54,7 +55,7 @@ function TableWrapper() {
isClosable: true,
});
setTimeout(() => {
queryClient.invalidateQueries("certificates");
queryClient.invalidateQueries(["certificates"]);
}, 500);
} catch (err: any) {
toast({

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

@ -8,12 +8,13 @@ import {
MenuItem,
MenuDivider,
} from "@chakra-ui/react";
import { HelpDrawer, PrettyMenuButton } from "components";
import { useDNSProviders } from "hooks";
import { intl } from "locale";
import { CertificateCreateModal } from "modals";
import { FiGlobe, FiServer, FiShieldOff, FiUpload } from "react-icons/fi";
import { HelpDrawer, PrettyMenuButton } from "src/components";
import { useDNSProviders } from "src/hooks";
import { intl } from "src/locale";
import { CertificateCreateModal } from "src/modals";
import TableWrapper from "./TableWrapper";
function Certificates() {

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

@ -1,5 +1,8 @@
import { useEffect, useMemo } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -11,10 +14,8 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
export interface TableProps {
data: any;
@ -63,7 +64,7 @@ function Table({
Cell: ActionsFormatter([
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
onClick: (_: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,

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

@ -1,14 +1,15 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useDNSProviders } from "hooks";
import { intl } from "locale";
} from "src/components";
import { useDNSProviders } from "src/hooks";
import { intl } from "src/locale";
import Table from "./Table";

7
frontend/src/pages/DNSProviders/index.tsx
View File

@ -1,9 +1,10 @@
import { useState } from "react";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { DNSProviderCreateModal } from "modals";
import { HelpDrawer, PrettyButton } from "src/components";
import { intl } from "src/locale";
import { DNSProviderCreateModal } from "src/modals";
import TableWrapper from "./TableWrapper";

3
frontend/src/pages/Dashboard/index.tsx
View File

@ -1,5 +1,6 @@
import { Heading } from "@chakra-ui/react";
import { intl } from "locale";
import { intl } from "src/locale";
function Dashboard() {
return (

11
frontend/src/pages/Hosts/Table.tsx
View File

@ -1,5 +1,8 @@
import { useEffect, useMemo } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -13,10 +16,8 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
export interface TableProps {
data: any;
@ -74,7 +75,7 @@ function Table({
Cell: ActionsFormatter([
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
onClick: (_: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,

7
frontend/src/pages/Hosts/TableWrapper.tsx
View File

@ -1,14 +1,15 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon } from "@chakra-ui/react";
import {
EmptyList,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useHosts } from "hooks";
import { intl } from "locale";
} from "src/components";
import { useHosts } from "src/hooks";
import { intl } from "src/locale";
import Table from "./Table";

7
frontend/src/pages/Hosts/index.tsx
View File

@ -1,9 +1,10 @@
import { useState } from "react";
import { Heading, HStack } from "@chakra-ui/react";
import { HelpDrawer, PrettyButton } from "components";
import { intl } from "locale";
import { HostCreateModal } from "modals";
import { HelpDrawer, PrettyButton } from "src/components";
import { intl } from "src/locale";
import { HostCreateModal } from "src/modals";
import TableWrapper from "./TableWrapper";

13
frontend/src/pages/Login/index.tsx
View File

@ -12,13 +12,14 @@ import {
useColorModeValue,
useToast,
} from "@chakra-ui/react";
import { LocalePicker, PrettyButton, ThemeSwitcher } from "components";
import { useAuthState } from "context";
import { Formik, Form, Field } from "formik";
import { intl } from "locale";
import { validateEmail, validateString } from "modules/Validations";
import logo from "../../img/logo-256.png";
import { LocalePicker, PrettyButton, ThemeSwitcher } from "src/components";
import { useAuthState } from "src/context";
import { intl } from "src/locale";
import { validateEmail, validateString } from "src/modules/Validations";
// import logo from "../../img/logo-256.png";
function Login() {
const toast = useToast();
@ -67,7 +68,7 @@ function Login() {
<Stack spacing={8} mx="auto" maxW="md" w="full" py={4} px={6}>
<Box>
<Center>
<img src={logo} width={100} alt="Logo" />
<img src="/images/logo-256.png" width={100} alt="Logo" />
</Center>
</Box>
<Box

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

@ -1,5 +1,8 @@
import { useEffect, useMemo } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -10,15 +13,13 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
const rowActions = [
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
onClick: (_: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,

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

@ -1,14 +1,15 @@
import { useEffect, useReducer, useState } from "react";
import { Alert, AlertIcon, Heading, HStack } from "@chakra-ui/react";
import {
HelpDrawer,
PrettyButton,
SpinnerPage,
tableEventReducer,
} from "components";
import { useNginxTemplates } from "hooks";
import { intl } from "locale";
} from "src/components";
import { useNginxTemplates } from "src/hooks";
import { intl } from "src/locale";
import { NginxTemplatesTable } from "./NginxTemplatesTable";

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

@ -1,5 +1,8 @@
import { useEffect, useMemo } from "react";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
import {
tableEvents,
ActionsFormatter,
@ -8,15 +11,13 @@ import {
TablePagination,
TableSortBy,
TextFilter,
} from "components";
import { intl } from "locale";
import { FiEdit } from "react-icons/fi";
import { useSortBy, useFilters, useTable, usePagination } from "react-table";
} from "src/components";
import { intl } from "src/locale";
const rowActions = [
{
title: intl.formatMessage({ id: "action.edit" }),
onClick: (e: any, data: any) => {
onClick: (_: any, data: any) => {
alert(JSON.stringify(data, null, 2));
},
icon: <FiEdit />,

Some files were not shown because too many files have changed in this diff Show More