<template>
  <div class="main-login">
    
    <div class="container-login">
      <img src="@/assets/svgs/logo-white.svg" alt="Odorata">
      <b-form @submit.prevent="sendForm">
        <b-form-group>
          <b-form-input
            v-model="credentials.username"
            type="text"
            required
            placeholder="E-mail ou Código"
          ></b-form-input>
        </b-form-group>

        <b-form-group>
          <b-form-input v-model="credentials.password" 
          type="password" 
          required 
          placeholder="Senha"></b-form-input>

        </b-form-group>
          <b-button type="submit" :disabled="sending"> 
             <b-spinner small type="grow" v-show="sending"></b-spinner>
             Acessar
             </b-button>
      </b-form>

      <div class="text-center text-dark" >
      <a  href="#" @click="recoveryPassword" style="color: #000 !important;"> Esqueci minha senha</a>

      </div>
    </div>
  </div>
</template>

<script>
import { send } from 'q';
export default {
  data() {
    return {
    
      credentials: {
        username: "",
        password: "",
        remember: false
      },
      sending: false,
    };
  },
  methods:{

sendForm(){


   var vm = this;
   this.sending = true;
    this.$store
      .dispatch("loginRequest", this.credentials)
      
      .catch(function(err) {

          vm.$store.commit('pushNotification',{type:'danger',timeout:5,message: "Falha na autenticação. Verifique o usuário e senha."});
       vm.sending = false;
      });
},
recoveryPassword(){
this.$router.push({name: 'Esqueci minha senha'});
}

  },

  mounted(){
    
  }
};
</script>

<style lang="scss" scoped>
@function asset() {
  @return url("~@/assets/background-login.png");
}





.main-login {


  background: linear-gradient(180deg, #FF9B64B3 100%, #FF9B64 0%) 0% 0% no-repeat padding-box, asset() no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  position: relative;
.container-login{

position: relative;

width: 400px;
margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);

img{
  margin-bottom: 80px;
}

  form {
    width: 300px;

    margin: 0 auto;

    input {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 25px;
  height: 50px;

      font: Regular 16px/21px Akkurat;
      letter-spacing: 0;
      color: #ffffff;
    }

    ::placeholder {
      /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #ffffff;
      opacity: 1; /* Firefox */
    }

    button{
    
width: 100%;
height: 50px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 25px;
color: #3A6192;
transition: 0.3s;
&:hover, &:active{
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
    }
  }
}
}
</style>

<style lang="scss">
iframe{

#tawkchat-minified-wrapper{



#tawkchat-minified-container{
  display: none !important;
  background: green ;
 right: -10px !important;
 opacity: 0;
}
}

}
</style>
