Add certificate model for http and dns

change is_ecc to boolean, its still stored as int in sqlite

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

@@ -0,0 +1,77 @@
+import {
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Select,
+} from "@chakra-ui/react";
+import { CertificateAuthority } from "api/npm";
+import { Field, useFormikContext } from "formik";
+import { useCertificateAuthorities } from "hooks";
+import { intl } from "locale";
+
+const fieldName = "certificateAuthorityId";
+
+interface CertificateAuthorityFieldProps {
+	onChange?: (maxDomains: number, isWildcardSupported: boolean) => any;
+}
+function CertificateAuthorityField({
+	onChange,
+}: CertificateAuthorityFieldProps) {
+	const { setFieldValue } = useFormikContext();
+	const { data, isLoading } = useCertificateAuthorities(0, 999, [{ id: "id" }]);
+
+	const handleOnChange = (e: any) => {
+		if (e.currentTarget.value) {
+			const id = parseInt(e.currentTarget.value, 10);
+			// This step enforces that the formik payload has a
+			// string number instead of a string as the value
+			// for this field
+			setFieldValue(fieldName, id);
+			if (onChange) {
+				// find items in list of data
+				const ca = data?.items.find((item) => item.id === id);
+				if (ca) {
+					onChange(ca.maxDomains, ca.isWildcardSupported);
+				} else {
+					onChange(0, false);
+				}
+			}
+		}
+	};
+
+	return (
+		<Field name={fieldName}>
+			{({ field, form }: any) => (
+				<FormControl
+					isRequired
+					isInvalid={form.errors[fieldName] && form.touched[fieldName]}>
+					<FormLabel htmlFor={fieldName}>
+						{intl.formatMessage({
+							id: "certificate-authority",
+						})}
+					</FormLabel>
+					<Select
+						{...field}
+						id={fieldName}
+						disabled={isLoading}
+						onChange={(e: any) => {
+							field.onChange(e);
+							handleOnChange(e);
+						}}>
+						<option value="" />
+						{data?.items?.map((item: CertificateAuthority) => {
+							return (
+								<option key={item.id} value={item.id}>
+									{item.name}
+								</option>
+							);
+						})}
+					</Select>
+					<FormErrorMessage>{form.errors[fieldName]}</FormErrorMessage>
+				</FormControl>
+			)}
+		</Field>
+	);
+}
+
+export { CertificateAuthorityField };

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

@@ -0,0 +1,73 @@
+import {
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Select,
+} from "@chakra-ui/react";
+import { DNSProvider } from "api/npm";
+import { Field, useFormikContext } from "formik";
+import { useDNSProviders } from "hooks";
+import { intl } from "locale";
+
+const fieldName = "dnsProviderId";
+
+function DNSProviderField() {
+	const { setFieldValue } = useFormikContext();
+	const { data, isLoading } = useDNSProviders(0, 999);
+
+	const handleOnChange = (e: any) => {
+		if (e.currentTarget.value) {
+			const id = parseInt(e.currentTarget.value, 10);
+			// This step enforces that the formik payload has a
+			// string number instead of a string as the value
+			// for this field
+			setFieldValue(fieldName, id);
+		}
+	};
+
+	return (
+		<Field name={fieldName}>
+			{({ field, form }: any) => (
+				<FormControl
+					isRequired
+					isInvalid={
+						!isLoading &&
+						(!data?.total ||
+							(form.errors[fieldName] && form.touched[fieldName]))
+					}>
+					<FormLabel htmlFor={fieldName}>
+						{intl.formatMessage({
+							id: "dns-provider",
+						})}
+					</FormLabel>
+					<Select
+						{...field}
+						id={fieldName}
+						disabled={isLoading}
+						onChange={(e: any) => {
+							field.onChange(e);
+							handleOnChange(e);
+						}}>
+						<option value="" />
+						{data?.items?.map((item: DNSProvider) => {
+							return (
+								<option key={item.id} value={item.id}>
+									{item.name}
+								</option>
+							);
+						})}
+					</Select>
+					<FormErrorMessage>
+						{!isLoading && !data?.total
+							? intl.formatMessage({
+									id: "dns-providers-empty",
+							  })
+							: form.errors[fieldName]}
+					</FormErrorMessage>
+				</FormControl>
+			)}
+		</Field>
+	);
+}
+
+export { DNSProviderField };

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

