feat(projects): login page: register

soybeanjs · Apr 13, 2024 · b642032 · b642032
1 parent f4e7c92
commit b642032
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 9 deletions.
diff --git a/src/views/_builtin/login/modules/pwd-login.vue b/src/views/_builtin/login/modules/pwd-login.vue
@@ -63,11 +63,11 @@ async function handleSubmit() {
         {{ $t('common.confirm') }}
       </AButton>
       <div class="flex-y-center justify-between">
-        <AButton class="flex-1" block @click="toggleLoginModule('code-login')">
+        <AButton class="h-34px flex-1" block @click="toggleLoginModule('code-login')">
           {{ $t(loginModuleRecord['code-login']) }}
         </AButton>
         <div class="w-12px"></div>
-        <AButton class="flex-1" block @click="toggleLoginModule('register')">
+        <AButton class="h-34px flex-1" block @click="toggleLoginModule('register')">
           {{ $t(loginModuleRecord.register) }}
         </AButton>
       </div>

diff --git a/src/views/_builtin/login/modules/register.vue b/src/views/_builtin/login/modules/register.vue
@@ -1,24 +1,79 @@
 <script setup lang="ts">
+import { computed, reactive } from 'vue';
 import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
+import { useAntdForm, useFormRules } from '@/hooks/common/form';
+import { useCaptcha } from '@/hooks/business/captcha';
 
 defineOptions({
   name: 'CodeLogin'
 });
 
 const { toggleLoginModule } = useRouterPush();
+const { formRef, validate } = useAntdForm();
+const { label, isCounting, loading, getCaptcha } = useCaptcha();
+
+interface FormModel {
+  phone: string;
+  code: string;
+  password: string;
+  confirmPassword: string;
+}
+
+const model: FormModel = reactive({
+  phone: '',
+  code: '',
+  password: '',
+  confirmPassword: ''
+});
+
+const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
+  const { formRules, createConfirmPwdRule } = useFormRules();
+
+  return {
+    phone: formRules.phone,
+    code: formRules.code,
+    password: formRules.pwd,
+    confirmPassword: createConfirmPwdRule(model.password)
+  };
+});
+
+async function handleSubmit() {
+  await validate();
+  // request to register
+  window.$message?.success($t('page.login.common.validateSuccess'));
+}
 </script>
 
 <template>
-  <AForm>
-    <AFormItem>
-      <AInput size="large" :placeholder="$t('page.login.common.phonePlaceholder')" />
+  <AForm ref="formRef" :model="model" :rules="rules">
+    <AFormItem name="phone">
+      <AInput v-model:value="model.phone" size="large" :placeholder="$t('page.login.common.phonePlaceholder')" />
+    </AFormItem>
+    <AFormItem name="code">
+      <div class="w-full flex-y-center gap-16px">
+        <AInput v-model:value="model.code" size="large" :placeholder="$t('page.login.common.codePlaceholder')" />
+        <AButton size="large" :disabled="isCounting" :loading="loading" @click="getCaptcha(model.phone)">
+          {{ label }}
+        </AButton>
+      </div>
+    </AFormItem>
+    <AFormItem name="password">
+      <AInputPassword
+        v-model:value="model.password"
+        size="large"
+        :placeholder="$t('page.login.common.passwordPlaceholder')"
+      />
     </AFormItem>
-    <AFormItem>
-      <AInput size="large" :placeholder="$t('page.login.common.codePlaceholder')" />
+    <AFormItem name="confirmPassword">
+      <AInputPassword
+        v-model:value="model.confirmPassword"
+        size="large"
+        :placeholder="$t('page.login.common.confirmPasswordPlaceholder')"
+      />
     </AFormItem>
     <ASpace direction="vertical" size="large" class="w-full">
-      <AButton type="primary" block size="large" shape="round">
+      <AButton type="primary" block size="large" shape="round" @click="handleSubmit">
         {{ $t('common.confirm') }}
       </AButton>
       <AButton block size="large" shape="round" @click="toggleLoginModule('pwd-login')">

diff --git a/src/views/_builtin/login/modules/reset-pwd.vue b/src/views/_builtin/login/modules/reset-pwd.vue
@@ -70,7 +70,7 @@ async function handleSubmit() {
       <AButton type="primary" block size="large" shape="round" @click="handleSubmit">
         {{ $t('common.confirm') }}
       </AButton>
-      <AButton type="primary" block size="large" shape="round" @click="toggleLoginModule('pwd-login')">
+      <AButton block size="large" shape="round" @click="toggleLoginModule('pwd-login')">
         {{ $t('page.login.common.back') }}
       </AButton>
     </ASpace>