feat(projects): login page: code-login

This commit is contained in:
Soybean 2024-03-24 04:03:49 +08:00
parent f91ef30bd5
commit c91dd282a6
8 changed files with 171 additions and 10 deletions

View File

@ -1,9 +1,10 @@
import useBoolean from './use-boolean';
import useLoading from './use-loading';
import useCountDown from './use-count-down';
import useContext from './use-context';
import useSvgIconRender from './use-svg-icon-render';
import useHookTable from './use-table';
export { useBoolean, useLoading, useContext, useSvgIconRender, useHookTable };
export { useBoolean, useLoading, useCountDown, useContext, useSvgIconRender, useHookTable };
export * from './use-table';

View File

@ -0,0 +1,49 @@
import { computed, onScopeDispose, ref } from 'vue';
import { useRafFn } from '@vueuse/core';
/**
* count down
*
* @param seconds - count down seconds
*/
export default function useCountDown(seconds: number) {
const FPS_PER_SECOND = 60;
const fps = ref(0);
const count = computed(() => Math.ceil(fps.value / FPS_PER_SECOND));
const isCounting = computed(() => fps.value > 0);
const { pause, resume } = useRafFn(
() => {
if (fps.value > 0) {
fps.value -= 1;
} else {
pause();
}
},
{ immediate: false }
);
function start(updateSeconds: number = seconds) {
fps.value = FPS_PER_SECOND * updateSeconds;
resume();
}
function stop() {
fps.value = 0;
pause();
}
onScopeDispose(() => {
pause();
});
return {
count,
isCounting,
start,
stop
};
}

View File

@ -0,0 +1,71 @@
import { computed } from 'vue';
import { useCountDown, useLoading } from '@sa/hooks';
import { $t } from '@/locales';
import { REG_PHONE } from '@/constants/reg';
export function useCaptcha() {
const { loading, startLoading, endLoading } = useLoading();
const { count, start, stop, isCounting } = useCountDown(10);
const label = computed(() => {
let text = $t('page.login.codeLogin.getCode');
const countingLabel = $t('page.login.codeLogin.reGetCode', { time: count.value });
if (loading.value) {
text = '';
}
if (isCounting.value) {
text = countingLabel;
}
return text;
});
function isPhoneValid(phone: string) {
if (phone.trim() === '') {
window.$message?.error?.($t('form.phone.required'));
return false;
}
if (!REG_PHONE.test(phone)) {
window.$message?.error?.($t('form.phone.invalid'));
return false;
}
return true;
}
async function getCaptcha(phone: string) {
const valid = isPhoneValid(phone);
if (!valid || loading.value) {
return;
}
startLoading();
// request
await new Promise(resolve => {
setTimeout(resolve, 500);
});
window.$message?.success?.($t('page.login.codeLogin.sendCodeSuccess'));
start();
endLoading();
}
return {
label,
start,
stop,
isCounting,
loading,
getCaptcha
};
}

View File

@ -184,6 +184,8 @@ const local: App.I18n.Schema = {
codeLogin: {
title: 'Verification Code Login',
getCode: 'Get verification code',
reGetCode: 'Reacquire after {time}s',
sendCodeSuccess: 'Verification code sent successfully',
imageCodePlaceholder: 'Please enter image verification code'
},
register: {
@ -391,7 +393,7 @@ const local: App.I18n.Schema = {
},
pwd: {
required: 'Please enter password',
invalid: 'Password format is incorrect'
invalid: '6-18 characters, including letters, numbers, and underscores'
},
confirmPwd: {
required: 'Please enter password again',

View File

@ -184,6 +184,8 @@ const local: App.I18n.Schema = {
codeLogin: {
title: '验证码登录',
getCode: '获取验证码',
reGetCode: '{time}秒后重新获取',
sendCodeSuccess: '验证码发送成功',
imageCodePlaceholder: '请输入图片验证码'
},
register: {
@ -391,7 +393,7 @@ const local: App.I18n.Schema = {
},
pwd: {
required: '请输入密码',
invalid: '密码格式不正确'
invalid: '密码格式不正确6-18位字符包含字母、数字、下划线'
},
confirmPwd: {
required: '请输入确认密码',

View File

@ -367,6 +367,8 @@ declare namespace App {
codeLogin: {
title: string;
getCode: string;
reGetCode: string;
sendCodeSuccess: string;
imageCodePlaceholder: string;
};
register: {

View File

@ -1,24 +1,58 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useCaptcha } from '@/hooks/business/captcha';
defineOptions({
name: 'CodeLogin'
});
const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useNaiveForm();
const { label, isCounting, loading, getCaptcha } = useCaptcha();
interface FormModel {
phone: string;
code: string;
}
const model: FormModel = reactive({
phone: '',
code: ''
});
const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
const { formRules } = useFormRules();
return {
phone: formRules.phone,
code: formRules.code
};
});
async function handleSubmit() {
await validate();
window.$message?.success($t('page.login.common.validateSuccess'));
}
</script>
<template>
<NForm size="large" :show-label="false">
<NFormItem>
<NInput :placeholder="$t('page.login.common.phonePlaceholder')" />
<NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
<NFormItem path="phone">
<NInput v-model:value="model.phone" :placeholder="$t('page.login.common.phonePlaceholder')" />
</NFormItem>
<NFormItem>
<NInput :placeholder="$t('page.login.common.codePlaceholder')" />
<NFormItem path="code">
<div class="w-full flex-y-center gap-16px">
<NInput v-model:value="model.code" :placeholder="$t('page.login.common.codePlaceholder')" />
<NButton size="large" :disabled="isCounting" :loading="loading" @click="getCaptcha(model.phone)">
{{ label }}
</NButton>
</div>
</NFormItem>
<NSpace vertical :size="18" class="w-full">
<NButton type="primary" size="large" round block>
<NButton type="primary" size="large" round block @click="handleSubmit">
{{ $t('common.confirm') }}
</NButton>
<NButton size="large" round block @click="toggleLoginModule('pwd-login')">

View File

@ -49,7 +49,7 @@ async function handleSubmit() {
<NInput
v-model:value="model.password"
type="password"
show-password-on="mousedown"
show-password-on="click"
:placeholder="$t('page.login.common.passwordPlaceholder')"
/>
</NFormItem>