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

frontend/src/modals/AccessListCreateModal.tsx

@@ -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;

frontend/src/modals/CertificateAuthorityCreateModal.tsx

@@ -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;

frontend/src/modals/CertificateAuthorityEditModal.tsx

@@ -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;

frontend/src/modals/CertificateCreateModal/CertificateCreateModal.tsx

@@ -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";

frontend/src/modals/CertificateCreateModal/Common/CertificateAuthorityField.tsx

@@ -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";
 

frontend/src/modals/CertificateCreateModal/Common/DNSProviderField.tsx

@@ -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";
 

frontend/src/modals/CertificateCreateModal/Common/DomainNamesField.tsx

@@ -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>

frontend/src/modals/CertificateCreateModal/Common/EccField.tsx

@@ -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";
 

frontend/src/modals/CertificateCreateModal/Common/NameField.tsx

@@ -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 (

frontend/src/modals/CertificateEditModal.tsx

@@ -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;

frontend/src/modals/ChangePasswordModal.tsx

@@ -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" })}

frontend/src/modals/DNSProviderCreateModal.tsx

@@ -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"

frontend/src/modals/HostCreateModal.tsx

@@ -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;

frontend/src/modals/ProfileModal.tsx

@@ -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;

frontend/src/modals/SetPasswordModal.tsx

@@ -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" })}

frontend/src/modals/UpstreamCreateModal.tsx

@@ -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;

frontend/src/modals/UpstreamEditModal.tsx

@@ -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;

frontend/src/modals/UpstreamNginxConfigModal.tsx

@@ -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;

frontend/src/modals/UserCreateModal.tsx

@@ -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 {

frontend/src/modals/UserEditModal.tsx

@@ -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;