feat: add UserLogin (#209)

frontend/src/views/user/Account.vue

@@ -1,123 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-
-import { useGlobalState } from '../../store'
-import { api } from '../../api'
-
-const {
-    jwt, localeCache, settings, showPassword, loading,
-    mailboxSplitSize, useIframeShowMail
-} = useGlobalState()
-const router = useRouter()
-const message = useMessage()
-
-const showLogout = ref(false)
-const showDelteAccount = ref(false)
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
-    messages: {
-        en: {
-            mailboxSplitSize: 'Mailbox Split Size',
-            useIframeShowMail: 'Use iframe Show Mail',
-            logout: "Logout",
-            delteAccount: "Delete Account",
-            showPassword: 'Show Password',
-            logoutConfirm: 'Are you sure to logout?',
-            delteAccount: "Delete Account",
-            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
-        },
-        zh: {
-            mailboxSplitSize: '邮箱界面分栏大小',
-            useIframeShowMail: '使用iframe显示邮件',
-            logout: '退出登录',
-            delteAccount: "删除账户",
-            showPassword: '查看密码',
-            logoutConfirm: '确定要退出登录吗？',
-            delteAccount: "删除账户",
-            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
-        }
-    }
-});
-
-const logout = async () => {
-    jwt.value = '';
-    await router.push('/')
-    location.reload()
-}
-
-const deleteAccount = async () => {
-    try {
-        await api.fetch(`/api/delete_address`, {
-            method: 'DELETE'
-        });
-        jwt.value = '';
-        await router.push('/')
-        location.reload()
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-};
-</script>
-
-<template>
-    <div class="center" v-if="settings.address">
-        <n-card>
-            <n-card>
-                <n-form-item-row :label="t('mailboxSplitSize')">
-                    <n-slider v-model:value="mailboxSplitSize" :min="0.25" :max="0.75" :step="0.01" :marks="{
-                        0.25: '0.25',
-                        0.5: '0.5',
-                        0.75: '0.75'
-                    }" />
-                </n-form-item-row>
-                <n-form-item-row :label="t('useIframeShowMail')">
-                    <n-switch v-model:value="useIframeShowMail" :round="false" />
-                </n-form-item-row>
-            </n-card>
-            <n-button @click="showPassword = true" type="primary" secondary block strong>
-                {{ t('showPassword') }}
-            </n-button>
-            <n-button @click="showLogout = true" secondary block strong>
-                {{ t('logout') }}
-            </n-button>
-            <n-button @click="showDelteAccount = true" type="error" secondary block strong>
-                {{ t('delteAccount') }}
-            </n-button>
-        </n-card>
-        <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
-            <p>{{ t('logoutConfirm') }}</p>
-            <template #action>
-                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
-                    {{ t('logout') }}
-                </n-button>
-            </template>
-        </n-modal>
-        <n-modal v-model:show="showDelteAccount" preset="dialog" :title="t('delteAccount')">
-            <p>{{ t('delteAccountConfirm') }}</p>
-            <template #action>
-                <n-button :loading="loading" @click="deleteAccount" size="small" tertiary type="error">
-                    {{ t('delteAccount') }}
-                </n-button>
-            </template>
-        </n-modal>
-    </div>
-</template>
-
-<style scoped>
-.center {
-    display: flex;
-    justify-content: center;
-}
-
-
-.n-card {
-    max-width: 800px;
-    text-align: left;
-}
-
-.n-button {
-    margin-top: 10px;
-}
-</style>

