viithiisys / spotlight-frontend

Download as
Browse Code »

Commit c386933df62971eefffc2d1f5e1a0e344a911f9c

Authored by Digvijay Singh
1 parent 2991bacc1d
Exists in master

login with email flow

Showing 1 changed file with 8 additions and 3 deletions   Show diff stats
src/components/LandingPage.vue
Diff comments   View file @c386933
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid main-wrp"> 3 <div class="container-fluid main-wrp">
4 <nav class="navbar navbar-expand-sm spotLight-nav"> 4 <nav class="navbar navbar-expand-sm spotLight-nav">
5 <a class="navbar-brand" href="javascript:void(0);" 5 <a class="navbar-brand" href="javascript:void(0);"
6 ><img src="../assets/images/logo.png" 6 ><img src="../assets/images/logo.png"
7 /></a> 7 /></a>
8 <button 8 <button
9 class="navbar-toggler" 9 class="navbar-toggler"
10 type="button" 10 type="button"
11 data-toggle="collapse" 11 data-toggle="collapse"
12 data-target="#navbarsExample03" 12 data-target="#navbarsExample03"
13 aria-controls="navbarsExample03" 13 aria-controls="navbarsExample03"
14 aria-expanded="false" 14 aria-expanded="false"
15 aria-label="Toggle navigation" 15 aria-label="Toggle navigation"
16 > 16 >
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 </button> 20 </button>
21 21
22 <div class="collapse navbar-collapse" id="navbarsExample03"> 22 <div class="collapse navbar-collapse" id="navbarsExample03">
23 <ul class="navbar-nav mr-auto"> 23 <ul class="navbar-nav mr-auto">
24 <li class="nav-item active"> 24 <li class="nav-item active">
25 <a class="nav-link" href="javascript:void(0);">About</a> 25 <a class="nav-link" href="javascript:void(0);">About</a>
26 </li> 26 </li>
27 <li class="nav-item"> 27 <li class="nav-item">
28 <a class="nav-link" href="javascript:void(0);">Masterclass</a> 28 <a class="nav-link" href="javascript:void(0);">Masterclass</a>
29 </li> 29 </li>
30 <li class="nav-item"> 30 <li class="nav-item">
31 <a class="nav-link" href="javascript:void(0);">Stories</a> 31 <a class="nav-link" href="javascript:void(0);">Stories</a>
32 </li> 32 </li>
33 <li class="nav-item spotLight-img"> 33 <li class="nav-item spotLight-img">
34 <a class="nav-link" href="javascript:void(0);" 34 <a class="nav-link" href="javascript:void(0);"
35 ><img src="../assets/images/SPOTLight.svg" 35 ><img src="../assets/images/SPOTLight.svg"
36 /></a> 36 /></a>
37 </li> 37 </li>
38 <li class="nav-item"> 38 <li class="nav-item">
39 <a class="nav-link" href="javascript:void(0);">Library</a> 39 <a class="nav-link" href="javascript:void(0);">Library</a>
40 </li> 40 </li>
41 </ul> 41 </ul>
42 </div> 42 </div>
43 </nav> 43 </nav>
44 <!-- menu wrapper --> 44 <!-- menu wrapper -->
45 <div class="sign-login-wrp"> 45 <div class="sign-login-wrp">
46 <!-- users land image --> 46 <!-- users land image -->
47 <div class="s-l-left-section"> 47 <div class="s-l-left-section">
48 <h1 class="welcome-hd-back">we’re stoked you’re back!</h1> 48 <h1 class="welcome-hd-back">we’re stoked you’re back!</h1>
49 </div> 49 </div>
50 <!-- users land image --> 50 <!-- users land image -->
51 <div class="s-l-right-section"> 51 <div class="s-l-right-section">
52 <div class="form-layout"> 52 <div class="form-layout">
53 <form v-on:keyup.enter="loginWIthEmail"> 53 <form v-on:keyup.enter="loginWIthEmail">
54 <h5>Log In using</h5> 54 <h5>Log In using</h5>
55 <div class="social-login"> 55 <div class="social-login">
56 <ul> 56 <ul>
57 <li> 57 <li>
58 <a @click="login" class="cursor-pointer" 58 <a @click="login" class="cursor-pointer"
59 ><img src="../assets/images/google.svg" 59 ><img src="../assets/images/google.svg"
60 /></a> 60 /></a>
61 </li> 61 </li>
62 <li> 62 <li>
63 <a @click="login" class="cursor-pointer" 63 <a @click="login" class="cursor-pointer"
64 ><img src="../assets/images/linkdin.svg" 64 ><img src="../assets/images/linkdin.svg"
65 /></a> 65 /></a>
66 </li> 66 </li>
67 <li> 67 <li>
68 <a @click="login" class="cursor-pointer" 68 <a @click="login" class="cursor-pointer"
69 ><img src="../assets/images/twitter.svg" 69 ><img src="../assets/images/twitter.svg"
70 /></a> 70 /></a>
71 </li> 71 </li>
72 </ul> 72 </ul>
73 </div> 73 </div>
74 <h5>or Log In with email</h5> 74 <h5>or Log In with email</h5>
75 <div class="fill-form"> 75 <div class="fill-form">
76 <label for="inputEmail" class="sr-only">Email address</label> 76 <label for="inputEmail" class="sr-only">Email address</label>
77 <input 77 <input
78 type="email" 78 type="email"
79 id="inputEmail" 79 id="inputEmail"
80 class="form-control" 80 class="form-control"
81 placeholder="Your Email ID" 81 placeholder="Your Email ID"
82 v-model="userData.email" 82 v-model="userData.email"
83 /> 83 />
84 <label for="inputPassword" class="sr-only">Password</label> 84 <label for="inputPassword" class="sr-only">Password</label>
85 <input 85 <input
86 type="password" 86 type="password"
87 id="inputPassword" 87 id="inputPassword"
88 class="form-control" 88 class="form-control"
89 placeholder="Password" 89 placeholder="Password"
90 v-model="userData.password" 90 v-model="userData.password"
91 /> 91 />
92 92
93 <a 93 <a
94 href="javascript:void(0);" 94 href="javascript:void(0);"
95 class="btn btn-lg sb-button" 95 class="btn btn-lg sb-button"
96 type="submit" 96 type="submit"
97 @click="loginWIthEmail" 97 @click="loginWIthEmail"
98 > 98 >
99 <img src="../assets/images/key.svg" /> Log In to your account 99 <img src="../assets/images/key.svg" /> Log In to your account
100 </a> 100 </a>
101 <p class="forget-pass light-font-weight"> 101 <p class="forget-pass light-font-weight">
102 Forgot Password? 102 Forgot Password?
103 <a class="cursor-pointer light-font-weight" @click="goToReset" 103 <a class="cursor-pointer light-font-weight" @click="goToReset"
104 >Reset</a 104 >Reset</a
105 > 105 >
106 </p> 106 </p>
107 <h3 class="ft-normal"> 107 <h3 class="ft-normal">
108 Don’t have an account? 108 Don’t have an account?
109 <a class="cursor-pointer no-underline" @click="goToSignUp" 109 <a class="cursor-pointer no-underline" @click="goToSignUp"
110 >SignUp</a 110 >SignUp</a
111 > 111 >
112 </h3> 112 </h3>
113 </div> 113 </div>
114 </form> 114 </form>
115 </div> 115 </div>
116 </div> 116 </div>
117 <!-- sign up --> 117 <!-- sign up -->
118 </div> 118 </div>
119 <!-- body wrapper --> 119 <!-- body wrapper -->
120 </div> 120 </div>
121 </main> 121 </main>
122 </template> 122 </template>
123 123
124 <script> 124 <script>
125 import Vue from "vue"; 125 import Vue from "vue";
126 import router from "../router"; 126 import router from "../router";
127 import $ from "jquery"; 127 import $ from "jquery";
128 import axios from "axios"; 128 import axios from "axios";
129 129
130 export default { 130 export default {
131 name: "LandingPage", 131 name: "LandingPage",
132 132
133 data() { 133 data() {
134 return { 134 return {
135 loggedinFlag: false, 135 loggedinFlag: false,
136 userData: {}, 136 userData: {},
137 }; 137 };
138 }, 138 },
139 mounted() { 139 mounted() {
140 // this.$auth.logout(); 140 // this.$auth.logout();
141 // localStorage.removeItem("spotlight_usertoken"); 141 // localStorage.removeItem("spotlight_usertoken");
142 // localStorage.removeItem("spotlight_email"); 142 // localStorage.removeItem("spotlight_email");
143 var userdata = localStorage.getItem("spotlight_usertoken"); 143 var userdata = localStorage.getItem("spotlight_usertoken");
144 var userid = localStorage.getItem("spotlight_id"); 144 var userid = localStorage.getItem("spotlight_id");
145 if (userdata) { 145 if (userdata && userid) {
146 // this.$router.push("/profile"); 146 // this.$router.push("/profile");
147 this.$router.push({ 147 this.$router.push({
148 name: "Profile", 148 name: "Profile",
149 params: { 149 params: {
150 id: userid, 150 id: userid,
151 }, 151 },
152 }); 152 });
153 } 153 }
154 }, 154 },
155 methods: { 155 methods: {
156 login() { 156 login() {
157 this.$auth.loginWithRedirect(); 157 this.$auth.loginWithRedirect();
158 }, 158 },
159 goToSignUp() { 159 goToSignUp() {
160 this.$router.push("/"); 160 this.$router.push("/");
161 }, 161 },
162 goToReset() { 162 goToReset() {
163 this.$router.push("/reset"); 163 this.$router.push("/reset");
164 }, 164 },
165 loginWIthEmail() { 165 loginWIthEmail() {
166 axios 166 axios
167 .post("/login", this.userData) 167 .post("/login", this.userData)
168 .then((response) => { 168 .then((response) => {
169 console.log("login- response", response); 169 console.log("login- response", response);
170 this.$toaster.success(response.data.message); 170 this.$toaster.success(response.data.message);
171 if (response.data.status == "success") { 171 if (response.data.status == "success") {
172 console.log("--1-")
172 localStorage.setItem( 173 localStorage.setItem(
173 "spotlight_usertoken", 174 "spotlight_usertoken",
174 JSON.stringify(response.data.data) 175 JSON.stringify(response.data.data)
175 ); 176 );
176 localStorage.setItem("spotlight_id", res.data.data.id); 177 console.log("--2-")
178
179 localStorage.setItem("spotlight_id", response.data.data.id);
180 console.log("--3-")
181
177 this.$router.push({ 182 this.$router.push({
178 name: "Profile", 183 name: "Profile",
179 params: { 184 params: {
180 id: res.data.data.id, 185 id: response.data.data.id,
181 }, 186 },
182 }); 187 });
183 } 188 }
184 }) 189 })
185 .catch((error) => { 190 .catch((error) => {
186 if (error.response) { 191 if (error.response) {
187 this.$toaster.error(error.response.data.message); 192 this.$toaster.error(error.response.data.message);
188 if (error.response.data.message == "Email Not Verified") { 193 if (error.response.data.message == "Email Not Verified") {
189 localStorage.setItem("spotlight_email", this.userData.email); 194 localStorage.setItem("spotlight_email", this.userData.email);
190 this.$router.push({ name: "Otp", params: { flag: true } }); 195 this.$router.push({ name: "Otp", params: { flag: true } });
191 } 196 }
192 } 197 }
193 }); 198 });
194 }, 199 },
195 }, 200 },
196 }; 201 };
197 </script> 202 </script>
198 <style> 203 <style>
199 .light-font-weight { 204 .light-font-weight {
200 font-weight: 500 !important; 205 font-weight: 500 !important;
201 } 206 }
202 .no-underline { 207 .no-underline {
203 text-decoration: none; 208 text-decoration: none;
204 } 209 }
205 </style> 210 </style>
206 211