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 '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 RegisterForm from './RegisterForm.vue'
|
||||
|
||||
export { LoginForm }
|
||||
export { LoginForm, RegisterForm }
|
||||
|
||||
Loading…
Reference in New Issue