From b1038c7bb89a049a010cdd132e846c1fb37db5b8 Mon Sep 17 00:00:00 2001
From: xingyuv <xingyu4j@vip.qq.com>
Date: Sat, 16 Nov 2024 23:45:16 +0800
Subject: [PATCH] feat: add verification login

---
 .../src/views/_core/authentication/login.vue  | 129 +++++++++++-------
 1 file changed, 82 insertions(+), 47 deletions(-)

diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index e9ea11bd..b708a431 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -1,20 +1,27 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 
 import { AuthenticationLogin, z } from '@vben/common-ui';
 import { useAppConfig } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
 import { getTenantByWebsite, getTenantIdByName } from '#/api/core/auth';
+import { Verify } from '#/components/Verification';
 import { useAuthStore } from '#/store';
 import { setTenantId } from '#/utils';
 
 defineOptions({ name: 'Login' });
 
 const authStore = useAuthStore();
+/**
+ * 初始化验证码
+ * blockPuzzle 滑块
+ * clickWord 点击文字
+ */
+const verify = ref();
+const captchaType = ref('blockPuzzle');
 
 const { tenantEnable, captchaEnable } = useAppConfig(
   import.meta.env,
@@ -26,84 +33,112 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: $t('authentication.usernameTip'),
+        placeholder: $t('page.auth.tenantNameTip'),
       },
       fieldName: 'tenantName',
-      label: $t('authentication.username'),
-      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
-      value: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+      label: $t('page.auth.tenantname'),
+      rules: z.string().min(1, { message: $t('page.auth.tenantNameTip') }),
+      defaultValue: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
     },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: $t('authentication.usernameTip'),
+        placeholder: $t('page.auth.usernameTip'),
       },
       fieldName: 'username',
-      label: $t('authentication.username'),
-      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
-      value: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+      label: $t('page.auth.username'),
+      rules: z.string().min(1, { message: $t('page.auth.usernameTip') }),
+      defaultValue: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
     },
     {
       component: 'VbenInputPassword',
       componentProps: {
-        placeholder: $t('authentication.password'),
+        placeholder: $t('page.auth.passwordTip'),
       },
       fieldName: 'password',
-      label: $t('authentication.password'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
-      value: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+      label: $t('page.auth.password'),
+      rules: z.string().min(1, { message: $t('page.auth.passwordTip') }),
+      defaultValue: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
     },
   ];
 });
-const loginData = ref({
-  captchaVerification: '',
-  username: '',
-  password: '',
-  tenantName: '',
+const loginData = reactive({
+  loginForm: {
+    username: '',
+    password: '',
+    tenantName: '',
+  },
 });
+const captchaVerification = ref('');
 // 获取验证码
-async function getCode(params: Recordable<any>) {
+async function getCode(params: any) {
   if (params) {
-    loginData.value = params;
+    loginData.loginForm = params;
   }
-  getTenant()
-    .then()
-    .finally(async () => {
+  try {
+    await getTenant();
+    if (captchaEnable) {
+      // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+      // 弹出验证码
+      verify.value.show();
+    } else {
       // 情况一，未开启：则直接登录
-      if (captchaEnable === 'false') {
-        await handleLogin();
-      } else {
-        // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
-        // 弹出验证码
-        verify.value.show();
-      }
-    });
+      await handleLogin({});
+    }
+  } catch (error) {
+    console.error('Error in getCode:', error);
+  }
 }
 
 // 根据域名，获得租户信息 && 获取租户ID
 async function getTenant() {
-  if (tenantEnable === 'true') {
+  if (tenantEnable) {
     const website = location.host;
-    const tenant = await getTenantByWebsite(website);
-    if (tenant) {
-      loginData.value.tenantName = tenant.name;
-      setTenantId(tenant.id);
-    } else {
-      const res = await getTenantIdByName(loginData.value.tenantName);
-      setTenantId(res);
+    try {
+      const tenant = await getTenantByWebsite(website);
+      if (tenant) {
+        loginData.loginForm.tenantName = tenant.name;
+        setTenantId(tenant.id);
+      } else {
+        const res = await getTenantIdByName(loginData.loginForm.tenantName);
+        setTenantId(res);
+      }
+    } catch (error) {
+      console.error('Error in getTenant:', error);
     }
   }
 }
 
-async function handleLogin() {
-  authStore.authLogin(loginData.value);
+async function handleLogin(params: any) {
+  if (!params.captchaVerification && captchaEnable) {
+    console.error('Captcha verification is required');
+    return;
+  }
+  captchaVerification.value = params.captchaVerification;
+  try {
+    await authStore.authLogin({
+      ...loginData.loginForm,
+      captchaVerification: captchaVerification.value,
+    });
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
 }
 </script>
 
 <template>
-  <AuthenticationLogin
-    :form-schema="formSchema"
-    :loading="authStore.loginLoading"
-    @submit="getCode"
-  />
+  <div>
+    <AuthenticationLogin
+      :form-schema="formSchema"
+      :loading="authStore.loginLoading"
+      @submit="getCode"
+    />
+    <Verify
+      ref="verify"
+      :captcha-type="captchaType"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @success="handleLogin"
+    />
+  </div>
 </template>