From 92abcad0dbd49b63455ab3fc6a0f8b573cf9e5eb Mon Sep 17 00:00:00 2001
From: 05412 <chuan-xin.wu@spchemicals.com>
Date: Mon, 5 Aug 2024 11:50:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E7=A6=BB=E7=99=BB=E5=BD=95=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/items/LoginDialog.vue    | 77 +++++++++++++++++++++++++
 src/components/items/RegisterDialog.vue | 11 +++-
 src/components/views/HomeView.vue       | 74 ++----------------------
 src/components/views/TestView.vue       |  7 ++-
 src/script/i18n/en.ts                   | 13 ++---
 src/script/i18n/locale-interface.ts     |  1 -
 src/script/i18n/zhHans.ts               |  5 +-
 7 files changed, 102 insertions(+), 86 deletions(-)

diff --git a/src/components/items/LoginDialog.vue b/src/components/items/LoginDialog.vue
index 90ab8d6..d026a19 100644
--- a/src/components/items/LoginDialog.vue
+++ b/src/components/items/LoginDialog.vue
@@ -1,9 +1,86 @@
 <script setup lang="ts">
+import {ref, watch} from "vue";
+import {useLocale} from "vuetify";
+import {login} from "../../script/functions.ts";
+
+const {t} = useLocale()
+const showLoginDialog = defineModel<boolean>()
+const username = ref('')
+const password = ref('')
+const passwordVisibleState = ref(false)
+const loading = ref(false)
+const loginDisabled = ref(false)
+const loginIcon = ref<any>(null)
+const isLoginFailed = ref(false)
+watch(() => showLoginDialog.value, (value, oldValue) => {
+  if(oldValue === false && value === true) {
+    isLoginFailed.value = false
+  }
+})
+
+async function tryLogin() {
+  loading.value = true
+  isLoginFailed.value = false
+  const isSuccess = await login(username.value, password.value)
+  if (isSuccess) {
+    loginIcon.value = "mdi-check"
+    loading.value = false
+    loginDisabled.value = true
+    setTimeout(() => {
+      showLoginDialog.value = false
+      loginDisabled.value = false
+      loginIcon.value = null
+    }, 1500)
+  } else {
+    isLoginFailed.value = true
+    loading.value = false
+  }
+}
+
+function resetLoginError() {
+  isLoginFailed.value = false
+}
 </script>
 
 <template>
