mirror of
https://github.com/woodchen-ink/certimate.git
synced 2025-07-18 17:31:55 +08:00
feat(ui): new SettingsSSLProvider using antd
This commit is contained in:
Fu Diwei
parent
9e1e0dee1d
commit
a917d6c2c5
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
1
ui/public/imgs/acme/zerossl.svg
Normal file
1
ui/public/imgs/acme/zerossl.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 1113 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M107.287 512.928c0-79.047-0.045-158.094 0.03-237.141 0.02-21.15 1.256-42.135 9.203-62.181 23.74-59.883 67.166-95.237 130.865-105.518 8.582-1.385 17.221-1.667 25.889-1.667 159.718 0.009 319.436-0.021 479.155 0.019 74.315 0.019 133.182 41.364 157.993 111.108 6.12 17.204 8.542 35.132 8.54 53.403-0.022 161.072 0.122 322.144-0.072 483.215-0.091 75.418-50.342 141.59-119.876 158.868-15.044 3.738-30.331 5.422-45.807 5.423-160.26 0.014-320.521 0.29-480.78-0.12-71.188-0.182-121.825-33.848-152.353-97.864-10.72-22.48-12.842-46.672-12.817-71.218 0.081-78.774 0.03-157.551 0.03-236.327z m283.66-4.813v136.454H254.062v138.583h138.402V645.64h138.004v137.437h138.576V644.705h137.443V505.977H668.339V367.658H530.496V229.98H391.685v138.154H254.216c-0.365 1.798-0.66 2.576-0.661 3.354-0.035 43.047 0.079 86.094-0.188 129.139-0.042 6.738 3.542 6.504 8.205 6.495 39.798-0.073 79.596-0.06 119.394-0.007 3.173 0.005 6.462-0.676 9.981 1z" fill="#4D70D4"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -1 +0,0 @@
|
||||
<svg class="icon" viewBox="0 0 1113 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18956" width="200" height="200"><path d="M107.287 512.928c0-79.047-0.045-158.094 0.03-237.141 0.02-21.15 1.256-42.135 9.203-62.181 23.74-59.883 67.166-95.237 130.865-105.518 8.582-1.385 17.221-1.667 25.889-1.667 159.718 0.009 319.436-0.021 479.155 0.019 74.315 0.019 133.182 41.364 157.993 111.108 6.12 17.204 8.542 35.132 8.54 53.403-0.022 161.072 0.122 322.144-0.072 483.215-0.091 75.418-50.342 141.59-119.876 158.868-15.044 3.738-30.331 5.422-45.807 5.423-160.26 0.014-320.521 0.29-480.78-0.12-71.188-0.182-121.825-33.848-152.353-97.864-10.72-22.48-12.842-46.672-12.817-71.218 0.081-78.774 0.03-157.551 0.03-236.327z m283.66-4.813v136.454H254.062v138.583h138.402V645.64h138.004v137.437h138.576V644.705h137.443V505.977H668.339V367.658H530.496V229.98H391.685v138.154H254.216c-0.365 1.798-0.66 2.576-0.661 3.354-0.035 43.047 0.079 86.094-0.188 129.139-0.042 6.738 3.542 6.504 8.205 6.495 39.798-0.073 79.596-0.06 119.394-0.007 3.173 0.005 6.462-0.676 9.981 1z" fill="#4D70D4" p-id="18957"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,7 +1,7 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useDeepCompareMemo } from "@ant-design/pro-components";
|
||||
import { Button, Collapse, message, notification, Skeleton, Space, Switch, Tooltip, type CollapseProps } from "antd";
|
||||
import { Button, Collapse, message, notification, Skeleton, Space, Switch, type CollapseProps } from "antd";
|
||||
|
||||
import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
|
||||
import NotifyTestButton from "./NotifyTestButton";
|
||||
@ -45,9 +45,9 @@ const NotifyChannel = ({ className, style, channel }: NotifyChannelProps) => {
|
||||
{MessageContextHolder}
|
||||
{NotificationContextHolder}
|
||||
|
||||
<NotifyChannelEditForm ref={channelFormRef} channel={channel} model={channelConfig} onModelChange={() => setChannelFormChanged(true)} />
|
||||
<NotifyChannelEditForm ref={channelFormRef} className="mt-2" channel={channel} model={channelConfig} onModelChange={() => setChannelFormChanged(true)} />
|
||||
|
||||
<Space>
|
||||
<Space className="mb-2">
|
||||
<Button type="primary" disabled={!channelFormChanged} onClick={handleClickSubmit}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
|
||||
@ -41,6 +41,8 @@ export const ACCESS_PROVIDER_TYPES = Object.freeze({
|
||||
WEBHOOK: ACCESS_PROVIDER_TYPE_WEBHOOK,
|
||||
} as const);
|
||||
|
||||
export type AccessProviderTypes = (typeof ACCESS_PROVIDER_TYPES)[keyof typeof ACCESS_PROVIDER_TYPES];
|
||||
|
||||
export const ACCESS_PROVIDER_USAGE_ALL = "all" as const;
|
||||
export const ACCESS_PROVIDER_USAGE_APPLY = "apply" as const;
|
||||
export const ACCESS_PROVIDER_USAGE_DEPLOY = "deploy" as const;
|
||||
@ -50,11 +52,13 @@ export const ACCESS_PROVIDER_USAGES = Object.freeze({
|
||||
DEPLOY: ACCESS_PROVIDER_USAGE_DEPLOY,
|
||||
} as const);
|
||||
|
||||
export type AccessProviderUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES];
|
||||
|
||||
// #region AccessModel
|
||||
export interface AccessModel extends BaseModel {
|
||||
name: string;
|
||||
configType: string;
|
||||
usage: AccessUsages;
|
||||
usage: AccessProviderUsages;
|
||||
config: /*
|
||||
注意：如果追加新的类型，请保持以 ASCII 排序。
|
||||
NOTICE: If you add new type, please keep ASCII order.
|
||||
@ -136,7 +140,7 @@ export type KubernetesAccessConfig = {
|
||||
kubeConfig?: string;
|
||||
};
|
||||
|
||||
export type LocalAccessConfig = never;
|
||||
export type LocalAccessConfig = NonNullable<unknown>;
|
||||
|
||||
export type NameSiloAccessConfig = {
|
||||
apiKey: string;
|
||||
@ -177,13 +181,11 @@ export type WebhookAccessConfig = {
|
||||
// #endregion
|
||||
|
||||
// #region AccessProvider
|
||||
export type AccessUsages = (typeof ACCESS_PROVIDER_USAGES)[keyof typeof ACCESS_PROVIDER_USAGES];
|
||||
|
||||
export type AccessProvider = {
|
||||
type: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
usage: AccessUsages;
|
||||
usage: AccessProviderUsages;
|
||||
};
|
||||
|
||||
export const accessProvidersMap: Map<AccessProvider["type"], AccessProvider> = new Map(
|
||||
@ -210,6 +212,6 @@ export const accessProvidersMap: Map<AccessProvider["type"], AccessProvider> = n
|
||||
[ACCESS_PROVIDER_TYPE_WEBHOOK, "common.provider.webhook", "/imgs/providers/webhook.svg", "deploy"],
|
||||
[ACCESS_PROVIDER_TYPE_KUBERNETES, "common.provider.kubernetes", "/imgs/providers/kubernetes.svg", "deploy"],
|
||||
[ACCESS_PROVIDER_TYPE_ACMEHTTPREQ, "common.provider.acmehttpreq", "/imgs/providers/acmehttpreq.svg", "apply"],
|
||||
].map(([type, name, icon, usage]) => [type, { type, name, icon, usage: usage as AccessUsages }])
|
||||
].map(([type, name, icon, usage]) => [type, { type, name, icon, usage: usage as AccessProviderUsages }])
|
||||
);
|
||||
// #endregion
|
||||
|
||||
@ -9,7 +9,9 @@ export const SETTINGS_NAMES = Object.freeze({
|
||||
SSL_PROVIDER: SETTINGS_NAME_SSLPROVIDER,
|
||||
} as const);
|
||||
|
||||
export interface SettingsModel<T> extends BaseModel {
|
||||
export type SettingsNames = (typeof SETTINGS_NAMES)[keyof typeof SETTINGS_NAMES];
|
||||
|
||||
export interface SettingsModel<T extends NonNullable<unknown> = NonNullable<unknown>> extends BaseModel {
|
||||
name: string;
|
||||
content: T;
|
||||
}
|
||||
@ -115,14 +117,36 @@ export const notifyChannelsMap: Map<NotifyChannel["type"], NotifyChannel> = new
|
||||
// #endregion
|
||||
|
||||
// #region Settings: SSLProvider
|
||||
export type SSLProvider = "letsencrypt" | "zerossl" | "gts";
|
||||
export const SSLPROVIDER_LETSENCRYPT = "letsencrypt" as const;
|
||||
export const SSLPROVIDER_ZEROSSL = "zerossl" as const;
|
||||
export const SSLPROVIDER_GOOGLETRUSTSERVICES = "gts" as const;
|
||||
export const SSLPROVIDERS = Object.freeze({
|
||||
LETS_ENCRYPT: SSLPROVIDER_LETSENCRYPT,
|
||||
ZERO_SSL: SSLPROVIDER_ZEROSSL,
|
||||
GOOGLE_TRUST_SERVICES: SSLPROVIDER_GOOGLETRUSTSERVICES,
|
||||
} as const);
|
||||
|
||||
export type SSLProviderSetting = {
|
||||
provider: SSLProvider;
|
||||
export type SSLProviders = (typeof SSLPROVIDERS)[keyof typeof SSLPROVIDERS];
|
||||
|
||||
export type SSLProviderSettingsContent = {
|
||||
provider: (typeof SSLPROVIDERS)[keyof typeof SSLPROVIDERS];
|
||||
config: {
|
||||
[key: string]: {
|
||||
[key: string]: string;
|
||||
};
|
||||
[key: string]: Record<string, unknown> | undefined;
|
||||
letsencrypt?: SSLProviderLetsEncryptConfig;
|
||||
zerossl?: SSLProviderZeroSSLConfig;
|
||||
gts?: SSLProviderGoogleTrustServicesConfig;
|
||||
};
|
||||
};
|
||||
|
||||
export type SSLProviderLetsEncryptConfig = NonNullable<unknown>;
|
||||
|
||||
export type SSLProviderZeroSSLConfig = {
|
||||
eabKid: string;
|
||||
eabHmacKey: string;
|
||||
};
|
||||
|
||||
export type SSLProviderGoogleTrustServicesConfig = {
|
||||
eabKid: string;
|
||||
eabHmacKey: string;
|
||||
};
|
||||
// #endregion
|
||||
|
||||
@ -36,10 +36,10 @@
|
||||
"settings.notification.channel.form.bark_device_key.tooltip": "For more information, see <a href=\"https://bark.day.app/\" target=\"_blank\">https://bark.day.app/</a>",
|
||||
"settings.notification.channel.form.dingtalk_access_token.label": "Robot AccessToken",
|
||||
"settings.notification.channel.form.dingtalk_access_token.placeholder": "Please enter Robot Access Token",
|
||||
"settings.notification.channel.form.dingtalk_access_token.tooltip": "For more information, see <a href=\"https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages</a>",
|
||||
"settings.notification.channel.form.dingtalk_access_token.tooltip": "For more information, see <a href=\"https://open.dingtalk.com/document/orgapp/obtain-the-webhook-address-of-a-custom-robot\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/obtain-the-webhook-address-of-a-custom-robot</a>",
|
||||
"settings.notification.channel.form.dingtalk_secret.label": "Robot Secret",
|
||||
"settings.notification.channel.form.dingtalk_secret.placeholder": "Please enter Robot Secret",
|
||||
"settings.notification.channel.form.dingtalk_secret.tooltip": "For more information, see <a href=\"https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages</a>",
|
||||
"settings.notification.channel.form.dingtalk_secret.tooltip": "For more information, see <a href=\"https://open.dingtalk.com/document/orgapp/customize-robot-security-settings\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/customize-robot-security-settings</a>",
|
||||
"settings.notification.channel.form.email_smtp_host.label": "SMTP Host",
|
||||
"settings.notification.channel.form.email_smtp_host.placeholder": "Please enter SMTP host",
|
||||
"settings.notification.channel.form.email_smtp_port.label": "SMTP Port",
|
||||
@ -68,9 +68,19 @@
|
||||
"settings.notification.channel.form.webhook_url.label": "Webhook URL",
|
||||
"settings.notification.channel.form.webhook_url.placeholder": "Please enter Webhook URL",
|
||||
|
||||
"settings.ca.tab": "Certificate Authority",
|
||||
"settings.ca.provider.errmsg.empty": "Please select a Certificate Authority",
|
||||
"settings.ca.eab_kid.errmsg.empty": "Please enter EAB_KID",
|
||||
"settings.ca.eab_hmac_key.errmsg.empty": "Please enter EAB_HMAC_KEY.",
|
||||
"settings.ca.eab_kid_hmac_key.errmsg.empty": "Please enter EAB_KID and EAB_HMAC_KEY"
|
||||
"settings.sslprovider.tab": "Certificate Authority",
|
||||
"settings.sslprovider.form.provider.label": "ACME Provider",
|
||||
"settings.sslprovider.provider.errmsg.empty": "Please select a Certificate Authority",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.label": "EAB KID",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.placeholder": "Please enter EAB KID",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.tooltip": "For more information, see <a href=\"https://zerossl.com/documentation/acme/\" target=\"_blank\">https://zerossl.com/documentation/acme/</a>",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.label": "EAB HMAC Key",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.placeholder": "Please enter EAB HMAC Key",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.tooltip": "For more information, see <a href=\"https://zerossl.com/documentation/acme/\" target=\"_blank\">https://zerossl.com/documentation/acme/</a>",
|
||||
"settings.sslprovider.form.gts_eab_kid.label": "EAB KID",
|
||||
"settings.sslprovider.form.gts_eab_kid.placeholder": "Please enter EAB KID",
|
||||
"settings.sslprovider.form.gts_eab_kid.tooltip": "For more information, see <a href=\"https://cloud.google.com/certificate-manager/docs/public-ca-tutorial\" target=\"_blank\">https://cloud.google.com/certificate-manager/docs/public-ca-tutorial</a>",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.label": "EAB HMAC Key",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.placeholder": "Please enter EAB HMAC Key",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.tooltip": "For more information, see <a href=\"https://cloud.google.com/certificate-manager/docs/public-ca-tutorial\" target=\"_blank\">https://cloud.google.com/certificate-manager/docs/public-ca-tutorial</a>"
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
"common.notifier.dingtalk": "钉钉",
|
||||
"common.notifier.email": "电子邮件",
|
||||
"common.notifier.lark": "飞书",
|
||||
"common.notifier.serverchan": "Server酱",
|
||||
"common.notifier.serverchan": "Server 酱",
|
||||
"common.notifier.telegram": "Telegram",
|
||||
"common.notifier.webhook": "Webhook"
|
||||
}
|
||||
|
||||
@ -36,10 +36,10 @@
|
||||
"settings.notification.channel.form.bark_device_key.tooltip": "这是什么？请参阅 <a href=\"https://bark.day.app/\" target=\"_blank\">https://bark.day.app/</a>",
|
||||
"settings.notification.channel.form.dingtalk_access_token.label": "机器人 AccessToken",
|
||||
"settings.notification.channel.form.dingtalk_access_token.placeholder": "请输入机器人 AccessToken",
|
||||
"settings.notification.channel.form.dingtalk_access_token.tooltip": "这是什么？请参阅 <a href=\"https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages</a>",
|
||||
"settings.notification.channel.form.dingtalk_access_token.tooltip": "这是什么？请参阅 <a href=\"https://open.dingtalk.com/document/orgapp/obtain-the-webhook-address-of-a-custom-robot\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/obtain-the-webhook-address-of-a-custom-robot</a>",
|
||||
"settings.notification.channel.form.dingtalk_secret.label": "机器人加签密钥",
|
||||
"settings.notification.channel.form.dingtalk_secret.placeholder": "请输入机器人加签密钥",
|
||||
"settings.notification.channel.form.dingtalk_secret.tooltip": "这是什么？请参阅 <a href=\"https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/custom-bot-to-send-group-chat-messages</a>",
|
||||
"settings.notification.channel.form.dingtalk_secret.tooltip": "这是什么？请参阅 <a href=\"https://open.dingtalk.com/document/orgapp/customize-robot-security-settings\" target=\"_blank\">https://open.dingtalk.com/document/orgapp/customize-robot-security-settings</a>",
|
||||
"settings.notification.channel.form.email_smtp_host.label": "SMTP 服务器地址",
|
||||
"settings.notification.channel.form.email_smtp_host.placeholder": "请输入 SMTP 服务器地址",
|
||||
"settings.notification.channel.form.email_smtp_port.label": "SMTP 服务器端口",
|
||||
@ -68,9 +68,19 @@
|
||||
"settings.notification.channel.form.webhook_url.label": "Webhook 回调地址",
|
||||
"settings.notification.channel.form.webhook_url.placeholder": "请输入 Webhook 回调地址",
|
||||
|
||||
"settings.ca.tab": "证书颁发机构（CA）",
|
||||
"settings.ca.provider.errmsg.empty": "请选择证书分发机构",
|
||||
"settings.ca.eab_kid.errmsg.empty": "请输入EAB_KID",
|
||||
"settings.ca.eab_hmac_key.errmsg.empty": "请输入EAB_HMAC_KEY",
|
||||
"settings.ca.eab_kid_hmac_key.errmsg.empty": "请输入EAB_KID和EAB_HMAC_KEY"
|
||||
"settings.sslprovider.tab": "证书颁发机构（CA）",
|
||||
"settings.sslprovider.form.provider.label": "ACME 提供商",
|
||||
"settings.sslprovider.provider.errmsg.empty": "请选择证书分发机构",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.label": "EAB KID",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.placeholder": "请输入 EAB KID",
|
||||
"settings.sslprovider.form.zerossl_eab_kid.tooltip": "这是什么？请参阅 <a href=\"https://zerossl.com/documentation/acme/\" target=\"_blank\">https://zerossl.com/documentation/acme/</a>",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.label": "EAB HMAC Key",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.placeholder": "请输入 EAB HMAC Key",
|
||||
"settings.sslprovider.form.zerossl_eab_hmac_key.tooltip": "这是什么？请参阅 <a href=\"https://zerossl.com/documentation/acme/\" target=\"_blank\">https://zerossl.com/documentation/acme/</a>",
|
||||
"settings.sslprovider.form.gts_eab_kid.label": "EAB KID",
|
||||
"settings.sslprovider.form.gts_eab_kid.placeholder": "请输入 EAB KID",
|
||||
"settings.sslprovider.form.gts_eab_kid.tooltip": "这是什么？请参阅 <a href=\"https://cloud.google.com/certificate-manager/docs/public-ca-tutorial\" target=\"_blank\">https://cloud.google.com/certificate-manager/docs/public-ca-tutorial</a>",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.label": "EAB HMAC Key",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.placeholder": "请输入 EAB HMAC Key",
|
||||
"settings.sslprovider.form.gts_eab_hmac_key.tooltip": "这是什么？请参阅 <a href=\"https://cloud.google.com/certificate-manager/docs/public-ca-tutorial\" target=\"_blank\">https://cloud.google.com/certificate-manager/docs/public-ca-tutorial</a>"
|
||||
}
|
||||
|
||||
@ -1,445 +0,0 @@
|
||||
import { useContext, useEffect, useState, createContext } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { produce } from "immer";
|
||||
|
||||
import { cn } from "@/components/ui/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { SETTINGS_NAMES, SSLProvider as SSLProviderType, SSLProviderSetting, SettingsModel } from "@/domain/settings";
|
||||
import { get, save } from "@/repository/settings";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
|
||||
type SSLProviderContext = {
|
||||
setting: SettingsModel<SSLProviderSetting>;
|
||||
onSubmit: (data: SettingsModel<SSLProviderSetting>) => void;
|
||||
setConfig: (config: SettingsModel<SSLProviderSetting>) => void;
|
||||
};
|
||||
|
||||
const Context = createContext({} as SSLProviderContext);
|
||||
|
||||
export const useSSLProviderContext = () => {
|
||||
return useContext(Context);
|
||||
};
|
||||
|
||||
const getConfigStr = (content: SSLProviderSetting, kind: string, key: string) => {
|
||||
if (!content.config) {
|
||||
return "";
|
||||
}
|
||||
if (!content.config[kind]) {
|
||||
return "";
|
||||
}
|
||||
return content.config[kind][key] ?? "";
|
||||
};
|
||||
|
||||
const SSLProvider = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [config, setConfig] = useState<SettingsModel<SSLProviderSetting>>({
|
||||
content: {
|
||||
provider: "letsencrypt",
|
||||
config: {},
|
||||
},
|
||||
} as SettingsModel<SSLProviderSetting>);
|
||||
|
||||
const { toast } = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const setting = await get<SSLProviderSetting>(SETTINGS_NAMES.SSL_PROVIDER);
|
||||
|
||||
if (setting) {
|
||||
setConfig(setting);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const setProvider = (val: SSLProviderType) => {
|
||||
const newData = produce(config, (draft) => {
|
||||
if (draft.content) {
|
||||
draft.content.provider = val;
|
||||
} else {
|
||||
draft.content = {
|
||||
provider: val,
|
||||
config: {},
|
||||
};
|
||||
}
|
||||
});
|
||||
setConfig(newData);
|
||||
};
|
||||
|
||||
const getOptionCls = (val: string) => {
|
||||
if (config.content?.provider === val) {
|
||||
return "border-primary dark:border-primary";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
const onSubmit = async (data: SettingsModel<SSLProviderSetting>) => {
|
||||
try {
|
||||
console.log(data);
|
||||
const resp = await save({ ...data });
|
||||
setConfig(resp);
|
||||
toast({
|
||||
title: t("common.text.operation_succeeded"),
|
||||
description: t("common.text.operation_succeeded"),
|
||||
});
|
||||
} catch (e) {
|
||||
const message = getErrMsg(e);
|
||||
toast({
|
||||
title: t("common.text.operation_failed"),
|
||||
description: message,
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Context.Provider value={{ onSubmit, setConfig, setting: config }}>
|
||||
<div className="md:max-w-[40rem]">
|
||||
<Label className="dark:text-stone-200">{t("common.text.ca")}</Label>
|
||||
<RadioGroup
|
||||
className="flex mt-3 dark:text-stone-200"
|
||||
onValueChange={(val) => {
|
||||
setProvider(val as SSLProviderType);
|
||||
}}
|
||||
value={config.content?.provider}
|
||||
>
|
||||
<div className="flex items-center space-x-2 ">
|
||||
<RadioGroupItem value="letsencrypt" id="letsencrypt" />
|
||||
<Label htmlFor="letsencrypt">
|
||||
<div className={cn("flex items-center space-x-2 border p-2 rounded cursor-pointer dark:border-stone-700", getOptionCls("letsencrypt"))}>
|
||||
<img src={"/imgs/providers/letsencrypt.svg"} className="h-6" />
|
||||
<div>{"Let's Encrypt"}</div>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 ">
|
||||
<RadioGroupItem value="zerossl" id="zerossl" />
|
||||
<Label htmlFor="zerossl">
|
||||
<div className={cn("flex items-center space-x-2 border p-2 rounded cursor-pointer dark:border-stone-700", getOptionCls("zerossl"))}>
|
||||
<img src={"/imgs/providers/zerossl.svg"} className="h-6" />
|
||||
<div>{"ZeroSSL"}</div>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="gts" id="gts" />
|
||||
<Label htmlFor="gts">
|
||||
<div className={cn("flex items-center space-x-2 border p-2 rounded cursor-pointer dark:border-stone-700", getOptionCls("gts"))}>
|
||||
<img src={"/imgs/providers/google.svg"} className="h-6" />
|
||||
<div>{"Google Trust Services"}</div>
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
<SSLProviderForm kind={config.content?.provider ?? ""} />
|
||||
</div>
|
||||
</Context.Provider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderForm = ({ kind }: { kind: string }) => {
|
||||
const getForm = () => {
|
||||
switch (kind) {
|
||||
case "zerossl":
|
||||
return <SSLProviderZeroSSLForm />;
|
||||
case "gts":
|
||||
return <SSLProviderGoogleTrustServicesForm />;
|
||||
default:
|
||||
return <SSLProviderLetsEncryptForm />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mt-5">{getForm()}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderLetsEncryptForm = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { setting, onSubmit } = useSSLProviderContext();
|
||||
|
||||
const formSchema = z.object({
|
||||
kind: z.literal("letsencrypt"),
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
kind: "letsencrypt",
|
||||
},
|
||||
});
|
||||
|
||||
const onLocalSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
const newData = produce(setting, (draft) => {
|
||||
if (!draft.content) {
|
||||
draft.content = {
|
||||
provider: data.kind,
|
||||
config: {
|
||||
letsencrypt: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
onSubmit(newData);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onLocalSubmit)} className="space-y-8 dark:text-stone-200">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="kind"
|
||||
render={({ field }) => (
|
||||
<FormItem hidden>
|
||||
<FormLabel>kind</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">{t("common.button.save")}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderZeroSSLForm = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { setting, onSubmit } = useSSLProviderContext();
|
||||
|
||||
const formSchema = z.object({
|
||||
kind: z.literal("zerossl"),
|
||||
eabKid: z.string().min(1, { message: t("settings.ca.eab_kid_hmac_key.errmsg.empty") }),
|
||||
eabHmacKey: z.string().min(1, { message: t("settings.ca.eab_kid_hmac_key.errmsg.empty") }),
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
kind: "zerossl",
|
||||
eabKid: "",
|
||||
eabHmacKey: "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (setting.content) {
|
||||
const content = setting.content;
|
||||
|
||||
form.reset({
|
||||
eabKid: getConfigStr(content, "zerossl", "eabKid"),
|
||||
eabHmacKey: getConfigStr(content, "zerossl", "eabHmacKey"),
|
||||
});
|
||||
}
|
||||
}, [setting]);
|
||||
|
||||
const onLocalSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
const newData = produce(setting, (draft) => {
|
||||
if (!draft.content) {
|
||||
draft.content = {
|
||||
provider: "zerossl",
|
||||
config: {
|
||||
zerossl: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
draft.content.config.zerossl = {
|
||||
eabKid: data.eabKid,
|
||||
eabHmacKey: data.eabHmacKey,
|
||||
};
|
||||
});
|
||||
onSubmit(newData);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onLocalSubmit)} className="space-y-8 dark:text-stone-200">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="kind"
|
||||
render={({ field }) => (
|
||||
<FormItem hidden>
|
||||
<FormLabel>kind</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="eabKid"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>EAB_KID</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t("settings.ca.eab_kid.errmsg.empty")} {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="eabHmacKey"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>EAB_HMAC_KEY</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t("settings.ca.eab_hmac_key.errmsg.empty")} {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">{t("common.button.save")}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderGoogleTrustServicesForm = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { setting, onSubmit } = useSSLProviderContext();
|
||||
|
||||
const formSchema = z.object({
|
||||
kind: z.literal("gts"),
|
||||
eabKid: z.string().min(1, { message: t("settings.ca.eab_kid_hmac_key.errmsg.empty") }),
|
||||
eabHmacKey: z.string().min(1, { message: t("settings.ca.eab_kid_hmac_key.errmsg.empty") }),
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
kind: "gts",
|
||||
eabKid: "",
|
||||
eabHmacKey: "",
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (setting.content) {
|
||||
const content = setting.content;
|
||||
|
||||
form.reset({
|
||||
eabKid: getConfigStr(content, "gts", "eabKid"),
|
||||
eabHmacKey: getConfigStr(content, "gts", "eabHmacKey"),
|
||||
});
|
||||
}
|
||||
}, [setting]);
|
||||
|
||||
const onLocalSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
const newData = produce(setting, (draft) => {
|
||||
if (!draft.content) {
|
||||
draft.content = {
|
||||
provider: "gts",
|
||||
config: {
|
||||
zerossl: {},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
draft.content.config.gts = {
|
||||
eabKid: data.eabKid,
|
||||
eabHmacKey: data.eabHmacKey,
|
||||
};
|
||||
});
|
||||
onSubmit(newData);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onLocalSubmit)} className="space-y-8 dark:text-stone-200">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="kind"
|
||||
render={({ field }) => (
|
||||
<FormItem hidden>
|
||||
<FormLabel>kind</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="eabKid"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>EAB_KID</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t("settings.ca.eab_kid.errmsg.empty")} {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="eabHmacKey"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>EAB_HMAC_KEY</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={t("settings.ca.eab_hmac_key.errmsg.empty")} {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">{t("common.button.save")}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default SSLProvider;
|
||||
@ -60,7 +60,7 @@ const Settings = () => {
|
||||
label: (
|
||||
<Space>
|
||||
<ShieldCheckIcon size={14} />
|
||||
<label>{t("settings.ca.tab")}</label>
|
||||
<label>{t("settings.sslprovider.tab")}</label>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
|
||||
301
ui/src/pages/settings/SettingsSSLProvider.tsx
Normal file
301
ui/src/pages/settings/SettingsSSLProvider.tsx
Normal file
@ -0,0 +1,301 @@
|
||||
import { createContext, useContext, useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Form, Input, message, notification, Skeleton } from "antd";
|
||||
import { CheckCard } from "@ant-design/pro-components";
|
||||
import { createSchemaFieldRule } from "antd-zod";
|
||||
import { produce } from "immer";
|
||||
import { z } from "zod";
|
||||
|
||||
import { SETTINGS_NAMES, SSLPROVIDERS, type SettingsModel, type SSLProviderSettingsContent, type SSLProviders } from "@/domain/settings";
|
||||
import { get as getSettings, save as saveSettings } from "@/repository/settings";
|
||||
import { getErrMsg } from "@/utils/error";
|
||||
import { useDeepCompareEffect } from "ahooks";
|
||||
|
||||
const SSLProviderContext = createContext(
|
||||
{} as {
|
||||
pending: boolean;
|
||||
settings: SettingsModel<SSLProviderSettingsContent>;
|
||||
updateSettings: (settings: MaybeModelRecordWithId<SettingsModel<SSLProviderSettingsContent>>) => Promise<void>;
|
||||
}
|
||||
);
|
||||
|
||||
const SSLProviderEditFormLetsEncryptConfig = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { pending, settings, updateSettings } = useContext(SSLProviderContext);
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.LETS_ENCRYPT]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.LETS_ENCRYPT]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.LETS_ENCRYPT);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: NonNullable<unknown>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.LETS_ENCRYPT;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.LETS_ENCRYPT] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderEditFormZeroSSLConfig = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { pending, settings, updateSettings } = useContext(SSLProviderContext);
|
||||
|
||||
const formSchema = z.object({
|
||||
eabKid: z
|
||||
.string({ message: t("settings.sslprovider.form.zerossl_eab_kid.placeholder") })
|
||||
.min(1, t("settings.sslprovider.form.zerossl_eab_kid.placeholder"))
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
eabHmacKey: z
|
||||
.string({ message: t("settings.sslprovider.form.zerossl_eab_hmac_key.placeholder") })
|
||||
.min(1, t("settings.sslprovider.form.zerossl_eab_hmac_key.placeholder"))
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.ZERO_SSL]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.ZERO_SSL]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.ZERO_SSL);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.ZERO_SSL;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.ZERO_SSL] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="eabKid"
|
||||
label={t("settings.sslprovider.form.zerossl_eab_kid.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.zerossl_eab_kid.tooltip") }}></span>}
|
||||
>
|
||||
<Input autoComplete="new-password" placeholder={t("settings.sslprovider.form.zerossl_eab_kid.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="eabHmacKey"
|
||||
label={t("settings.sslprovider.form.zerossl_eab_hmac_key.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.zerossl_eab_hmac_key.tooltip") }}></span>}
|
||||
>
|
||||
<Input.Password autoComplete="new-password" placeholder={t("settings.sslprovider.form.zerossl_eab_hmac_key.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const SSLProviderEditFormGoogleTrustServicesConfig = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { pending, settings, updateSettings } = useContext(SSLProviderContext);
|
||||
|
||||
const formSchema = z.object({
|
||||
eabKid: z
|
||||
.string({ message: t("settings.sslprovider.form.gts_eab_kid.placeholder") })
|
||||
.min(1, t("settings.sslprovider.form.gts_eab_kid.placeholder"))
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
eabHmacKey: z
|
||||
.string({ message: t("settings.sslprovider.form.gts_eab_hmac_key.placeholder") })
|
||||
.min(1, t("settings.sslprovider.form.gts_eab_hmac_key.placeholder"))
|
||||
.max(256, t("common.errmsg.string_max", { max: 256 })),
|
||||
});
|
||||
const formRule = createSchemaFieldRule(formSchema);
|
||||
const [form] = Form.useForm<z.infer<typeof formSchema>>();
|
||||
|
||||
const [initialValues, setInitialValues] = useState(settings?.content?.config?.[SSLPROVIDERS.GOOGLE_TRUST_SERVICES]);
|
||||
const [initialChanged, setInitialChanged] = useState(false);
|
||||
useDeepCompareEffect(() => {
|
||||
setInitialValues(settings?.content?.config?.[SSLPROVIDERS.GOOGLE_TRUST_SERVICES]);
|
||||
setInitialChanged(settings?.content?.provider !== SSLPROVIDERS.GOOGLE_TRUST_SERVICES);
|
||||
}, [settings]);
|
||||
|
||||
const handleFormChange = () => {
|
||||
setInitialChanged(true);
|
||||
};
|
||||
|
||||
const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
|
||||
const newSettings = produce(settings, (draft) => {
|
||||
draft.content ??= {} as SSLProviderSettingsContent;
|
||||
draft.content.provider = SSLPROVIDERS.GOOGLE_TRUST_SERVICES;
|
||||
|
||||
draft.content.config ??= {} as SSLProviderSettingsContent["config"];
|
||||
draft.content.config[SSLPROVIDERS.GOOGLE_TRUST_SERVICES] = fields;
|
||||
});
|
||||
await updateSettings(newSettings);
|
||||
|
||||
setInitialChanged(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form form={form} disabled={pending} layout="vertical" initialValues={initialValues} onFinish={handleFormFinish} onValuesChange={handleFormChange}>
|
||||
<Form.Item
|
||||
name="eabKid"
|
||||
label={t("settings.sslprovider.form.gts_eab_kid.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.gts_eab_kid.tooltip") }}></span>}
|
||||
>
|
||||
<Input autoComplete="new-password" placeholder={t("settings.sslprovider.form.gts_eab_kid.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="eabHmacKey"
|
||||
label={t("settings.sslprovider.form.gts_eab_hmac_key.label")}
|
||||
rules={[formRule]}
|
||||
tooltip={<span dangerouslySetInnerHTML={{ __html: t("settings.sslprovider.form.gts_eab_hmac_key.tooltip") }}></span>}
|
||||
>
|
||||
<Input.Password autoComplete="new-password" placeholder={t("settings.sslprovider.form.gts_eab_hmac_key.placeholder")} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" disabled={!initialChanged} loading={pending}>
|
||||
{t("common.button.save")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const SettingsSSLProvider = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [messageApi, MessageContextHolder] = message.useMessage();
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [formPending, setFormPending] = useState(false);
|
||||
|
||||
const [settings, setSettings] = useState<SettingsModel<SSLProviderSettingsContent>>();
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
|
||||
const settings = await getSettings<SSLProviderSettingsContent>(SETTINGS_NAMES.SSL_PROVIDER);
|
||||
setSettings(settings);
|
||||
setFormProviderType(settings.content?.provider);
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const [providerType, setFormProviderType] = useState<SSLProviders>();
|
||||
const providerFormComponent = useMemo(() => {
|
||||
switch (providerType) {
|
||||
case SSLPROVIDERS.LETS_ENCRYPT:
|
||||
return <SSLProviderEditFormLetsEncryptConfig />;
|
||||
case SSLPROVIDERS.ZERO_SSL:
|
||||
return <SSLProviderEditFormZeroSSLConfig />;
|
||||
case SSLPROVIDERS.GOOGLE_TRUST_SERVICES:
|
||||
return <SSLProviderEditFormGoogleTrustServicesConfig />;
|
||||
}
|
||||
}, [providerType]);
|
||||
|
||||
const updateContextSettings = async (settings: MaybeModelRecordWithId<SettingsModel<SSLProviderSettingsContent>>) => {
|
||||
setFormPending(true);
|
||||
|
||||
try {
|
||||
const resp = await saveSettings(settings);
|
||||
setSettings(resp);
|
||||
setFormProviderType(resp.content?.provider);
|
||||
|
||||
messageApi.success(t("common.text.operation_succeeded"));
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
|
||||
} finally {
|
||||
setFormPending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SSLProviderContext.Provider
|
||||
value={{
|
||||
pending: formPending,
|
||||
settings: settings!,
|
||||
updateSettings: updateContextSettings,
|
||||
}}
|
||||
>
|
||||
{MessageContextHolder}
|
||||
{NotificationContextHolder}
|
||||
|
||||
{loading ? (
|
||||
<Skeleton active />
|
||||
) : (
|
||||
<>
|
||||
<Form form={form} disabled={formPending} layout="vertical" initialValues={{ provider: providerType }}>
|
||||
<Form.Item className="mb-2" name="provider" label={t("settings.sslprovider.form.provider.label")} initialValue={SSLPROVIDERS.LETS_ENCRYPT}>
|
||||
<CheckCard.Group className="w-full" onChange={(value) => setFormProviderType(value as SSLProviders)}>
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/letsencrypt.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Let's Encrypt"
|
||||
value={SSLPROVIDERS.LETS_ENCRYPT}
|
||||
/>
|
||||
<CheckCard avatar={<img src={"/imgs/acme/zerossl.svg"} className="size-8" />} size="small" title="ZeroSSL" value={SSLPROVIDERS.ZERO_SSL} />
|
||||
<CheckCard
|
||||
avatar={<img src={"/imgs/acme/google.svg"} className="size-8" />}
|
||||
size="small"
|
||||
title="Google Trust Services"
|
||||
value={SSLPROVIDERS.GOOGLE_TRUST_SERVICES}
|
||||
/>
|
||||
</CheckCard.Group>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<div className="md:max-w-[40rem]">{providerFormComponent}</div>
|
||||
</>
|
||||
)}
|
||||
</SSLProviderContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsSSLProvider;
|
||||
@ -1,9 +1,9 @@
|
||||
import { ClientResponseError } from "pocketbase";
|
||||
|
||||
import { SETTINGS_NAMES, type SettingsModel } from "@/domain/settings";
|
||||
import { type SettingsModel, type SettingsNames } from "@/domain/settings";
|
||||
import { getPocketBase } from "./pocketbase";
|
||||
|
||||
export const get = async <T>(name: (typeof SETTINGS_NAMES)[keyof typeof SETTINGS_NAMES]) => {
|
||||
export const get = async <T extends NonNullable<unknown>>(name: SettingsNames) => {
|
||||
try {
|
||||
const resp = await getPocketBase().collection("settings").getFirstListItem<SettingsModel<T>>(`name='${name}'`, {
|
||||
requestKey: null,
|
||||
@ -21,7 +21,7 @@ export const get = async <T>(name: (typeof SETTINGS_NAMES)[keyof typeof SETTINGS
|
||||
}
|
||||
};
|
||||
|
||||
export const save = async <T>(record: MaybeModelRecordWithId<SettingsModel<T>>) => {
|
||||
export const save = async <T extends NonNullable<unknown>>(record: MaybeModelRecordWithId<SettingsModel<T>>) => {
|
||||
if (record.id) {
|
||||
return await getPocketBase().collection("settings").update<SettingsModel<T>>(record.id, record);
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ import Settings from "./pages/settings/Settings";
|
||||
import SettingsAccount from "./pages/settings/SettingsAccount";
|
||||
import SettingsPassword from "./pages/settings/SettingsPassword";
|
||||
import SettingsNotification from "./pages/settings/SettingsNotification";
|
||||
import SSLProvider from "./pages/settings/SSLProvider";
|
||||
import SettingsSSLProvider from "./pages/settings/SettingsSSLProvider";
|
||||
|
||||
export const router = createHashRouter([
|
||||
{
|
||||
@ -57,7 +57,7 @@ export const router = createHashRouter([
|
||||
},
|
||||
{
|
||||
path: "/settings/ssl-provider",
|
||||
element: <SSLProvider />,
|
||||
element: <SettingsSSLProvider />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -22,10 +22,12 @@ export const useNotifyChannelStore = create<NotifyChannelState>((set, get) => {
|
||||
|
||||
setChannel: async (channel, config) => {
|
||||
settings ??= await getSettings<NotifyChannelsSettingsContent>(SETTINGS_NAMES.NOTIFY_CHANNELS);
|
||||
return get().setChannels({
|
||||
...settings.content,
|
||||
[channel]: { ...settings.content[channel], ...config },
|
||||
});
|
||||
return get().setChannels(
|
||||
produce(settings, (draft) => {
|
||||
draft.content ??= {};
|
||||
draft.content[channel] = { ...draft.content[channel], ...config };
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
setChannels: async (channels) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user