Merge pull request #5 from simulacraliasing/main

feat: 登录注册分为两个标签页，注册增加确认密码输入框，相关本地化
chatgpt-web-dev · Mar 26, 2023 · 562b089 · 562b089
2 parents f54b7c7 + 31754e9
commit 562b089
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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="$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="$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="$t('common.passwordConfirm')"
+              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>