feat: new UI for notify settings

This commit is contained in:
Fu Diwei 2024-11-10 19:52:50 +08:00
parent 8b04e96a7d
commit 44497a0969
9 changed files with 549 additions and 447 deletions

View File

@ -177,9 +177,11 @@ const Bark = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.bark.server_url.label")}</Label>
<Input
placeholder={t("settings.notification.bark.serverUrl.placeholder")}
placeholder={t("settings.notification.bark.server_url.placeholder")}
value={bark.data.serverUrl}
onChange={(e) => {
const newData = {
@ -194,9 +196,12 @@ const Bark = () => {
setBark(newData);
}}
/>
</div>
<div>
<Label>{t("settings.notification.bark.device_key.label")}</Label>
<Input
placeholder={t("settings.notification.bark.deviceKey.placeholder")}
placeholder={t("settings.notification.bark.device_key.placeholder")}
value={bark.data.deviceKey}
onChange={(e) => {
const newData = {
@ -211,13 +216,15 @@ const Bark = () => {
setBark(newData);
}}
/>
</div>
<div className="flex items-center space-x-1 mt-2">
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={bark.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -240,6 +247,7 @@ const Bark = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -177,9 +177,11 @@ const DingTalk = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.dingtalk.access_token.label")}</Label>
<Input
placeholder="AccessToken"
placeholder={t("settings.notification.dingtalk.access_token.placeholder")}
value={dingtalk.data.accessToken}
onChange={(e) => {
const newData = {
@ -193,9 +195,12 @@ const DingTalk = () => {
setDingtalk(newData);
}}
/>
</div>
<div>
<Label>{t("settings.notification.dingtalk.secret.label")}</Label>
<Input
placeholder={t("settings.notification.dingtalk.secret.placeholder")}
className="mt-2"
value={dingtalk.data.secret}
onChange={(e) => {
const newData = {
@ -209,12 +214,15 @@ const DingTalk = () => {
setDingtalk(newData);
}}
/>
<div className="flex items-center space-x-1 mt-2">
</div>
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -237,6 +245,7 @@ const DingTalk = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -200,7 +200,10 @@ const Mail = () => {
};
return (
<div>
<div className="flex flex-col space-y-4">
<div className="flex space-x-4">
<div className="w-2/5">
<Label>{t("settings.notification.email.smtp_host.label")}</Label>
<Input
placeholder={t("settings.notification.email.smtp_host.placeholder")}
value={mail.data.smtpHost}
@ -216,9 +219,11 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
<div className="w-2/5">
<Label>{t("settings.notification.email.smtp_port.label")}</Label>
<Input
className="mt-2"
type="number"
placeholder={t("settings.notification.email.smtp_port.placeholder")}
value={mail.data.smtpPort}
@ -234,15 +239,19 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
<div className="w-1/5">
<Label>{t("settings.notification.email.smtp_tls.label")}</Label>
<Switch
className="mt-2"
className="block mt-2"
checked={mail.data.smtpTLS}
onCheckedChange={(e) => {
const newData = {
...mail,
data: {
...mail.data,
smtpPort: e && mail.data.smtpPort === 25 ? 465 : !e && mail.data.smtpPort === 465 ? 25 : mail.data.smtpPort,
smtpTLS: e,
},
};
@ -250,9 +259,13 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
</div>
<div className="flex space-x-4">
<div className="w-1/2">
<Label>{t("settings.notification.email.username.label")}</Label>
<Input
className="mt-2"
placeholder={t("settings.notification.email.username.placeholder")}
value={mail.data.username}
onChange={(e) => {
@ -267,9 +280,11 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
<div className="w-1/2">
<Label>{t("settings.notification.email.password.label")}</Label>
<Input
className="mt-2"
placeholder={t("settings.notification.email.password.placeholder")}
value={mail.data.password}
onChange={(e) => {
@ -284,9 +299,12 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
</div>
<div>
<Label>{t("settings.notification.email.sender_address.label")}</Label>
<Input
className="mt-2"
placeholder={t("settings.notification.email.sender_address.placeholder")}
value={mail.data.senderAddress}
onChange={(e) => {
@ -301,9 +319,11 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
<div>
<Label>{t("settings.notification.email.receiver_address.label")}</Label>
<Input
className="mt-2"
placeholder={t("settings.notification.email.receiver_address.placeholder")}
value={mail.data.receiverAddress}
onChange={(e) => {
@ -318,8 +338,8 @@ const Mail = () => {
setMail(newData);
}}
/>
</div>
<div className="mt-2">
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
@ -350,7 +370,6 @@ const Mail = () => {
</div>
</div>
</div>
</div>
);
};

View File

@ -173,9 +173,11 @@ const Lark = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.lark.webhook_url.label")}</Label>
<Input
placeholder="Webhook Url"
placeholder={t("settings.notification.lark.webhook_url.placeholder")}
value={lark.data.webhookUrl}
onChange={(e) => {
const newData = {
@ -190,12 +192,15 @@ const Lark = () => {
setLark(newData);
}}
/>
<div className="flex items-center space-x-1 mt-2">
</div>
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -218,6 +223,7 @@ const Lark = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -184,7 +184,9 @@ const ServerChan = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.serverchan.url.label")}</Label>
<Input
placeholder={t("settings.notification.serverchan.url.placeholder")}
value={serverchan.data.url}
@ -201,13 +203,15 @@ const ServerChan = () => {
setServerChan(newData);
}}
/>
</div>
<div className="flex items-center space-x-1 mt-2">
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={serverchan.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -230,6 +234,7 @@ const ServerChan = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -177,9 +177,11 @@ const Telegram = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.telegram.api_token.label")}</Label>
<Input
placeholder="ApiToken"
placeholder={t("settings.notification.telegram.api_token.placeholder")}
value={telegram.data.apiToken}
onChange={(e) => {
const newData = {
@ -194,9 +196,12 @@ const Telegram = () => {
setTelegram(newData);
}}
/>
</div>
<div>
<Label>{t("settings.notification.telegram.chat_id.label")}</Label>
<Input
placeholder="ChatId"
placeholder={t("settings.notification.telegram.chat_id.placeholder")}
value={telegram.data.chatId}
onChange={(e) => {
const newData = {
@ -211,13 +216,15 @@ const Telegram = () => {
setTelegram(newData);
}}
/>
</div>
<div className="flex items-center space-x-1 mt-2">
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -240,6 +247,7 @@ const Telegram = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -184,9 +184,11 @@ const Webhook = () => {
};
return (
<div className="flex flex-col space-y-4">
<div>
<Label>{t("settings.notification.webhook.url.label")}</Label>
<Input
placeholder="Url"
placeholder={t("settings.notification.webhook.url.placeholder")}
value={webhook.data.url}
onChange={(e) => {
const newData = {
@ -201,13 +203,15 @@ const Webhook = () => {
setWebhook(newData);
}}
/>
</div>
<div className="flex items-center space-x-1 mt-2">
<div className="flex justify-between gap-4">
<div className="flex items-center space-x-1">
<Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
<Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
</div>
<div className="flex justify-end mt-2">
<div className="flex items-center space-x-1">
<Show when={changed}>
<Button
onClick={() => {
@ -230,6 +234,7 @@ const Webhook = () => {
</Show>
</div>
</div>
</div>
);
};

View File

@ -33,16 +33,37 @@
"settings.notification.push_test_message": "Send test notification",
"settings.notification.push_test_message.succeeded.message": "Send test notification successfully",
"settings.notification.push_test_message.failed.message": "Send test notification failed",
"settings.notification.email.smtp_host.placeholder": "SMTP server address",
"settings.notification.email.smtp_port.placeholder": "SMTP server port",
"settings.notification.email.username.placeholder": "username",
"settings.notification.email.password.placeholder": "password",
"settings.notification.email.sender_address.placeholder": "Sender email address",
"settings.notification.email.receiver_address.placeholder": "Receiver email address",
"settings.notification.dingtalk.secret.placeholder": "Signature for signed addition",
"settings.notification.serverchan.url.placeholder": "Url, e.g. https://sctapi.ftqq.com/****************.send",
"settings.notification.bark.serverUrl.placeholder": "Server URL, e.g. https://your-bark-server.com, leave it blank to use the bark default server",
"settings.notification.bark.deviceKey.placeholder": "Device Keye.g. XXXXXXXXXXXXXXXXXXXX",
"settings.notification.email.smtp_host.label": "SMTP Host",
"settings.notification.email.smtp_host.placeholder": "Please enter SMTP host",
"settings.notification.email.smtp_port.label": "SMTP Port",
"settings.notification.email.smtp_port.placeholder": "Please enter SMTP port",
"settings.notification.email.smtp_tls.label": "TLS/SSL connection",
"settings.notification.email.username.label": "Username",
"settings.notification.email.username.placeholder": "please enter username",
"settings.notification.email.password.label": "Password",
"settings.notification.email.password.placeholder": "please enter password",
"settings.notification.email.sender_address.label": "Sender Email Address",
"settings.notification.email.sender_address.placeholder": "Please enter sender email address",
"settings.notification.email.receiver_address.label": "Receiver Email Address",
"settings.notification.email.receiver_address.placeholder": "Please enter receiver email address",
"settings.notification.webhook.url.label": "Webhook URL",
"settings.notification.webhook.url.placeholder": "Please enter Webhook URL",
"settings.notification.dingtalk.access_token.label": "AccessToken",
"settings.notification.dingtalk.access_token.placeholder": "Please enter access token",
"settings.notification.dingtalk.secret.label": "Secret",
"settings.notification.dingtalk.secret.placeholder": "Please enter secret",
"settings.notification.lark.webhook_url.label": "Webhook URL",
"settings.notification.lark.webhook_url.placeholder": "Please enter Webhook URL",
"settings.notification.telegram.api_token.label": "API Token",
"settings.notification.telegram.api_token.placeholder": "Please enter API token",
"settings.notification.telegram.chat_id.label": "Chat ID",
"settings.notification.telegram.chat_id.placeholder": "Please enter Telegram chat ID",
"settings.notification.serverchan.url.label": "Server URL",
"settings.notification.serverchan.url.placeholder": "Please enter server URL (e.g. https://sctapi.ftqq.com/*****.send)",
"settings.notification.bark.server_url.label": "Server URL",
"settings.notification.bark.server_url.placeholder": "Please enter server URL (e.g. https://your-bark-server.com. Leave it blank to use the bark default server)",
"settings.notification.bark.device_key.label": "Device Key",
"settings.notification.bark.device_key.placeholder": "Please enter device key",
"settings.ca.tab": "Certificate Authority",
"settings.ca.provider.errmsg.empty": "Please select a Certificate Authority",

View File

@ -33,16 +33,37 @@
"settings.notification.push_test_message": "推送测试消息",
"settings.notification.push_test_message.failed.message": "推送测试消息失败",
"settings.notification.push_test_message.succeeded.message": "推送测试消息成功",
"settings.notification.email.smtp_host.placeholder": "SMTP服务器地址",
"settings.notification.email.smtp_port.placeholder": "SMTP服务器端口, 如果未设置, 默认为25",
"settings.notification.email.username.placeholder": "用于登录到邮件服务器的用户名",
"settings.notification.email.password.placeholder": "用于登录到邮件服务器的密码",
"settings.notification.email.sender_address.placeholder": "发送邮箱地址",
"settings.notification.email.receiver_address.placeholder": "接收邮箱地址",
"settings.notification.dingtalk.secret.placeholder": "加签的签名",
"settings.notification.serverchan.url.placeholder": "Url, 形如: https://sctapi.ftqq.com/****************.send",
"settings.notification.bark.serverUrl.placeholder": "服务器URL形如: https://your-bark-server.com 留空则使用 Bark 默认服务器",
"settings.notification.bark.deviceKey.placeholder": "设备密钥,形如: XXXXXXXXXXXXXXXXXXXX",
"settings.notification.email.smtp_host.label": "SMTP 服务器地址",
"settings.notification.email.smtp_host.placeholder": "请输入 SMTP 服务器地址",
"settings.notification.email.smtp_port.label": "SMTP 服务器端口",
"settings.notification.email.smtp_port.placeholder": "请输入 SMTP 服务器端口",
"settings.notification.email.smtp_tls.label": "TLS/SSL 连接",
"settings.notification.email.username.label": "用户名",
"settings.notification.email.username.placeholder": "请输入用户名",
"settings.notification.email.password.label": "密码",
"settings.notification.email.password.placeholder": "请输入密码",
"settings.notification.email.sender_address.label": "发送邮箱地址",
"settings.notification.email.sender_address.placeholder": "请输入发送邮箱地址",
"settings.notification.email.receiver_address.label": "接收邮箱地址",
"settings.notification.email.receiver_address.placeholder": "请输入接收邮箱地址",
"settings.notification.webhook.url.label": "Webhook 回调地址",
"settings.notification.webhook.url.placeholder": "请输入 Webhook 回调地址",
"settings.notification.dingtalk.access_token.label": "AccessToken",
"settings.notification.dingtalk.access_token.placeholder": "请输入 AccessToken",
"settings.notification.dingtalk.secret.label": "签名密钥",
"settings.notification.dingtalk.secret.placeholder": "请输入签名密钥",
"settings.notification.lark.webhook_url.label": "Webhook URL",
"settings.notification.lark.webhook_url.placeholder": "请输入 Webhook URL",
"settings.notification.telegram.api_token.label": "API Token",
"settings.notification.telegram.api_token.placeholder": "请输入 API token",
"settings.notification.telegram.chat_id.label": "会话 ID",
"settings.notification.telegram.chat_id.placeholder": "请输入 Telegram 会话 ID",
"settings.notification.serverchan.url.label": "服务器 URL",
"settings.notification.serverchan.url.placeholder": "请输入服务器 URL形如: https://sctapi.ftqq.com/*****.send",
"settings.notification.bark.server_url.label": "服务器 URL",
"settings.notification.bark.server_url.placeholder": "请输入服务器 URL形如: https://your-bark-server.com留空则使用 Bark 默认服务器)",
"settings.notification.bark.device_key.label": "设备密钥",
"settings.notification.bark.device_key.placeholder": "请输入设备密钥",
"settings.ca.tab": "证书颁发机构CA",
"settings.ca.provider.errmsg.empty": "请选择证书分发机构",