mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-07 18:25:45 +08:00
initial commit
This commit is contained in:
projoin
parent
ec65202cb9
commit
6bb66758ba
20
.codesandbox/workspace.json
Normal file
20
.codesandbox/workspace.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"responsive-preview": {
|
||||
"Mobile": [
|
||||
320,
|
||||
675
|
||||
],
|
||||
"Tablet": [
|
||||
1024,
|
||||
765
|
||||
],
|
||||
"Desktop": [
|
||||
1400,
|
||||
800
|
||||
],
|
||||
"Desktop HD": [
|
||||
1920,
|
||||
1080
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,13 @@
|
||||
<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>
|
||||
</div>
|
||||
@ -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,98 +51,115 @@
|
||||
@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 style="position: relative" v-if="false">
|
||||
<div class="tips">
|
||||
<span>Username : admin</span>
|
||||
<span>Password : any</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<span style="margin-right:18px;">Username : editor</span>
|
||||
<span style="margin-right: 18px">Username : editor</span>
|
||||
<span>Password : any</span>
|
||||
</div>
|
||||
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
|
||||
<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>
|
||||
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'
|
||||
import { validUsername } from "@/utils/validate";
|
||||
import SocialSign from "./components/SocialSignin";
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
name: "Login",
|
||||
components: { SocialSign },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
callback(new Error('Please enter the correct user name'))
|
||||
callback(new Error("Please enter the correct user name"));
|
||||
} else {
|
||||
callback()
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value.length < 6) {
|
||||
callback(new Error('The password can not be less than 6 digits'))
|
||||
callback(new Error("The password can not be less than 6 digits"));
|
||||
} else {
|
||||
callback()
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
return {
|
||||
loginForm: {
|
||||
username: 'admin',
|
||||
password: '111111'
|
||||
username: "admin",
|
||||
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',
|
||||
passwordType: "password",
|
||||
capsTooltip: false,
|
||||
loading: false,
|
||||
showDialog: false,
|
||||
redirect: undefined,
|
||||
otherQuery: {}
|
||||
}
|
||||
otherQuery: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler: function(route) {
|
||||
const query = route.query
|
||||
handler: function (route) {
|
||||
const query = route.query;
|
||||
if (query) {
|
||||
this.redirect = query.redirect
|
||||
this.otherQuery = this.getOtherQuery(query)
|
||||
this.redirect = query.redirect;
|
||||
this.otherQuery = this.getOtherQuery(query);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// window.addEventListener('storage', this.afterQRScan)
|
||||
},
|
||||
mounted() {
|
||||
if (this.loginForm.username === '') {
|
||||
this.$refs.username.focus()
|
||||
} else if (this.loginForm.password === '') {
|
||||
this.$refs.password.focus()
|
||||
if (this.loginForm.username === "") {
|
||||
this.$refs.username.focus();
|
||||
} else if (this.loginForm.password === "") {
|
||||
this.$refs.password.focus();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
@ -139,45 +167,49 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
checkCapslock(e) {
|
||||
const { key } = e
|
||||
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
|
||||
const { key } = e;
|
||||
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
||||
},
|
||||
showPwd() {
|
||||
if (this.passwordType === 'password') {
|
||||
this.passwordType = ''
|
||||
if (this.passwordType === "password") {
|
||||
this.passwordType = "";
|
||||
} else {
|
||||
this.passwordType = 'password'
|
||||
this.passwordType = "password";
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.password.focus()
|
||||
})
|
||||
this.$refs.password.focus();
|
||||
});
|
||||
},
|
||||
handleLogin() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
this.$store.dispatch('user/login', this.loginForm)
|
||||
this.loading = true;
|
||||
this.$store
|
||||
.dispatch("user/login", this.loginForm)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
|
||||
this.loading = false
|
||||
this.$router.push({
|
||||
path: this.redirect || "/",
|
||||
query: this.otherQuery,
|
||||
});
|
||||
this.loading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
getOtherQuery(query) {
|
||||
return Object.keys(query).reduce((acc, cur) => {
|
||||
if (cur !== 'redirect') {
|
||||
acc[cur] = query[cur]
|
||||
if (cur !== "redirect") {
|
||||
acc[cur] = query[cur];
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
// afterQRScan() {
|
||||
// if (e.key === 'x-admin-oauth-code') {
|
||||
// const code = getQueryObject(e.newValue)
|
||||
@ -196,16 +228,16 @@ export default {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 修复input 背景不协调 和光标变色 */
|
||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||
|
||||
$bg:#283443;
|
||||
$light_gray:#fff;
|
||||
$bg: #283443;
|
||||
$light_gray: #fff;
|
||||
$cursor: #fff;
|
||||
|
||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||
@ -248,9 +280,9 @@ $cursor: #fff;
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg:#2d3a4b;
|
||||
$dark_gray:#889aa4;
|
||||
$light_gray:#eee;
|
||||
$bg: #2d3a4b;
|
||||
$dark_gray: #889aa4;
|
||||
$light_gray: #eee;
|
||||
|
||||
.login-container {
|
||||
min-height: 100%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user