feat: add faker-js (#107)

frontend/package.json

@@ -23,6 +23,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "unplugin-auto-import": "^0.17.5",

frontend/pnpm-lock.yaml

@@ -40,6 +40,9 @@ dependencies:
     version: 4.3.0(vue@3.4.21)
 
 devDependencies:
+  '@faker-js/faker':
+    specifier: ^8.4.1
+    version: 8.4.1
   '@vicons/fa':
     specifier: ^0.12.0
     version: 0.12.0
@@ -1481,6 +1484,11 @@ packages:
     dev: true
     optional: true
 
+  /@faker-js/faker@8.4.1:
+    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
+    dev: true
+
   /@intlify/core-base@9.10.2:
     resolution: {integrity: sha512-HGStVnKobsJL0DoYIyRCGXBH63DMQqEZxDUGrkNI05FuTcruYUtOAxyL3zoAZu/uDGO6mcUvm3VXBaHG2GdZCg==}
     engines: {node: '>= 16'}

frontend/src/views/Header.vue

@@ -6,6 +6,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled } from '@vicons/material'
 import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
+import { faker } from '@faker-js/faker';
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
@@ -75,7 +76,7 @@ const { t } = useI18n({
             user: 'User',
             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.',
+            getNewEmailTip1: 'Please input the email you want to use. only allow ., a-z, A-Z and 0-9',
             getNewEmailTip2: 'Levaing it blank will generate a random email address.',
             yourAddress: 'Your email address is',
             password: 'Password',
@@ -86,6 +87,7 @@ const { t } = useI18n({
             showPassword: 'Show Password',
             fetchAddressError: 'Fetch address error, maybe your jwt is invalid or network error.',
             mailV1Alert: 'You have some mails in v1, please click here to login and visit your history mails.',
+            generateName: 'Generate Fake Name',
         },
         zh: {
             title: 'Cloudflare 临时邮件',
@@ -104,7 +106,7 @@ const { t } = useI18n({
             user: '用户',
             pleaseGetNewEmail: '请"登录"或点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
             getNewEmail: '获取新邮箱',
-            getNewEmailTip1: '请输入你想要使用的邮箱地址。',
+            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
             getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
             yourAddress: '你的邮箱地址是',
             password: '密码',
@@ -116,6 +118,7 @@ const { t } = useI18n({
             showPassword: '查看密码',
             fetchAddressError: '获取地址失败, 请检查你的 jwt 是否有效 或 网络是否正常。',
             mailV1Alert: '你有一些 v1 版本的邮件，请点击此处登录查看。',
+            generateName: '生成随机名字',
         }
     }
 });
@@ -306,6 +309,14 @@ const copy = async () => {
     }
 }
 
+const generateName = async () => {
+    emailName.value = faker.person
+        .fullName()
+        .replace(/\s+/g, '.')
+        .replace(/[^a-zA-Z0-9.]/g, '')
+        .toLowerCase();
+};
+
 const newEmail = async () => {
     try {
         const res = await api.fetch(
@@ -395,6 +406,9 @@ onMounted(async () => {
                 <p>{{ t("getNewEmailTip1") }}</p>
                 <p>{{ t("getNewEmailTip2") }}</p>
             </span>
+            <n-button @click="generateName" style="margin-bottom: 10px;">
+                {{ t('generateName') }}
+            </n-button>
             <n-input-group>
                 <n-input-group-label v-if="openSettings.prefix">
                     {{ openSettings.prefix }}

worker/src/router.js

@@ -131,11 +131,20 @@ api.get('/open_api/settings', async (c) => {
 })
 
 api.get('/api/new_address', async (c) => {
-    let { name, domain } = await c.req.query();
+    let { name, domain } = c.req.query();
     // if no name, generate random name
     if (!name) {
         name = Math.random().toString(36).substring(2, 15);
     }
+    // remove special characters
+    name = name.replace(/[^a-zA-Z0-9.]/g, '')
+    // check name length
+    if (name.length < 0) {
+        return c.text("Name too short", 400)
+    }
+    if (name.length > 100) {
+        return c.text("Name too long (max 100)", 400)
+    }
     // check domain, generate random domain
     if (!domain || !c.env.DOMAINS.includes(domain)) {
         domain = c.env.DOMAINS[Math.floor(Math.random() * c.env.DOMAINS.length)];