feat: add register

xingyu
1 parent 6eddbffd
Showing 6 changed files with 168 additions and 13 deletions
yudao-ui-admin-vue3/src/locales/en.ts
yudao-ui-admin-vue3/src/locales/zh-CN.ts
yudao-ui-admin-vue3/src/views/Login/Login.vue
yudao-ui-admin-vue3/src/views/Login/components/LoginForm.vue
yudao-ui-admin-vue3/src/views/Login/components/RegisterForm.vue
yudao-ui-admin-vue3/src/views/Login/components/index.ts
@@ -108,7 +108,10 @@ export default {
     login: 'Sign in',
     relogin: 'Sign in again',
     otherLogin: 'Sign in with',
+    register: 'Register',
+    checkPassword: 'Confirm password',
     remember: 'Remember me',
+    hasUser: 'Existing account? Go to login',
     forgetPassword: 'Forget password?',
     tenantNamePlaceholder: 'Please Enter Tenant Name',
     usernamePlaceholder: 'Please Enter Username',
@@ -108,7 +108,10 @@ export default {
     login: '登录',
     relogin: '重新登录',
     otherLogin: '其他登录方式',
+    register: '注册',
+    checkPassword: '确认密码',
     remember: '记住我',
+    hasUser: '已有账号？去登录',
     forgetPassword: '忘记密码?',
     tenantNamePlaceholder: '请输入租户名称',
     usernamePlaceholder: '请输入用户名',
 <script setup lang="ts">
-import { LoginForm } from './components'
-import { MobileForm } from './components'
+import { LoginForm, MobileForm, RegisterForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -8,13 +7,13 @@ import { underlineToHump } from &#39;@/utils&#39;
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
+const { t } = useI18n()
+
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('login')
 const appStore = useAppStore()
-
-const { t } = useI18n()
 </script>
 <template>
@@ -67,6 +66,8 @@ const { t } = useI18n()
             <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
             <!-- 手机登录 -->
             <MobileForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
+            <!-- 注册 -->
+            <RegisterForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>
@@ -131,7 +131,6 @@ const getRoutes = async () =&gt; {
   permissionStore.setIsAddRouters(true)
   push({ path: redirect.value || permissionStore.addRouters[0].path })
 }
-
 watch(
   () => currentRoute.value,
   (route: RouteLocationNormalizedLoaded) => {
@@ -233,24 +232,26 @@ onMounted(async () =&gt; {
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item>
-          <el-button :loading="loginLoading" type="primary" class="w-[100%]" @click="handleLogin">{{
-            t('login.login')
-          }}</el-button>
+          <el-button :loading="loginLoading" type="primary" class="w-[100%]" @click="handleLogin">
+            {{ t('login.login') }}
+          </el-button>
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item>
           <el-row justify="space-between" style="width: 100%" :gutter="5">
             <el-col :span="8">
-              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.MOBILE)">{{
-                t('login.btnMobile')
-              }}</el-button>
+              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.MOBILE)">
+                {{ t('login.btnMobile') }}
+              </el-button>
             </el-col>
             <el-col :span="8">
               <el-button class="w-[100%]">{{ t('login.btnQRCode') }}</el-button>
             </el-col>
             <el-col :span="8">
-              <el-button class="w-[100%]">{{ t('login.btnRegister') }}</el-button>
+              <el-button class="w-[100%]" @click="setLoginState(LoginStateEnum.REGISTER)">
+                {{ t('login.btnRegister') }}
+              </el-button>
             </el-col>
           </el-row>
         </el-form-item>
@@ -290,6 +291,11 @@ onMounted(async () =&gt; {
   </el-form>
 </template>
 <style lang="less" scoped>
+:deep(.anticon) {
+  &:hover {
+    color: var(--el-color-primary) !important;
+  }
+}
 .login-code {
   width: 100%;
   height: 38px;
+<script setup lang="ts">
+import { Form } from '@/components/Form'
+import { computed, reactive, ref, unref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useForm } from '@/hooks/web/useForm'
+import { ElInput, FormRules } from 'element-plus'
+import { useValidator } from '@/hooks/web/useValidator'
+import { useLoginState, LoginStateEnum } from './useLogin'
+import LoginFormTitle from './LoginFormTitle.vue'
+
+const { register, elFormRef } = useForm()
+const { handleBackLogin, getLoginState } = useLoginState()
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+const { t } = useI18n()
+
+const { required } = useValidator()
+
+const schema = reactive<FormSchema[]>([
+  {
+    field: 'title',
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'username',
+    label: t('login.username'),
+    value: '',
+    component: 'Input',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      placeholder: t('login.usernamePlaceholder')
+    }
+  },
+  {
+    field: 'password',
+    label: t('login.password'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'check_password',
+    label: t('login.checkPassword'),
+    value: '',
+    component: 'InputPassword',
+    colProps: {
+      span: 24
+    },
+    componentProps: {
+      style: {
+        width: '100%'
+      },
+      strength: true,
+      placeholder: t('login.passwordPlaceholder')
+    }
+  },
+  {
+    field: 'code',
+    label: t('login.code'),
+    colProps: {
+      span: 24
+    }
+  },
+  {
+    field: 'register',
+    colProps: {
+      span: 24
+    }
+  }
+])
+
+const rules: FormRules = {
+  username: [required()],
+  password: [required()],
+  check_password: [required()],
+  code: [required()]
+}
+
+const loading = ref(false)
+
+const loginRegister = async () => {
+  const formRef = unref(elFormRef)
+  formRef?.validate(async (valid) => {
+    if (valid) {
+      try {
+        loading.value = true
+      } finally {
+        loading.value = false
+      }
+    }
+  })
+}
+</script>
+
+<template>
+  <Form
+    :schema="schema"
+    :rules="rules"
+    label-position="top"
+    hide-required-asterisk
+    size="large"
+    v-show="getShow"
+    class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    @register="register"
+  >
+    <template #title>
+      <LoginFormTitle style="width: 100%" />
+    </template>
+
+    <template #code="form">
+      <div class="w-[100%] flex">
+        <ElInput v-model="form['code']" :placeholder="t('login.codePlaceholder')" />
+      </div>
+    </template>
+
+    <template #register>
+      <div class="w-[100%]">
+        <ElButton type="primary" class="w-[100%]" :loading="loading" @click="loginRegister">
+          {{ t('login.register') }}
+        </ElButton>
+      </div>
+      <div class="w-[100%] mt-15px">
+        <ElButton class="w-[100%]" @click="handleBackLogin">
+          {{ t('login.hasUser') }}
+        </ElButton>
+      </div>
+    </template>
+  </Form>
+</template>
 import LoginForm from './LoginForm.vue'
 import MobileForm from './MobileForm.vue'
 import LoginFormTitle from './LoginFormTitle.vue'
+import RegisterForm from './RegisterForm.vue'
-export { LoginForm, MobileForm, LoginFormTitle }
+export { LoginForm, MobileForm, LoginFormTitle, RegisterForm }