panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

cleanup login form

Browse Source
This commit is contained in:
Anton Schubert 2017-08-30 13:25:13 +02:00
parent 60dc5e2603
commit 934376e66a
1 changed files with 31 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/forms/login.vue
View File

@ -1,39 +1,15 @@
<template> <template>
<!-- <div class="LoginForm">
<h2>Login</h2>
</div> -->
<div id="login_form"> <div id="login_form">
<div class="holder"> <div class="holder">
<div class="logo"> <div class="logo">
<img src="assets/images/cms_logo_white.png" alt=""> <img src="assets/images/cms_logo_white.png" valid-v-on:foo="bar" alt="">
</div> </div>
<div class="content"> <div class="content">
<p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p> <p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>
<my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form> <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
<!-- <form class="login_form" action="index.php" method="post">
<div class="login_input login_user">
<input required="required" placeholder="Benutzername" type="text" name="user" />
</div>
<div class="login_input login_pw">
<input required="required" placeholder="Passwort" type="password" name="passwort" />
</div>
<div class="login_input login_submit">
<input type="submit" name="submit_login" value="Anmelden" class="submit" />
</div>
</form> -->
<!-- <div class="login_error">
<p>Login fehlgeschlagen.</p>
</div> -->
<div style="clear:both;"></div> <div style="clear:both;"></div>
</div> </div>
</div> </div>
@ -41,39 +17,37 @@
</template> </template>
<script> <script>
import MyForm from "../../components/my-form.vue"; import MyForm from "components/my-form";
export default { export default {
name: "LoginForm", name: "LoginForm",
components: { components: {
MyForm MyForm
}, },
data() { data() {
return { return {
username: "", username: "",
password: "", password: "",
elements: { elements: {
username: { username: {
placeholder: "Benutzername", placeholder: "Benutzername",
icon: "icon-user", icon: "icon-user",
type: "text", type: "text",
required: true required: true
}, },
password: { password: {
placeholder: "Passwort", placeholder: "Passwort",
icon: "icon-key", icon: "icon-key",
type: "password", type: "password",
required: true required: true
} }
}, },
buttons: [ buttons: [{
{ label: "login",
label: "login", type: "submit"
type: "submit" }]
} }
] },
}
},
methods: { methods: {
login(formData) { login(formData) {
this.$store.dispatch("login", formData) this.$store.dispatch("login", formData)
@ -91,15 +65,12 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
@import "../../mixins"; @import "~mixins";
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# LOGINBOX # LOGINBOX
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#login_form{ #login_form{
/* Disply on top */ /* Disply on top */
position: fixed; position: fixed;
@ -156,60 +127,4 @@ export default {
} }
} }
} }
/*.login_input {
margin-bottom:10px;
border:none;
height:40px;
position:relative;
}
.login_input:before {
}
.login_form {
text-align:center;
}
.login_user:before {content:"\f007";}
.login_pw:before {content:"\f084";}
.login_submit {
width:auto;
margin:0 auto;
display:inline-block;
margin-top:10px;
}
.login_submit:before {content:"\f090"; left:15px; top:6px;}
.login_input input {
border:none;
background:none;
height:40px;
width:100%;
padding: 0px 10px 0px 35px;
background:#f4f4f4;
border:solid 1px #FFF;
}
.loginbox_content .login_input input:focus {border:solid 1px #152129; background:#FFF;}
.login_form input[type="submit"] {
height:40px;
background:#152129;
border:none;
color:#FFF;
cursor:pointer;
text-transform:uppercase;
width:auto;
margin:0px auto 0 auto;
padding: 0px 20px 0px 40px;
border-radius:20px;
}
.login_form input[type="submit"]:hover {
background:#1f3441;
}
.login_error {
display:block;
text-align:center;
color:#FFF;
line-height:1.2;
margin-top:20px;
}*/
/*.login_error p {text-transform:uppercase; display:inline-block; background:#c70e00; padding:5px; font-weight:600; font-size:14px;}*/
</style> </style>