<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>
         <label for="">Dados para recuperar sua senha</label>
          <b-form-input
            v-model="username"
            type="text"
            required
            placeholder="E-mail ou Código"
           
          ></b-form-input>
        </b-form-group>

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

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

<script>
import ForgotService from "@/services/resources/PasswordService"

const service = ForgotService.build();

export default {
  data() {
    return {
    
      username: "",
      sending: false,
    };
  },
  methods:{

sendForm(){
var vm = this;

this.sending = true;

service.forgotPassword(this.username)
.then(resp => {
    vm.sending = false;
 vm.$fire({
     title: "Siga as instruções enviada para o email cadastrado e crie uma nova senha",
     icon: 'success'
 });
 vm.$router.push({name: "Login"});
})
.catch( err => {
 const resp = JSON.parse(err.response.data);
vm.$fire({
    title: "Não foi possível enviar email para recuperação de senha",
    icon: "warning",
    text: resp.msg
});

    vm.sending = false;

});


},


  },

  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>
