<template>
  <div>
    <div class="flex items-center justify-center">
      <div class="sm:block">
        <div class="p-5 mx-auto text-left font-raleway">
          <h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
            Recover Your DD-Code Password
          </h1>
          <p v-show="done" class="text-lg text-green-500">Password reset link has been sent to {{ email }}</p>
          <p v-show="error" class="text-lg text-red-500">An error occurred</p>
          <form @submit="forgotPassword">
            <div class="my-4">
              <h1 class="text-left font-bold mb-5 text-xl sm:text-2xl font-montserrat">Email</h1>
              <input type="email" v-model="email" class="text-xl outline-none pb-5 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700">
            </div>

            <button type="submit" class="bg-green-400 p-5 text-white">
              Send Email link <span class="fa fa-arrow-right"/>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let host = require('@/components/js/const').apiHost;

export default {
  name: 'ForgotPassword',

  data() {
    return {
      email: '',
      done: false,
      error: false,
      isDev: process.env.NODE_ENV === 'development',
    }
  },
  methods: {
    async forgotPassword(e) {
      e.preventDefault()

      const vm = this;

      if(vm.isDev) {
        host = require('@/components/js/const').devApiHost;
      }

      this.done = false;
      this.error = false;
      this.axios.post(`${host}/api/auth/forgot-password`, {
        email: this.email
      })
      .then(() => {
        this.done = true
      })
      .catch(e => {
        e;
        this.error = true
      })
    }
  }
}
</script>
<style>
  @import url('~@/assets/bootstrap.css');

  a {
    color: #42b983;
  }
</style>