frontend/src/views/user/AddressManagement.vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router';
+import { NBadge, NPopconfirm, NButton } from 'naive-ui'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { localeCache, jwt } = useGlobalState()
+const message = useMessage()
+const router = useRouter()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            success: 'success',
+            name: 'Name',
+            mail_count: 'Mail Count',
+            send_count: 'Send Count',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+            unbindAddress: 'Unbind Address',
+            unbindAddressTip: 'Before unbinding, please switch to this email address and save the email address credential.',
+        },
+        zh: {
+            success: '成功',
+            name: '名称',
+            mail_count: '邮件数量',
+            send_count: '发送数量',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+            unbindAddress: '解绑地址',
+            unbindAddressTip: '解绑前请切换到此邮箱地址并保存邮箱地址凭证。',
+        }
+    }
+});
+
+const data = ref([])
+
+const changeMailAddress = async (address_id) => {
+    try {
+        const res = await api.fetch(`/user_api/bind_address_jwt/${address_id}`);
+        message.success(t('changeMailAddress') + " " + t('success'));
+        if (!res.jwt) {
+            message.error("jwt not found");
+            return;
+        }
+        jwt.value = res.jwt;
+        await router.push('/');
+        location.reload();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const unbindAddress = async (address_id) => {
+    try {
+        const res = await api.fetch(`/user_api/unbind_address`, {
+            method: 'POST',
+            body: JSON.stringify({ address_id })
+        });
+        message.success(t('unbindAddress') + " " + t('success'));
+        await fetchData();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const fetchData = async () => {
+    try {
+        const { results, count: addressCount } = await api.fetch(
+            `/user_api/bind_address`
+        );
+        data.value = results;
+        if (addressCount > 0) {
+            count.value = addressCount;
+        }
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "ID",
+        key: "id"
+    },
+    {
+        title: t('name'),
+        key: "name"
+    },
+    {
+        title: t('mail_count'),
+        key: "mail_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.mail_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('send_count'),
+        key: "send_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.send_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => changeMailAddress(row.id)
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => unbindAddress(row.id)
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "error",
+                            },
+                            { default: () => t('unbindAddress') }
+                        ),
+                        default: () => t('unbindAddressTip')
+                    }
+                ),
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
+    </div>
+</template>

frontend/src/views/user/AutoReply.vue

@@ -1,136 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { onMounted, ref } from 'vue'
-
-import { useGlobalState } from '../../store'
-import { api } from '../../api'
-
-const message = useMessage()
-const sourcePrefix = ref("")
-const enableAutoReply = ref(false)
-const autoReplyMessage = ref("")
-const subject = ref("")
-const name = ref("")
-
-const { settings } = useGlobalState()
-
-
-const { t } = useI18n({
-    locale: 'zh',
-    messages: {
-        en: {
-            success: 'Success',
-            settings: 'Settings',
-            sourcePrefix: 'Source Mail Prefix',
-            name: 'Name',
-            enableAutoReply: 'Enable Auto Reply',
-            subject: 'Subject',
-            autoReply: 'Auto Reply',
-            save: 'Save',
-        },
-        zh: {
-            success: '成功',
-            settings: '设置',
-            sourcePrefix: '来源邮件前缀',
-            name: '名称',
-            enableAutoReply: '启用自动回复',
-            subject: '主题',
-            autoReply: '自动回复',
-            save: '保存',
-        }
-    }
-});
-
-const fetchData = async () => {
-    try {
-        const res = await api.fetch("/api/auto_reply")
-        sourcePrefix.value = res.source_prefix || ""
-        enableAutoReply.value = res.enabled || false
-        name.value = res.name || ""
-        autoReplyMessage.value = res.message || ""
-        subject.value = res.subject || ""
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-}
-
-const saveData = async () => {
-    try {
-        await api.fetch("/api/auto_reply", {
-            method: "POST",
-            body: JSON.stringify({
-                auto_reply: {
-                    enabled: enableAutoReply.value,
-                    source_prefix: sourcePrefix.value,
-                    name: name.value,
-                    message: autoReplyMessage.value,
-                    subject: subject.value,
-                }
-            })
-        })
-        message.success(t("success"))
-    } catch (error) {
-        message.error(error.message || "error");
-    }
-}
-
-onMounted(async () => {
-    await fetchData()
-})
-</script>
-
-<template>
-    <div class="center">
-        <n-card v-if="settings.address" :title='t("settings")'>
-            <div class="right">
-                <n-button type="primary" @click="saveData">{{ t('save') }}</n-button>
-            </div>
-            <div class="left">
-                <n-form-item :label="t('enableAutoReply')" label-placement="left">
-                    <n-switch v-model:value="enableAutoReply" />
-                </n-form-item>
-                <n-form-item :label="t('name')" label-placement="left">
-                    <n-input :disabled="!enableAutoReply" v-model:value="name" />
-                </n-form-item>
-                <n-form-item :label="t('sourcePrefix')" label-placement="left">
-                    <n-input :disabled="!enableAutoReply" v-model:value="sourcePrefix" />
-                </n-form-item>
-                <n-form-item :label="t('subject')" label-placement="left">
-                    <n-input :disabled="!enableAutoReply" v-model:value="subject" />
-                </n-form-item>
-                <n-form-item :label="t('autoReply')" label-placement="left">
-                    <n-input :disabled="!enableAutoReply" type="textarea" v-model:value="autoReplyMessage" />
-                </n-form-item>
-            </div>
-        </n-card>
-    </div>
-</template>
-
-<style scoped>
-.n-card {
-    max-width: 800px;
-}
-
-.n-button {
-    text-align: left;
-}
-
-.center {
-    display: flex;
-    text-align: center;
-    place-items: center;
-    justify-content: center;
-}
-
-.left {
-    text-align: left;
-    place-items: left;
-    justify-content: left;
-}
-
-.right {
-    text-align: right;
-    place-items: right;
-    justify-content: right;
-}
-</style>

frontend/src/views/user/BindAddress.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import Login from '../index/Login.vue'
+
+const { userJwt, localeCache, userSettings, } = useGlobalState()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            logout: 'Logout',
+        },
+        zh: {
+            logout: '退出登录',
+        }
+    }
+});
+
+const fetchData = async () => {
+}
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div class="center" v-if="userSettings.user_email">
+        <n-card style="max-width: 600px;">
+            <Login />
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/user/UserBar.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import UserLogin from './UserLogin.vue'
+
+const message = useMessage()
+const router = useRouter()
+
+const {
+    localeCache, userSettings, userJwt, userOpenSettings
+} = useGlobalState()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            currentUser: 'Current Login User',
+            fetchUserSettingsError: 'Login password is invalid or account not exist, it may be network connection issue, please try again later.',
+        },
+        zh: {
+            currentUser: '当前登录用户',
+            fetchUserSettingsError: '登录信息已过期或账号不存在，也可能是网络连接异常，请稍后再尝试。',
+
+        }
+    }
+});
+
+
+onMounted(async () => {
+    await api.getUserOpenSettings(message);
+    await api.getUserSettings(message);
+});
+</script>
+
+<template>
+    <div>
+        <n-card v-if="!userSettings.fetched">
+            <n-skeleton style="height: 50vh" />
+        </n-card>
+        <div v-else-if="userSettings.user_email">
+            <n-alert type="success" :show-icon="false">
+                <span>
+                    <b>{{ t('currentUser') }} <b>{{ userSettings.user_email }}</b></b>
+                </span>
+            </n-alert>
+        </div>
+        <div v-else class="center">
+            <n-card style="max-width: 600px;">
+                <n-alert v-if="userJwt" type="warning" :show-icon="false" closable>
+                    <span>{{ t('fetchUserSettingsError') }}</span>
+                </n-alert>
+                <UserLogin />
+            </n-card>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.n-alert {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+    margin: 20px;
+}
+</style>