+  <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-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-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" 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">
+          {{ 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-checkbox class="login-dialog-input" :label="t('$vuetify.login.rememberMe')" hide-details
+                  color="primary"></v-checkbox>
+      <v-card-actions>
+        <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"
+               :disabled="loginDisabled">
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <style scoped>
+.login-dialog-input {
+  margin: 10px 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/items/RegisterDialog.vue b/src/components/items/RegisterDialog.vue
index e944925..4bec73c 100644
--- a/src/components/items/RegisterDialog.vue
+++ b/src/components/items/RegisterDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref, watch} from "vue";
 import {useLocale} from "vuetify";
 import {register} from "../../script/functions.ts";
 
@@ -13,6 +13,11 @@ const registerFailedNote = ref('')
 const loading = ref(false)
 const registerIcon = ref<any>(null)
 const disableRegister = ref(false)
+watch(()=> showDialog.value, (value, oldValue) => {
+  if(oldValue === false && value === true) {
+    isRegisterFailed.value = false
+  }
+})
 
 async function tryRegister() {
   loading.value = true
@@ -69,8 +74,8 @@ function resetRegisterFailed() {
       </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>
+          {{ t('$vuetify.register.agreement') }}
+          <v-label class="text-caption"><a href="/input" target="_blank">{{ t('$vuetify.register.termsOfService') }}</a>
           </v-label>
         </v-card-text>
       </v-card>
diff --git a/src/components/views/HomeView.vue b/src/components/views/HomeView.vue
index ecedb9a..4db5caa 100644
--- a/src/components/views/HomeView.vue
+++ b/src/components/views/HomeView.vue
@@ -1,46 +1,17 @@
 <script setup lang="ts">
 import {ref} from "vue";
-import {login, logout} from "../../script/functions";
+import {logout} from "../../script/functions";
 import {useUserinfoStore} from "../../stores/userinfo-store.ts";
 import {useLocale, useTheme} from "vuetify";
 import RegisterDialog from "../items/RegisterDialog.vue";
+import LoginDialog from "../items/LoginDialog.vue";
 
 const {t, current} = useLocale()
 const theme = useTheme()
 const userinfoStore = useUserinfoStore()
 const showLoginDialog = ref(false)
-const username = ref('')
-const password = ref('')
-const passwordVisibleState = ref(false)
-const loading = ref(false)
-const loginDisabled = ref(false)
-const loginIcon = ref<any>(null)
-const isLoginFailed = ref(false)
 const showRegisterDialog = ref(false)
 
-async function tryLogin() {
-  loading.value = true
-  isLoginFailed.value = false
-  const isSuccess = await login(username.value, password.value)
-  if (isSuccess) {
-    loginIcon.value = "mdi-check"
-    loading.value = false
-    loginDisabled.value = true
-    setTimeout(() => {
-      showLoginDialog.value = false
-      loginDisabled.value = false
-      loginIcon.value = null
-    }, 1500)
-  } else {
-    isLoginFailed.value = true
-    loading.value = false
-  }
-}
-
-function resetLoginError() {
-  isLoginFailed.value = false
-}
-
 function toggleLocale() {
   switch (current.value) {
     case 'en':
@@ -86,7 +57,7 @@ function toggleTheme() {
 
           <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; isLoginFailed = false" v-if="!userinfoStore.isLogin"
+              <v-list-item value="1" @click="showLoginDialog = true" v-if="!userinfoStore.isLogin"
                            append-icon="mdi-login">
                 <v-list-item-title>{{ t('$vuetify.user.login') }}</v-list-item-title>
               </v-list-item>
@@ -112,40 +83,7 @@ function toggleTheme() {
       </v-footer>
     </v-app>
   </v-responsive>
-  <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-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-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" 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">
-          {{ 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-checkbox class="login-dialog-input" :label="t('$vuetify.login.rememberMe')" hide-details
-                  color="primary"></v-checkbox>
-      <v-card-actions>
-        <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"
-               :disabled="loginDisabled">
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <LoginDialog v-model="showLoginDialog"></LoginDialog>
   <RegisterDialog v-model:showDialog="showRegisterDialog"></RegisterDialog>
 </template>
 <style scoped>
@@ -154,10 +92,6 @@ function toggleTheme() {
   min-width: 200px;
 }
 
-.login-dialog-input {
-  margin: 10px 0;
-}
-
 .home-menu-button {
   width: 120px;
 }
diff --git a/src/components/views/TestView.vue b/src/components/views/TestView.vue
index 187eb7f..774ce9d 100644
--- a/src/components/views/TestView.vue
+++ b/src/components/views/TestView.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import RegisterDialog from "../items/RegisterDialog.vue";
+import LoginDialog from "../items/LoginDialog.vue";
+import {ref} from "vue";
+
+const showDialog = ref(true)
 </script>
 
 <template>
-  <RegisterDialog></RegisterDialog>
+  <LoginDialog v-model="showDialog"></LoginDialog>
 </template>
 
 <style scoped>
diff --git a/src/script/i18n/en.ts b/src/script/i18n/en.ts
index fb0e6f4..2e8cb88 100644
--- a/src/script/i18n/en.ts
+++ b/src/script/i18n/en.ts
@@ -30,19 +30,18 @@ const en: LocaleInterface = {
     },
     register: {
         title: "REGISTER",
-        username: "USERNAME",
-        password: "PASSWORD",
+        username: "USERNAME, letters and numbers, 4-16 characters",
+        password: "PASSWORD, letters, numbers, underscores, 8-16 characters",
         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",
+        agreement: "PLEASE CONFIRM YOU HAVE READ AND AGREE TO THE",
+        termsOfService: "TERMS OF SERVICE",
         button: {
-            register: "string",
-            cancel: "string"
+            register: "REGISTER",
+            cancel: "CANCEL"
         }
     }
 }
diff --git a/src/script/i18n/locale-interface.ts b/src/script/i18n/locale-interface.ts
index f04d377..b1f4502 100644
--- a/src/script/i18n/locale-interface.ts
+++ b/src/script/i18n/locale-interface.ts
@@ -34,7 +34,6 @@ export default interface LocaleInterface {
         passwordInvalidNote: string,
         passwordConfirmInvalidNote: string,
         failedNote: string,
-        rememberMe: string,
         agreement: string,
         termsOfService: string,
         button: {
diff --git a/src/script/i18n/zhHans.ts b/src/script/i18n/zhHans.ts
index e7bd080..f8e7b98 100644
--- a/src/script/i18n/zhHans.ts
+++ b/src/script/i18n/zhHans.ts
@@ -37,9 +37,8 @@ const zhHans: LocaleInterface = {
         passwordInvalidNote: "密码不符合规则",
         passwordConfirmInvalidNote: "两次输入的密码不一致",
         failedNote: "注册失败, 用户名重复或网络异常",
-        rememberMe: "string",
-        agreement: "string",
-        termsOfService: "string",
+        agreement: "我已阅读并同意",
+        termsOfService: "服务条款",
         button: {
             register: "注册",
             cancel: "取消"