From 838ff0fe140a683701b00e133e3365a559dd1545 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 16 Jun 2023 10:15:47 +0800
Subject: [PATCH] register page frame

---
 src/App.vue                                   |   4 +-
 .../{KUNGalgameAlert => alert}/Alert.vue      |   0
 .../{KUNGalgameAlert => alert}/Info.vue       |   0
 .../{KUNGalgameAlert => alert}/loli.ts        |   0
 src/views/licence/Licence.vue                 |   5 +-
 src/views/login/components/Register.vue       | 111 ++++++++++++++++--
 src/views/thanks-list/ThanksList.vue          |   2 +-
 7 files changed, 107 insertions(+), 15 deletions(-)
 rename src/components/{KUNGalgameAlert => alert}/Alert.vue (100%)
 rename src/components/{KUNGalgameAlert => alert}/Info.vue (100%)
 rename src/components/{KUNGalgameAlert => alert}/loli.ts (100%)

diff --git a/src/App.vue b/src/App.vue
index 0ff04450..f6cf30c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <!-- App -->
 <script setup lang="ts">
 // 导入通知和提示组件
-import Alert from '@/components/KUNGalgameAlert/Alert.vue'
-import Info from '@/components/KUNGalgameAlert/Info.vue'
+import Alert from '@/components/alert/Alert.vue'
+import Info from '@/components/alert/Info.vue'
 
 import { onBeforeMount } from 'vue'
 // 导入设置面板 store
diff --git a/src/components/KUNGalgameAlert/Alert.vue b/src/components/alert/Alert.vue
similarity index 100%
rename from src/components/KUNGalgameAlert/Alert.vue
rename to src/components/alert/Alert.vue
diff --git a/src/components/KUNGalgameAlert/Info.vue b/src/components/alert/Info.vue
similarity index 100%
rename from src/components/KUNGalgameAlert/Info.vue
rename to src/components/alert/Info.vue
diff --git a/src/components/KUNGalgameAlert/loli.ts b/src/components/alert/loli.ts
similarity index 100%
rename from src/components/KUNGalgameAlert/loli.ts
rename to src/components/alert/loli.ts
diff --git a/src/views/licence/Licence.vue b/src/views/licence/Licence.vue
index d953ef2e..55f4d5cc 100644
--- a/src/views/licence/Licence.vue
+++ b/src/views/licence/Licence.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import BackToPrevious from '@/components/BackToPrevious.vue'
+</script>
 
 <template>
   <div class="root">
@@ -18,6 +20,7 @@
         <p>4. 因用户账号被盗等造成的损失，KUNGalgame 概不承担</p>
         <p>协议版本 2019/10/07</p>
       </div>
+      <BackToPrevious />
       <!-- 版权 -->
       <div class="copyright">
         <span>Copyright © 2023 KUNgalgame</span>
diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue
index 07bec734..acc7fcdb 100644
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -1,46 +1,135 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
+import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
+import { useRouter } from 'vue-router'
+// 使用全局通知
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 
-const loginForm = reactive({
+// 导入人机验证组件
+import Capture from '@/components/capture/Capture.vue'
+
+// 导入验证表单是否合法的函数
+import { isValidEmail, isValidName, isValidPassword } from '@/utils/validate'
+
+// 导入 i18n
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+// 定义人机验证的标志
+const isShowValidate = ref(false)
+// 定义人机验证是否完成的标志
+const isCaptureComplete = ref(false)
+
+const router = useRouter()
+
+const info = useKUNGalgameMessageStore()
+
+const useStore = useKUNGalgamerStore()
+
+const registerForm = reactive({
   username: '',
   email: '',
   password: '',
   code: '',
 })
 
-const handleRegister = () => {}
+const handleVerify = (result: boolean) => {
+  if (result) {
+    // 处理人机校验完成后的逻辑
+    isShowValidate.value = false
+    info.info(t('AlertInfo.capture.success'))
+    isCaptureComplete.value = true
+  }
+}
+
+const isEmptyInput = () => {
+  // 如果输入的字段为空
+  if (!registerForm.username.trim()) {
+    // 提示用户输入的名字为空
+    info.info(t('AlertInfo.login.emptyUsername'))
+    return false
+  } else if (!registerForm.password.trim()) {
+    // 提示用户输入的密码为空
+    info.info(t('AlertInfo.login.emptyPassword'))
+    return false
+  } else {
+    return true
+  }
+}
+
+// 判断输入的用户名和密码字段是否合法
+const isValidInput = (): boolean => {
+  // 如果输入为空直接返回 false
+  if (!isEmptyInput()) {
+    return false
+  }
+  if (
+    isValidEmail(registerForm.username) ||
+    isValidName(registerForm.username)
+  ) {
+    // 输入的用户名正确时（为用户名或邮箱）
+    if (isValidPassword(registerForm.password)) {
+      return true
+    } else {
+      // 如果密码非法的话返回非法密码
+      info.info(t('AlertInfo.login.invalidPassword'))
+      return false
+    }
+  } else {
+    // 输入的用户名或邮箱错误时的逻辑
+    info.info(t('AlertInfo.login.invalidUsername'))
+    return false
+  }
+}
+
+// 处理用户点击登陆时的逻辑
+const handleRegister = () => {
+  // 保证输入格式和人机验证通过才能发送登录请求
+  if (isValidInput()) {
+    // 未完成人机身份验证提示信息，直接返回
+    if (!isCaptureComplete.value) {
+      return
+    }
+    // 所有的验证都通过了再向后端发送请求
+    // TODO:在这里执行注册函数
+  }
+}
 </script>
 
 <template>
   <!-- 注册 -->
   <div class="register">
+    <Capture @validate="handleVerify" :isShowValidate="isShowValidate" />
     <form action="#" class="form" id="form2" @submit.prevent="handleRegister">
       <h2 class="title">注册</h2>
       <input
-        v-model="loginForm.username"
+        v-model="registerForm.username"
         type="text"
         placeholder="用户名"
         class="input"
       />
       <input
-        v-model="loginForm.email"
+        v-model="registerForm.email"
         type="email"
         placeholder="邮箱"
         class="input"
       />
       <input
-        v-model="loginForm.password"
+        v-model="registerForm.password"
         type="password"
         placeholder="密码"
         class="input"
       />
       <input
-        v-model="loginForm.code"
+        v-model="registerForm.code"
         type="text"
         placeholder="邮箱验证码"
         class="input"
       />
-      <button class="mail-confirm">发送验证码</button>
+      <!-- 发送时进行人机验证 -->
+      <button @click="isShowValidate = true" class="mail-confirm">
+        发送验证码
+      </button>
       <button class="btn" type="submit">注册</button>
       <span class="user-agreement"
         >点击注册表示您已经同意我们的<router-link to="/licence"
@@ -64,15 +153,15 @@ const handleRegister = () => {}
   position: absolute;
   padding: 5px;
   height: 30px;
-  bottom: 22%;
+  bottom: 23%;
   right: 15%;
   border: 1px solid var(--kungalgame-blue-1);
+  color: var(--kungalgame-font-color-2);
   background-color: var(--kungalgame-white);
   cursor: pointer;
 }
 .mail-confirm:hover {
-  background-color: var(--kungalgame-blue-4);
-  color: var(--kungalgame-white);
+  color: var(--kungalgame-blue-4);
 }
 
 /* 用户协议 */
diff --git a/src/views/thanks-list/ThanksList.vue b/src/views/thanks-list/ThanksList.vue
index 04487cee..abe72fea 100644
--- a/src/views/thanks-list/ThanksList.vue
+++ b/src/views/thanks-list/ThanksList.vue
@@ -25,7 +25,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
           <li>Github（github） - 配色</li>
           <li>bbs.kfmax.com（绯月） - 用户信息分类</li>
           <li>StackOverflow （StackOverflow） - 页面板块的阴影</li>
-          <li>ChatGPT （Open AIChatGPT） - 各种技术问题</li>
+          <li>ChatGPT （OpenAI ChatGPT） - 各种技术问题</li>
           <li>Google（谷歌） - 帖子详情页面</li>
           <li>YouTube （油管） - 技术交流页面</li>
           <li>Adobe （Adobe） - 底部 Footer</li>