<template>
  <main id="main" style="padding-top: 10px; padding-bottom: 50px;">
    <div class="container">
      <div class="form">
        <div class="row">
          <div class="col">
            <div class="section-header">
              <h2>Forgot Password</h2>
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <div class="col">
            <alert :text="errorMessage" :type="errorOccurred" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <float-label label="Email" style="width: 100%;">
              <input
                type="email"
                id="email"
                name="email"
                placeholder="Email"
                class="form-control uniInput"
                v-model="email"
                v-bind:class="{
                  'is-valid': email,
                  'is-invalid': !validEmail(email) && emailLoad,
                }"
                v-on:keyup="emailLoad = true"
                v-on:blur="emailLoad = true"
                required
                icon
              />
              <div class="invalid-feedback">Valid Email is required!</div>
            </float-label>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col-md-6">
            <button class="btn-white-border" @click="checkMail()">SEND</button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
/* eslint-disable */
import { mapActions } from 'vuex'
import alert from '../shared/alert'

export default {
  components: {
    alert,
  },
  data() {
    return {
      email: '',
      emailLoad: false,
      errorOccurred: '',
      errorMessage: '',
    }
  },
  methods: {
    ...mapActions('register', ['forgotPasswordCheck']),
    checkMail() {
      if (this.email) {
        console.log(this.email)
        this.forgotPasswordCheck(this.email)
          .then(() => {
            this.errorMessage =
              'An email has been sent with instructions to reset your password.'
            this.errorOccurred = 'SUCCESS'
          })
          .catch((err) => {
            //console.log(err);
            this.errorOccurred = 'ERROR'
            this.errorMessage = 'Server Error: CONNECTION_REFUSED'
            if (err.status) {
              if (err.data.message) {
                this.errorMessage = err.data.message
              } else {
                this.errorMessage = 'Email address not found!'
              }
            }
          })
      } else {
        this.errorMessage = 'A valid email is required.'
        this.errorOccurred = 'ERROR'
      }
    },
    validEmail: function (email) {
      var re = /(.+)@(.+){2,}\.(.+){2,}/
      if (email) {
        return re.test(email.toLowerCase())
      } else {
        return re.test(email)
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
