feat: implement address password authentication feature (#731)

* feat: implement address password authentication feature - Add password field to address table for storing hashed passwords - Implement address authentication APIs (login, change password) - Add automatic password generation for new addresses - Support password login alongside credential login in frontend - Add password management in account settings and admin panel - Add ENABLE_ADDRESS_PASSWORD environment variable for feature control - Update documentation and i18n support - Enhance security with SHA-256 password hashing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: upgrade dependencies --------- Co-authored-by: Claude <noreply@anthropic.com>
2026-05-28 11:39:57 +08:00 · 2025-09-26 14:52:05 +08:00
parent 6ae90be3bf
commit a905ba5f06
35 changed files with 1552 additions and 1105 deletions
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -86,6 +86,7 @@ const getOpenSettings = async (message, notification) => {
            cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
            enableWebhook: res["enableWebhook"] || false,
            isS3Enabled: res["isS3Enabled"] || false,
+            enableAddressPassword: res["enableAddressPassword"] || false,
        });
        if (openSettings.value.needAuth) {
            showAuth.value = true;
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -36,6 +36,7 @@ export const useGlobalState = createGlobalState(
            isS3Enabled: false,
            showGithub: true,
            disableAdminPasswordCheck: false,
+            enableAddressPassword: false,
        })
        const settings = ref({
            fetched: false,
@@ -63,6 +64,7 @@ export const useGlobalState = createGlobalState(
        const auth = useStorage('auth', '');
        const adminAuth = useStorage('adminAuth', '');
        const jwt = useStorage('jwt', '');
+        const addressPassword = useSessionStorage('addressPassword', '');
        const adminTab = useSessionStorage('adminTab', "account");
        const adminMailTabAddress = ref("");
        const adminSendBoxTabAddress = ref("");
@@ -145,6 +147,7 @@ export const useGlobalState = createGlobalState(
            userOauth2SessionState,
            userOauth2SessionClientID,
            useSimpleIndex,
+            addressPassword,
        }
    },
 )
--- a/frontend/src/views/admin/Account.vue
+++ b/frontend/src/views/admin/Account.vue
@@ -9,7 +9,7 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'

 const {
-    loading, adminTab,
+    loading, adminTab, openSettings,
    adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
@@ -39,6 +39,9 @@ const { t } = useI18n({
            clearSentItemsTip: 'Are you sure to clear sent items for this email?',
            actions: 'Actions',
            success: 'Success',
+            resetPassword: 'Reset Password',
+            newPassword: 'New Password',
+            passwordResetSuccess: 'Password reset successfully',
        },
        zh: {
            name: '名称',
@@ -63,6 +66,9 @@ const { t } = useI18n({
            clearSentItemsTip: '确定要清空这个邮箱的发件箱吗？',
            actions: '操作',
            success: '成功',
+            resetPassword: '重置密码',
+            newPassword: '新密码',
+            passwordResetSuccess: '密码重置成功',
        }
    }
 });
@@ -72,6 +78,9 @@ const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
 const curClearInboxAddressId = ref(0);
 const curClearSentItemsAddressId = ref(0);
+const showResetPassword = ref(false);
+const curResetPasswordAddressId = ref(0);
+const newPassword = ref('');

 const addressQuery = ref("")

@@ -134,6 +143,22 @@ const clearSentItems = async () => {
    }
 }

+const resetPassword = async () => {
+    try {
+        await api.fetch(`/admin/address/${curResetPasswordAddressId.value}/reset_password`, {
+            method: 'POST',
+            body: JSON.stringify({
+                password: newPassword.value
+            })
+        });
+        message.success(t("passwordResetSuccess"));
+        newPassword.value = '';
+        showResetPassword.value = false;
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
 const fetchData = async () => {
    try {
        addressQuery.value = addressQuery.value.trim()
@@ -296,6 +321,19 @@ const columns = [
                                    ),
                                    show: row.send_count > 0
                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curResetPasswordAddressId.value = row.id;
+                                                showResetPassword.value = true;
+                                            }
+                                        },
+                                        { default: () => t('resetPassword') }
+                                    ),
+                                    show: openSettings.value?.enableAddressPassword
+                                },
                                {
                                    label: () => h(NButton,
                                        {
@@ -365,6 +403,17 @@ onMounted(async () => {
                </n-button>
            </template>
        </n-modal>
+
+        <n-modal v-model:show="showResetPassword" preset="dialog" :title="t('resetPassword')">
+            <n-form-item :label="t('newPassword')">
+                <n-input v-model:value="newPassword" type="password" placeholder="" show-password-on="click" />
+            </n-form-item>
+            <template #action>
+                <n-button :loading="loading" @click="resetPassword" size="small" tertiary type="info">
+                    {{ t('resetPassword') }}
+                </n-button>
+            </template>
+        </n-modal>
        <n-input-group>
            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')"
                @keydown.enter="fetchData" />
--- a/frontend/src/views/admin/CreateAccount.vue
+++ b/frontend/src/views/admin/CreateAccount.vue
@@ -15,10 +15,13 @@ const { t } = useI18n({
        en: {
            address: 'Address',
            enablePrefix: 'If enable Prefix',
-            creatNewEmail: 'Get New Email',
+            creatNewEmail: 'Create New Email',
            fillInAllFields: 'Please fill in all fields',
            successTip: 'Success Created',
            addressCredential: 'Mail Address Credential',
+            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
+            addressPassword: 'Address Password',
+            linkWithAddressCredential: 'Open to auto login email link',
        },
        zh: {
            address: '地址',
@@ -27,6 +30,9 @@ const { t } = useI18n({
            fillInAllFields: '请填写完整信息',
            successTip: '创建成功',
            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            addressPassword: '地址密码',
+            linkWithAddressCredential: '打开即可自动登录邮箱的链接',
        }
    }
 });
@@ -36,6 +42,8 @@ const emailName = ref("")
 const emailDomain = ref("")
 const showReultModal = ref(false)
 const result = ref("")
+const addressPassword = ref("")
+const createdAddress = ref("")

 const newEmail = async () => {
    if (!emailName.value || !emailDomain.value) {
@@ -52,6 +60,8 @@ const newEmail = async () => {
            })
        })
        result.value = res["jwt"];
+        addressPassword.value = res["password"] || '';
+        createdAddress.value = res["address"] || '';
        message.success(t('successTip'))
        showReultModal.value = true
    } catch (error) {
@@ -59,6 +69,10 @@ const newEmail = async () => {
    }
 }

+const getUrlWithJwt = () => {
+    return `${window.location.origin}/?jwt=${result.value}`
+}
+
 onMounted(async () => {
    if (openSettings.prefix) {
        enablePrefix.value = true
@@ -70,10 +84,25 @@ onMounted(async () => {
 <template>
    <div class="center">
        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('addressCredential')">
-            <p>{{ t('addressCredential') }}</p>
-            <n-card :bordered="false" embedded>
+            <span>
+                <p>{{ t("addressCredentialTip") }}</p>
+            </span>
+            <n-card embedded>
                <b>{{ result }}</b>
            </n-card>
+            <n-card embedded v-if="addressPassword">
+                <p><b>{{ createdAddress }}</b></p>
+                <p>{{ t('addressPassword') }}: <b>{{ addressPassword }}</b></p>
+            </n-card>
+            <n-card embedded>
+                <n-collapse>
+                    <n-collapse-item :title='t("linkWithAddressCredential")'>
+                        <n-card embedded>
+                            <b>{{ getUrlWithJwt() }}</b>
+                        </n-card>
+                    </n-collapse-item>
+                </n-collapse>
+            </n-card>
        </n-modal>
        <n-card :bordered="false" embedded style="max-width: 600px;">
            <n-form-item-row v-if="openSettings.prefix" :label="t('enablePrefix')">
--- a/frontend/src/views/common/Login.vue
+++ b/frontend/src/views/common/Login.vue
@@ -9,7 +9,7 @@ import Turnstile from '../../components/Turnstile.vue'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import { getRouterPathWithLang } from '../../utils'
+import { getRouterPathWithLang, hashPassword } from '../../utils'

 const props = defineProps({
    bindUserAddress: {
@@ -39,7 +39,7 @@ const router = useRouter()

 const {
    jwt, loading, openSettings,
-    showAddressCredential, userSettings
+    showAddressCredential, userSettings, addressPassword
 } = useGlobalState()

 const tabValue = ref('signin')
@@ -47,8 +47,47 @@ const credential = ref('')
 const emailName = ref("")
 const emailDomain = ref("")
 const cfToken = ref("")
+const loginMethod = ref('credential') // 'credential' or 'password'
+const loginAddress = ref('')
+const loginPassword = ref('')
+
+// 根据 openSettings 初始化登录方式
+const initLoginMethod = () => {
+    if (openSettings.value?.enableAddressPassword) {
+        loginMethod.value = 'password';
+    } else {
+        loginMethod.value = 'credential';
+    }
+}

 const login = async () => {
+    if (loginMethod.value === 'password') {
+        // Password login
+        if (!loginAddress.value || !loginPassword.value) {
+            message.error(t('emailPasswordRequired'));
+            return;
+        }
+        try {
+            const res = await api.fetch('/api/address_login', {
+                method: 'POST',
+                body: JSON.stringify({
+                    email: loginAddress.value,
+                    password: await hashPassword(loginPassword.value)
+                })
+            });
+            jwt.value = res.jwt;
+            await api.getSettings();
+            try {
+                await props.bindUserAddress();
+            } catch (error) {
+                message.error(`${t('bindUserAddressError')}: ${error.message}`);
+            }
+            await router.push(getRouterPathWithLang("/", locale.value));
+        } catch (error) {
+            message.error(error.message || "error");
+        }
+        return;
+    }
    if (!credential.value) {
        message.error(t('credentialInput'));
        return;
@@ -85,6 +124,11 @@ const { locale, t } = useI18n({
            bindUserInfo: 'Logged in user, login without binding email or create new email address will bind to current user',
            bindUserAddressError: 'Error when bind email address to user',
            autoGeneratedName: 'Auto-generated name',
+            passwordLogin: 'Password Login',
+            credentialLogin: 'Credential Login',
+            email: 'Email',
+            password: 'Password',
+            emailPasswordRequired: 'Email and password are required',
        },
        zh: {
            login: '登录',
@@ -102,6 +146,11 @@ const { locale, t } = useI18n({
            bindUserInfo: '已登录用户, 登录未绑定邮箱或创建新邮箱地址将绑定到当前用户',
            bindUserAddressError: '绑定邮箱地址到用户时错误',
            autoGeneratedName: '自动生成名称',
+            passwordLogin: '密码登录',
+            credentialLogin: '凭据登录',
+            email: '邮箱',
+            password: '密码',
+            emailPasswordRequired: '邮箱和密码不能为空',
        }
    }
 });
@@ -157,6 +206,8 @@ const newEmail = async () => {
            cfToken.value
        );
        jwt.value = res["jwt"];
+        addressPassword.value = res["password"] || '';
+        settings.value.address = res["address"] || '';
        await api.getSettings();
        await router.push(getRouterPathWithLang("/", locale.value));
        showAddressCredential.value = true;
@@ -212,6 +263,7 @@ onMounted(async () => {
        await api.getOpenSettings(message, notification);
    }
    emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
+    initLoginMethod();
 });
 </script>

@@ -223,9 +275,29 @@ onMounted(async () => {
        <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
            <n-tab-pane name="signin" :tab="loginAndBindTag">
                <n-form>
-                    <n-form-item-row :label="t('credential')" required>
-                        <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
-                    </n-form-item-row>
+                    <div v-if="loginMethod === 'password'">
+                        <n-form-item-row :label="t('email')" required>
+                            <n-input v-model:value="loginAddress" />
+                        </n-form-item-row>
+                        <n-form-item-row :label="t('password')" required>
+                            <n-input v-model:value="loginPassword" type="password" show-password-on="click" />
+                        </n-form-item-row>
+                    </div>
+
+                    <div v-else>
+                        <n-form-item-row :label="t('credential')" required>
+                            <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
+                        </n-form-item-row>
+                    </div>
+
+                    <div class="switch-login-button">
+                        <n-button v-if="openSettings?.enableAddressPassword"
+                            @click="loginMethod === 'password' ? loginMethod = 'credential' : loginMethod = 'password'"
+                            type="info" quaternary size="tiny">
+                            {{ loginMethod === 'password' ? t('credentialLogin') : t('passwordLogin') }}
+                        </n-button>
+                    </div>
+
                    <n-button @click="login" :loading="loading" type="primary" block secondary strong>
                        <template #icon>
                            <n-icon :component="EmailOutlined" />
@@ -244,19 +316,21 @@ onMounted(async () => {
                <n-spin :show="generateNameLoading">
                    <n-form>
                        <span>
-                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip1") + addressRegex.source }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip1") +
+                                addressRegex.source }}</p>
                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip2") }}</p>
                            <p>{{ t("getNewEmailTip3") }}</p>
                        </span>
-                        <n-button v-if="!openSettings.disableCustomAddressName" @click="generateName" style="margin-bottom: 10px;">
+                        <n-button v-if="!openSettings.disableCustomAddressName" @click="generateName"
+                            style="margin-bottom: 10px;">
                            {{ t('generateName') }}
                        </n-button>
                        <n-input-group>
                            <n-input-group-label v-if="addressPrefix">
                                {{ addressPrefix }}
                            </n-input-group-label>
-                            <n-input v-if="!openSettings.disableCustomAddressName" v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
-                                :maxlength="openSettings.maxAddressLen" />
+                            <n-input v-if="!openSettings.disableCustomAddressName" v-model:value="emailName" show-count
+                                :minlength="openSettings.minAddressLen" :maxlength="openSettings.maxAddressLen" />
                            <n-input v-else :value="t('autoGeneratedName')" disabled />
                            <n-input-group-label>@</n-input-group-label>
                            <n-select v-model:value="emailDomain" :consistent-menu-width="false"
@@ -294,6 +368,12 @@ onMounted(async () => {
    margin-top: 10px;
 }

+.switch-login-button {
+    display: flex;
+    justify-content: center;
+    margin: 10px 0;
+}
+
 .n-form {
    text-align: left;
 }
--- a/frontend/src/views/index/AccountSettings.vue
+++ b/frontend/src/views/index/AccountSettings.vue
@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import { hashPassword } from '../../utils'
 import { getRouterPathWithLang } from '../../utils'

 const {
@@ -17,6 +18,9 @@ const showLogout = ref(false)
 const showDeleteAccount = ref(false)
 const showClearInbox = ref(false)
 const showClearSentItems = ref(false)
+const showChangePassword = ref(false)
+const newPassword = ref('')
+const confirmPassword = ref('')
 const { locale, t } = useI18n({
    messages: {
        en: {
@@ -31,6 +35,11 @@ const { locale, t } = useI18n({
            clearInboxConfirm: "Are you sure to clear all emails in your inbox?",
            clearSentItemsConfirm: "Are you sure to clear all emails in your sent items?",
            success: "Success",
+            changePassword: "Change Password",
+            newPassword: "New Password",
+            confirmPassword: "Confirm Password",
+            passwordMismatch: "Passwords do not match",
+            passwordChanged: "Password changed successfully",
        },
        zh: {
            logout: '退出登录',
@@ -44,6 +53,11 @@ const { locale, t } = useI18n({
            clearInboxConfirm: "确定要清空你收件箱中的所有邮件吗？",
            clearSentItemsConfirm: "确定要清空你发件箱中的所有邮件吗？",
            success: "成功",
+            changePassword: "修改密码",
+            newPassword: "新密码",
+            confirmPassword: "确认密码",
+            passwordMismatch: "密码不匹配",
+            passwordChanged: "密码修改成功",
        }
    }
 });
@@ -92,6 +106,27 @@ const clearSentItems = async () => {
        showClearSentItems.value = false;
    }
 };
+
+const changePassword = async () => {
+    if (newPassword.value !== confirmPassword.value) {
+        message.error(t("passwordMismatch"));
+        return;
+    }
+    try {
+        await api.fetch(`/api/address_change_password`, {
+            method: 'POST',
+            body: JSON.stringify({
+                new_password: await hashPassword(newPassword.value)
+            })
+        });
+        message.success(t("passwordChanged"));
+        newPassword.value = '';
+        confirmPassword.value = '';
+        showChangePassword.value = false;
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
 </script>

 <template>
@@ -100,6 +135,9 @@ const clearSentItems = async () => {
            <n-button @click="showAddressCredential = true" type="primary" secondary block strong>
                {{ t('showAddressCredential') }}
            </n-button>
+            <n-button v-if="openSettings?.enableAddressPassword" @click="showChangePassword = true" type="info" secondary block strong>
+                {{ t('changePassword') }}
+            </n-button>
            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showClearInbox = true" type="warning" secondary
                block strong>
                {{ t('clearInbox') }}
@@ -148,6 +186,22 @@ const clearSentItems = async () => {
                </n-button>
            </template>
        </n-modal>
+        
+        <n-modal v-model:show="showChangePassword" preset="dialog" :title="t('changePassword')">
+            <n-form :model="{ newPassword, confirmPassword }">
+                <n-form-item :label="t('newPassword')">
+                    <n-input v-model:value="newPassword" type="password" placeholder="" show-password-on="click" />
+                </n-form-item>
+                <n-form-item :label="t('confirmPassword')">
+                    <n-input v-model:value="confirmPassword" type="password" placeholder="" show-password-on="click" />
+                </n-form-item>
+            </n-form>
+            <template #action>
+                <n-button :loading="loading" @click="changePassword" size="small" tertiary type="info">
+                    {{ t('changePassword') }}
+                </n-button>
+            </template>
+        </n-modal>
    </div>
 </template>

--- a/frontend/src/views/index/AddressBar.vue
+++ b/frontend/src/views/index/AddressBar.vue
@@ -19,7 +19,7 @@ const router = useRouter()

 const {
    jwt, settings, showAddressCredential, userJwt,
-    isTelegram, openSettings
+    isTelegram, openSettings, addressPassword
 } = useGlobalState()

 const { locale, t } = useI18n({
@@ -34,6 +34,7 @@ const { locale, t } = useI18n({
            addressCredential: 'Mail Address Credential',
            linkWithAddressCredential: 'Open to auto login email link',
            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
+            addressPassword: 'Address Password',
            userLogin: 'User Login',
        },
        zh: {
@@ -46,6 +47,7 @@ const { locale, t } = useI18n({
            addressCredential: '邮箱地址凭证',
            linkWithAddressCredential: '打开即可自动登录邮箱的链接',
            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            addressPassword: '地址密码',
            userLogin: '用户登录',
        }
    }
@@ -149,6 +151,10 @@ onMounted(async () => {
            <n-card embedded>
                <b>{{ jwt }}</b>
            </n-card>
+            <n-card embedded v-if="addressPassword">
+                <p><b>{{ settings.address }}</b></p>
+                <p>{{ t('addressPassword') }}: <b>{{ addressPassword }}</b></p>
+            </n-card>
            <n-card embedded>
                <n-collapse>
                    <n-collapse-item :title='t("linkWithAddressCredential")'>