viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 5684145ce669c28f5c24b6d037796825ce48f6f0

Authored by Digvijay Singh
1 parent 24ced0ae79
Exists in master and in 1 other branch admin

reset password,otp and dynamic profile page added

Showing 11 changed files with 912 additions and 255 deletions   Show diff stats
package-lock.json
Diff comments   View file @5684145
... ... @@ -21098,6 +21098,11 @@
21098 21098 "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
21099 21099 "dev": true
21100 21100 },
  21101 + "v-toaster": {
  21102 + "version": "1.0.3",
  21103 + "resolved": "https://registry.npmjs.org/v-toaster/-/v-toaster-1.0.3.tgz",
  21104 + "integrity": "sha512-B+yhvuUDiYykh1g4jgAKTRmnrJa4vrc+O1+/A57HSl4rA3R7OX0+8GGz2kr3eZ9YKkpaRlew9zWSjtksVa0+Bg=="
  21105 + },
21101 21106 "validate-npm-package-license": {
21102 21107 "version": "3.0.4",
21103 21108 "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
... ...
... ... @@ -24,6 +24,7 @@
24 24 "moment": "^2.29.1",
25 25 "popper.js": "^1.16.0",
26 26 "socket.io-client": "^2.3.0",
  27 + "v-toaster": "^1.0.3",
27 28 "vue": "^2.5.2",
28 29 "vue-axios": "^2.1.5",
29 30 "vue-cookie-law": "^1.11.0",
... ...
src/auth/index.js
Diff comments   View file @5684145
... ... @@ -119,8 +119,9 @@ export const useAuth0 = ({
119 119 axios.post('/profile', {
120 120 name: u.name,
121 121 email: u.email,
122   - interests: ["music", "games", "animals"]
123   - // lastName: u.family_name,
  122 + firstName: u.given_name,
  123 + lastName: u.family_name,
  124 + verified: true
124 125 // profileImage: u.picture
125 126 }).then(res => {
126 127 console.log("res",res);
... ... @@ -132,6 +133,7 @@ export const useAuth0 = ({
132 133 console.log(err)
133 134 })
134 135  
  136 +
135 137 // Notify subscribers that the redirect callback has happened, passing the appState
136 138 // (useful for retrieving any pre-authentication state)
137 139 onRedirectCallback(appState);
... ...
src/components/ChangePassword.vue
Diff comments   View file @5684145
... ... @@ -0,0 +1,177 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid main-wrp">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
  17 + <span class="navbar-toggler-icon"></span>
  18 + <span class="navbar-toggler-icon"></span>
  19 + <span class="navbar-toggler-icon"></span>
  20 + </button>
  21 +
  22 + <div class="collapse navbar-collapse" id="navbarsExample03">
  23 + <ul class="navbar-nav mr-auto">
  24 + <li class="nav-item active">
  25 + <a class="nav-link" href="#">About</a>
  26 + </li>
  27 + <li class="nav-item">
  28 + <a class="nav-link" href="#">Masterclass</a>
  29 + </li>
  30 + <li class="nav-item">
  31 + <a class="nav-link" href="#">Stories</a>
  32 + </li>
  33 + <li class="nav-item spotLight-img">
  34 + <a class="nav-link" href="#"
  35 + ><img src="../assets/images/SPOTLight.svg"
  36 + /></a>
  37 + </li>
  38 + <li class="nav-item">
  39 + <a class="nav-link" href="#">Library</a>
  40 + </li>
  41 + </ul>
  42 + </div>
  43 + </nav>
  44 + <!-- menu wrapper -->
  45 + <div class="sign-wrp">
  46 + <div class="row col-reverse">
  47 + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
  48 + <!-- users land image -->
  49 + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
  50 + <h1 class="welcome-hd-back">
  51 + Welcome <br />
  52 + back
  53 + </h1>
  54 + </div>
  55 + <!-- users land image -->
  56 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  57 + <div class="form-layout signup-frm-spc">
  58 + <form>
  59 + <!-- <h5>SignUp Using</h5> -->
  60 + <div class="social-login" style="visibility: hidden">
  61 + <ul>
  62 + <li>
  63 + <a href="#"><img src="../assets/images/google.svg" /></a>
  64 + </li>
  65 + <li>
  66 + <a href="#"><img src="../assets/images/linkdin.svg" /></a>
  67 + </li>
  68 + <li>
  69 + <a href="#"><img src="../assets/images/twitter.svg" /></a>
  70 + </li>
  71 + </ul>
  72 + </div>
  73 + <h5>
  74 + Setup a new password. Please enter the OTP shared to {{email}} to confirm
  75 + your email address
  76 + </h5>
  77 + <div class="fill-form">
  78 + <label for="inputEmail" class="sr-only">OTP</label>
  79 + <input
  80 + type="text"
  81 + id="inputEmail"
  82 + class="form-control"
  83 + placeholder="Your OTP"
  84 + v-model="otp"
  85 + autocomplete="off"
  86 +
  87 + />
  88 + <label for="inputEmail" class="sr-only">New Password</label>
  89 + <input
  90 + type="password"
  91 + id="inputEmail"
  92 + class="form-control"
  93 + placeholder="Your New Password"
  94 + v-model="password"
  95 + autocomplete="off"
  96 +
  97 + />
  98 + <!-- <label for="inputPassword" class="sr-only">Password</label>
  99 + <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->
  100 +
  101 + <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="changePassword">
  102 + <img src="../assets/images/user-plus.svg" />Change Password
  103 + </a>
  104 + <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail">Resend</a></p>
  105 + <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> -->
  106 + </div>
  107 + </form>
  108 + </div>
  109 + </div>
  110 + <!-- sign up -->
  111 + </div>
  112 + </div>
  113 + <!-- body wrapper -->
  114 + </div>
  115 + </main>
  116 +</template>
  117 +
  118 +<script>
  119 +import Vue from "vue";
  120 +import router from "../router";
  121 +import axios from "axios";
  122 +
  123 +export default {
  124 + name: "ChangePassword",
  125 +
  126 + data() {
  127 + return {
  128 + email:null,
  129 + otp:null,
  130 + password:null,
  131 + };
  132 + },
  133 + mounted() {
  134 + this.email = localStorage.getItem("spotlight_email");
  135 + console.log("this.$route.params.flag",this.$route.params.flag)
  136 + if(this.$route.params.flag == true){
  137 + this.ResendEmail(false);
  138 + }
  139 +
  140 + },
  141 + methods: {
  142 + goToLogin() {
  143 + this.$router.push("/");
  144 + },
  145 + changePassword(){
  146 + axios
  147 + .post("/resetPassword", {'email':this.email,'otp':this.otp,'newPassword':this.password})
  148 + .then((response) => {
  149 + console.log("resetPassword- response",response)
  150 + this.$toaster.success(response.data.message)
  151 + if(response.data.status == "success"){
  152 + this.$router.push("/");
  153 + }
  154 + })
  155 + .catch( (error) =>{
  156 + if (error.response) {
  157 + this.$toaster.error(error.response.data.message)
  158 + }
  159 + });
  160 +
  161 + },
  162 + ResendEmail(){
  163 + axios
  164 + .post("/forgotPassword", {'email':this.email,'otp':true})
  165 + .then((response) => {
  166 + console.log("forgotPassword- response",response)
  167 + this.$toaster.success(response.data.message)
  168 + })
  169 + .catch( (error) =>{
  170 + if (error.response) {
  171 + this.$toaster.error(error.response.data.message)
  172 + }
  173 + });
  174 + }
  175 + },
  176 +};
  177 +</script>
... ...
src/components/LandingPage.vue
Diff comments   View file @5684145
... ... @@ -78,8 +78,7 @@
78 78 id="inputEmail"
79 79 class="form-control"
80 80 placeholder="Your Email ID"
81   - required
82   - autofocus
  81 + v-model="userData.email"
83 82 />
84 83 <label for="inputPassword" class="sr-only">Password</label>
85 84 <input
... ... @@ -87,12 +86,12 @@
87 86 id="inputPassword"
88 87 class="form-control"
89 88 placeholder="Password"
90   - required
  89 + v-model="userData.password"
91 90 />
92 91  
93   - <button class="btn btn-lg sb-button" type="submit">
  92 + <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="loginWIthEmail">
94 93 <img src="../assets/images/key.svg" /> Log In to your account
95   - </button>
  94 + </a>
96 95 <p class="forget-pass">
97 96 Forgot Password? <a @click="goToReset">Reset</a>
98 97 </p>
... ... @@ -113,6 +112,7 @@
113 112 import Vue from "vue";
114 113 import router from "../router";
115 114 import $ from "jquery";
  115 +import axios from "axios";
116 116  
117 117 export default {
118 118 name: "LandingPage",
... ... @@ -120,11 +120,13 @@ export default {
120 120 data() {
121 121 return {
122 122 loggedinFlag: false,
  123 + userData:{},
123 124 };
124 125 },
125 126 mounted() {
126 127 this.$auth.logout();
127 128 localStorage.removeItem("spotlight_usertoken");
  129 + localStorage.removeItem("spotlight_email");
128 130 },
129 131 methods: {
130 132 login() {
... ... @@ -136,6 +138,27 @@ export default {
136 138 goToReset() {
137 139 this.$router.push("/reset");
138 140 },
  141 + loginWIthEmail(){
  142 + axios
  143 + .post("/login", this.userData)
  144 + .then((response) => {
  145 + console.log("login- response",response)
  146 + this.$toaster.success(response.data.message)
  147 + if(response.data.status == 'success'){
  148 + localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
  149 + this.$router.push("/profile");
  150 + }
  151 + })
  152 + .catch( (error) =>{
  153 + if (error.response) {
  154 + this.$toaster.error(error.response.data.message)
  155 + if(error.response.data.message == 'Email Not Verified'){
  156 + localStorage.setItem('spotlight_email', this.userData.email);
  157 + this.$router.push({ name: 'Otp', params: { flag: true }});
  158 + }
  159 + }
  160 + });
  161 + }
139 162 },
140 163 };
141 164 </script>
... ...
src/components/Otp.vue
Diff comments   View file @5684145
... ... @@ -0,0 +1,169 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid main-wrp">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
  17 + <span class="navbar-toggler-icon"></span>
  18 + <span class="navbar-toggler-icon"></span>
  19 + <span class="navbar-toggler-icon"></span>
  20 + </button>
  21 +
  22 + <div class="collapse navbar-collapse" id="navbarsExample03">
  23 + <ul class="navbar-nav mr-auto">
  24 + <li class="nav-item active">
  25 + <a class="nav-link" href="#">About</a>
  26 + </li>
  27 + <li class="nav-item">
  28 + <a class="nav-link" href="#">Masterclass</a>
  29 + </li>
  30 + <li class="nav-item">
  31 + <a class="nav-link" href="#">Stories</a>
  32 + </li>
  33 + <li class="nav-item spotLight-img">
  34 + <a class="nav-link" href="#"
  35 + ><img src="../assets/images/SPOTLight.svg"
  36 + /></a>
  37 + </li>
  38 + <li class="nav-item">
  39 + <a class="nav-link" href="#">Library</a>
  40 + </li>
  41 + </ul>
  42 + </div>
  43 + </nav>
  44 + <!-- menu wrapper -->
  45 + <div class="sign-wrp">
  46 + <div class="row col-reverse">
  47 + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
  48 + <!-- users land image -->
  49 + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
  50 + <h1 class="welcome-hd-back">
  51 + Welcome <br />
  52 + back
  53 + </h1>
  54 + </div>
  55 + <!-- users land image -->
  56 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  57 + <div class="form-layout signup-frm-spc">
  58 + <form>
  59 + <!-- <h5>SignUp Using</h5> -->
  60 + <div class="social-login" style="visibility: hidden">
  61 + <ul>
  62 + <li>
  63 + <a href="#"><img src="../assets/images/google.svg" /></a>
  64 + </li>
  65 + <li>
  66 + <a href="#"><img src="../assets/images/linkdin.svg" /></a>
  67 + </li>
  68 + <li>
  69 + <a href="#"><img src="../assets/images/twitter.svg" /></a>
  70 + </li>
  71 + </ul>
  72 + </div>
  73 + <h5>
  74 + Please enter the OTP shared to {{email}} to confirm
  75 + your email address
  76 + </h5>
  77 + <div class="fill-form">
  78 + <label for="inputEmail" class="sr-only">OTP</label>
  79 + <input
  80 + type="text"
  81 + id="inputEmail"
  82 + class="form-control"
  83 + placeholder="Your OTP"
  84 + v-model="otp"
  85 +
  86 + />
  87 + <!-- <label for="inputPassword" class="sr-only">Password</label>
  88 + <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> -->
  89 +
  90 + <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="verifyOtp">
  91 + <img src="../assets/images/user-plus.svg" /> Verify Email
  92 + Address
  93 + </a>
  94 + <p class="forget-pass">Didn’t Get the OTP? <a @click="ResendEmail(true)">Resend</a></p>
  95 + <!-- <h3>Didn’t Get the OTP?<a @click="goToLogin">Login</a></h3> -->
  96 + </div>
  97 + </form>
  98 + </div>
  99 + </div>
  100 + <!-- sign up -->
  101 + </div>
  102 + </div>
  103 + <!-- body wrapper -->
  104 + </div>
  105 + </main>
  106 +</template>
  107 +
  108 +<script>
  109 +import Vue from "vue";
  110 +import router from "../router";
  111 +import axios from "axios";
  112 +
  113 +export default {
  114 + name: "Otp",
  115 +
  116 + data() {
  117 + return {
  118 + email:null,
  119 + otp:null,
  120 + };
  121 + },
  122 + mounted() {
  123 + this.email = localStorage.getItem("spotlight_email");
  124 + console.log("this.$route.params.flag",this.$route.params.flag)
  125 + if(this.$route.params.flag == true){
  126 + this.ResendEmail(false);
  127 + }
  128 +
  129 + },
  130 + methods: {
  131 + goToLogin() {
  132 + this.$router.push("/");
  133 + },
  134 + verifyOtp(){
  135 + axios
  136 + .get(`/verifyEmail?email=${this.email}&otp=${this.otp}`, this.userData)
  137 + .then((response) => {
  138 + console.log("otp response",response);
  139 + this.$toaster.success(response.data.message)
  140 + if(response.data.status == 'success'){
  141 + localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
  142 + this.$router.push("/profile");
  143 + }
  144 + })
  145 + .catch( (error) =>{
  146 + if (error.response) {
  147 + this.$toaster.error(error.response.data.message)
  148 + }
  149 + });
  150 +
  151 + },
  152 + ResendEmail(req){
  153 + axios
  154 + .post("/forgotPassword", {'email':this.email,'forgotPassword':false})
  155 + .then((response) => {
  156 + console.log("forgotPassword- response",response)
  157 + if(req){
  158 + this.$toaster.success(response.data.message)
  159 + }
  160 + })
  161 + .catch( (error) =>{
  162 + if (error.response) {
  163 + this.$toaster.error(error.response.data.message)
  164 + }
  165 + });
  166 + }
  167 + },
  168 +};
  169 +</script>
... ...
src/components/Profile.vue
Diff comments   View file @5684145
... ... @@ -3,12 +3,13 @@
3 3 <!-- profile -->
4 4 <div class="popup-wrp" style="display: none">
5 5 <div class="overlay"></div>
6   - <div class="popup-set" id="add-profile" style="display:none;">
  6 + <div class="popup-set" id="add-profile" style="display: none">
7 7 <div class="popup-header">
8   - <div class="user-photo common_color"><img src="../assets/images/m-user.svg" />
9   -
10   - </div><!-- header user -->
11   -
  8 + <div class="user-photo common_color">
  9 + <img src="../assets/images/m-user.svg" />
  10 + </div>
  11 + <!-- header user -->
  12 +
12 13 <ul>
13 14 <li>
14 15 <a href="#"
... ... @@ -35,7 +36,7 @@
35 36 <input
36 37 type="text"
37 38 class="form-control"
38   - v-model="userData.name"
  39 + v-model="userData.firstName"
39 40 placeholder=" "
40 41 id="fname"
41 42 />
... ... @@ -51,6 +52,7 @@
51 52 value=""
52 53 placeholder=" "
53 54 id="lname"
  55 + v-model="userData.lastName"
54 56 />
55 57 <label for="lname" class="lname">Last Name</label>
56 58 </div>
... ... @@ -62,7 +64,7 @@
62 64 type="text"
63 65 class="form-control"
64 66 value=""
65   - v-model="userData.designation"
  67 + v-model="userData.designation"
66 68 placeholder=" "
67 69 id="designation"
68 70 />
... ... @@ -75,8 +77,9 @@
75 77 <input
76 78 type="text"
77 79 class="form-control"
78   - v-model="userData.organisation"
  80 + v-model="userData.organisation"
79 81 id="company"
  82 + placeholder=" "
80 83 />
81 84 <label for="company">Company</label>
82 85 </div>
... ... @@ -88,8 +91,9 @@
88 91 type="text"
89 92 class="form-control"
90 93 value=""
91   - v-model="userData.bio"
  94 + v-model="userData.bio"
92 95 id="yourself"
  96 + placeholder=" "
93 97 ></textarea>
94 98 <label for="yourself"
95 99 >Tell others a little about yourself</label
... ... @@ -101,14 +105,22 @@
101 105 <p class="things">Three things that you talk more about</p>
102 106  
103 107 <ul class="interests">
104   - <li><span>Cats</span>
105   - <a href="#" class="cat-minus"
  108 + <li v-for="(interest, i) in userData.interests" :key="i">
  109 + <span>{{ interest }}</span>
  110 + <a
  111 + href="javascript:void(0);"
  112 + @click="removeInterest(i)"
  113 + class="cat-minus"
106 114 ><img src="../assets/images/minus.svg"
107 115 /></a>
108 116 </li>
109 117 <li>
110   - <input class="" placeholder="Add interest" />
111   - <a href="#"
  118 + <input
  119 + class=""
  120 + placeholder="Add interest"
  121 + v-model="interestName"
  122 + />
  123 + <a href="javascript:void(0);" @click="addInterest()"
112 124 ><img src="../assets/images/plus-circle.svg"
113 125 /></a>
114 126 </li>
... ... @@ -118,78 +130,167 @@
118 130 <p class="things">Choose Background color</p>
119 131  
120 132 <ul class="colors">
121   - <li><a href="#" class="silver"></a></li>
122   - <li><a href="#" class="milk-punch active"></a></li>
123   - <li><a href="#" class="french-pass"></a></li>
124   - <li><a href="#" class="cyan-french-pass"></a></li>
125   - <li><a href="#" class="cosmos"></a></li>
126   - <li><a href="#" class="cape-Honey"></a></li>
127   - <li><a href="#" class="snuff"></a></li>
128   - <li><a href="#" class="catskillWhite"></a></li>
129   - <li><a href="#" class="white"></a></li>
  133 + <li>
  134 + <a
  135 + href="javascript:void(0);"
  136 + id="#C4C4C4"
  137 + class="silver"
  138 + @click="changeColor('#C4C4C4')"
  139 + ></a>
  140 + </li>
  141 + <li>
  142 + <a
  143 + href="javascript:void(0);"
  144 + id="#FFF6D7"
  145 + class="milk-punch"
  146 + @click="changeColor('#FFF6D7')"
  147 + ></a>
  148 + </li>
  149 + <li>
  150 + <a
  151 + href="javascript:void(0);"
  152 + id="#BDDBFF"
  153 + class="french-pass"
  154 + @click="changeColor('#BDDBFF')"
  155 + ></a>
  156 + </li>
  157 + <li>
  158 + <a
  159 + href="javascript:void(0);"
  160 + id="#C0FAFE"
  161 + class="cyan-french-pass"
  162 + @click="changeColor('#C0FAFE')"
  163 + ></a>
  164 + </li>
  165 + <li>
  166 + <a
  167 + href="javascript:void(0);"
  168 + id="#FFDBDC"
  169 + class="cosmos"
  170 + @click="changeColor('#FFDBDC')"
  171 + ></a>
  172 + </li>
  173 + <li>
  174 + <a
  175 + href="javascript:void(0);"
  176 + id="#FEE6AC"
  177 + class="cape-Honey"
  178 + @click="changeColor('#FEE6AC')"
  179 + ></a>
  180 + </li>
  181 + <li>
  182 + <a
  183 + href="javascript:void(0);"
  184 + id="#E5DFF0"
  185 + class="snuff"
  186 + @click="changeColor('#E5DFF0')"
  187 + ></a>
  188 + </li>
  189 + <li>
  190 + <a
  191 + href="javascript:void(0);"
  192 + id="#DFE7EF"
  193 + class="catskillWhite"
  194 + @click="changeColor('#DFE7EF')"
  195 + ></a>
  196 + </li>
  197 + <li>
  198 + <a
  199 + href="javascript:void(0);"
  200 + id="#FFF"
  201 + class="white"
  202 + @click="changeColor('#FFF')"
  203 + ></a>
  204 + </li>
130 205 </ul>
131 206 </div>
132   - <div class="col-lg-12 mt-50">
133   - <p class="notifications">Recieve notifications when you recieve a comment/ Upvote
134   -
135   -</p>
136   - <div class="switch-bt-wrp">
137   - <label class="switch-btn">
138   - <input type="checkbox" class="toggle-btn">
139   - <span class="rounded-toggle"></span>
140   -</label> <span class="onoff">on/off</span>
141   -</div>
142   - </div>
143   - <div class="col-lg-12">
144   - <p class="add-socail-ch">Add your social Channels <span></span></p>
145   - </div>
146   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
147   - <div class="form-group floating-label">
148   -
149   - <select class="form-group">
150   - <option> Linkdin</option>
151   - </select>
152   - <span class="select-arrow"><img src="../assets/images/chevron-down.svg" /></span>
153   - </div>
154   - </div><!-- input -->
155   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
156   - <div class="form-group floating-label">
157   -
158   - <input type="text" class="form-control" value="linkedin.com/vamsikrishna" placeholder=" " id="">
159   -
160   - </div>
161   - </div><!-- input -->
162   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
163   - <div class="form-group floating-label">
164   -
165   - <select class="form-group">
166   - <option>Medium</option>
167   - </select>
168   - <span class="select-arrow"><img src="../assets/images/chevron-down.svg" /></span>
169   - </div>
170   - </div><!-- input -->
171   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
172   - <div class="form-group floating-label">
173   -
174   - <input type="text" class="form-control" value="" placeholder="Paste your profile URL here" id="">
175   - </div>
176   - </div><!-- input -->
177   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
178   - <div class="form-group floating-label">
179   -
180   - <select class="form-group">
181   - <option>Add another</option>
182   - </select>
183   - <span class="select-arrow"><img src="../assets/images/chevron-down.svg" /></span>
184   - </div>
185   - </div><!-- input -->
  207 + <div class="col-lg-12 mt-50">
  208 + <p class="notifications">
  209 + Recieve notifications when you recieve a comment/ Upvote
  210 + </p>
  211 + <div class="switch-bt-wrp">
  212 + <label class="switch-btn">
  213 + <input type="checkbox" class="toggle-btn" />
  214 + <span class="rounded-toggle"></span>
  215 + </label>
  216 + <span class="onoff">on/off</span>
  217 + </div>
  218 + </div>
  219 + <div class="col-lg-12">
  220 + <p class="add-socail-ch">
  221 + Add your social Channels <span></span>
  222 + </p>
  223 + </div>
  224 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  225 + <div class="form-group floating-label">
  226 + <select class="form-group" >
  227 + <option value="Facebook">Facebook</option>
  228 + </select>
  229 + <span class="select-arrow"
  230 + ><img src="../assets/images/chevron-down.svg"
  231 + /></span>
  232 + </div>
  233 + </div>
  234 + <!-- input -->
  235 + <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
  236 + <div class="form-group floating-label">
  237 + <input
  238 + type="text"
  239 + class="form-control"
  240 + value=""
  241 + placeholder="Paste your profile URL here"
  242 + id=""
  243 + v-model="userData.socialMediaProfiles.facebook"
  244 + />
  245 + </div>
  246 + </div>
  247 + <!-- input -->
  248 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  249 + <div class="form-group floating-label">
  250 + <select class="form-group" >
  251 + <option value="Linkedin">Linkedin</option>
  252 + </select>
  253 + <span class="select-arrow"
  254 + ><img src="../assets/images/chevron-down.svg"
  255 + /></span>
  256 + </div>
  257 + </div>
  258 + <!-- input -->
  259 + <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
  260 + <div class="form-group floating-label">
  261 + <input
  262 + type="text"
  263 + class="form-control"
  264 + value=""
  265 + placeholder="Paste your profile URL here"
  266 + id=""
  267 + v-model="userData.socialMediaProfiles.linkedin"
  268 + />
  269 + </div>
  270 + </div>
  271 + <!-- input -->
  272 +
  273 + <!-- input -->
  274 + <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  275 + <div class="form-group floating-label">
  276 + <select class="form-group">
  277 + <option @click="addSocialLink">Add another</option>
  278 + </select>
  279 + <span class="select-arrow"
  280 + ><img src="../assets/images/chevron-down.svg"
  281 + /></span>
  282 + </div>
  283 + </div> -->
  284 + <!-- input -->
186 285 </div>
187   - <a href="javascript:void(0);" @click="closeDialog" class="next-bt">Save</a>
  286 + <a href="javascript:void(0);" @click="closeDialog" class="next-bt"
  287 + >Save</a
  288 + >
188 289 </form>
189 290 </div>
190 291 <div class="clearfix"></div>
191   - </div> <!-- add profile -->
192   -
  292 + </div>
  293 + <!-- add profile -->
193 294 </div>
194 295 <!-- profile -->
195 296 <div class="container-fluid inner-wrp">
... ... @@ -228,11 +329,13 @@
228 329 </ul>
229 330 </div>
230 331 <div class="user-profile-photo common_color">
231   - <a href="javascript:void(0);" @click="userprofileshowDialog"><img src="../assets/images/m-user.svg" /></a>
232   - <div class="sub-menu-user" id="userprofileshow" style="display:none">
  332 + <a href="javascript:void(0);" @click="userprofileshowDialog"
  333 + ><img src="../assets/images/m-user.svg"
  334 + /></a>
  335 + <div class="sub-menu-user" id="userprofileshow" style="display: none">
233 336 <ul>
234   - <li><a href="#">Edit Profile</a></li>
235   - <li><a href="#">Log Out</a></li>
  337 + <li><a href="javascript:void(0);" @click="addProfileDialog">Edit Profile</a></li>
  338 + <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
236 339 </ul>
237 340 </div>
238 341 </div>
... ... @@ -240,28 +343,41 @@
240 343 <!-- menu wrapper -->
241 344 <div class="row profile-tab-spc-top">
242 345 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
243   - <div class="inner-profile-ps common_color"> <img src="../assets/images/m-user.svg" class="" /></div><!-- user profile -->
244   -
  346 + <div class="inner-profile-ps common_color">
  347 + <img src="../assets/images/m-user.svg" class="" />
  348 + </div>
  349 + <!-- user profile -->
  350 +
245 351 <div class="user-profile">
246   - <h1>{{userData.name}} <a href="#" class="tags">{{userData.role}}</a></h1>
  352 + <h1>
  353 + {{ userData.firstName }} {{ userData.lastName }}
  354 + <a href="#" class="tags">{{ userData.role }}</a>
  355 + </h1>
247 356 <ul class="joined-info">
248 357 <li>
249 358 <a href="#">Add your work</a>
250 359 <img src="../assets/images/u-info-icon.png" /> <span></span>
251 360 </li>
252   - <li><a href="#">34772 Karma</a> <span></span></li>
253   - <li><a href="#">Joined on {{moment(userData.createdAt).format('MMM YYYY')}}</a></li>
  361 + <li>
  362 + <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span>
  363 + </li>
  364 + <li>
  365 + <a href="#"
  366 + >Joined on
  367 + {{ moment(userData.createdAt).format("MMM YYYY") }}</a
  368 + >
  369 + </li>
254 370 </ul>
255   - <p>Tell others a little about yourself</p>
  371 + <p>{{ userData.bio }}</p>
256 372 </div>
257 373 </div>
258 374 <!-- user profile -->
259 375 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
260   - <div class="list-style-group">
  376 + <div class="list-style-group" v-if="userData.awards">
261 377 <p>Awards</p>
262 378 <ul class="list-style">
263 379 <li>
264   - <a href="#"><img src="../assets/images/icon-1.png" /></a>
  380 + <a href="javascript:void(0);"><img src="../assets/images/icon-1.png" /></a>
265 381 </li>
266 382 </ul>
267 383 </div>
... ... @@ -272,15 +388,23 @@
272 388 <div class="row top-brd profile-tab-spc-top">
273 389 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
274 390 <ul class="profile-tab">
275   - <li class="active c-0"><a href="javascript:void(0);" @click="caseDialog">Case-studies(0)</a></li>
276   - <li class="rp-all"><a href="javascript:void(0);" @click="repliesDialog">Comments/Replies(3)</a></li>
  391 + <li class="active c-0">
  392 + <a href="javascript:void(0);" @click="caseDialog"
  393 + >Case-studies(0)</a
  394 + >
  395 + </li>
  396 + <li class="rp-all">
  397 + <a href="javascript:void(0);" @click="repliesDialog"
  398 + >Comments/Replies(1)</a
  399 + >
  400 + </li>
277 401 </ul>
278 402 </div>
279 403 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
280 404 <ul class="social-connects">
281 405 <li><span>Follow</span></li>
282 406 <li>
283   - <a href="#" class="active"
  407 + <a href="javascript:void(0);" @click="addProfileDialog" class="active"
284 408 ><img src="../assets/images/plus.png"
285 409 /></a>
286 410 <span class="connect-social-channel"
... ... @@ -296,7 +420,8 @@
296 420 <div class="row">
297 421 <div class="col-lg-12">
298 422 <div class="profile-buttons">
299   - <a href="javascript:void(0);"
  423 + <a
  424 + href="javascript:void(0);"
300 425 class="profile-sm-bt center-and-spc bt-active"
301 426 @click="addProfileDialog"
302 427 >Update Profile</a
... ... @@ -308,46 +433,39 @@
308 433 </div>
309 434 </div>
310 435 </div>
311   - </div><!-- case study 0 -->
312   - <div class="container-fluid data-wrp" id="all-replies" style="display:none;">
313   -<div class="row">
314   - <div class="replies col-md-12">
315   -<div class="replies-wrp">
316   - <h1>PhonePe vs GooglePay <span>Critique</span></h1>
317   - <ul class="joined-info">
318   - <li><a href="#">37D</a> <span></span></li>
319   - <li> <img src="../assets/images/heart.png"> </li>
320   - <li> <a href="#"> 4</a> </li>
321   - <li class="comment-spc"> <img src="../assets/images/comment.svg"> </li>
322   - <li> <a href="#"> 6</a> </li>
323   - </ul>
324   - <p>I wonder what the difference between “<strong> Assistant</strong>” and “<strong>Pickup and Drop</strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
325   -</div><!-- replies wrapper -->
326   -<div class="replies-wrp">
327   - <h1>PhonePe vs GooglePay <span>Critique</span></h1>
328   - <ul class="joined-info">
329   - <li><a href="#">37D</a> <span></span></li>
330   - <li> <img src="../assets/images/heart.png"> </li>
331   - <li> <a href="#"> 4</a> </li>
332   - <li class="comment-spc"> <img src="../assets/images/comment.svg"> </li>
333   - <li> <a href="#"> 6</a> </li>
334   - </ul>
335   - <p>I wonder what the difference between “<strong> Assistant</strong>” and “<strong>Pickup and Drop</strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
336   -</div><!-- replies wrapper -->
337   -<div class="replies-wrp">
338   - <h1>PhonePe vs GooglePay <span>Critique</span></h1>
339   - <ul class="joined-info">
340   - <li><a href="#">37D</a> <span></span></li>
341   - <li> <img src="../assets/images/heart.png"> </li>
342   - <li> <a href="#"> 4</a> </li>
343   - <li class="comment-spc"> <img src="../assets/images/comment.svg"> </li>
344   - <li> <a href="#"> 6</a> </li>
345   - </ul>
346   - <p>I wonder what the difference between “<strong> Assistant</strong>” and “<strong>Pickup and Drop</strong>” are. If they are the same, there are two “call to actions” for the same workflow</p>
347   -</div><!-- replies wrapper -->
348   - </div><!-- all card wrpper -->
349   -</div>
350   -</div><!-- all Relpies -->
  436 + </div>
  437 + <!-- case study 0 -->
  438 + <div
  439 + class="container-fluid data-wrp"
  440 + id="all-replies"
  441 + style="display: none"
  442 + >
  443 + <div class="row">
  444 + <div class="replies col-md-12">
  445 + <div class="replies-wrp">
  446 + <h1>PhonePe vs GooglePay <span>Critique</span></h1>
  447 + <ul class="joined-info">
  448 + <li><a href="#">37D</a> <span></span></li>
  449 + <li><img src="../assets/images/heart.png" /></li>
  450 + <li><a href="#"> 4</a></li>
  451 + <li class="comment-spc">
  452 + <img src="../assets/images/comment.svg" />
  453 + </li>
  454 + <li><a href="#"> 6</a></li>
  455 + </ul>
  456 + <p>
  457 + I wonder what the difference between “<strong>
  458 + Assistant</strong
  459 + >” and “<strong>Pickup and Drop</strong>” are. If they are the
  460 + same, there are two “call to actions” for the same workflow
  461 + </p>
  462 + </div>
  463 + <!-- replies wrapper -->
  464 + </div>
  465 + <!-- all card wrpper -->
  466 + </div>
  467 + </div>
  468 + <!-- all Relpies -->
351 469 </div>
352 470 <!-- data wrp -->
353 471 <!-- body wrapper -->
... ... @@ -359,7 +477,7 @@
359 477 import Vue from "vue";
360 478 import router from "../router";
361 479 import $ from "jquery";
362   -import axios from 'axios'
  480 +import axios from "axios";
363 481  
364 482 export default {
365 483 name: "Profile",
... ... @@ -368,18 +486,26 @@ export default {
368 486 return {
369 487 loggedinFlag: false,
370 488 usertoken: null,
371   - userData:{},
  489 + userData: {},
  490 + interestName: null,
  491 + oldId: null,
  492 + socialLink:null,
  493 + currentSocialLinkName:null,
372 494 };
373 495 },
374 496 mounted() {
  497 + this.userData = {};
  498 + this.socialLink = [];
  499 + this.userData.interests = [];
  500 + this.userData.socialMediaProfiles = {};
  501 + this.userData.socialMediaProfiles.facebook = null;
  502 + this.userData.socialMediaProfiles.linkedin = null;
375 503 var userdata = localStorage.getItem("spotlight_usertoken");
376 504 if (userdata) {
377 505 userdata = JSON.parse(userdata);
378 506 this.usertoken = userdata.token;
379 507 this.getProfile();
380 508 }
381   -
382   -
383 509 },
384 510 methods: {
385 511 goToSignUp() {
... ... @@ -388,78 +514,133 @@ export default {
388 514 goToReset() {
389 515 this.$router.push("/reset");
390 516 },
  517 + logout() {
  518 + this.$router.push("/");
  519 + },
  520 + addSocialLink(obj){
  521 + this.socialLink.push()
  522 +
  523 + },
  524 + addInterest() {
  525 + console.log(this.userData.interests.length, "called", this.interestName);
  526 + if (this.userData.interests.length <= 2) {
  527 + this.userData.interests.push(this.interestName);
  528 + this.interestName = null;
  529 + } else {
  530 + this.$toaster.info("Only 3 interest are allowed");
  531 + }
  532 + },
  533 + removeInterest(i) {
  534 + this.userData.interests.splice(i, 1);
  535 + },
  536 + assignClass() {
  537 + var element = document.getElementById(this.userData.bgColor);
  538 + element.classList.add("active");
  539 + var cols = document.getElementsByClassName("common_color");
  540 + for (var i = 0; i < cols.length; i++) {
  541 + cols[i].style.backgroundColor = this.userData.bgColor;
  542 + }
  543 +
  544 + },
  545 + changeColor(clr) {
  546 + console.log(this.oldId,"clr",clr);
  547 + var element = document.getElementById(clr);
  548 + element.classList.add("active");
  549 + var removeelement = document.getElementById(this.oldId);
  550 + removeelement.classList.remove("active");
  551 + this.oldId = clr;
  552 + var cols = document.getElementsByClassName("common_color");
  553 + for (var i = 0; i < cols.length; i++) {
  554 + cols[i].style.backgroundColor = clr;
  555 + }
  556 + this.userData.bgColor = clr;
  557 +
  558 + },
391 559 getProfile() {
392 560 axios
393   - .get("/profile", {
394   - headers: {
395   - Authorization: "Bearer " + this.usertoken,
396   - },
397   - })
398   - .then((response) => {
399   - this.userData = response.data.data;
400   - console.log(response.data.data);
401   - })
402   - .catch((error) => console.log(error));
  561 + .get("/profile", {
  562 + headers: {
  563 + Authorization: "Bearer " + this.usertoken,
  564 + },
  565 + })
  566 + .then((response) => {
  567 + this.userData = response.data.data;
  568 + this.oldId = this.userData.bgColor;
  569 + console.log(this.oldId,"this.userData.",this.userData.bgColor);
  570 +
  571 + this.assignClass();
  572 + console.log(response.data.data);
  573 + })
  574 + .catch((error) => console.log(error));
403 575 },
404   - saveProfile(){
  576 + saveProfile() {
405 577 var obj = {};
  578 + this.userData.name =
  579 + this.userData.firstName + " " + this.userData.lastName;
406 580 obj = Object.assign(obj, this.userData);
407   - delete obj.awards;
408   - delete obj.createdAt;
409   - delete obj.email;
410   - delete obj.role;
411   - delete obj.verified;
412   - delete obj.updatedAt;
413   - delete obj.__v;
414   - delete obj._id;
415   - axios
416   - .put("/profile", obj,{
  581 + // if(!obj.socialMediaProfiles){
  582 + // obj.socialMediaProfiles = {};
  583 + // }
  584 + delete obj.createdAt;
  585 + delete obj.email;
  586 + delete obj.role;
  587 + delete obj.verified;
  588 + delete obj.updatedAt;
  589 + delete obj.__v;
  590 + delete obj._id;
  591 + delete obj.karmaPoints;
  592 + delete obj.awards;
  593 + delete obj.socialLogin;
  594 + axios
  595 + .put("/profile", obj, {
417 596 headers: {
418 597 Authorization: "Bearer " + this.usertoken,
419 598 },
420 599 })
421 600 .then((response) => {
422 601 // this.userData = response.data.data;
  602 + this.$toaster.success('Profile Updated');
  603 +
423 604 console.log(response.data.data);
424 605 })
425   - .catch((error) => console.log(error));
426   -
  606 + .catch((error) => {
  607 + if (error.response) {
  608 + this.$toaster.error(error.response.data.message);
  609 + }
  610 + });
427 611 },
428 612 addProfileDialog() {
429 613 $(".inner-wrp").addClass("body-blur");
430   - $("#add-social-links").hide();
  614 + $("#add-social-links").hide();
431 615 $(".popup-wrp, #add-profile").show();
432 616 },
433 617 nextProfileDialog() {
434   - $("#add-profile").hide();
435   - $("#add-social-links").show();
  618 + $("#add-profile").hide();
  619 + $("#add-social-links").show();
  620 + this.saveProfile();
  621 + },
  622 + closeDialog() {
  623 + $(".popup-wrp").hide();
  624 + $(".inner-wrp").removeClass("body-blur");
436 625 this.saveProfile();
437   -
438   -
439 626 },
440   - closeDialog(){
441   - $(".popup-wrp").hide();
442   - $(".inner-wrp").removeClass("body-blur");
443   - },
444   -///
445   - caseDialog(){
446   - $(".rp-all").removeClass("active");
447   - $(".c-0").addClass("active");
448   - $("#all-replies").hide();
449   - $("#case-study-0").show();
450   - },
451   - repliesDialog(){
452   - $(".c-0").removeClass("active");
453   - $(".rp-all").addClass("active");
454   - $("#case-study-0").hide();
455   - $("#all-replies").show();
456   - },
457   -
458   - userprofileshowDialog(){
459   - $("#userprofileshow").toggle();
460   - }
461   -
  627 + ///
  628 + caseDialog() {
  629 + $(".rp-all").removeClass("active");
  630 + $(".c-0").addClass("active");
  631 + $("#all-replies").hide();
  632 + $("#case-study-0").show();
  633 + },
  634 + repliesDialog() {
  635 + $(".c-0").removeClass("active");
  636 + $(".rp-all").addClass("active");
  637 + $("#case-study-0").hide();
  638 + $("#all-replies").show();
  639 + },
462 640  
  641 + userprofileshowDialog() {
  642 + $("#userprofileshow").toggle();
  643 + },
463 644 },
464 645 };
465 646 </script>
... ...
src/components/Reset.vue
Diff comments   View file @5684145
... ... @@ -83,13 +83,12 @@
83 83 id="inputEmail"
84 84 class="form-control"
85 85 placeholder="Your Email ID"
86   - required
87   - autofocus
  86 + v-model="email"
88 87 />
89 88  
90   - <button class="btn btn-lg sb-button" type="submit">
  89 + <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" @click="forgotPassword">
91 90 <img src="../assets/images/key.svg" /> Reset Password
92   - </button>
  91 + </a>
93 92  
94 93 <h3 class="go-back">
95 94 <span>Go back to </span><a @click="goToLogin">Login</a><span> / </span
... ... @@ -110,12 +109,15 @@
110 109 <script>
111 110 import Vue from "vue";
112 111 import router from "../router";
  112 +import axios from "axios";
113 113  
114 114 export default {
115 115 name: "Reset",
116 116  
117 117 data() {
118   - return {};
  118 + return {
  119 + email:null,
  120 + };
119 121 },
120 122 mounted() {},
121 123 methods: {
... ... @@ -125,6 +127,25 @@ export default {
125 127 goToSignUp() {
126 128 this.$router.push("/signup");
127 129 },
  130 + forgotPassword(){
  131 + axios
  132 + .post("/forgotPassword", {'email':this.email,'forgotPassword':true})
  133 + .then((response) => {
  134 + console.log("forgotPassword- response",response)
  135 +
  136 + this.$toaster.success(response.data.message)
  137 + if(response.data.status == 'success'){
  138 + localStorage.setItem('spotlight_email', this.email);
  139 + this.$router.push("/changepassword");
  140 + }
  141 + })
  142 + .catch( (error) =>{
  143 + if (error.response) {
  144 + this.$toaster.error(error.response.data.message)
  145 + }
  146 + });
  147 +
  148 + }
128 149  
129 150 },
130 151 };
... ...
src/components/SignUp.vue
Diff comments   View file @5684145
1 1 <template>
2 2 <main class="landing-page">
3   - <div class="container-fluid main-wrp">
4   -
5   -
  3 + <div class="container-fluid main-wrp">
6 4 <nav class="navbar navbar-expand-sm spotLight-nav">
7   - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a>
8   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
9 17 <span class="navbar-toggler-icon"></span>
10 18 <span class="navbar-toggler-icon"></span>
11 19 <span class="navbar-toggler-icon"></span>
12 20 </button>
13   -
  21 +
14 22 <div class="collapse navbar-collapse" id="navbarsExample03">
15 23 <ul class="navbar-nav mr-auto">
16 24 <li class="nav-item active">
... ... @@ -23,58 +31,95 @@
23 31 <a class="nav-link" href="#">Stories</a>
24 32 </li>
25 33 <li class="nav-item spotLight-img">
26   - <a class="nav-link" href="#"><img src="../assets/images/SPOTLight.svg" /></a>
  34 + <a class="nav-link" href="#"
  35 + ><img src="../assets/images/SPOTLight.svg"
  36 + /></a>
27 37 </li>
28 38 <li class="nav-item">
29 39 <a class="nav-link" href="#">Library</a>
30 40 </li>
31 41 </ul>
32 42 </div>
33   - </nav><!-- menu wrapper -->
  43 + </nav>
  44 + <!-- menu wrapper -->
34 45 <div class="sign-wrp">
35   - <div class="row col-reverse">
36   -
37   - <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3">
38   -
39   - </div><!-- users land image -->
40   - <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
41   - <h1>Welcome to <br />
42   - Productgrowth</h1>
  46 + <div class="row col-reverse">
  47 + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
  48 + <!-- users land image -->
  49 + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
  50 + <h1>
  51 + Welcome to <br />
  52 + Productgrowth
  53 + </h1>
43 54 <ul class="sign-in-up-list">
44   - <li><img src="../assets/images/check.svg" /><span>Connect & learn from fellow product enthusiasts</span></li>
45   - <li><img src="../assets/images/check.svg" /><span>Share & pickup deeper insights from real world products</span></li>
46   - <li><img src="../assets/images/check.svg" /><span>Access to XX Casestudies</span></li>
  55 + <li>
  56 + <img src="../assets/images/check.svg" /><span
  57 + >Connect & learn from fellow product enthusiasts</span
  58 + >
  59 + </li>
  60 + <li>
  61 + <img src="../assets/images/check.svg" /><span
  62 + >Share & pickup deeper insights from real world products</span
  63 + >
  64 + </li>
  65 + <li>
  66 + <img src="../assets/images/check.svg" /><span
  67 + >Access to XX Casestudies</span
  68 + >
  69 + </li>
47 70 </ul>
48   - </div><!-- users land image -->
49   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
50   -<div class="form-layout signup-frm-spc">
51   - <form>
52   -
53   - <h5>SignUp Using</h5>
54   - <div class="social-login">
55   - <ul>
56   - <li><a href="#"><img src="../assets/images/google.svg" /></a></li>
57   - <li><a href="#"><img src="../assets/images/linkdin.svg" /></a></li>
58   - <li><a href="#"><img src="../assets/images/twitter.svg" /></a></li>
59   - </ul>
60   - </div>
61   - <h5>or Signup with email</h5>
62   - <div class="fill-form">
63   - <label for="inputEmail" class="sr-only">Email address</label>
64   - <input type="email" id="inputEmail" class="form-control" placeholder="Your Email ID" required autofocus>
65   - <label for="inputPassword" class="sr-only">Password</label>
66   - <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
67   -
68   - <button class="btn btn-lg sb-button" type="submit"><img src="../assets/images/user-plus.svg" /> Create Account</button>
69   - <p class="">
70   - By signing up I agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a>
71   - </p>
72   - <h3>Have an account? <a @click="goToLogin">Login</a></h3>
73   - </div>
74   - </form>
75   -</div>
  71 + </div>
  72 + <!-- users land image -->
  73 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  74 + <div class="form-layout signup-frm-spc">
  75 + <form>
  76 + <h5>SignUp Using</h5>
  77 + <div class="social-login">
  78 + <ul>
  79 + <li>
  80 + <a href="#"><img src="../assets/images/google.svg" /></a>
  81 + </li>
  82 + <li>
  83 + <a href="#"><img src="../assets/images/linkdin.svg" /></a>
  84 + </li>
  85 + <li>
  86 + <a href="#"><img src="../assets/images/twitter.svg" /></a>
  87 + </li>
  88 + </ul>
  89 + </div>
  90 + <h5>or Signup with email</h5>
  91 + <div class="fill-form">
  92 + <label for="inputEmail" class="sr-only">Email address</label>
  93 + <input
  94 + type="email"
  95 + id="inputEmail"
  96 + class="form-control"
  97 + placeholder="Your Email ID"
  98 + autocomplete="off"
  99 + v-model="userData.email"
  100 + />
  101 + <label for="inputPassword" class="sr-only">Password</label>
  102 + <input
  103 + type="password"
  104 + id="inputPassword"
  105 + class="form-control"
  106 + placeholder="Password"
  107 + v-model="userData.password"
  108 + />
76 109  
77   - </div><!-- sign up -->
  110 + <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup">
  111 + <img src="../assets/images/user-plus.svg" /> Create Account
  112 + </a>
  113 + <p class="">
  114 + By signing up I agree to the <a>Privacy Policy</a> and
  115 + <a>Terms of Service</a>
  116 + </p>
  117 + <h3>Have an account? <a @click="goToLogin">Login</a></h3>
  118 + </div>
  119 + </form>
  120 + </div>
  121 + </div>
  122 + <!-- sign up -->
78 123 </div>
79 124 </div>
80 125 <!-- body wrapper -->
... ... @@ -83,23 +128,39 @@
83 128 </template>
84 129  
85 130 <script>
86   -
87 131 import Vue from "vue";
88 132 import router from "../router";
  133 +import axios from "axios";
89 134  
90 135 export default {
91 136 name: "SignUp",
92 137  
93 138 data() {
94 139 return {
  140 + userData: {},
95 141 };
96 142 },
97 143 mounted() {},
98 144 methods: {
99   - goToLogin(){
  145 + goToLogin() {
100 146 this.$router.push("/");
101   -
102   - }
  147 + },
  148 + signup() {
  149 + axios
  150 + .post("/signup", this.userData)
  151 + .then((response) => {
  152 + this.$toaster.success(response.data.message);
  153 + if(response.data.status == 'success'){
  154 + localStorage.setItem('spotlight_email', this.userData.email);
  155 + this.$router.push({ name: 'Otp', params: { flag: false }});
  156 + }
  157 + })
  158 + .catch( (error) =>{
  159 + if (error.response) {
  160 + this.$toaster.error(error.response.data.message);
  161 + }
  162 + });
  163 + },
103 164 },
104 165 };
105 166 </script>
... ...
... ... @@ -12,7 +12,13 @@ import { domain, clientId } from &quot;../auth_config.json&quot;
12 12 import { Auth0Plugin } from "./auth"
13 13 import Vuelidate from 'vuelidate'
14 14 import moment from 'moment'
15   -
  15 +import Toaster from 'v-toaster'
  16 +
  17 +// You need a specific loader for CSS files like https://github.com/webpack/css-loader
  18 +import 'v-toaster/dist/v-toaster.css'
  19 +
  20 +// optional set default imeout, the default is 10000 (10 seconds).
  21 +Vue.use(Toaster, {timeout: 5000})
16 22 Vue.use(Vuelidate)
17 23 // Install the authentication plugin here
18 24 Vue.use(Auth0Plugin, {
... ...
src/router/index.js
Diff comments   View file @5684145
... ... @@ -31,7 +31,8 @@ import TwoScreensWithTwoAuthor from &#39;@/components/TwoScreensWithTwoAuthor&#39;
31 31 import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor'
32 32 import ToAddYourComment from '@/components/ToAddYourComment'
33 33 import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard'
34   -
  34 +import Otp from '@/components/Otp'
  35 +import ChangePassword from '@/components/ChangePassword'
35 36  
36 37 import router from '../router'
37 38 Vue.use(Router)
... ... @@ -190,6 +191,16 @@ export default new Router({
190 191 path: '/reading-flow-bounce-board',
191 192 name: 'ReadingFlowBounceBoard',
192 193 component: ReadingFlowBounceBoard,
  194 + },
  195 + {
  196 + path: '/otp/:flag',
  197 + name: 'Otp',
  198 + component: Otp,
  199 + },
  200 + {
  201 + path: '/changepassword',
  202 + name: 'ChangePassword',
  203 + component: ChangePassword,
193 204 }
194 205  
195 206  
... ...