fix: UI tab active icon wrong position (#416)

CHANGELOG.md

@@ -4,6 +4,7 @@
 ## main(v0.7.3)
 
 - feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查，符合条件将通过检查
+- fix: UI 修复登录页面 tab 激活图标错位
 
 ## v0.7.2
 

frontend/src/api/index.js

@@ -96,6 +96,8 @@ const getOpenSettings = async (message) => {
         }
     } catch (error) {
         message.error(error.message || "error");
+    } finally {
+        openSettings.value.fetched = true;
     }
 }
 
@@ -122,6 +124,8 @@ const getUserOpenSettings = async (message) => {
         Object.assign(userOpenSettings.value, res);
     } catch (error) {
         message.error(error.message || "fetch settings failed");
+    } finally {
+        userOpenSettings.value.fetched = true;
     }
 }
 

frontend/src/store/index.js

@@ -8,6 +8,7 @@ export const useGlobalState = createGlobalState(
         const loading = ref(false);
         const announcement = useLocalStorage('announcement', '');
         const openSettings = ref({
+            fetched: false,
             title: '',
             announcement: '',
             prefix: '',
@@ -67,6 +68,7 @@ export const useGlobalState = createGlobalState(
         const globalTabplacement = useStorage('globalTabplacement', 'top');
         const useSideMargin = useStorage('useSideMargin', true);
         const userOpenSettings = ref({
+            fetched: false,
             enable: false,
             enableMailVerify: false,
         });

frontend/src/views/admin/UserSettings.vue

@@ -92,8 +92,8 @@ onMounted(async () => {
                         <n-checkbox v-model:checked="userSettings.enableMailVerify" style="width: 20%;">
                             {{ t('enable') }}
                         </n-checkbox>
-                        <n-input v-model:value="userSettings.verifyMailSender" style="width: 80%;"
+                        <n-input v-model:value="userSettings.verifyMailSender" v-if="userSettings.enableMailVerify"
-                            :placeholder="t('verifyMailSender')" />
+                            style="width: 80%;" :placeholder="t('verifyMailSender')" />
                     </n-input-group>
                 </n-form-item-row>
                 <n-form-item-row :label="t('enableMailAllowList')">
@@ -101,8 +101,9 @@ onMounted(async () => {
                         <n-checkbox v-model:checked="userSettings.enableMailAllowList" style="width: 20%;">
                             {{ t('enable') }}
                         </n-checkbox>
-                        <n-select v-model:value="userSettings.mailAllowList" filterable multiple tag style="width: 80%;"
+                        <n-select v-model:value="userSettings.mailAllowList" v-if="userSettings.enableMailAllowList"
-                            :options="mailAllowOptions" :placeholder="t('mailAllowList')" />
+                            filterable multiple tag style="width: 80%;" :options="mailAllowOptions"
+                            :placeholder="t('mailAllowList')" />
                     </n-input-group>
                 </n-form-item-row>
                 <n-form-item-row :label="t('maxAddressCount')">

frontend/src/views/admin/Webhook.vue

@@ -15,11 +15,13 @@ const { t } = useI18n({
             successTip: 'Success',
             webhookAllowList: 'Webhook Allow List(Enter the address that is allowed to use webhook)',
             save: 'Save',
+            notEnabled: 'Webhook is not enabled',
         },
         zh: {
             successTip: '成功',
             webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址)',
             save: '保存',
+            notEnabled: 'Webhook 未开启',
         }
     }
 });
@@ -33,11 +35,13 @@ class WebhookSettings {
 }
 
 const webhookSettings = ref(new WebhookSettings([]))
+const webhookEnabled = ref(false)
 
 const getSettings = async () => {
     try {
         const res = await api.fetch(`/admin/webhook/settings`)
         Object.assign(webhookSettings.value, res)
+        webhookEnabled.value = true
     } catch (error) {
         message.error((error as Error).message || "error");
     }
@@ -62,7 +66,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+        <n-card v-if="webhookEnabled" :bordered="false" embedded style="max-width: 800px; overflow: auto;">
             <n-form-item-row :label="t('webhookAllowList')">
                 <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
                     :placeholder="t('webhookAllowList')" />
@@ -71,6 +75,7 @@ onMounted(async () => {
                 {{ t('save') }}
             </n-button>
         </n-card>
+        <n-result v-else status="404" :title="t('notEnabled')" />
     </div>
 </template>
 

frontend/src/views/common/Login.vue

@@ -193,7 +193,7 @@ onMounted(async () => {
         <n-alert v-if="userSettings.user_email" :show-icon="false" :bordered="false" closable>
             <span>{{ t('bindUserInfo') }}</span>
         </n-alert>
-        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
+        <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
             <n-tab-pane name="signin" :tab="t('login')">
                 <n-form>
                     <n-form-item-row :label="t('credential')" required>

frontend/src/views/user/UserLogin.vue

@@ -191,7 +191,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
+        <n-tabs v-model:value="tabValue" size="large" v-if="userOpenSettings.fetched" justify-content="space-evenly">
             <n-tab-pane name="signin" :tab="t('login')">
                 <n-form>
                     <n-form-item-row :label="t('email')" required>

worker/src/admin_api/mail_webhook_settings.ts

@@ -2,16 +2,9 @@ import { Context } from "hono";
 import { HonoCustomType } from "../types";
 import { CONSTANTS } from "../constants";
 import { WebhookSettings } from "../models";
-import { getBooleanValue } from "../utils";
 import { commonParseMail, sendWebhook } from "../common";
 
 async function getWebhookSettings(c: Context<HonoCustomType>): Promise<Response> {
-    if (!c.env.KV) {
-        return c.text("KV is not available", 400);
-    }
-    if (!getBooleanValue(c.env.ENABLE_WEBHOOK)) {
-        return c.text("Webhook is disabled", 403);
-    }
     const settings = await c.env.KV.get<WebhookSettings>(
         CONSTANTS.WEBHOOK_KV_ADMIN_MAIL_SETTINGS_KEY, "json"
     ) || new WebhookSettings();

worker/src/mails_api/webhook_settings.ts

@@ -7,12 +7,6 @@ import { commonParseMail, sendWebhook } from "../common";
 
 
 async function getWebhookSettings(c: Context<HonoCustomType>): Promise<Response> {
-    if (!c.env.KV) {
-        return c.text("KV is not available", 400);
-    }
-    if (!getBooleanValue(c.env.ENABLE_WEBHOOK)) {
-        return c.text("Webhook is disabled", 403);
-    }
     const { address } = c.get("jwtPayload")
     const adminSettings = await c.env.KV.get<AdminWebhookSettings>(CONSTANTS.WEBHOOK_KV_SETTINGS_KEY, "json");
     if (!adminSettings?.allowList.includes(address)) {

worker/src/worker.ts

@@ -42,9 +42,11 @@ app.use('/*', async (c, next) => {
 			}
 		}
 	}
+	// webhook check
 	if (
 		c.req.path.startsWith("/api/webhook")
 		|| c.req.path.startsWith("/admin/webhook")
+		|| c.req.path.startsWith("/admin/mail_webhook")
 	) {
 		if (!c.env.KV) {
 			return c.text("KV is not available", 400);