新增注册

package-lock.json

@@ -8,7 +8,6 @@
       "name": "surl-front",
       "version": "0.0.0",
       "dependencies": {
-        "ky": "^1.5.0",
         "pinia": "^2.2.0",
         "vite-plugin-vuetify": "^2.0.3",
         "vue": "^3.4.31",
@@ -891,17 +890,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/ky": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmmirror.com/ky/-/ky-1.5.0.tgz",
-      "integrity": "sha512-bkQo+UqryW6Zmo/DsixYZE4Z9t2mzvNMhceyIhuMuInb3knm5Q+GNGMKveydJAj+Z6piN1SwI6eR/V0G+Z0BtA==",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/ky?sponsor=1"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.10.tgz",

package.json

@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "ky": "^1.5.0",
     "pinia": "^2.2.0",
     "vite-plugin-vuetify": "^2.0.3",
     "vue": "^3.4.31",

src/components/items/RegisterDialog.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {useLocale} from "vuetify";
+import {register} from "../../script/functions.ts";
+
+const {t} = useLocale()
+const showDialog = defineModel<boolean>('showDialog')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const isRegisterFailed = ref(false)
+const registerFailedNote = ref('')
+const loading = ref(false)
+const registerIcon = ref<any>(null)
+const disableRegister = ref(false)
+
+async function tryRegister() {
+  loading.value = true
+  if (password.value !== confirmPassword.value) {
+    isRegisterFailed.value = true
+    registerFailedNote.value = t('$vuetify.register.passwordConfirmInvalidNote')
+  } else if (!username.value.match(/^[a-zA-Z0-9_-]{4,16}$/)) {
+    isRegisterFailed.value = true
+    registerFailedNote.value = t('$vuetify.register.usernameInvalidNote')
+  } else if (!password.value.match(/^[a-zA-Z0-9_-]{8,}$/)) {
+    isRegisterFailed.value = true
+    registerFailedNote.value = t('$vuetify.register.passwordInvalidNote')
+  } else {
+    isRegisterFailed.value = !await register(username.value, password.value)
+    if (isRegisterFailed.value) {
+      registerFailedNote.value = t('$vuetify.register.failedNote')
+    }
+  }
+  loading.value = false
+  if (isRegisterFailed.value == false) {
+    registerIcon.value = "mdi-check"
+    disableRegister.value = true
+    setTimeout(() => {
+      showDialog.value = false
+      registerIcon.value = null
+      loading.value = false
+      disableRegister.value = false
+    }, 1500)
+  }
+
+}
+
+function resetRegisterFailed() {
+  isRegisterFailed.value = false
+  registerFailedNote.value = ''
+}
+</script>
+
+<template>
+  <v-dialog v-model="showDialog" width="450" persistent>
+    <v-card prepend-icon="mdi-account-plus" :title="t('$vuetify.register.title')" class="px-10">
+      <v-text-field class="register-dialog-input" flat hide-details density="compact" single-line rounded="lg"
+                    variant="solo-filled" prepend-inner-icon="mdi-account-outline" @input="resetRegisterFailed"
+                    :label="t('$vuetify.register.username')" v-model="username"></v-text-field>
+      <v-text-field class="register-dialog-input" flat density="compact" rounded="lg" @input="resetRegisterFailed"
+                    variant="solo-filled" prepend-inner-icon="mdi-lock-outline" type="password" hide-details single-line
+                    :label="t('$vuetify.register.password')" v-model="password"></v-text-field>
+      <v-text-field class="register-dialog-input" flat hide-details density="compact" single-line rounded="lg"
+                    variant="solo-filled" prepend-inner-icon="mdi-lock-check-outline" @input="resetRegisterFailed"
+                    :label="t('$vuetify.register.confirmPassword')" v-model="confirmPassword" type="password">
+      </v-text-field>
+      <v-alert v-model="isRegisterFailed" type="warning" class="text-medium-emphasis text-caption mb-2" closable>
+        {{ registerFailedNote }}
+      </v-alert>
+      <v-card color="surface-variant mt-5" variant="tonal">
+        <v-card-text class="text-medium-emphasis text-caption">
+          {{ t('$vuetify.login.agreement') }}
+          <v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.login.termsOfService') }}</a>
+          </v-label>
+        </v-card-text>
+      </v-card>
+      <v-card-actions>
+        <v-btn :text="t('$vuetify.register.button.cancel')" @click="showDialog = false"></v-btn>
+        <v-btn :text="t('$vuetify.register.button.register')" color="primary" @click="tryRegister"
+               :loading="loading" :disabled="disableRegister" :icon="registerIcon"></v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.register-dialog-input {
+  margin: 10px 0;
+}
+</style>

src/components/views/HomeView.vue

@@ -3,6 +3,7 @@ import {ref} from "vue";
 import {login, logout} from "../../script/functions";
 import {useUserinfoStore} from "../../stores/userinfo-store.ts";
 import {useLocale, useTheme} from "vuetify";
+import RegisterDialog from "../items/RegisterDialog.vue";
 
 const {t, current} = useLocale()
 const theme = useTheme()
@@ -14,11 +15,12 @@ const passwordVisibleState = ref(false)
 const loading = ref(false)
 const loginDisabled = ref(false)
 const loginIcon = ref<any>(null)
-const isLoginFaild = ref(false)
+const isLoginFailed = ref(false)
+const showRegisterDialog = ref(false)
 
 async function tryLogin() {
   loading.value = true
-  isLoginFaild.value = false
+  isLoginFailed.value = false
   const isSuccess = await login(username.value, password.value)
   if (isSuccess) {
     loginIcon.value = "mdi-check"
@@ -30,16 +32,16 @@ async function tryLogin() {
       loginIcon.value = null
     }, 1500)
   } else {
-    isLoginFaild.value = true
+    isLoginFailed.value = true
     loading.value = false
   }
 }
 
 function resetLoginError() {
-  isLoginFaild.value = false
+  isLoginFailed.value = false
 }
 