frontend/src/views/user/UserLogin.vue

@@ -0,0 +1,248 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { computed, onMounted, ref } from "vue";
+import { useI18n } from 'vue-i18n'
+
+import { api } from '../../api';
+import { useGlobalState } from '../../store'
+import { hashPassword } from '../../utils';
+
+import Turnstile from '../../components/Turnstile.vue';
+
+const { userJwt, localeCache, userTab, userOpenSettings } = useGlobalState()
+const message = useMessage();
+const router = useRouter();
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            login: 'Login',
+            register: 'Register',
+            email: 'Email',
+            password: 'Password',
+            verifyCode: 'Verification Code',
+            verifyCodeSent: 'Verification Code Sent, expires in {timeout} seconds',
+            waitforVerifyCode: 'Wait for {timeout} seconds',
+            sendVerificationCode: 'Send Verification Code',
+            forgotPassword: 'Forgot Password',
+            cannotForgotPassword: 'Mail verification is disabled or register is disabled, cannot reset password, please contact administrator',
+            resetPassword: 'Reset Password',
+            pleaseInput: 'Please input email and password',
+            pleaseInputEmail: 'Please input email',
+            pleaseInputCode: 'Please input code',
+            pleaseCompleteTurnstile: 'Please complete turnstile',
+            pleaseLogin: 'Please login',
+        },
+        zh: {
+            login: '登录',
+            register: '注册',
+            email: '邮箱',
+            password: '密码',
+            verifyCode: '验证码',
+            sendVerificationCode: '发送验证码',
+            verifyCodeSent: '验证码已发送, {timeout} 秒后失效',
+            waitforVerifyCode: '等待{timeout}秒',
+            forgotPassword: '忘记密码',
+            cannotForgotPassword: '未开启邮箱验证或未开启注册功能，无法重置密码，请联系管理员',
+            resetPassword: '重置密码',
+            pleaseInput: '请输入邮箱和密码',
+            pleaseInputEmail: '请输入邮箱',
+            pleaseInputCode: '请输入验证码',
+            pleaseCompleteTurnstile: '请完成人机验证',
+            pleaseLogin: '请登录',
+        }
+    }
+});
+
+const tabValue = ref("signin");
+const showModal = ref(false);
+const user = ref({
+    email: "",
+    password: "",
+    code: ""
+});
+const cfToken = ref("")
+
+const emailLogin = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/login`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                // hash password
+                password: await hashPassword(user.value.password)
+            })
+        });
+        userJwt.value = res.jwt;
+        location.reload();
+    } catch (error) {
+        message.error(error.message || "login failed");
+    }
+};
+
+const verifyCodeExpire = ref(0);
+const verifyCodeTimeout = ref(0);
+
+const getVerifyCodeTimeout = () => {
+    if (!verifyCodeExpire.value || verifyCodeExpire.value < new Date().getTime()) return 0;
+    return Math.round((verifyCodeExpire.value - new Date().getTime()) / 1000);
+};
+
+const sendVerificationCode = async () => {
+    if (!user.value.email) {
+        message.error(t('pleaseInputEmail'));
+        return;
+    }
+    if (!cfToken.value && userOpenSettings.value.enableMailVerify) {
+        message.error(t('pleaseCompleteTurnstile'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/verify_code`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                cf_token: cfToken.value
+            })
+        });
+        if (res && res.expirationTtl) {
+            message.success(t('verifyCodeSent', { timeout: res.expirationTtl }));
+            verifyCodeExpire.value = new Date().getTime() + res.expirationTtl * 1000;
+            const intervalId = setInterval(() => {
+                verifyCodeTimeout.value = getVerifyCodeTimeout();
+                if (verifyCodeTimeout.value <= 0) {
+                    clearInterval(intervalId);
+                    verifyCodeTimeout.value = 0;
+                }
+            }, 1000);
+        }
+    } catch (error) {
+        message.error(error.message || "send verification code failed");
+    }
+};
+
+const emailSignup = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    if (!user.value.code && userOpenSettings.value.enableMailVerify) {
+        message.error(t('pleaseInputCode'));
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/register`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                // hash password
+                password: await hashPassword(user.value.password),
+                code: user.value.code
+            }),
+            message: message
+        });
+        if (res) {
+            tabValue.value = "signin";
+            message.success(t('pleaseLogin'));
+        }
+        showModal.value = false;
+    } catch (error) {
+        message.error(error.message || "register failed");
+    }
+};
+
+onMounted(async () => {
+
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-tabs 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('email')" required>
+                        <n-input v-model:value="user.email" />
+                    </n-form-item-row>
+                    <n-form-item-row :label="t('password')" required>
+                        <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                    </n-form-item-row>
+                    <n-button @click="emailLogin" type="primary" block secondary strong>
+                        {{ t('login') }}
+                    </n-button>
+                    <n-button @click="showModal = true" type="info" quaternary size="tiny">
+                        {{ t('forgotPassword') }}
+                    </n-button>
+                </n-form>
+            </n-tab-pane>
+            <n-tab-pane v-if="userOpenSettings.enable" name="signup" :tab="t('register')">
+                <n-form>
+                    <n-form-item-row :label="t('email')" required>
+                        <n-input v-model:value="user.email" />
+                    </n-form-item-row>
+                    <n-form-item-row :label="t('password')" required>
+                        <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                    </n-form-item-row>
+                    <Turnstile v-if="userOpenSettings.enableMailVerify" v-model:value="cfToken" />
+                    <n-form-item-row v-if="userOpenSettings.enableMailVerify" :label="t('verifyCode')" required>
+                        <n-input-group>
+                            <n-input v-model:value="user.code" />
+                            <n-button @click="sendVerificationCode" style="margin-bottom: 0" type="primary" ghost
+                                :disabled="verifyCodeTimeout > 0">
+                                {{ verifyCodeTimeout > 0 ? t('waitforVerifyCode', { timeout: verifyCodeTimeout })
+                                    : t('sendVerificationCode') }}
+                            </n-button>
+                        </n-input-group>
+                    </n-form-item-row>
+                </n-form>
+                <n-button @click="emailSignup" type="primary" block secondary strong>
+                    {{ t('register') }}
+                </n-button>
+            </n-tab-pane>
+        </n-tabs>
+        <n-modal v-model:show="showModal" style="max-width: 600px;" preset="card" :title="t('forgotPassword')">
+            <n-form v-if="userOpenSettings.enable && userOpenSettings.enableMailVerify">
+                <n-form-item-row :label="t('email')" required>
+                    <n-input v-model:value="user.email" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('password')" required>
+                    <n-input v-model:value="user.password" type="password" show-password-on="click" />
+                </n-form-item-row>
+                <Turnstile v-model:value="cfToken" />
+                <n-form-item-row :label="t('verifyCode')" required>
+                    <n-input-group>
+                        <n-input v-model:value="user.code" />
+                        <n-button @click="sendVerificationCode" style="margin-bottom: 0" type="primary" ghost
+                            :disabled="verifyCodeTimeout > 0">
+                            {{ verifyCodeTimeout > 0 ? t('waitforVerifyCode', { timeout: verifyCodeTimeout })
+                                : t('sendVerificationCode') }}
+                        </n-button>
+                    </n-input-group>
+                </n-form-item-row>
+                <n-button @click="emailSignup" type="primary" block secondary strong>
+                    {{ t('resetPassword') }}
+                </n-button>
+            </n-form>
+            <n-alert v-else :show-icon="false">
+                <span>
+                    {{ t('cannotForgotPassword') }}
+                </span>
+            </n-alert>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/user/UserSettings.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { userJwt, localeCache, userSettings, } = useGlobalState()
+const router = useRouter()
+const message = useMessage()
+
+const showLogout = ref(false)
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            logout: 'Logout',
+            logoutConfirm: 'Are you sure you want to logout?',
+            passordTip: 'The server will only receive the hash value of the password, and will not receive the plaintext password, so it cannot view or retrieve your password. If the administrator enables email verification, you can reset the password in incognito mode',
+        },
+        zh: {
+            logout: '退出登录',
+            logoutConfirm: '确定要退出登录吗？',
+            passordTip: '服务器只会接收到密码的哈希值，不会接收到明文密码，因此无法查看或者找回您的密码, 如果管理员启用了邮件验证您可以在无痕模式重置密码',
+        }
+    }
+});
+
+
+const logout = async () => {
+    userJwt.value = '';
+    location.reload()
+}
+
+const fetchData = async () => {
+}
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div class="center" v-if="userSettings.user_email">
+        <n-card>
+            <n-alert :show-icon="false">
+                <span>
+                    {{ t('passordTip') }}
+                </span>
+            </n-alert>
+            <n-button @click="showLogout = true" secondary block strong>
+                {{ t('logout') }}
+            </n-button>
+        </n-card>
+        <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
+            <p>{{ t('logoutConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                    {{ t('logout') }}
+                </n-button>
+            </template>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+
+.n-card {
+    max-width: 800px;
+    text-align: left;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>