Merge pull request #78 from kailong321200875/node-admin
Archer
4 years ago
committed by
GitHub
commit
43518532f1
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,9 @@
|
|||||||
|
export interface IUserModel {
|
||||||
|
user_name: string
|
||||||
|
password: string
|
||||||
|
check_password: string
|
||||||
|
is_admin: number
|
||||||
|
code?: string | number
|
||||||
|
token?: string
|
||||||
|
refreshToken?: string
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { useAxios } from '@/hooks/web/useAxios'
|
||||||
|
import { IUserModel } from '@/api-types/user'
|
||||||
|
|
||||||
|
const request = useAxios()
|
||||||
|
|
||||||
|
interface ICodeModel {
|
||||||
|
url: string
|
||||||
|
uuid: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getCodeApi = async (): Promise<IResponse<ICodeModel>> => {
|
||||||
|
const res = await request.get({ url: 'user/captcha' })
|
||||||
|
return res && res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
export const registerApi = async (
|
||||||
|
data: Omit<IUserModel, 'is_admin'>
|
||||||
|
): Promise<IResponse<IUserModel>> => {
|
||||||
|
const res = await request.post({ url: 'user/register', data })
|
||||||
|
return res && res.data
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
type Callback = (error?: string | Error | undefined) => void
|
||||||
|
|
||||||
|
interface LengthRange {
|
||||||
|
min: number
|
||||||
|
max: number
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useValidator = () => {
|
||||||
|
const required = (message: string) => {
|
||||||
|
return {
|
||||||
|
required: true,
|
||||||
|
message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const lengthRange = (val: any, callback: Callback, options: LengthRange) => {
|
||||||
|
const { min, max, message } = options
|
||||||
|
if (val.length < min || val.length > max) {
|
||||||
|
callback(new Error(message))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const notSpace = (val: any, callback: Callback, message: string) => {
|
||||||
|
// 用户名不能有空格
|
||||||
|
if (val.indexOf(' ') !== -1) {
|
||||||
|
callback(new Error(message))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const notSpecialCharacters = (val: any, callback: Callback, message: string) => {
|
||||||
|
// 密码不能是特殊字符
|
||||||
|
if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) {
|
||||||
|
callback(new Error(message))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 两个字符串是否想等
|
||||||
|
const isEqual = (val1: string, val2: string, callback: Callback, message: string) => {
|
||||||
|
if (val1 === val2) {
|
||||||
|
callback()
|
||||||
|
} else {
|
||||||
|
callback(new Error(message))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
required,
|
||||||
|
lengthRange,
|
||||||
|
notSpace,
|
||||||
|
notSpecialCharacters,
|
||||||
|
isEqual
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,2 +1,2 @@
|
|||||||
@import './var.css';
|
@import './var.css';
|
||||||
@import 'element-plus/theme-chalk/dark/css-vars.css';
|
@import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||||
|
|||||||
@ -0,0 +1,212 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Form } from '@/components/Form'
|
||||||
|
import { reactive, ref, unref } from 'vue'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useForm } from '@/hooks/web/useForm'
|
||||||
|
import { ElButton, ElInput, FormRules, ElMessage } from 'element-plus'
|
||||||
|
import { getCodeApi, registerApi } from '@/api/register'
|
||||||
|
import { useValidator } from '@/hooks/web/useValidator'
|
||||||
|
import { IUserModel } from '@/api-types/user'
|
||||||
|
import md5 from 'js-md5'
|
||||||
|
import { cloneDeep } from 'lodash-es'
|
||||||
|
|
||||||
|
const emit = defineEmits(['to-login'])
|
||||||
|
|
||||||
|
const { register, methods, elFormRef } = useForm()
|
||||||
|
|
||||||
|
const { getFormData } = methods
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const { required, lengthRange, notSpace, notSpecialCharacters, isEqual } = useValidator()
|
||||||
|
|
||||||
|
const schema = reactive<FormSchema[]>([
|
||||||
|
{
|
||||||
|
field: 'title',
|
||||||
|
colProps: {
|
||||||
|
span: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'user_name',
|
||||||
|
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 = {
|
||||||
|
user_name: [
|
||||||
|
required('用户名不能为空'),
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) =>
|
||||||
|
lengthRange(value, callback, { min: 2, max: 10, message: '用户名长度必须在2-10之间' })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) => notSpace(value, callback, '用户名不能有空格')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
required('密码不能为空'),
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) =>
|
||||||
|
lengthRange(value, callback, { min: 5, max: 20, message: '密码长度必须在5-20之间' })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) => notSpecialCharacters(value, callback, '密码不能是特殊字符')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
check_password: [
|
||||||
|
required('确认密码不能为空'),
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) =>
|
||||||
|
lengthRange(value, callback, { min: 5, max: 20, message: '确认密码长度必须在5-20之间' })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (_, value, callback) =>
|
||||||
|
notSpecialCharacters(value, callback, '确认密码不能是特殊字符')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: async (_, value, callback) => {
|
||||||
|
const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
|
||||||
|
return isEqual(value, formData.password, callback, '两次密码不一致')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
code: [required('验证码不能为空')]
|
||||||
|
}
|
||||||
|
|
||||||
|
const toLogin = () => {
|
||||||
|
emit('to-login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const codeUrl = ref('')
|
||||||
|
const codeUuid = ref('')
|
||||||
|
const getCode = async () => {
|
||||||
|
const { result } = await getCodeApi()
|
||||||
|
if (result) {
|
||||||
|
const { url, uuid } = result
|
||||||
|
codeUrl.value = url
|
||||||
|
codeUuid.value = uuid
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getCode()
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const loginRegister = async () => {
|
||||||
|
const formRef = unref(elFormRef)
|
||||||
|
formRef?.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const formData = await getFormData<Omit<IUserModel, 'is_admin'>>()
|
||||||
|
const { result } = await registerApi(
|
||||||
|
Object.assign(cloneDeep(formData), {
|
||||||
|
uuid: codeUuid.value,
|
||||||
|
password: md5(formData.password),
|
||||||
|
check_password: md5(formData.check_password)
|
||||||
|
})
|
||||||
|
)
|
||||||
|
if (result) {
|
||||||
|
ElMessage.success('注册成功')
|
||||||
|
toLogin()
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Form
|
||||||
|
:schema="schema"
|
||||||
|
:rules="rules"
|
||||||
|
label-position="top"
|
||||||
|
hide-required-asterisk
|
||||||
|
size="large"
|
||||||
|
class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
|
||||||
|
@register="register"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<h2 class="text-2xl font-bold text-center w-[100%]">{{ t('login.register') }}</h2>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #code="form">
|
||||||
|
<div class="w-[100%] flex">
|
||||||
|
<ElInput
|
||||||
|
v-model="form['code']"
|
||||||
|
:placeholder="t('login.codePlaceholder')"
|
||||||
|
class="!w-[calc(100%-150px)]"
|
||||||
|
/>
|
||||||
|
<div v-html="codeUrl" class="h-38px cursor-pointer w-150px" @click="getCode"></div>
|
||||||
|
</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="toLogin">
|
||||||
|
{{ t('login.hasUser') }}
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Form>
|
||||||
|
</template>
|
||||||
@ -1,3 +1,4 @@
|
|||||||
import LoginForm from './LoginForm.vue'
|
import LoginForm from './LoginForm.vue'
|
||||||
|
import RegisterForm from './RegisterForm.vue'
|
||||||
|
|
||||||
export { LoginForm }
|
export { LoginForm, RegisterForm }
|
||||||
|
|||||||
Loading…
Reference in New Issue