-function toogleLocale() {
+function toggleLocale() {
   switch (current.value) {
     case 'en':
       current.value = 'zhHans';
@@ -76,14 +78,15 @@ function toggleTheme() {
                         flat hide-details single-line append-inner-icon="mdi-magnify"></v-text-field>
           <v-btn icon="mdi-theme-light-dark" class="ml-10" @click="toggleTheme"
                  v-tooltip="t('$vuetify.menu.themeSwitchTitle')"></v-btn>
-          <v-btn icon="mdi-translate" class="ml-2" @click="toogleLocale" v-tooltip="t('$vuetify.menu.languageSwitchTitle')"></v-btn>
+          <v-btn icon="mdi-translate" class="ml-2" @click="toggleLocale"
+                 v-tooltip="t('$vuetify.menu.languageSwitchTitle')"></v-btn>
           <v-badge dot color="red">
             <v-btn icon="mdi-account" class="ml-2" id="avatar"></v-btn>
           </v-badge>
 
           <v-menu open-on-hover activator="#avatar" open-delay="0" close-delay="500" location="bottom" width="150">
             <v-list>
-              <v-list-item value="1" @click="showLoginDialog = true; isLoginFaild = false" v-if="!userinfoStore.isLogin"
+              <v-list-item value="1" @click="showLoginDialog = true; isLoginFailed = false" v-if="!userinfoStore.isLogin"
                            append-icon="mdi-login">
                 <v-list-item-title>{{ t('$vuetify.user.login') }}</v-list-item-title>
               </v-list-item>
@@ -91,6 +94,10 @@ function toggleTheme() {
                            append-icon="mdi-logout">
                 <v-list-item-title>{{ t('$vuetify.user.logout') }}</v-list-item-title>
               </v-list-item>
+              <v-list-item value="3" :active="false" @click="showRegisterDialog = true" v-if="!userinfoStore.isLogin"
+                           append-icon="mdi-account-plus">
+                <v-list-item-title>{{ t('$vuetify.user.register') }}</v-list-item-title>
+              </v-list-item>
             </v-list>
           </v-menu>
         </v-container>
@@ -105,20 +112,20 @@ function toggleTheme() {
       </v-footer>
     </v-app>
   </v-responsive>
-  <v-dialog v-model="showLoginDialog" persistent width="400">
+  <v-dialog v-model="showLoginDialog" persistent width="450">
     <v-card prepend-icon="mdi-login" :title="t('$vuetify.login.title')" class="px-10">
-      <v-text-field class="login-dialong-input" flat prepend-inner-icon="mdi-account-outline"
+      <v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-account-outline"
                     :label="t('$vuetify.login.username')"
                     density="compact" @input="resetLoginError"
                     hide-details single-line rounded="lg" variant="solo-filled" v-model="username"></v-text-field>
-      <v-text-field class="login-dialong-input" flat prepend-inner-icon="mdi-lock-outline"
+      <v-text-field class="login-dialog-input" flat prepend-inner-icon="mdi-lock-outline"
                     :label="t('$vuetify.login.password')"
                     density="compact" hide-details single-line v-model="password" rounded="lg" variant="solo-filled"
                     :type="passwordVisibleState ? 'text' :'password'" title="password" @input="resetLoginError"
                     :append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
                     @click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
-      <v-alert class="text-medium-emphasis text-caption mb-2" type="warning" icon="mdi-alert" closable
+      <v-alert class="text-medium-emphasis text-caption mb-2" type="warning" closable v-model="isLoginFailed">
-               v-model="isLoginFaild">{{ t('$vuetify.login.failedNote') }}
+        {{ t('$vuetify.login.failedNote') }}
       </v-alert>
       <v-card color="surface-variant mt-5" variant="tonal">
         <v-card-text class="text-medium-emphasis text-caption">
@@ -128,10 +135,9 @@ function toggleTheme() {
         </v-card-text>
       </v-card>
 
-      <v-checkbox class="login-dialong-input" :label="t('$vuetify.login.rememberMe')" hide-details
+      <v-checkbox class="login-dialog-input" :label="t('$vuetify.login.rememberMe')" hide-details
                   color="primary"></v-checkbox>
       <v-card-actions>
-        <v-spacer></v-spacer>
         <v-btn :text="t('$vuetify.login.button.cancel')" @click="showLoginDialog = false"></v-btn>
         <v-btn :loading="loading" color="primary" :text="t('$vuetify.login.button.login')" @click="tryLogin"
                :icon="loginIcon"
@@ -140,6 +146,7 @@ function toggleTheme() {
       </v-card-actions>
     </v-card>
   </v-dialog>
+  <RegisterDialog v-model:showDialog="showRegisterDialog"></RegisterDialog>
 </template>
 <style scoped>
 .home-search-box {
@@ -147,7 +154,7 @@ function toggleTheme() {
   min-width: 200px;
 }
 
-.login-dialong-input {
+.login-dialog-input {
   margin: 10px 0;
 }
 

src/components/views/TestView.vue

@@ -1,32 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import RegisterDialog from "../items/RegisterDialog.vue";
-
-const showDialog = ref(true)
-const passwordVisibleState = ref(false)
 </script>
 
 <template>
-  <v-dialog v-model="showDialog" persistent width="500">
+  <RegisterDialog></RegisterDialog>
-    <v-card prepend-icon="mdi-login" title="LOGIN" class="px-10">
-      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-account" label="USERNAME" density="compact"
-                    hide-details single-line
-                    rounded="lg" variant="solo-filled"></v-text-field>
-      <v-text-field class="login-dialong-input" flat prepend-icon="mdi-lock" label="PASSWORD" density="compact"
-                    hide-details single-line
-                    rounded="lg" variant="solo-filled" :type="passwordVisibleState ? 'text' :'password'"
-                    :append-inner-icon="passwordVisibleState ? 'mdi-eye-off' : 'mdi-eye'"
-                    @click:append-inner="passwordVisibleState = !passwordVisibleState"></v-text-field>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn text="CANCEL" @click="showDialog = false"></v-btn>
-        <v-btn color="primary" text="OK" @click="showDialog = false"></v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
 </template>
 
 <style scoped>
-.login-dialong-input {
-  margin-bottom: 20px;
-}
 </style>

src/script/functions.ts

@@ -54,6 +54,24 @@ async function login(username: string, password: string): Promise<boolean> {
     }
 }
 
+async function register(username: string, password: string): Promise<boolean> {
+    const responsePromise = request('reg', {
+        method: 'POST',
+        body: JSON.stringify({username, password}),
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        mode: 'cors'
+    })
+    try {
+        const response = await responsePromise
+        const body: Msg = await response.json()
+        return body.code == 0
+    } catch (_) {
+        return false
+    }
+}
+
 function logout() {
     const userinfoStore = useUserinfoStore()
     userinfoStore.setToken('')
@@ -64,12 +82,12 @@ async function checkLogin(): Promise<boolean> {
     const userinfoStore = useUserinfoStore()
     if (userinfoStore.isLogin) {
         try {
-            const reponse = await request('loginCheck', {
+            const response = await request('loginCheck', {
                 headers: {
                     'Authorization': `Bearer ${userinfoStore.token}`
                 }
             })
-            const body: Msg = await reponse.json()
+            const body: Msg = await response.json()
             return body.code == 0
         } catch (_) {
             return false
@@ -79,4 +97,4 @@ async function checkLogin(): Promise<boolean> {
     }
 }
 
-export {request, login, logout, checkLogin}
+export {request, login, logout, checkLogin, register}

src/script/i18n/en.ts

@@ -12,7 +12,8 @@ const en: LocaleInterface = {
     },
     user: {
         login: 'Login',
-        logout: 'Logout'
+        logout: 'Logout',
+        register: 'Register'
     },
     login: {
         title: 'Login',
@@ -26,6 +27,23 @@ const en: LocaleInterface = {
             login: 'LOGIN',
             cancel: 'CANCEL'
         }
+    },
+    register: {
+        title: "REGISTER",
+        username: "USERNAME",
+        password: "PASSWORD",
+        confirmPassword: "CONFIRM PASSWORD",
+        usernameInvalidNote: "Invalid username format",
+        passwordInvalidNote: "Invalid password format",
+        passwordConfirmInvalidNote: "Password confirmation does not match the password",
+        failedNote: "Register failed",
+        rememberMe: "string",
+        agreement: "string",
+        termsOfService: "string",
+        button: {
+            register: "string",
+            cancel: "string"
+        }
     }
 }
 export default en

src/script/i18n/locale-interface.ts

@@ -9,7 +9,8 @@ export default interface LocaleInterface {
     },
     user: {
         login: string,
-        logout: string
+        logout: string,
+        register: string
     },
     login: {
         title: string,
@@ -24,6 +25,23 @@ export default interface LocaleInterface {
             cancel: string
         }
     },
+    register: {
+        title: string,
+        username: string,
+        password: string,
+        confirmPassword: string,
+        usernameInvalidNote: string,
+        passwordInvalidNote: string,
+        passwordConfirmInvalidNote: string,
+        failedNote: string,
+        rememberMe: string,
+        agreement: string,
+        termsOfService: string,
+        button: {
+            register: string,
+            cancel: string
+        }
+    }
     // ==================
     // vuetify
     // ==================

src/script/i18n/zhHans.ts

@@ -12,7 +12,8 @@ const zhHans: LocaleInterface = {
     },
     user: {
         login: '登录',
-        logout: '退出'
+        logout: '退出',
+        register: '注册',
     },
     login: {
         title: '登录',
@@ -26,6 +27,23 @@ const zhHans: LocaleInterface = {
             login: '登录',
             cancel: '取消'
         }
+    },
+    register: {
+        title: "注册",
+        username: "用户名，大小写字母和数字，4-16位",
+        password: "密码，大小写字母、数字、下划线，8-16位",
+        confirmPassword: "确认密码",
+        usernameInvalidNote: "用户名不符合规则",
+        passwordInvalidNote: "密码不符合规则",
+        passwordConfirmInvalidNote: "两次输入的密码不一致",
+        failedNote: "注册失败, 用户名重复或网络异常",
+        rememberMe: "string",
+        agreement: "string",
+        termsOfService: "string",
+        button: {
+            register: "注册",
+            cancel: "取消"
+        }
     }
 }
 export default zhHans