<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="sign-login-wrp">
          <!-- users land image -->
          <div class="s-l-left-section">
            <h1>
              Hello, there!<br />
welcome to spotlight
              <!-- Welcome to <br />
              Productgrowth -->
            </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="s-l-right-section">
            <div class="form-layout">
              <form v-on:keyup.enter="signup">
                <h5>Sign Up using</h5>
                <div class="social-login">
                <ul>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
                  </li>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
                  </li>
                  <li>
                    <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
                  </li>
                </ul>
              </div>
                <h5>or Sign Up with Email</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"
                    autocomplete="off"
                    v-model="userData.email"
                  />
                  <label for="inputPassword" class="sr-only">Password</label>
                  <input
                    type="password"
                    id="inputPassword"
                    class="form-control"
                    placeholder="Password"
                    v-model="userData.password"
                  />

                  <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup">
                    <img src="../assets/images/user-plus.svg" /> Create Account
                  </a>
                  <p class="">
                    By signing up I agree to the <a>Privacy Policy</a> and
                    <a>Terms of Service</a>
                  </p>
                  <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3>
                </div>
              </form>
            </div>
          </div>
          <!-- sign up -->
       
      </div>
      <!-- body wrapper -->
    </div>
  </main>
</template>

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

export default {
  name: "SignUp",

  data() {
    return {
      userData: {},
    };
  },
   mounted() {
    // this.$auth.logout();
    // localStorage.removeItem("spotlight_usertoken");
     var userdata = localStorage.getItem("spotlight_usertoken");
    var userId = localStorage.getItem("spotlight_id");

    if (userdata) {
        this.$router.push({
              name: "Profile",
              params: {
                id: userId,
              },
            });
    }
    // localStorage.removeItem("spotlight_email");
  },
  methods: {
     login() {
      this.$auth.loginWithRedirect();
    },
    goToLogin() {
      this.$router.push("/login");
    },
    signup() {
      axios
        .post("/signup", this.userData)
        .then((response) => {
            this.$toaster.success(response.data.message);
          if(response.data.status == 'success'){
            localStorage.setItem('spotlight_email', this.userData.email);
            this.$router.push({ name: 'Otp', params: { flag: false }});
          }
        })
        .catch( (error) =>{
          if (error.response) {
            this.$toaster.error(error.response.data.message);
          }
        });
    },
  },
};
</script>
<style>
.light-font-weight {
  font-weight: 500 !important;
}
</style>
