新增注册

2024-08-04 15:40:13 +08:00 · 2024-08-04 15:40:13 +08:00 · d50bd58504
commit d50bd58504
parent 09d6ac57fe
9 changed files with 192 additions and 58 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/items/RegisterDialog.vue
+++ b/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>
--- a/src/components/views/HomeView.vue
+++ b/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-model="isLoginFaild">{{ t('$vuetify.login.failedNote') }}
+      <v-alert class="text-medium-emphasis text-caption mb-2" type="warning" closable v-model="isLoginFailed">
+        {{ 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;
 }

--- a/src/components/views/TestView.vue
+++ b/src/components/views/TestView.vue
@ -1,32 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue";
-
-const showDialog = ref(true)
-const passwordVisibleState = ref(false)
+import RegisterDialog from "../items/RegisterDialog.vue";
 </script>

 <template>
-  <v-dialog v-model="showDialog" persistent width="500">
-    <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>
+  <RegisterDialog></RegisterDialog>
 </template>

 <style scoped>
-.login-dialong-input {
-  margin-bottom: 20px;
-}
 </style>
--- a/src/script/functions.ts
+++ b/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}
--- a/src/script/i18n/en.ts
+++ b/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
--- a/src/script/i18n/locale-interface.ts
+++ b/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
    // ==================
--- a/src/script/i18n/zhHans.ts
+++ b/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