From 50c87d593385f84869d282d2837c9a69e73199b2 Mon Sep 17 00:00:00 2001
From: Zhengyi <zhengyi.dong@outlook.com>
Date: Sat, 25 Mar 2023 19:50:07 +0800
Subject: [PATCH 1/2] fix: optimize login and register UI

---
 src/views/chat/layout/Permission.vue | 85 ++++++++++++++++------------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/views/chat/layout/Permission.vue b/src/views/chat/layout/Permission.vue
index 4dd864fe..07701e69 100644
--- a/src/views/chat/layout/Permission.vue
+++ b/src/views/chat/layout/Permission.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { computed, onMounted, ref } from 'vue'
-import { NButton, NInput, NModal, NSpace, useMessage } from 'naive-ui'
+import { NButton, NInput, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
 import { useRoute, useRouter } from 'vue-router'
 import { fetchLogin, fetchRegister, fetchVerify } from '@/api'
 import { useAuthStore } from '@/store'
@@ -24,6 +24,21 @@ const password = ref('')
 
 const disabled = computed(() => !username.value.trim() || !password.value.trim() || loading.value)
 
+const activeTab = ref('login')
+
+const showConfirmPassword = ref(false)
+const confirmPassword = ref('')
+
+function handlePasswordInput() {
+  showConfirmPassword.value = password.value.trim() !== ''
+}
+
+const confirmPasswordStatus = computed(() => {
+  if (!password.value || !confirmPassword.value)
+    return undefined
+  return password.value !== confirmPassword.value ? 'error' : 'success'
+})
+
 onMounted(async () => {
   const verifytoken = route.query.verifytoken as string
   await handleVerify(verifytoken)
@@ -83,9 +98,12 @@ async function handleLogin() {
 async function handleRegister() {
   const name = username.value.trim()
   const pwd = password.value.trim()
+  const confirmPwd = confirmPassword.value.trim()
 
-  if (!name || !pwd)
+  if (!name || !pwd || !confirmPwd || pwd !== confirmPwd) {
+    ms.error('Passwords don\'t match')
     return
+  }
 
   try {
     loading.value = true
@@ -114,39 +132,36 @@ async function handleRegister() {
           </p>
           <Icon403 class="w-[200px] m-auto" />
         </header>
-        <NInput v-model:value="username" type="text" placeholder="Email" />
-        <NInput v-model:value="password" type="password" placeholder="Password" @keypress="handlePress" />
-
-        <NSpace v-if="authStore.session && authStore.session.allowRegister" justify="space-around">
-          <NButton
-            block
-            type="primary"
-            :disabled="disabled"
-            :loading="loading"
-            @click="handleRegister"
-          >
-            {{ $t('common.register') }}
-          </NButton>
-          <NButton
-            block
-            type="primary"
-            :disabled="disabled"
-            :loading="loading"
-            @click="handleLogin"
-          >
-            {{ $t('common.login') }}
-          </NButton>
-        </NSpace>
-        <NButton
-          v-if="!(authStore.session && authStore.session.allowRegister)"
-          block
-          type="primary"
-          :disabled="disabled"
-          :loading="loading"
-          @click="handleLogin"
-        >
-          {{ $t('common.login') }}
-        </NButton>
+
+        <!-- Add Tabs -->
+        <NTabs v-model:value="activeTab" type="line">
+          <NTabPane name="login" label="Login">
+            <NInput v-model:value="username" type="text" placeholder="Email" class="mb-2" />
+            <NInput v-model:value="password" type="password" placeholder="Password" class="mb-2" @keypress="handlePress" />
+
+            <NButton block type="primary" :disabled="disabled" :loading="loading" @click="handleLogin">
+              {{ $t('common.login') }}
+            </NButton>
+          </NTabPane>
+
+          <NTabPane v-if="authStore.session && authStore.session.allowRegister" name="register" label="Register">
+            <NInput v-model:value="username" type="text" placeholder="Email" class="mb-2" />
+            <NInput v-model:value="password" type="password" placeholder="Password" class="mb-2" @input="handlePasswordInput" />
+            <NInput
+              v-if="showConfirmPassword"
+              v-model:value="confirmPassword"
+              type="password"
+              placeholder="Confirm Password"
+              class="mb-4"
+              :status="confirmPasswordStatus"
+            />
+
+            <NButton block type="primary" :disabled="disabled || password !== confirmPassword" :loading="loading" @click="handleRegister">
+              {{ $t('common.register') }}
+            </NButton>
+          </NTabPane>
+        </NTabs>
+        <!-- End Tabs -->
       </div>
     </div>
   </NModal>

From 31754e98987b96fa8cae0ade86981cd308df604d Mon Sep 17 00:00:00 2001
From: Zhengyi <zhengyi.dong@outlook.com>
Date: Sun, 26 Mar 2023 00:13:06 +0800
Subject: [PATCH 2/2] fix: add locales for login and register tabpanes

---
 src/locales/en-US.ts                 |  3 +++
 src/locales/ko-KR.ts                 |  3 +++
 src/locales/zh-CN.ts                 |  3 +++
 src/locales/zh-TW.ts                 |  3 +++
 src/views/chat/layout/Permission.vue | 16 ++++++++--------
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index e9400457..e4234060 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -30,6 +30,9 @@ export default {
     notLoggedIn: 'Login / Register',
     logOut: 'Login Out',
     unauthorizedTips: 'Unauthorized, please verify first.',
+    email: 'Email',
+    password: 'Password',
+    passwordConfirm: 'Confirm Password',
   },
   chat: {
     placeholder: 'Ask me anything...(Shift + Enter = line break)',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index c5cf29c7..da6d2c0f 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -29,6 +29,9 @@ export default {
     notLoggedIn: '로그인/등록',
     logOut: '로그아웃',
     unauthorizedTips: '승인되지 않음, 로그인 해주세요.',
+    email: '이메일',
+    password: '비밀번호',
+    passwordConfirm: '비밀번호 확인',
   },
   chat: {
     placeholder: '질문해보세요... (Shift + Enter = 줄 바꿈)',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index cbccec80..bd2905b5 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -30,6 +30,9 @@ export default {
     notLoggedIn: '登录 / 注册',
     logOut: '退出登录',
     unauthorizedTips: '未经授权，请先进行验证。',
+    email: '邮箱',
+    password: '密码',
+    passwordConfirm: '确认密码',
   },
   chat: {
     placeholder: '来说点什么吧...（Shift + Enter = 换行）',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index e7b495f4..3b930a2d 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -30,6 +30,9 @@ export default {
     notLoggedIn: '登錄 / 註冊',
     logOut: '退出登錄',
     unauthorizedTips: '未經授權，請先進行驗證。',
+    email: '電子郵件',
+    password: '密碼',
+    passwordConfirm: '確認密碼',
   },
   chat: {
     placeholder: '來說點什麼...（Shift + Enter = 換行）',
diff --git a/src/views/chat/layout/Permission.vue b/src/views/chat/layout/Permission.vue
index e586ed3c..ad423bac 100644
--- a/src/views/chat/layout/Permission.vue
+++ b/src/views/chat/layout/Permission.vue
@@ -101,7 +101,7 @@ async function handleRegister() {
   const confirmPwd = confirmPassword.value.trim()
 
   if (!name || !pwd || !confirmPwd || pwd !== confirmPwd) {
-    ms.error('Passwords don\'t match')
+    ms.error('两次输入的密码不一致 | Passwords don\'t match')
     return
   }
 
@@ -135,23 +135,23 @@ async function handleRegister() {
 
         <!-- Add Tabs -->
         <NTabs v-model:value="activeTab" type="line">
-          <NTabPane name="login" label="Login">
-            <NInput v-model:value="username" type="text" placeholder="Email" class="mb-2" />
-            <NInput v-model:value="password" type="password" placeholder="Password" class="mb-2" @keypress="handlePress" />
+          <NTabPane name="login" :label="$t('common.login')">
+            <NInput v-model:value="username" type="text" :placeholder="$t('common.email')" class="mb-2" />
+            <NInput v-model:value="password" type="password" :placeholder="$t('common.password')" class="mb-2" @keypress="handlePress" />
 
             <NButton block type="primary" :disabled="disabled" :loading="loading" @click="handleLogin">
               {{ $t('common.login') }}
             </NButton>
           </NTabPane>
 
-          <NTabPane v-if="authStore.session && authStore.session.allowRegister" name="register" label="Register">
-            <NInput v-model:value="username" type="text" placeholder="Email" class="mb-2" />
-            <NInput v-model:value="password" type="password" placeholder="Password" class="mb-2" @input="handlePasswordInput" />
+          <NTabPane v-if="authStore.session && authStore.session.allowRegister" name="register" :label="$t('common.register')">
+            <NInput v-model:value="username" type="text" :placeholder="$t('common.email')" class="mb-2" />
+            <NInput v-model:value="password" type="password" :placeholder="$t('common.password')" class="mb-2" @input="handlePasswordInput" />
             <NInput
               v-if="showConfirmPassword"
               v-model:value="confirmPassword"
               type="password"
-              placeholder="Confirm Password"
+              :placeholder="$t('common.passwordConfirm')"
               class="mb-4"
               :status="confirmPasswordStatus"
             />