@@ -0,0 +1,109 @@
+import {
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	FormHelperText,
+} from "@chakra-ui/react";
+import { CreatableSelect, OptionBase } from "chakra-react-select";
+import { Field, useFormikContext } from "formik";
+import { intl } from "locale";
+
+interface SelectOption extends OptionBase {
+	label: string;
+	value: string;
+}
+interface DomainNamesFieldProps {
+	maxDomains?: number;
+	isWildcardSupported?: boolean;
+	onChange?: (i: string[]) => any;
+}
+function DomainNamesField({
+	maxDomains,
+	isWildcardSupported,
+	onChange,
+}: DomainNamesFieldProps) {
+	const { values, setFieldValue } = useFormikContext();
+
+	const getDomainCount = (v: string[] | undefined) => {
+		if (typeof v !== "undefined" && v?.length) {
+			return v.length;
+		}
+		return 0;
+	};
+
+	const isDomainValid = (d: string): boolean => {
+		const dom = d.trim().toLowerCase();
+		const v: any = values;
+
+		// Deny if the list of domains is hit
+		if (maxDomains && getDomainCount(v?.domainNames) >= maxDomains) {
+			return false;
+		}
+
+		if (dom.length < 3) {
+			return false;
+		}
+
+		// Prevent wildcards
+		if (!isWildcardSupported && dom.indexOf("*") !== -1) {
+			return false;
+		}
+
+		// Prevent duplicate * in domain
+		if ((dom.match(/\*/g) || []).length > 1) {
+			return false;
+		}
+
+		// Prevent some invalid characters
+		// @ ,
+		if ((dom.match(/(@|,)/g) || []).length > 0) {
+			return false;
+		}
+
+		// This will match *.com type domains,
+		return dom.match(/\*\.[^.]+$/m) === null;
+	};
+
+	const handleChange = (values: any) => {
+		const doms = values?.map((i: SelectOption) => {
+			return i.value;
+		});
+		setFieldValue("domainNames", doms);
+	};
+
+	return (
+		<Field name="domainNames">
+			{({ field, form }: any) => (
+				<FormControl
+					isInvalid={form.errors.domainNames && form.touched.domainNames}>
+					<FormLabel htmlFor="domainNames">
+						{intl.formatMessage({
+							id: "domain_names",
+						})}
+					</FormLabel>
+					<CreatableSelect
+						name={field.domainNames}
+						id="domainNames"
+						closeMenuOnSelect={true}
+						isClearable={false}
+						onChange={handleChange}
+						isValidNewOption={isDomainValid}
+						isMulti
+						placeholder="example.com"
+					/>
+					{maxDomains ? (
+						<FormHelperText>
+							{intl.formatMessage(
+								{ id: "domain_names.max" },
+								{ count: maxDomains },
+							)}
+						</FormHelperText>
+					) : null}
+					<FormErrorMessage>{form.errors.domainNames}</FormErrorMessage>
+				</FormControl>
+			)}
+		</Field>
+	);
+}
+
+export { DomainNamesField };

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

@@ -0,0 +1,31 @@
+import {
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Switch,
+} from "@chakra-ui/react";
+import { Field } from "formik";
+import { intl } from "locale";
+
+const fieldName = "isEcc";
+
+function EccField() {
+	return (
+		<Field name={fieldName}>
+			{({ field, form }: any) => (
+				<FormControl
+					isInvalid={form.errors[fieldName] && form.touched[fieldName]}>
+					<FormLabel htmlFor={fieldName}>
+						{intl.formatMessage({
+							id: "is-ecc",
+						})}
+					</FormLabel>
+					<Switch {...field} id={fieldName} />
+					<FormErrorMessage>{form.errors[fieldName]}</FormErrorMessage>
+				</FormControl>
+			)}
+		</Field>
+	);
+}
+
+export { EccField };

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

@@ -0,0 +1,37 @@
+import {
+	FormControl,
+	FormErrorMessage,
+	FormLabel,
+	Input,
+} from "@chakra-ui/react";
+import { Field } from "formik";
+import { intl } from "locale";
+import { validateString } from "modules/Validations";
+
+function NameField() {
+	return (
+		<Field name="name" validate={validateString(1, 100)}>
+			{({ field, form }: any) => (
+				<FormControl
+					isRequired
+					isInvalid={form.errors.name && form.touched.name}>
+					<FormLabel htmlFor="name">
+						{intl.formatMessage({
+							id: "name",
+						})}
+					</FormLabel>
+					<Input
+						{...field}
+						id="name"
+						placeholder={intl.formatMessage({
+							id: "name",
+						})}
+					/>
+					<FormErrorMessage>{form.errors.name}</FormErrorMessage>
+				</FormControl>
+			)}
+		</Field>
+	);
+}
+
+export { NameField };

frontend/src/modals/CertificateCreateModal/Common/index.ts

@@ -0,0 +1,5 @@
+export * from "./CertificateAuthorityField";
+export * from "./DNSProviderField";
+export * from "./DomainNamesField";
+export * from "./EccField";
+export * from "./NameField";