mirror of
https://github.com/veops/cmdb.git
synced 2025-10-20 17:29:21 +08:00
Modify code organization
This commit is contained in:
pycook
210
cmdb-ui/src/views/user/Login.vue
Normal file
210
cmdb-ui/src/views/user/Login.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<a-form
|
||||
id="formLogin"
|
||||
class="user-layout-login"
|
||||
ref="formLogin"
|
||||
:form="form"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<a-tabs
|
||||
:activeKey="customActiveKey"
|
||||
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
||||
@change="handleTabClick"
|
||||
>
|
||||
<a-tab-pane key="tab1" tab="账号密码登录">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="用户名或者邮箱"
|
||||
v-decorator="[
|
||||
'username',
|
||||
{rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="密码"
|
||||
v-decorator="[
|
||||
'password',
|
||||
{rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
|
||||
]"
|
||||
>
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-form-item>
|
||||
<a-checkbox v-decorator="['rememberMe']">自动登录</a-checkbox>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item style="margin-top:24px">
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
class="login-button"
|
||||
:loading="state.loginBtn"
|
||||
:disabled="state.loginBtn"
|
||||
>确定</a-button>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import md5 from 'md5'
|
||||
import { mapActions } from 'vuex'
|
||||
import { timeFix } from '@/utils/util'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
customActiveKey: 'tab1',
|
||||
loginBtn: false,
|
||||
// login type: 0 email, 1 username, 2 telephone
|
||||
loginType: 0,
|
||||
requiredTwoStepCaptcha: false,
|
||||
stepCaptchaVisible: false,
|
||||
form: this.$form.createForm(this),
|
||||
state: {
|
||||
time: 60,
|
||||
loginBtn: false,
|
||||
// login type: 0 email, 1 username, 2 telephone
|
||||
loginType: 0,
|
||||
smsSendBtn: false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['Login', 'Logout']),
|
||||
// handler
|
||||
handleUsernameOrEmail (rule, value, callback) {
|
||||
const { state } = this
|
||||
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
|
||||
if (regex.test(value)) {
|
||||
state.loginType = 0
|
||||
} else {
|
||||
state.loginType = 1
|
||||
}
|
||||
callback()
|
||||
},
|
||||
handleTabClick (key) {
|
||||
this.customActiveKey = key
|
||||
// this.form.resetFields()
|
||||
},
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
const {
|
||||
form: { validateFields },
|
||||
state,
|
||||
customActiveKey,
|
||||
Login
|
||||
} = this
|
||||
|
||||
state.loginBtn = true
|
||||
|
||||
const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']
|
||||
|
||||
validateFields(validateFieldsKey, { force: true }, (err, values) => {
|
||||
if (!err) {
|
||||
const loginParams = { ...values }
|
||||
delete loginParams.username
|
||||
loginParams[!state.loginType ? 'email' : 'username'] = values.username
|
||||
loginParams.password = md5(values.password)
|
||||
Login(loginParams)
|
||||
.then((res) => this.loginSuccess(res))
|
||||
.catch(err => this.requestFailed(err))
|
||||
.finally(() => {
|
||||
state.loginBtn = false
|
||||
})
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
state.loginBtn = false
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
loginSuccess (res) {
|
||||
this.$router.push({ path: this.$route.query.redirect })
|
||||
// 延迟 1 秒显示欢迎信息
|
||||
setTimeout(() => {
|
||||
this.$notification.success({
|
||||
message: '欢迎',
|
||||
description: `${timeFix()}，欢迎回来`
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
requestFailed (err) {
|
||||
this.$notification['error']({
|
||||
message: '错误',
|
||||
description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
|
||||
duration: 4
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.user-layout-login {
|
||||
label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.forge-password {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button.login-button {
|
||||
padding: 0 15px;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-login-other {
|
||||
text-align: left;
|
||||
margin-top: 24px;
|
||||
line-height: 22px;
|
||||
|
||||
.item-icon {
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
margin-left: 16px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.register {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
cmdb-ui/src/views/user/Register.vue
Normal file
322
cmdb-ui/src/views/user/Register.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="main user-layout-register">
|
||||
<h3><span>注册</span></h3>
|
||||
<a-form ref="formRegister" :form="form" id="formRegister">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="text"
|
||||
placeholder="邮箱"
|
||||
v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-popover
|
||||
placement="rightTop"
|
||||
:trigger="['focus']"
|
||||
:getPopupContainer="(trigger) => trigger.parentElement"
|
||||
v-model="state.passwordLevelChecked">
|
||||
<template slot="content">
|
||||
<div :style="{ width: '240px' }" >
|
||||
<div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
|
||||
<a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
|
||||
<div style="margin-top: 10px;">
|
||||
<span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="password"
|
||||
@click="handlePasswordInputClick"
|
||||
autocomplete="false"
|
||||
placeholder="至少6位密码，区分大小写"
|
||||
v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-popover>
|
||||
|
||||
<a-form-item>
|
||||
<a-input
|
||||
size="large"
|
||||
type="password"
|
||||
autocomplete="false"
|
||||
placeholder="确认密码"
|
||||
v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
|
||||
<a-select slot="addonBefore" size="large" defaultValue="+86">
|
||||
<a-select-option value="+86">+86</a-select-option>
|
||||
<a-select-option value="+87">+87</a-select-option>
|
||||
</a-select>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!--<a-input-group size="large" compact>
|
||||
<a-select style="width: 20%" size="large" defaultValue="+86">
|
||||
<a-select-option value="+86">+86</a-select-option>
|
||||
<a-select-option value="+87">+87</a-select-option>
|
||||
</a-select>
|
||||
<a-input style="width: 80%" size="large" placeholder="11 位手机号"></a-input>
|
||||
</a-input-group>-->
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col class="gutter-row" :span="16">
|
||||
<a-form-item>
|
||||
<a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
|
||||
<a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="8">
|
||||
<a-button
|
||||
class="getCaptcha"
|
||||
size="large"
|
||||
:disabled="state.smsSendBtn"
|
||||
@click.stop.prevent="getCaptcha"
|
||||
v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
class="register-button"
|
||||
:loading="registerBtn"
|
||||
@click.stop.prevent="handleSubmit"
|
||||
:disabled="registerBtn">注册
|
||||
</a-button>
|
||||
<router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mixinDevice } from '@/utils/mixin.js'
|
||||
import { getSmsCaptcha } from '@/api/login'
|
||||
|
||||
const levelNames = {
|
||||
0: '低',
|
||||
1: '低',
|
||||
2: '中',
|
||||
3: '强'
|
||||
}
|
||||
const levelClass = {
|
||||
0: 'error',
|
||||
1: 'error',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
}
|
||||
const levelColor = {
|
||||
0: '#ff0000',
|
||||
1: '#ff0000',
|
||||
2: '#ff7e05',
|
||||
3: '#52c41a'
|
||||
}
|
||||
export default {
|
||||
name: 'Register',
|
||||
components: {
|
||||
},
|
||||
mixins: [mixinDevice],
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
|
||||
state: {
|
||||
time: 60,
|
||||
smsSendBtn: false,
|
||||
passwordLevel: 0,
|
||||
passwordLevelChecked: false,
|
||||
percent: 10,
|
||||
progressColor: '#FF0000'
|
||||
},
|
||||
registerBtn: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
passwordLevelClass () {
|
||||
return levelClass[this.state.passwordLevel]
|
||||
},
|
||||
passwordLevelName () {
|
||||
return levelNames[this.state.passwordLevel]
|
||||
},
|
||||
passwordLevelColor () {
|
||||
return levelColor[this.state.passwordLevel]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePasswordLevel (rule, value, callback) {
|
||||
let level = 0
|
||||
|
||||
// 判断这个字符串中有没有数字
|
||||
if (/[0-9]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
// 判断字符串中有没有字母
|
||||
if (/[a-zA-Z]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
// 判断字符串中有没有特殊符号
|
||||
if (/[^0-9a-zA-Z_]/.test(value)) {
|
||||
level++
|
||||
}
|
||||
this.state.passwordLevel = level
|
||||
this.state.percent = level * 30
|
||||
if (level >= 2) {
|
||||
if (level >= 3) {
|
||||
this.state.percent = 100
|
||||
}
|
||||
callback()
|
||||
} else {
|
||||
if (level === 0) {
|
||||
this.state.percent = 10
|
||||
}
|
||||
callback(new Error('密码强度不够'))
|
||||
}
|
||||
},
|
||||
|
||||
handlePasswordCheck (rule, value, callback) {
|
||||
const password = this.form.getFieldValue('password')
|
||||
console.log('value', value)
|
||||
if (value === undefined) {
|
||||
callback(new Error('请输入密码'))
|
||||
}
|
||||
if (value && password && value.trim() !== password.trim()) {
|
||||
callback(new Error('两次密码不一致'))
|
||||
}
|
||||
callback()
|
||||
},
|
||||
|
||||
handlePhoneCheck (rule, value, callback) {
|
||||
console.log('handlePhoneCheck, rule:', rule)
|
||||
console.log('handlePhoneCheck, value', value)
|
||||
console.log('handlePhoneCheck, callback', callback)
|
||||
|
||||
callback()
|
||||
},
|
||||
|
||||
handlePasswordInputClick () {
|
||||
if (!this.isMobile()) {
|
||||
this.state.passwordLevelChecked = true
|
||||
return
|
||||
}
|
||||
this.state.passwordLevelChecked = false
|
||||
},
|
||||
|
||||
handleSubmit () {
|
||||
const { form: { validateFields }, state, $router } = this
|
||||
validateFields({ force: true }, (err, values) => {
|
||||
if (!err) {
|
||||
state.passwordLevelChecked = false
|
||||
$router.push({ name: 'registerResult', params: { ...values } })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getCaptcha (e) {
|
||||
e.preventDefault()
|
||||
const { form: { validateFields }, state, $message, $notification } = this
|
||||
|
||||
validateFields(['mobile'], { force: true },
|
||||
(err, values) => {
|
||||
if (!err) {
|
||||
state.smsSendBtn = true
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
if (state.time-- <= 0) {
|
||||
state.time = 60
|
||||
state.smsSendBtn = false
|
||||
window.clearInterval(interval)
|
||||
}
|
||||
}, 1000)
|
||||
|
||||
const hide = $message.loading('验证码发送中..', 0)
|
||||
|
||||
getSmsCaptcha({ mobile: values.mobile }).then(res => {
|
||||
setTimeout(hide, 2500)
|
||||
$notification['success']({
|
||||
message: '提示',
|
||||
description: '验证码获取成功，您的验证码为：' + res.result.captcha,
|
||||
duration: 8
|
||||
})
|
||||
}).catch(err => {
|
||||
setTimeout(hide, 1)
|
||||
clearInterval(interval)
|
||||
state.time = 60
|
||||
state.smsSendBtn = false
|
||||
this.requestFailed(err)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
requestFailed (err) {
|
||||
this.$notification['error']({
|
||||
message: '错误',
|
||||
description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
|
||||
duration: 4
|
||||
})
|
||||
this.registerBtn = false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'state.passwordLevel' (val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.user-register {
|
||||
|
||||
&.error {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #ff7e05;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.user-layout-register {
|
||||
.ant-input-group-addon:first-child {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.user-layout-register {
|
||||
|
||||
& > h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.getCaptcha {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.login {
|
||||
float: right;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
cmdb-ui/src/views/user/RegisterResult.vue
Normal file
50
cmdb-ui/src/views/user/RegisterResult.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<result
|
||||
:isSuccess="true"
|
||||
:content="false"
|
||||
:title="email"
|
||||
:description="description">
|
||||
|
||||
<template slot="action">
|
||||
<a-button size="large" type="primary">查看邮箱</a-button>
|
||||
<a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
|
||||
</template>
|
||||
|
||||
</result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Result } from '@/components'
|
||||
|
||||
export default {
|
||||
name: 'RegisterResult',
|
||||
components: {
|
||||
Result
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
|
||||
form: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
email () {
|
||||
const v = this.form && this.form.email || 'xxx'
|
||||
const title = `你的账户：${v} 注册成功`
|
||||
return title
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.form = this.$route.params
|
||||
},
|
||||
methods: {
|
||||
goHomeHandle () {
|
||||
this.$router.push({ name: 'login' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user