feat: add UserLogin (#209)

frontend/src/views/admin/Account.vue

@@ -23,9 +23,9 @@ const { t } = useI18n({
             updated_at: 'Update At',
             mail_count: 'Mail Count',
             send_count: 'Send Count',
-            showPass: 'Show Passwrod',
-            password: 'Password',
-            passwordTip: 'Please copy the password and you can use it to login to your email account.',
+            showCredential: 'Show Mail Address Credential',
+            addressCredential: 'Mail Address Credential',
+            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             delete: 'Delete',
             deleteTip: 'Are you sure to delete this email?',
             delteAccount: 'Delete Account',
@@ -42,9 +42,9 @@ const { t } = useI18n({
             updated_at: '更新时间',
             mail_count: '邮件数量',
             send_count: '发送数量',
-            showPass: '显示密码',
-            password: '密码',
-            passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
+            showCredential: '查看邮箱地址凭证',
+            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             delete: '删除',
             deleteTip: '确定要删除这个邮箱吗？',
             delteAccount: '删除邮箱',
@@ -58,8 +58,8 @@ const { t } = useI18n({
     }
 });
 
-const showEmailPassword = ref(false)
-const curEmailPassword = ref("")
+const showEmailCredential = ref(false)
+const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
 
 const addressQuery = ref("")
@@ -68,16 +68,16 @@ const data = ref([])
 const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
-const showDelteAccount = ref(false)
+const showDeleteAccount = ref(false)
 
-const showPassword = async (id) => {
+const showCredential = async (id) => {
     try {
-        curEmailPassword.value = await api.adminShowPassword(id)
-        showEmailPassword.value = true
+        curEmailCredential.value = await api.adminShowAddressCredential(id)
+        showEmailCredential.value = true
     } catch (error) {
         message.error(error.message || "error");
-        showEmailPassword.value = false
-        curEmailPassword.value = ""
+        showEmailCredential.value = false
+        curEmailCredential.value = ""
     }
 }
 
@@ -89,7 +89,7 @@ const deleteEmail = async () => {
     } catch (error) {
         message.error(error.message || "error");
     } finally {
-        showDelteAccount.value = false
+        showDeleteAccount.value = false
     }
 }
 
@@ -197,9 +197,9 @@ const columns = [
                                     label: () => h(NButton,
                                         {
                                             text: true,
-                                            onClick: () => showPassword(row.id)
+                                            onClick: () => showCredential(row.id)
                                         },
-                                        { default: () => t('showPass') }
+                                        { default: () => t('showCredential') }
                                     ),
                                 },
                                 {
@@ -232,7 +232,7 @@ const columns = [
                                             text: true,
                                             onClick: () => {
                                                 curDeleteAddressId.value = row.id;
-                                                showDelteAccount.value = true;
+                                                showDeleteAccount.value = true;
                                             }
                                         },
                                         { default: () => t('delete') }
@@ -262,20 +262,20 @@ onMounted(async () => {
 
 <template>
     <div>
-        <n-modal v-model:show="showEmailPassword" preset="dialog" title="Dialog">
+        <n-modal v-model:show="showEmailCredential" preset="dialog" title="Dialog">
             <template #header>
-                <div>{{ t("password") }}</div>
+                <div>{{ t("addressCredential") }}</div>
             </template>
             <span>
-                <p>{{ t("passwordTip") }}</p>
+                <p>{{ t("addressCredentialTip") }}</p>
             </span>
             <n-card>
-                <b>{{ curEmailPassword }}</b>
+                <b>{{ curEmailCredential }}</b>
             </n-card>
             <template #action>
             </template>
         </n-modal>
-        <n-modal v-model:show="showDelteAccount" preset="dialog" :title="t('delteAccount')">
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('delteAccount')">
             <p>{{ t('deleteTip') }}</p>
             <template #action>
                 <n-button :loading="loading" @click="deleteEmail" size="small" tertiary type="error">
@@ -285,7 +285,7 @@ onMounted(async () => {
         </n-modal>
         <n-input-group>
             <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')" />
-            <n-button @click="fetchData" type="primary" ghost>
+            <n-button @click="fetchData" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>
         </n-input-group>

frontend/src/views/admin/AdminContact.vue

@@ -17,7 +17,7 @@ const { t } = useI18n({
 </script>
 
 <template>
-    <n-alert v-if="openSettings.adminContact" type="info" show-icon>
+    <n-alert v-if="openSettings.adminContact" :show-icon="false">
         <span>{{ t('adminContact', { msg: openSettings.adminContact }) }}</span>
     </n-alert>
 </template>

frontend/src/views/admin/CreateAccount.vue

@@ -19,7 +19,7 @@ const { t } = useI18n({
             creatNewEmail: 'Get New Email',
             fillInAllFields: 'Please fill in all fields',
             successTip: 'Success Created',
-            password: 'Password',
+            addressCredential: 'Mail Address Credential',
         },
         zh: {
             address: '地址',
@@ -27,7 +27,7 @@ const { t } = useI18n({
             creatNewEmail: '创建新邮箱',
             fillInAllFields: '请填写完整信息',
             successTip: '创建成功',
-            password: '密码',
+            addressCredential: '邮箱地址凭证',
         }
     }
 });
@@ -70,8 +70,8 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('password')">
-            <p>{{ t('password') }}</p>
+        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('addressCredential')">
+            <p>{{ t('addressCredential') }}</p>
             <n-card>
                 <b>{{ result }}</b>
             </n-card>

frontend/src/views/admin/Mails.vue

@@ -52,7 +52,7 @@ onMounted(async () => {
     <div>
         <n-input-group>
             <n-input v-model:value="adminMailTabAddress" :placeholder="t('addressQueryTip')" />
-            <n-button @click="queryAddress" type="primary" ghost>
+            <n-button @click="queryAddress" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>
         </n-input-group>

frontend/src/views/admin/SendBox.vue

@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { localeCache, adminAuth, adminSendBoxTabAddress } = useGlobalState()
+const { localeCache, adminAuth, adminSendBoxTabAddress, showAdminAuth } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
@@ -102,7 +102,7 @@ const columns = [
                 h(NButton,
                     {
                         type: 'success',
-                        ghost: true,
+                        tertiary: true,
                         onClick: () => {
                             showModal.value = true;
                             curRow.value = row;
@@ -135,7 +135,7 @@ onMounted(async () => {
         </n-modal>
         <n-input-group>
             <n-input v-model:value="adminSendBoxTabAddress" />
-            <n-button @click="fetchData" type="primary" ghost>
+            <n-button @click="fetchData" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>
         </n-input-group>

frontend/src/views/admin/SenderAccess.vue

@@ -14,6 +14,7 @@ const { t } = useI18n({
     en: {
       address: 'Address',
       success: 'Success',
+      is_enabled: 'Is Enabled',
       enable: 'Enable',
       disable: 'Disable',
       modify: 'Modify',
@@ -28,6 +29,7 @@ const { t } = useI18n({
     zh: {
       address: '地址',
       success: '成功',
+      is_enabled: '是否启用',
       enable: '启用',
       disable: '禁用',
       modify: '修改',
@@ -108,7 +110,7 @@ const columns = [
     key: "balance"
   },
   {
-    title: "Enabled",
+    title: t('is_enabled'),
     key: "enabled",
     render(row) {
       return h('div', [
@@ -124,7 +126,7 @@ const columns = [
         h(NButton,
           {
             type: 'success',
-            ghost: true,
+            tertiary: true,
             onClick: () => {
               showModal.value = true;
               curRow.value = row;
@@ -170,7 +172,7 @@ onMounted(async () => {
     </n-modal>
     <n-input-group>
       <n-input v-model:value="addressQuery" />
-      <n-button @click="fetchData" type="primary" ghost>
+      <n-button @click="fetchData" type="primary" tertiary>
         {{ t('query') }}
       </n-button>
     </n-input-group>

frontend/src/views/admin/UserManagement.vue

@@ -0,0 +1,289 @@
+<script setup>
+import { ref, h, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NMenu, NButton, NBadge } from 'naive-ui';
+import { MenuFilled } from '@vicons/material'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import { hashPassword } from '../../utils';
+
+const { localeCache, loading } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            success: 'Success',
+            user_email: 'User Email',
+            address_count: 'Address Count',
+            created_at: 'Created At',
+            actions: 'Actions',
+            query: 'Query',
+            itemCount: 'itemCount',
+            deleteUser: 'Delete User',
+            delete: 'Delete',
+            deleteUserTip: 'Are you sure you want to delete this user?',
+            resetPassword: 'Reset Password',
+            pleaseInput: 'Please input complete information',
+            createUser: 'Create User',
+            email: 'Email',
+            password: 'Password',
+        },
+        zh: {
+            success: '成功',
+            user_email: '用户邮箱',
+            address_count: '地址数量',
+            created_at: '创建时间',
+            actions: '操作',
+            query: '查询',
+            itemCount: '总数',
+            deleteUser: '删除用户',
+            delete: '删除',
+            deleteUserTip: '确定要删除此用户吗？',
+            resetPassword: '重置密码',
+            pleaseInput: '请输入完整信息',
+            createUser: '创建用户',
+            email: '邮箱',
+            password: '密码',
+        }
+    }
+});
+const data = ref([])
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const userQuery = ref('')
+const showResetPassword = ref(false)
+const newResetPassword = ref('')
+const showDeleteUser = ref(false)
+const curUserId = ref(0)
+const showCreateUser = ref(false)
+const user = ref({
+    email: "",
+    password: ""
+})
+
+const fetchData = async () => {
+    try {
+        const { results, count: userCount } = await api.fetch(
+            `/admin/users`
+            + `?limit=${pageSize.value}`
+            + `&offset=${(page.value - 1) * pageSize.value}`
+            + (userQuery.value ? `&query=${userQuery.value}` : '')
+        );
+        data.value = results;
+        if (userCount > 0) {
+            count.value = userCount;
+        }
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const resetPassword = async () => {
+    if (!newResetPassword.value) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        await api.fetch(`/admin/users/${curUserId.value}/reset_password`, {
+            method: "POST",
+            body: JSON.stringify({
+                password: await hashPassword(newResetPassword.value)
+            })
+        });
+        message.success(t('success'));
+        showResetPassword.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const createUser = async () => {
+    if (!user.value.email || !user.value.password) {
+        message.error(t('pleaseInput'));
+        return;
+    }
+    try {
+        await api.fetch(`/admin/users`, {
+            method: "POST",
+            body: JSON.stringify({
+                email: user.value.email,
+                password: await hashPassword(user.value.password)
+            })
+        });
+        message.success(t('success'));
+        await fetchData();
+        showCreateUser.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const deleteUser = async () => {
+    try {
+        await api.fetch(`/admin/users/${curUserId.value}`, {
+            method: "DELETE"
+        });
+        message.success(t('success'));
+        showDeleteUser.value = false;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "ID",
+        key: "id"
+    },
+    {
+        title: t('user_email'),
+        key: "user_email"
+    },
+    {
+        title: t('address_count'),
+        key: "address_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.address_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('created_at'),
+        key: "created_at"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NMenu, {
+                    mode: "horizontal",
+                    options: [
+                        {
+                            label: t('actions'),
+                            icon: () => h(MenuFilled),
+                            key: "action",
+                            children: [
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                newResetPassword.value = '';
+                                                showResetPassword.value = true;
+                                            }
+                                        },
+                                        { default: () => t('resetPassword') }
+                                    ),
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                user.value.email = '';
+                                                user.value.password = '';
+                                                showDeleteUser.value = true;
+                                            }
+                                        },
+                                        { default: () => t('delete') }
+                                    )
+                                }
+                            ]
+                        }
+                    ]
+                })
+            ])
+        }
+    }
+]
+
+watch([page, pageSize], async () => {
+    await fetchData()
+})
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-modal v-model:show="showCreateUser" preset="dialog" :title="t('createUser')">
+            <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-form>
+            <template #action>
+                <n-button :loading="loading" @click="createUser" size="small" tertiary type="primary">
+                    {{ t('createUser') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showResetPassword" preset="dialog" :title="t('resetPassword')">
+            <n-form-item-row :label="t('password')" required>
+                <n-input v-model:value="newResetPassword" type="password" show-password-on="click" />
+            </n-form-item-row>
+            <template #action>
+                <n-button :loading="loading" @click="resetPassword" size="small" tertiary type="primary">
+                    {{ t('resetPassword') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showDeleteUser" preset="dialog" :title="t('deleteUser')">
+            <p>{{ t('deleteUserTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="deleteUser" size="small" tertiary type="error">
+                    {{ t('deleteUser') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-input-group>
+            <n-input v-model:value="userQuery" />
+            <n-button @click="fetchData" type="primary" tertiary>
+                {{ t('query') }}
+            </n-button>
+        </n-input-group>
+        <div style="display: inline-block;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
+                :page-sizes="[20, 50, 100]" show-size-picker>
+                <template #prefix="{ itemCount }">
+                    {{ t('itemCount') }}: {{ itemCount }}
+                </template>
+                <template #suffix>
+                    <n-button @click="showCreateUser = true" size="small" tertiary type="primary"
+                        style="margin-left: 10px">
+                        {{ t('createUser') }}
+                    </n-button>
+                </template>
+            </n-pagination>
+        </div>
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
+    </div>
+</template>
+
+<style scoped>
+.n-pagination {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+</style>

frontend/src/views/admin/UserSettings.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { localeCache, loading } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            save: 'Save',
+            successTip: 'Save Success',
+            enable: 'Enable',
+            enableUserRegister: 'Allow User Register',
+            enableMailVerify: 'Enable Mail Verify (Send address must be an address in the system with a balance and can send mail normally)',
+            verifyMailSender: 'Verify Mail Sender',
+            enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            mailAllowList: 'Mail Address Allow List',
+            maxAddressCount: 'Maximum number of email addresses that can be binded',
+        },
+        zh: {
+            save: '保存',
+            successTip: '保存成功',
+            enable: '启用',
+            enableUserRegister: "允许用户注册",
+            enableMailVerify: '启用邮件验证(发送地址必须是系统中能有余额且能正常发送邮件的地址)',
+            verifyMailSender: '验证邮件发送地址',
+            enableMailAllowList: '启用邮件地址白名单(可手动输入)',
+            mailAllowList: '邮件地址白名单',
+            maxAddressCount: '可绑定最大邮箱地址数量',
+        }
+    }
+});
+
+const commonMail = [
+    "gmail.com", "163.com", "126.com", "qq.com", "outlook.com", "hotmail.com",
+    "icloud.com", "yahoo.com", "foxmail.com"
+]
+
+const mailAllowOptions = commonMail.map((item) => {
+    return { label: item, value: item }
+})
+
+const userSettings = ref({
+    enable: false,
+    enableMailVerify: false,
+    verifyMailSender: "",
+    enableMailAllowList: false,
+    mailAllowList: commonMail,
+    maxAddressCount: 5,
+});
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/user_settings`)
+        Object.assign(userSettings.value, res)
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/user_settings`, {
+            method: 'POST',
+            body: JSON.stringify(userSettings.value)
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card style="max-width: 600px;">
+            <n-form :model="userSettings">
+                <n-form-item-row :label="t('enableUserRegister')">
+                    <n-checkbox v-model:checked="userSettings.enable" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('enableMailVerify')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="userSettings.enableMailVerify" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-input v-model:value="userSettings.verifyMailSender" style="width: 80%;"
+                            :placeholder="t('verifyMailSender')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-form-item-row :label="t('enableMailAllowList')">
+                    <n-input-group>
+                        <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%;"
+                            :options="mailAllowOptions" :placeholder="t('mailAllowList')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-form-item-row :label="t('maxAddressCount')">
+                    <n-input-group>
+                        <n-input-number v-model:value="userSettings.maxAddressCount"
+                            :placeholder="t('maxAddressCount')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <n-button @click="save" type="primary" block :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-form>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>