修改登录注册UI (#414)

* 修改登录注册UI * add test * fix test error
swuecho · Apr 21, 2024 · 9631260 · 9631260
1 parent 6c5b85b
commit 9631260
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 77 deletions.
diff --git a/e2e/tests/01_register.spec.ts b/e2e/tests/01_register.spec.ts
@@ -9,10 +9,13 @@ const test_email = randomEmail();
 
 test('test', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
 });
 
diff --git a/e2e/tests/02_simpe_prompt.spec.ts b/e2e/tests/02_simpe_prompt.spec.ts
@@ -16,11 +16,13 @@ const pool = new Pool(db_config);
 test('test', async ({ page }) => {
   await page.goto('/');
 
-
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
 
   // locate by id #message_texarea and click

diff --git a/e2e/tests/03_chat_session.spec.ts b/e2e/tests/03_chat_session.spec.ts
@@ -13,10 +13,13 @@ const pool = new Pool(db_config);
 
 test('test', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
 
   await page.waitForTimeout(500);

diff --git a/e2e/tests/04_simpe_prompt_and_message.spec.ts b/e2e/tests/04_simpe_prompt_and_message.spec.ts
@@ -17,13 +17,15 @@ const pool = new Pool(db_config);
 
 test('test', async ({ page }) => {
   await page.goto('/');
-
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
-
+  
   await page.waitForTimeout(1000);
   let input_area = await page.$("#message_textarea textarea")
   await input_area?.click();

diff --git a/e2e/tests/05_chat_session.spec.ts b/e2e/tests/05_chat_session.spec.ts
@@ -13,13 +13,14 @@ const pool = new Pool(db_config);
 test('test', async ({ page }) => {
         await page.goto('/');
 
-
-        await page.getByTestId('email').click();
-        await page.getByTestId('email').locator('input').fill(test_email);
-        await page.getByTestId('password').locator('input').click();
-        await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+        await page.getByTitle('signuptab').click();
+        await page.getByTestId('signup_email').click();
+        await page.getByTestId('signup_email').locator('input').fill(test_email);
+        await page.getByTestId('signup_password').locator('input').click();
+        await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+        await page.getByTestId('repwd').locator('input').click();
+        await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
         await page.getByTestId('signup').click();
-
         await page.waitForTimeout(1000);
         const user = await selectUserByEmail(pool, test_email);
         expect(user.email).toBe(test_email);

diff --git a/e2e/tests/06_clear_messages.spec.ts b/e2e/tests/06_clear_messages.spec.ts
@@ -13,10 +13,13 @@ const test_email = randomEmail();
 
 test('after clear conversation, only system message remains', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
   // sleep 1 second
   await page.waitForTimeout(1000);

diff --git a/e2e/tests/07_set_session_max_len.spec.ts b/e2e/tests/07_set_session_max_len.spec.ts
@@ -9,12 +9,14 @@ const test_email = randomEmail();
 
 test.skip('test', async ({ page }) => {
         await page.goto('/');
-        await page.getByTestId('email').click();
-        await page.getByTestId('email').locator('input').fill(test_email);
-        await page.getByTestId('password').locator('input').click();
-        await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+        await page.getByTitle('signuptab').click();
+        await page.getByTestId('signup_email').click();
+        await page.getByTestId('signup_email').locator('input').fill(test_email);
+        await page.getByTestId('signup_password').locator('input').click();
+        await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+        await page.getByTestId('repwd').locator('input').click();
+        await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
         await page.getByTestId('signup').click();
-
         await page.waitForTimeout(1000);
 
         await page.getByRole('contentinfo').getByRole('button').nth(3).click();

diff --git a/e2e/tests/08_session_config.spec.ts b/e2e/tests/08_session_config.spec.ts
@@ -14,10 +14,13 @@ const pool = new Pool(db_config);
 
 test('test', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
   await page.waitForTimeout(1000);
   let input_area = await page.$("#message_textarea textarea")

diff --git a/e2e/tests/09_session_answer.spec.ts b/e2e/tests/09_session_answer.spec.ts
@@ -5,10 +5,13 @@ const test_email = randomEmail();
 
 test('test', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
   await page.waitForTimeout(1000);
 

diff --git a/e2e/tests/10_session_answer_regenerate.spec.ts b/e2e/tests/10_session_answer_regenerate.spec.ts
@@ -10,10 +10,13 @@ const pool = new Pool(db_config);
 
 test('test', async ({ page }) => {
   await page.goto('/');
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
   await page.waitForTimeout(1000);
 

diff --git a/e2e/tests/11_chat_snapshot.spec.ts b/e2e/tests/11_chat_snapshot.spec.ts
@@ -16,11 +16,13 @@ const pool = new Pool(db_config);
 let snapshot_url = ""
 test('test', async ({ page }) => {
   await page.goto('/');
-
-  await page.getByTestId('email').click();
-  await page.getByTestId('email').locator('input').fill(test_email);
-  await page.getByTestId('password').locator('input').click();
-  await page.getByTestId('password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTitle('signuptab').click();
+  await page.getByTestId('signup_email').click();
+  await page.getByTestId('signup_email').locator('input').fill(test_email);
+  await page.getByTestId('signup_password').locator('input').click();
+  await page.getByTestId('signup_password').locator('input').fill('@ThisIsATestPass5');
+  await page.getByTestId('repwd').locator('input').click();
+  await page.getByTestId('repwd').locator('input').fill('@ThisIsATestPass5');
   await page.getByTestId('signup').click();
 
   await page.waitForTimeout(1000);

diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
@@ -143,7 +143,8 @@
         "fail_to_make_request": "Failed to request the model, please try again later or contact the administrator",
         "gpt-4_over_limit": "GPT4 message sending limit exceeded, please contact the administrator to enable or increase quota.",
         "invalidEmail": "Invalid email address",
-        "invalidPassword": "password is not valid, it should be length >=6 and include a number, a lowercase letter, an uppercase letter, and a special character",
+        "invalidPassword": "Password is not valid, it should be length >=6 and include a number, a lowercase letter, an uppercase letter, and a special character",
+        "invalidRepwd": "Duplicate passwords are inconsistent",
         "invalid_email_or_password": "Invalid email or password",
         "invalid_request": "Invalid Request",
         "rateLimit": "The message sending limit has been reached, please contact the administrator.",

diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -174,6 +174,7 @@
     "token_length_exceed_limit": "总消息长度数量超过上限, 请减少上下文数量、减少消息长度或者开启新的会话",
     "invalidEmail": "邮箱格式不正确",
     "invalidPassword": "密码格式不正确, 长度至少为6位, 一个大写字母, 一个小写字母, 一个数字, 一个特殊字符",
+    "invalidRepwd": "重复密码不一致",
     "syncChatSession": "同步失败, 请稍后再试",
     "NotAuthorized": "请先登录",
     "NotAdmin": "非管理员禁止访问"

diff --git a/web/src/locales/zh-TW.json b/web/src/locales/zh-TW.json
@@ -144,6 +144,7 @@
         "gpt-4_over_limit": "gpt4 發送消息達到上限，請聯繫管理員開通，或增加額度",
         "invalidEmail": "電子郵件格式不正確",
         "invalidPassword": "密碼格式不正確，長度至少需為6位，應包含1個大寫字母、1個小寫字母、1個數字、1個特殊字符",
+        "invalidRepwd": "重復密碼不一致",
         "invalid_email_or_password": "無效的電子郵件或密碼",
         "invalid_request": "無效請求",
         "rateLimit": "發送消息數量已經達到上限，請聯繫管理員",

diff --git a/web/src/views/components/Permission.vue b/web/src/views/components/Permission.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
-import { NButton, NInput, NModal, useMessage } from 'naive-ui'
+import { computed, reactive, ref } from 'vue'
+import { NButton, NForm, NFormItemRow, NInput, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
 import { fetchLogin, fetchSignUp } from '@/api'
 import { t } from '@/locales'
 import { useAuthStore } from '@/store'
@@ -17,14 +17,26 @@ const authStore = useAuthStore()
 const ms = useMessage()
 
 const loading = ref(false)
-const user_email = ref('')
-const user_password = ref('')
+const LoginData = reactive({
+  email: '',
+  password: '',
+})
+const RegisterData = reactive({
+  email: '',
+  password: '',
+  repwd: '',
+})
 
-const user_pass_not_filled = computed(() => !user_email.value.trim() || !user_password.value.trim() || loading.value)
+function check_input(data: object) {
+  return !Object.values(data).every(({ length }) => length > 6) || loading.value
+}
+
+const login_not_filled = computed(() => check_input(LoginData))
+const register_not_filled = computed(() => check_input(RegisterData))
 
 async function handleLogin() {
-  const user_email_v = user_email.value.trim()
-  const user_password_v = user_password.value.trim()
+  const user_email_v = LoginData.email.trim()
+  const user_password_v = LoginData.password.trim()
 
   if (!user_email_v || !user_password_v)
     return
@@ -63,10 +75,11 @@ async function handleLogin() {
 }
 
 async function handleSignup() {
-  const user_email_v = user_email.value.trim()
-  const user_password_v = user_password.value.trim()
+  const user_email_v = RegisterData.email.trim()
+  const user_password_v = RegisterData.password.trim()
+  const user_repwd_v = RegisterData.repwd.trim()
 
-  if (!user_email_v || !user_password_v)
+  if (!user_email_v || !user_password_v || !user_repwd_v)
     return
 
   // check user_email_v  is valid email
@@ -79,6 +92,11 @@ async function handleSignup() {
     ms.error(t('error.invalidPassword'))
     return
   }
+
+  if (user_password_v !== user_repwd_v) {
+    ms.error(t('error.invalidRepwd'))
+    return
+  }
   loading.value = true
   try {
     const { accessToken, expiresIn } = await fetchSignUp(user_email_v, user_password_v)
@@ -105,7 +123,7 @@ async function handleSignup() {
 </script>
 
 <template>
-  <NModal :show="visible" style="width: 90%; max-width: 640px">
+  <NModal :show="visible" style="width: 90%; max-width: 400px">
     <div class="p-10 bg-white rounded dark:bg-slate-800">
       <div class="space-y-4">
         <header class="space-y-2">
@@ -117,20 +135,64 @@ async function handleSignup() {
           </p>
           <Icon403 class="w-[200px] m-auto" />
         </header>
-        <NInput v-model:value="user_email" data-testid="email" type="text" :minlength="6"
-          :placeholder="$t('common.email_placeholder')" />
-        <NInput v-model:value="user_password" data-testid="password" type="text" :minlength="6"
-          :placeholder="$t('common.password_placeholder')" />
-        <div class="flex justify-between">
-          <NButton type="primary" data-testid="signup" :disabled="user_pass_not_filled" :loading="loading"
-            @click="handleSignup">
-            {{ $t('common.signup') }}
-          </NButton>
-          <NButton type="primary" data-testid="login" :disabled="user_pass_not_filled" :loading="loading"
-            @click="handleLogin">
-            {{ $t('common.login') }}
-          </NButton>
-        </div>
+        <NTabs
+          class="card-tabs" default-value="signin" size="large" animated
+        >
+          <NTabPane name="signin" :tab="t('common.login')" :tab-props="{ title: 'signintab' }">
+            <NForm :show-label="false">
+              <NFormItemRow label="邮箱">
+                <NInput
+                  v-model:value="LoginData.email" data-testid="email" type="text" :minlength="6"
+                  :placeholder="$t('common.email_placeholder')"
+                />
+              </NFormItemRow>
+              <NFormItemRow label="密码">
+                <NInput
+                  v-model:value="LoginData.password" data-testid="password" type="password" :minlength="6" show-password-on="click"
+                  :placeholder="$t('common.password_placeholder')"
+                />
+              </NFormItemRow>
+            </NForm>
+            <div class="flex justify-between">
+              <NButton
+                type="primary" block secondary strong data-testid="login" :disabled="login_not_filled"
+                :loading="loading" @click="handleLogin"
+              >
+                {{ $t('common.login') }}
+              </NButton>
+            </div>
+          </NTabPane>
+          <NTabPane name="signup" :tab="t('common.signup')" :tab-props="{ title: 'signuptab' }">
+            <NForm :show-label="false">
+              <NFormItemRow label="邮箱">
+                <NInput
+                  v-model:value="RegisterData.email" data-testid="signup_email" type="text" :minlength="6"
+                  :placeholder="$t('common.email_placeholder')"
+                />
+              </NFormItemRow>
+              <NFormItemRow label="密码">
+                <NInput
+                  v-model:value="RegisterData.password" data-testid="signup_password" type="password" :minlength="6" show-password-on="click"
+                  :placeholder="$t('common.password_placeholder')"
+                />
+              </NFormItemRow>
+              <NFormItemRow label="确认密码">
+                <NInput
+                  v-model:value="RegisterData.repwd" data-testid="repwd" type="password" :minlength="6" show-password-on="click"
+                  :placeholder="$t('common.password_placeholder')"
+                />
+              </NFormItemRow>
+            </NForm>
+            <div class="flex justify-between">
+              <NButton
+                type="primary" block secondary strong data-testid="signup" :disabled="register_not_filled"
+                :loading="loading" @click="handleSignup"
+              >
+                {{ $t('common.signup') }}
+              </NButton>
+            </div>
+          </NTabPane>
+        </NTabs>
       </div>
     </div>
   </NModal>