add user user

This commit is contained in:
Lukas Bachschwell 2019-12-03 23:03:26 +01:00
parent 56e17d0f9b
commit ab21b2f809
3 changed files with 55 additions and 34 deletions

View File

@ -5,15 +5,18 @@ const tokens = {
},
editor: {
token: 'editor-token'
},
user: {
token: 'editor-token'
}
}
const users = {
'admin-token': {
roles: ['admin'],
introduction: 'I am a super administrator',
introduction: 'Projektmanager bei RedBull',
avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
name: 'Super Admin'
name: 'Julia Krammer'
},
'editor-token': {
roles: ['editor'],

View File

@ -15,7 +15,7 @@ export function isExternal(path) {
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
const valid_map = ['admin', 'editor', 'user']
return valid_map.indexOf(str.trim()) >= 0
}

View File

@ -1,9 +1,15 @@
<template>
<div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container">
<h3 class="title">Login Form</h3>
<h3 class="title">Join Login</h3>
</div>
<el-form-item prop="username">
@ -21,7 +27,12 @@
/>
</el-form-item>
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-tooltip
v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual
>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
@ -40,14 +51,22 @@
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
<svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span>
</el-form-item>
</el-tooltip>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
<el-button
:loading="loading"
type="primary"
style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin"
>Login</el-button>
<div style="position:relative">
<!--
<div class="tips">
<span>Username : admin</span>
<span>Password : any</span>
@ -56,30 +75,18 @@
<span style="margin-right:18px;">Username : editor</span>
<span>Password : any</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
Or connect with
</el-button>
-->
</div>
</el-form>
<el-dialog title="Or connect with" :visible.sync="showDialog">
Can not be simulated on local, so please combine you own business simulation! ! !
<br>
<br>
<br>
<social-sign />
</el-dialog>
</div>
</template>
<script>
import { validUsername } from '@/utils/validate'
import SocialSign from './components/SocialSignin'
export default {
name: 'Login',
components: { SocialSign },
components: { },
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
@ -97,12 +104,16 @@ export default {
}
return {
loginForm: {
username: 'admin',
username: 'user',
password: '111111'
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
username: [
{ required: true, trigger: 'blur', validator: validateUsername }
],
password: [
{ required: true, trigger: 'blur', validator: validatePassword }
]
},
passwordType: 'password',
capsTooltip: false,
@ -140,7 +151,10 @@ export default {
methods: {
checkCapslock({ shiftKey, key } = {}) {
if (key && key.length === 1) {
if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
if (
(shiftKey && key >= 'a' && key <= 'z') ||
(!shiftKey && key >= 'A' && key <= 'Z')
) {
this.capsTooltip = true
} else {
this.capsTooltip = false
@ -164,9 +178,13 @@ export default {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm)
this.$store
.dispatch('user/login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.$router.push({
path: this.redirect || '/',
query: this.otherQuery
})
this.loading = false
})
.catch(() => {