<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="">Digite sua nova senha</label>
          <b-form-input
            v-model="password"
            type="password"
            required
            placeholder="Nova senha"
           
          ></b-form-input>
        </b-form-group>
        <b-form-group>
           <b-form-input
            v-model="password_confirm"
            type="password"
            required
            placeholder="confirmar senha"
           
          ></b-form-input>
        </b-form-group>
<p v-if="validate && password.length < 6" class="text center text-danger">
    Senha muito curta
</p>

<p v-if="validate && !isValid" class="text center text-danger">
Senha não conferem
</p>
        
          <b-button type="submit" :disabled="sending"> 
             <b-spinner small type="grow" v-show="sending"></b-spinner>
            Alterar Senha
             </b-button>
      </b-form>

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

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

const service = ForgotService.build();

export default {
    props:['token','email'],
  data() {
    return {
    
      password:'',
      password_confirm: '',
      sending: false,
      validate: false
    };
  },
  computed:{
      isValid(){

if(this.password.length < 6){
    return false;
}

if(this.password != this.password_confirm){
return false;
}


          return true;
      }
  },
  methods:{

sendForm(){

    this.validate = true;

if(!this.isValid){
return;
}

this.sending = true;
var vm = this;

service.newPassword({
    email: this.$route.params.email,
    token: this.$route.params.token,
    password: this.password,
    password_confirm: this.password_confirm
})
.then(resp => {
    vm.sending = false;
 vm.$fire({
     title: "Senha alterada com sucesso",
     icon: 'success'
 });
 vm.$router.push({name: "Login"});
})
.catch( err => {
 const resp = JSON.parse(err.response.data);
vm.$fire({
    title: "Senha não alterada",
    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>
