<template>
<!--     <div class="LoginForm">
        <h2>Login</h2>

    </div> -->

    <div id="login_form">
        <div class="holder">
            <div class="logo">
                <img src="assets/images/cms_logo_white.png" alt="">
            </div>

            <div class="content">

                <p class="intro_text">Bitte melde dich mit deinen Benutzerdaten an.</p>

                <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>
        </div>
    </div>
</template>

<script>
import MyForm from "../../components/my-form.vue";

export default {
  name: "LoginForm",
  components: {
      MyForm
  },
  data() {
      return {
          username: "",
          password: "",
          elements: {
              username: {
                  placeholder: "Benutzername",
                  icon: "icon-user",
                  type: "text",
                  required: true
              },
              password: {
                  placeholder: "Passwort",
                  icon: "icon-key",
                  type: "password",
                  required: true
              }
          },
          buttons: [
              {
                  label: "login",
                  type: "submit"
              }
          ]
      }
  },
  methods: {
      login(formData) {
          this.$store.dispatch("login", formData)
            .then(user => {
                console.log("---- user login --------");
                console.log(user);
                this.$router.go(-1);
            })
            .catch(error => {
                console.log("---- login error -------");
                console.log(error);
            });
      }
  }
}
</script>



<style lang="less">
@import "../../mixins";

/*--------------------------------------------------------------
# LOGINBOX
--------------------------------------------------------------*/

#login_form{
    /* Disply on top */
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3000;
    top:0px; left:0px; bottom:0px; right:0px;

    /* Center vertically */
    display: flex;
    justify-content: center;
    align-items: center;


    background: @cms_brand_primary;

    &>.holder {
        position: relative;
        display: block;
        max-width: 380px;
        width: 90%;
        height: auto;
        margin: 0px;
        border-radius: 2px;
        padding: 20px;
    }

    .logo{
        .clearfix();
        line-height:0; margin-bottom:15px; text-align:center;
        img {width:100%; max-width:72px;}
    }

    .content{
        p {text-align:center; color: white; font-size:15px; line-height:1.2;}
    }

    .intro_text{
        font-size:14px!important; margin-bottom:20px; line-height:1.5;
    }

    form{
        text-align: center;
    }

    input{
        height: 40px;
        padding: 0px 15px;
        border-color: transparent;

        &:focus {
            border: solid 1px @gray_dark;
            background: white;
        }
    }
}

/*.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>