From a8e961caf4458056f7da5e6ea5f96ba235face76 Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Sun, 31 Mar 2024 16:16:15 +0800
Subject: [PATCH] feat: UI: move account releated code to header.vue (#84)

---
 frontend/src/api/index.js       |  18 ++--
 frontend/src/store/index.js     |   3 +
 frontend/src/views/Content.vue  | 121 +----------------------
 frontend/src/views/Header.vue   | 167 ++++++++++++++++++++++++++++----
 frontend/src/views/Settings.vue |   6 +-
 5 files changed, 168 insertions(+), 147 deletions(-)

diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index abc94d7f..91e5bdec 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -63,14 +63,18 @@ const getOpenSettings = async (message) => {
 }
 
 const getSettings = async () => {
-    if (typeof jwt.value != 'string' || jwt.value.trim() === '' || jwt.value === 'undefined') {
-        return "";
+    try {
+        if (typeof jwt.value != 'string' || jwt.value.trim() === '' || jwt.value === 'undefined') {
+            return "";
+        }
+        const res = await apiFetch("/api/settings");;
+        settings.value = {
+            address: res["address"],
+            auto_reply: res["auto_reply"]
+        };
+    } finally {
+        settings.value.fetched = true;
     }
-    const res = await apiFetch("/api/settings");;
-    settings.value = {
-        address: res["address"],
-        auto_reply: res["auto_reply"]
-    };
 }
 
 const adminShowPassword = async (id) => {
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 110a9947..a12253c3 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -13,6 +13,7 @@ export const useGlobalState = createGlobalState(
             }]
         })
         const settings = ref({
+            fetched: false,
             address: '',
             auto_reply: {
                 subject: '',
@@ -29,6 +30,7 @@ export const useGlobalState = createGlobalState(
         const jwt = useStorage('jwt', '');
         const localeCache = useStorage('locale', 'zhCN');
         const themeSwitch = useStorage('themeSwitch', false);
+        const showLogin = ref(false);
         return {
             loading,
             settings,
@@ -40,6 +42,7 @@ export const useGlobalState = createGlobalState(
             themeSwitch,
             adminAuth,
             showAdminAuth,
+            showLogin,
         }
     },
 )
diff --git a/frontend/src/views/Content.vue b/frontend/src/views/Content.vue
index 336fd087..2ea134f7 100644
--- a/frontend/src/views/Content.vue
+++ b/frontend/src/views/Content.vue
@@ -12,18 +12,13 @@ import { api } from '../api'
 import { CloudDownloadRound } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
 
-const { toClipboard } = useClipboard()
 const message = useMessage()
 const isMobile = useIsMobile()
 
-const { jwt, settings, openSettings, themeSwitch } = useGlobalState()
+const { settings, themeSwitch } = useGlobalState()
 const autoRefresh = ref(false)
 const data = ref([])
 const timer = ref(null)
-const showPassword = ref(false)
-const showNewEmail = ref(false)
-const emailName = ref("")
-const emailDomain = ref("")
 
 const count = ref(0)
 const page = ref(1)
@@ -31,41 +26,20 @@ const pageSize = ref(20)
 
 const showAttachments = ref(false)
 const curAttachments = ref([])
+const curMail = ref(null);
 
 const { t } = useI18n({
   locale: 'zh',
   messages: {
     en: {
-      yourAddress: 'Your email address is',
-      pleaseGetNewEmail: 'Please click "Get New Email" button to get a new email address',
-      getNewEmail: 'Get New Email',
-      getNewEmailTip1: 'Please input the email you want to use.',
-      getNewEmailTip2: 'Levaing it blank will generate a random email address.',
-      cancel: 'Cancel',
-      ok: 'OK',
-      copy: 'Copy',
-      showPassword: 'Show Password',
       autoRefresh: 'Auto Refresh',
       refresh: 'Refresh',
-      password: 'Password',
-      passwordTip: 'Please copy the password and you can use it to login to your email account.',
       attachments: 'Show Attachments',
       pleaseSelectMail: "Please select a mail to view."
     },
     zh: {
-      yourAddress: '你的邮箱地址是',
-      pleaseGetNewEmail: '请点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
-      getNewEmail: '获取新邮箱',
-      getNewEmailTip1: '请输入你想要使用的邮箱地址。',
-      getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
-      cancel: '取消',
-      ok: '确定',
-      copy: '复制',
-      showPassword: '显示密码',
       autoRefresh: '自动刷新',
       refresh: '刷新',
-      password: '密码',
-      passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
       attachments: '查看附件',
       pleaseSelectMail: "请选择一封邮件查看。"
     }
@@ -116,33 +90,6 @@ const refresh = async () => {
   }
 };
 
-const copy = async () => {
-  try {
-    await toClipboard(settings.value.address)
-    message.success('Copied');
-  } catch (e) {
-    message.error(e.message || "error");
-  }
-}
-
-const newEmail = async () => {
-  try {
-    const res = await api.fetch(
-      `/api/new_address`
-      + `?name=${emailName.value || ''}`
-      + `&domain=${emailDomain.value || ''}`
-    );
-    jwt.value = res["jwt"];
-    await api.getSettings();
-    await refresh();
-    showNewEmail.value = false;
-    showPassword.value = true;
-  } catch (error) {
-    message.error(error.message || "error");
-  }
-};
-
-const curMail = ref(null);
 const clickRow = async (row) => {
   curMail.value = row;
 };
@@ -173,8 +120,6 @@ const getAttachments = async (attachment_id) => {
 };
 
 onMounted(async () => {
-  await api.getOpenSettings(message);
-  emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
   await api.getSettings();
   await refresh();
 });
@@ -182,24 +127,7 @@ onMounted(async () => {
 
 <template>
   <div>
-    <n-layout>
-      <n-alert :type='settings.address ? "info" : "warning"' show-icon>
-        <span v-if="settings.address">
-          {{ t('yourAddress') }} <b>{{ settings.address }}</b>
-          <n-button size="small" class="center" @click="showPassword = true" tertiary round type="primary">
-            {{ t('showPassword') }}
-          </n-button>
-          <n-button @click="copy" size="small" tertiary round type="primary">
-            {{ t('copy') }}
-          </n-button>
-        </span>
-        <span v-else>
-          {{ t('pleaseGetNewEmail') }}
-          <n-button class="center" @click="showNewEmail = true" tertiary round type="primary">
-            {{ t('getNewEmail') }}
-          </n-button>
-        </span>
-      </n-alert>
+    <n-layout v-if="settings.address">
       <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" default-size="0.25">
         <template #1>
           <div>
@@ -310,44 +238,6 @@ onMounted(async () => {
         </n-drawer>
       </div>
     </n-layout>
-    <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t('getNewEmail') }}</div>
-      </template>
-      <span>
-        <p>{{ t("getNewEmailTip1") }}</p>
-        <p>{{ t("getNewEmailTip2") }}</p>
-      </span>
-      <n-input-group>
-        <n-input-group-label v-if="openSettings.prefix">
-          {{ openSettings.prefix }}
-        </n-input-group-label>
-        <n-input v-model:value="emailName" />
-        <n-input-group-label>@</n-input-group-label>
-        <n-select v-model:value="emailDomain" :consistent-menu-width="false" :options="openSettings.domains" />
-      </n-input-group>
-      <template #action>
-        <n-button @click="showNewEmail = false">
-          {{ t('cancel') }}
-        </n-button>
-        <n-button @click="newEmail" type="primary">
-          {{ t('ok') }}
-        </n-button>
-      </template>
-    </n-modal>
-    <n-modal v-model:show="showPassword" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("password") }}</div>
-      </template>
-      <span>
-        <p>{{ t("passwordTip") }}</p>
-      </span>
-      <n-card>
-        <b>{{ jwt }}</b>
-      </n-card>
-      <template #action>
-      </template>
-    </n-modal>
     <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
       <template #header>
         <div>{{ t("attachments") }}</div>
@@ -378,11 +268,6 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.n-alert {
-  margin-bottom: 10px;
-  text-align: center;
-}
-
 .left {
   overflow: scroll;
   text-align: left;
diff --git a/frontend/src/views/Header.vue b/frontend/src/views/Header.vue
index 2f466a75..f34a4713 100644
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -1,8 +1,11 @@
 <script setup>
 import { NGrid, NLayoutHeader, NInput } from 'naive-ui'
-import { NButton, NSelect, NModal, NIcon, NMenu } from 'naive-ui'
-import { NSwitch, NPopconfirm } from 'naive-ui'
-import { ref, h, computed } from 'vue'
+import { NButton, NSelect, NModal, NIcon, NMenu, NAlert } from 'naive-ui'
+import { NInputGroup, NInputGroupLabel, NCard, NResult } from 'naive-ui'
+import { NSwitch, NPopconfirm, NSkeleton } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+import useClipboard from 'vue-clipboard3'
+import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
@@ -10,14 +13,20 @@ import { DarkModeFilled, DarkModeOutlined, StarOutlineFilled, MenuFilled } from
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
+const { toClipboard } = useClipboard()
+const message = useMessage()
 
 const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
+const { showLogin, openSettings, settings } = useGlobalState()
 const router = useRouter()
 const isMobile = useIsMobile()
 
-const showLogin = ref(false)
+const showNewEmail = ref(false)
 const showLogout = ref(false)
 const password = ref('')
+const showPassword = ref(false)
+const emailName = ref("")
+const emailDomain = ref("")
 
 const login = async () => {
     try {
@@ -61,7 +70,18 @@ const { t } = useI18n({
             authTip: 'Please enter the correct auth code',
             settings: 'Settings',
             home: 'Home',
-            menu: 'Menu'
+            menu: 'Menu',
+            pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
+            getNewEmail: 'Get New Email',
+            getNewEmailTip1: 'Please input the email you want to use.',
+            getNewEmailTip2: 'Levaing it blank will generate a random email address.',
+            yourAddress: 'Your email address is',
+            password: 'Password',
+            passwordTip: 'Please copy the password and you can use it to login to your email account.', cancel: 'Cancel',
+            ok: 'OK',
+            copy: 'Copy',
+            copied: 'Copied',
+            showPassword: 'Show Password', fetchAddressError: 'Fetch address error, maybe your jwt is invalid or network error.',
         },
         zh: {
             title: 'Cloudflare 临时邮件',
@@ -74,7 +94,20 @@ const { t } = useI18n({
             authTip: '请输入正确的授权码',
             settings: '设置',
             home: '主页',
-            menu: '菜单'
+            menu: '菜单',
+            pleaseGetNewEmail: '请"登录"或点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
+            getNewEmail: '获取新邮箱',
+            getNewEmailTip1: '请输入你想要使用的邮箱地址。',
+            getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
+            yourAddress: '你的邮箱地址是',
+            password: '密码',
+            passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
+            cancel: '取消',
+            ok: '确定',
+            copy: '复制',
+            copied: '已复制',
+            showPassword: '显示密码',
+            fetchAddressError: '获取地址失败, 请检查你的 jwt 是否有效 或 网络是否正常。',
         }
     }
 });
@@ -120,19 +153,6 @@ const menuOptions = computed(() => [
         ),
         key: "lang"
     },
-    {
-        label: () => h(
-            NButton,
-            {
-                tertiary: true,
-                ghost: true,
-                onClick: () => { showLogin.value = true }
-            },
-            { default: () => t('login') }
-        ),
-        show: !jwt.value,
-        key: "login"
-    },
     {
         label: () => h(
             NButton,
@@ -156,6 +176,7 @@ const menuOptions = computed(() => [
             },
             { default: () => t('settings') }
         ),
+        show: !!settings.value.address,
         key: "settings"
     }
 ]);
@@ -173,6 +194,37 @@ const menuOptionsMobile = [
         children: menuOptions.value
     },
 ];
+
+
+const copy = async () => {
+    try {
+        await toClipboard(settings.value.address)
+        message.success(t('copied'));
+    } catch (e) {
+        message.error(e.message || "error");
+    }
+}
+
+const newEmail = async () => {
+    try {
+        const res = await api.fetch(
+            `/api/new_address`
+            + `?name=${emailName.value || ''}`
+            + `&domain=${emailDomain.value || ''}`
+        );
+        jwt.value = res["jwt"];
+        await api.getSettings();
+        showNewEmail.value = false;
+        showPassword.value = true;
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
+
+onMounted(async () => {
+    await api.getOpenSettings(message);
+    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
+});
 </script>
 
 <template>
@@ -198,6 +250,73 @@ const menuOptionsMobile = [
                 </n-button>
             </div>
         </n-layout-header>
+        <n-card v-if="!settings.fetched">
+            <n-skeleton style="height: 50vh" />
+        </n-card>
+        <n-alert v-else-if="settings.address" type="info" show-icon>
+            <span>
+                {{ t('yourAddress') }} <b>{{ settings.address }}</b>
+                <n-button size="small" class="center" @click="showPassword = true" tertiary round type="primary">
+                    {{ t('showPassword') }}
+                </n-button>
+                <n-button @click="copy" size="small" tertiary round type="primary">
+                    {{ t('copy') }}
+                </n-button>
+            </span>
+        </n-alert>
+        <n-card v-else>
+            <n-result status="info" :description="t('pleaseGetNewEmail')">
+                <template #footer>
+                    <n-alert v-if="jwt" type="warning" show-icon>
+                        <span>{{ t('fetchAddressError') }}</span>
+                    </n-alert>
+                    <n-button @click="showLogin = true" tertiary round type="primary">
+                        {{ t('login') }}
+                    </n-button>
+                    <n-button @click="showNewEmail = true" tertiary round type="primary">
+                        {{ t('getNewEmail') }}
+                    </n-button>
+                </template>
+            </n-result>
+        </n-card>
+        <n-modal v-model:show="showNewEmail" preset="dialog" title="Dialog">
+            <template #header>
+                <div>{{ t('getNewEmail') }}</div>
+            </template>
+            <span>
+                <p>{{ t("getNewEmailTip1") }}</p>
+                <p>{{ t("getNewEmailTip2") }}</p>
+            </span>
+            <n-input-group>
+                <n-input-group-label v-if="openSettings.prefix">
+                    {{ openSettings.prefix }}
+                </n-input-group-label>
+                <n-input v-model:value="emailName" />
+                <n-input-group-label>@</n-input-group-label>
+                <n-select v-model:value="emailDomain" :consistent-menu-width="false" :options="openSettings.domains" />
+            </n-input-group>
+            <template #action>
+                <n-button @click="showNewEmail = false">
+                    {{ t('cancel') }}
+                </n-button>
+                <n-button @click="newEmail" type="primary">
+                    {{ t('ok') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showPassword" preset="dialog" title="Dialog">
+            <template #header>
+                <div>{{ t("password") }}</div>
+            </template>
+            <span>
+                <p>{{ t("passwordTip") }}</p>
+            </span>
+            <n-card>
+                <b>{{ jwt }}</b>
+            </n-card>
+            <template #action>
+            </template>
+        </n-modal>
         <n-modal v-model:show="showLogin" preset="dialog" title="Dialog">
             <template #header>
                 <div>{{ t('login') }}</div>
@@ -246,4 +365,14 @@ const menuOptionsMobile = [
     align-items: center;
     justify-content: space-between;
 }
+
+.n-alert {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.n-card {
+    margin-top: 10px;
+}
 </style>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index f646c16f..2c3308de 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -73,13 +73,13 @@ const saveSettings = async () => {
     }
 }
 
-onMounted(() => {
-    getSettings()
+onMounted(async () => {
+    await getSettings()
 })
 </script>
 
 <template>
-    <n-space vertical>
+    <n-space v-if="settings.address" vertical>
         <Header />
         <h1>{{ t("settings") }}</h1>
         <n-button type="primary" @click="saveSettings">{{ t('save') }}</n-button>