<template>
  <div class="main-bg">
    <div class="left">
      <div class="content_height">
      <img :src="`/images/logo.png`" width="60"> 
      <h1>Reset your password</h1>
      <div class="card-body  px-0">
       <form autocomplete="off" @submit.prevent="requestResetPassword" method="post">
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="text" id="email" class="form-control" placeholder="Enter email" v-model="email">
            <span class="text-danger help-block" v-if="has_error && errors.email">{{ errors.email[0] }}</span>
            
          </div>
          <VueLoadingButton type="submit" aria-label="Send Password Reset Link" class="btn btn-primary 
            btn-imp" :loading="isLoading" :styled="isStyled" >
            Send Password Reset Link
          </VueLoadingButton>
        </form>   
        <div class="mt-4 text-center">
           Or<br> <a :href="`/`">Login</a> 
        </div>
        </div>
      </div>
      <div class="left-footer">
          © Copyright 2020 ArabEasy®. All Rights Reserved.
          <a href="">Privacy Policy</a>
        </div>
    </div>
    <div class="card card-default right" :style="{backgroundImage: `url(images/bg-2.jpg)`}" >
    </div>
  </div>
</template>
<script>
export default {
    data() {
      return {
        email: null,

        has_error: false,
        error: '',
        errors: {},
        isLoading: false,
        isStyled: false,
      }
    },
    methods: {
        requestResetPassword() {
            this.isLoading = true
            this.$http.post("/auth/reset-password", {email: this.email}).then(result => 
            {
              this.has_error = false
              this.error = ''
              this.errors = {}
              this.isLoading = false
              this.response = result.data;
              this.$router.push({name: 'passwordLinkSent'})
            }, error => {
              this.isLoading = false
              this.has_error = true
              this.error = error.response.data.error
              this.errors = error.response.data.errors || {}
            });
        }
    }
}
</script>