<template>
  <main class="landing-page">
    <div class="container-fluid main-wrp">
      <nav class="navbar navbar-expand-sm spotLight-nav">
        <a class="navbar-brand" href="javascript:void(0);"
          ><img src="../assets/images/logo.png"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarsExample03"
          aria-controls="navbarsExample03"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExample03">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="javascript:void(0);">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Masterclass</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Stories</a>
            </li>
            <li class="nav-item spotLight-img">
              <a class="nav-link" href="javascript:void(0);"
                ><img src="../assets/images/SPOTLight.svg"
              /></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:void(0);">Library</a>
            </li>
          </ul>
        </div>
      </nav>
      <!-- menu wrapper -->
      <div class="row col-reverse">
        <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
        <!-- users land image -->
        <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
          <h1>
            <!-- Welcome to <br />
            Productgrowth -->
             Hello, there!<br />
welcome to spotlight
          </h1>
          <ul class="sign-in-up-list">
            <li>
              <img src="../assets/images/check.svg" /><span
                >Collaborate, Contribute and Explore with fellow product enthusiasts</span
              >
            </li>
            <li>
              <img src="../assets/images/check.svg" /><span
                >Get access to insightful Case Studies and participate in Roundtables</span
              >
            </li>
            <li>
              <img src="../assets/images/check.svg" /><span
                >Engage actively on the 
Bounce Board - we’re all ears! 
</span
              >
            </li>
          </ul>
        </div>
        <!-- users land image -->
        <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
          <div class="form-layout signup-frm-spc">
            <form  >
              <h5>
                Forgot password? Enter your Email <br /> ID to retrieve it
              </h5>
              <div class="fill-form">
                <label for="inputEmail" class="sr-only">Email address</label>
                <input
                  type="email"
                  id="inputEmail"
                  class="form-control"
                  placeholder="Your Email ID"
                  v-model="email"
                />

                <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword">
                  <img src="../assets/images/key.svg" /> Reset Password
                </a>

                <h3 class="ft-normal">
                  <span>Go back to </span><a class="cursor-pointer no-underline" @click="goToLogin">Login</a><span> / </span
                  ><a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a>
                </h3>
              </div>
            </form>
          </div>
        </div>
        <!-- sign up -->
      </div>
      <!-- body wrapper -->
    </div>
    <!-- main wrapper -->
  </main>
</template>

<script>
import Vue from "vue";
import router from "../router";
import axios from "axios";

export default {
  name: "Reset",

  data() {
    return {
      email:null,
    };
  },
  mounted() {},
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
    goToSignUp() {
      this.$router.push("/");
    },
    forgotPassword(){
         axios
        .post("/forgotPassword", {'email':this.email,'forgotPassword':true})
        .then((response) => {
           console.log("forgotPassword- response",response)
      
          this.$toaster.success(response.data.message)
          if(response.data.status == 'success'){
            localStorage.setItem('spotlight_email', this.email);
            this.$router.push("/changepassword");
          }
        })
        .catch( (error) =>{
          if (error.response) {
            this.$toaster.error(error.response.data.message)
          }
        });

    }
    
  },
};
</script>
