ForgotPassword.vue

<template>
  <div>
    <base-toaster
      :open="toasterIsOpen"
      @close="hideDialog"
    >
      <div class="flex justify-between space-x-4 items-center">
        <font-awesome-icon
          class="ml-3"
          icon="fa-solid fa-thumbs-up "
          size="lg"
        />

        <h4>Password reset link has been sent to {{ email.val }}.</h4>
        <button
          class="btn btn-outline"
          @click="hideDialog"
        >
          <font-awesome-icon
            icon="fa-regular fa-circle-xmark"
            size="2x"
          />
        </button>
      </div>
    </base-toaster>
    <div class="flex items-center justify-center">
      <div class="sm:block border border-gray-300 rounded-lg mt-6 w-1/3">
        <div class="p-5 mx-auto text-left">
          <h1
            class="
              font-bold
              text-left
              font-montserrat
              text-3xl
              sm:text-5xl
              mb-7
            "
          >
            Recover Your CD-Code Password
          </h1>
          <!-- <p
            v-show="done"
            class="text-lg text-green-500"
          >
            Password reset link has been sent to {{ email }}
          </p> -->

          <form @submit="forgotPassword">
            <div v-if="isLoading">
              <base-spinner />
            </div>
            <div class="my-4">
              <h1
                class="
                  text-left
                  font-bold
                  mb-5
                  text-xl
                  sm:text-2xl
                  font-montserrat
                "
              >
                Email
              </h1>
              <input
                v-model.trim="email.val"
                type="email"
                class="
                  text-xl
                  outline-none
                  w-full
                  bg-transparent
                  border border-gray-400
                  rounded-lg
                  px-4
                  py-5
                  hover:border-blue-700
                  focus:border-blue-700
                "
                placeholder="Enter email address."
                @blur="clearValidity('email')"
              >
              <p
                v-if="!email.isValid"
                class="text-red-500 mt-2"
              >
                Email must not be empty.
              </p>
              <p
                v-show="error"
                class="mt-2 text-red-500"
              >
                {{ errorMsg }}
              </p>
            </div>
           
            <button
              type="submit"
              class="
                bg-blue-500
                my-4
                text-2xl
                w-full
                font-bold
                rounded-lg
                p-5
                text-white
              "
            >
              Send email link
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseSpinner from '../components/UI/BaseSpinner.vue';
import BaseToaster from '../components/UI/BaseToaster.vue';
let host = require('@/components/js/const').apiHost;

export default {
  name: 'ForgotPassword',
  components: { BaseSpinner, BaseToaster },

  data() {
    return {
      email: {
        val: '',
        isValid: true,
      },
      formIsValid: true,
      done: false,
      error: false,
      isDev: process.env.NODE_ENV === 'development',
      isLoading: false,
      toasterIsOpen: false,
      errorMsg: '',
    };
  },
  methods: {
    showDialog() {
      this.toasterIsOpen = true;
    },
    hideDialog() {
      this.toasterIsOpen = false;
      this.$router.push('login');
    },
    clearValidity(input) {
      this[input].isValid = true;
    },
    validateForm() {
      this.formIsValid = true;
      if (this.email.val === '') {
        this.email.isValid = false;
        this.formIsValid = false;
      }
    },
    async forgotPassword(e) {
      e.preventDefault();

      const vm = this;

      vm.validateForm();
      if (!vm.formIsValid) {
        return;
      }

      if (vm.isDev) {
        host = require('@/components/js/const').devApiHost;
      }
      this.isLoading = true;
      this.done = false;
      this.error = false;
      // const res= this.axios.post(`${host}/api/auth/forgot-password`, {
      //   email: this.email.val
      // })
     try{
     const res = await fetch(`${host}/api/auth/forgot-password`, {
        method: 'POST',
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache,
        headers: {
          'Content-Type': 'application/json',
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify({
          email: this.email.val,
        }),
      });
      if(!res.ok){
        this.isLoading = false;
        this.error = true;
        this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin`;

        return;
      }
      if (!res.ok && res.status === 500) {
        this.isLoading = false;
        this.error = true;
        this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin`;

        return;
      }
      if (!res.ok && res.status === 405) {
        this.isLoading = false;
        this.error = true;
        this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin`;

        return;
      }
      const response = await res.json();

      if (
        !res.ok &&
        response.error.status === 400 &&
        response.error.message === 'This email does not exist'
      ) {
        this.isLoading = false;
        this.error = true;
        this.errorMsg =
          'Provided email address is not yet registered with any existing account (User has not signed up yet)';

        return;
      }

      this.isLoading = false;
      this.error= false;
      this.toasterIsOpen = true;
     }catch(err){
       console.log(err);
      this.isLoading = false;
        this.error = true;
        this.errorMsg = `Internal Error, please write a mail to CDCode Admin`;
     }
      
    },
  },
};
</script>
<style scoped>
@import url("~@/assets/bootstrap.css");

a {
  color: #ef0087 !important;
}
</style>