viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 2991bacc1d7eefcd33120d2aa56b71b5bb62c854

Authored by Digvijay Singh
1 parent d06044c201
Exists in master

ui flow change

Showing 8 changed files with 246 additions and 97 deletions   Show diff stats
src/auth/index.js
Diff comments   View file @2991bac
1 import Vue from "vue"; 1 import Vue from "vue";
2 import createAuth0Client from "@auth0/auth0-spa-js"; 2 import createAuth0Client from "@auth0/auth0-spa-js";
3 import router from '../router' 3 import router from '../router'
4 import axios from 'axios' 4 import axios from 'axios'
5 /** Define a default action to perform after authentication */ 5 /** Define a default action to perform after authentication */
6 const DEFAULT_REDIRECT_CALLBACK = () => 6 const DEFAULT_REDIRECT_CALLBACK = () =>
7 window.history.replaceState({}, document.title, window.location.pathname); 7 window.history.replaceState({}, document.title, window.location.pathname);
8 8
9 let instance; 9 let instance;
10 10
11 /** Returns the current instance of the SDK */ 11 /** Returns the current instance of the SDK */
12 export const getInstance = () => instance; 12 export const getInstance = () => instance;
13 13
14 /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */ 14 /** Creates an instance of the Auth0 SDK. If one has already been created, it returns that instance */
15 export const useAuth0 = ({ 15 export const useAuth0 = ({
16 onRedirectCallback = DEFAULT_REDIRECT_CALLBACK, 16 onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
17 redirectUri = window.location.origin + '/intermediate', 17 redirectUri = window.location.origin + '/intermediate',
18 ...options 18 ...options
19 }) => { 19 }) => {
20 if (instance) return instance; 20 if (instance) return instance;
21 21
22 // The 'instance' is simply a Vue object 22 // The 'instance' is simply a Vue object
23 instance = new Vue({ 23 instance = new Vue({
24 data() { 24 data() {
25 return { 25 return {
26 loading: true, 26 loading: true,
27 isAuthenticated: false, 27 isAuthenticated: false,
28 user: {}, 28 user: {},
29 auth0Client: null, 29 auth0Client: null,
30 auth0Client1: null, 30 auth0Client1: null,
31 popupOpen: false, 31 popupOpen: false,
32 error: null 32 error: null
33 }; 33 };
34 }, 34 },
35 methods: { 35 methods: {
36 /** Authenticates the user using a popup window */ 36 /** Authenticates the user using a popup window */
37 async loginWithPopup(o) { 37 async loginWithPopup(o) {
38 this.popupOpen = true; 38 this.popupOpen = true;
39 39
40 try { 40 try {
41 await this.auth0Client.loginWithPopup(o); 41 await this.auth0Client.loginWithPopup(o);
42 } catch (e) { 42 } catch (e) {
43 // eslint-disable-next-line 43 // eslint-disable-next-line
44 console.error(e); 44 console.error(e);
45 } finally { 45 } finally {
46 this.popupOpen = false; 46 this.popupOpen = false;
47 } 47 }
48 48
49 this.user = await this.auth0Client.getUser(); 49 this.user = await this.auth0Client.getUser();
50 this.isAuthenticated = true; 50 this.isAuthenticated = true;
51 }, 51 },
52 /** Handles the callback when logging in using a redirect */ 52 /** Handles the callback when logging in using a redirect */
53 async handleRedirectCallback() { 53 async handleRedirectCallback() {
54 this.loading = true; 54 this.loading = true;
55 try { 55 try {
56 await this.auth0Client.handleRedirectCallback(); 56 await this.auth0Client.handleRedirectCallback();
57 this.user = await this.auth0Client.getUser(); 57 this.user = await this.auth0Client.getUser();
58 this.isAuthenticated = true; 58 this.isAuthenticated = true;
59 } catch (e) { 59 } catch (e) {
60 this.error = e; 60 this.error = e;
61 } finally { 61 } finally {
62 this.loading = false; 62 this.loading = false;
63 } 63 }
64 }, 64 },
65 /** Authenticates the user using the redirect method */ 65 /** Authenticates the user using the redirect method */
66 loginWithRedirect(o) { 66 loginWithRedirect(o) {
67 return this.auth0Client.loginWithRedirect(o); 67 return this.auth0Client.loginWithRedirect(o);
68 }, 68 },
69 /** Authenticates the user using the redirect method */ 69 /** Authenticates the user using the redirect method */
70 loginWithRedirectSignup(o) { 70 loginWithRedirectSignup(o) {
71 return this.auth0Client1.loginWithRedirect(o); 71 return this.auth0Client1.loginWithRedirect(o);
72 }, 72 },
73 /** Returns all the claims present in the ID token */ 73 /** Returns all the claims present in the ID token */
74 getIdTokenClaims(o) { 74 getIdTokenClaims(o) {
75 return this.auth0Client.getIdTokenClaims(o); 75 return this.auth0Client.getIdTokenClaims(o);
76 }, 76 },
77 /** Returns the access token. If the token is invalid or missing, a new one is retrieved */ 77 /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
78 getTokenSilently(o) { 78 getTokenSilently(o) {
79 return this.auth0Client.getTokenSilently(o); 79 return this.auth0Client.getTokenSilently(o);
80 }, 80 },
81 /** Gets the access token using a popup window */ 81 /** Gets the access token using a popup window */
82 82
83 getTokenWithPopup(o) { 83 getTokenWithPopup(o) {
84 return this.auth0Client.getTokenWithPopup(o); 84 return this.auth0Client.getTokenWithPopup(o);
85 }, 85 },
86 /** Logs the user out and removes their session on the authorization server */ 86 /** Logs the user out and removes their session on the authorization server */
87 logout(o) { 87 logout(o) {
88 return this.auth0Client.logout(o); 88 return this.auth0Client.logout(o);
89 } 89 }
90 }, 90 },
91 /** Use this lifecycle method to instantiate the SDK client */ 91 /** Use this lifecycle method to instantiate the SDK client */
92 async created() { 92 async created() {
93 // Create a new instance of the SDK client using members of the given options object 93 // Create a new instance of the SDK client using members of the given options object
94 this.auth0Client = await createAuth0Client({ 94 this.auth0Client = await createAuth0Client({
95 domain: options.domain, 95 domain: options.domain,
96 client_id: options.clientId, 96 client_id: options.clientId,
97 audience: options.audience, 97 audience: options.audience,
98 redirect_uri: redirectUri 98 redirect_uri: redirectUri
99 }); 99 });
100 100
101 this.auth0Client1 = await createAuth0Client({ 101 this.auth0Client1 = await createAuth0Client({
102 domain: options.domain, 102 domain: options.domain,
103 client_id: options.clientId, 103 client_id: options.clientId,
104 audience: options.audience, 104 audience: options.audience,
105 redirect_uri: redirectUri, 105 redirect_uri: redirectUri,
106 signup: 'yes' 106 signup: 'yes'
107 }); 107 });
108 108
109 try { 109 try {
110 // If the user is returning to the app after authentication.. 110 // If the user is returning to the app after authentication..
111 if ( 111 if (
112 window.location.search.includes("code=") && 112 window.location.search.includes("code=") &&
113 window.location.search.includes("state=") 113 window.location.search.includes("state=")
114 ) { 114 ) {
115 // handle the redirect and retrieve tokens 115 // handle the redirect and retrieve tokens
116 const { appState } = await this.auth0Client.handleRedirectCallback(); 116 const { appState } = await this.auth0Client.handleRedirectCallback();
117 const u = await this.auth0Client.getUser(); 117 const u = await this.auth0Client.getUser();
118 console.log("u", u) 118 console.log("u", u)
119 axios.post('/profile', { 119 axios.post('/profile', {
120 name: u.name, 120 name: u.name,
121 email: u.email, 121 email: u.email,
122 firstName: u.given_name, 122 firstName: u.given_name,
123 lastName: u.family_name, 123 lastName: u.family_name,
124 verified: true 124 verified: true
125 // profileImage: u.picture 125 // profileImage: u.picture
126 }).then(res => { 126 }).then(res => {
127 console.log("res", res); 127 console.log("res---profile", res);
128 this.$toaster.success(res.data.message); 128 this.$toaster.success(res.data.message);
129 localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data)) 129 localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data));
130 localStorage.setItem('spotlight_id', res.data.data.id);
130 131
131 var previousUrl = localStorage.getItem("previous_url_spotlight"); 132 var previousUrl = localStorage.getItem("previous_url_spotlight");
132 console.log("onboarding", previousUrl) 133 console.log("onboarding", previousUrl)
133 if (!previousUrl) { 134 if (!previousUrl) {
134 router.push({ name: 'Profile' }); 135 router.push({ name: 'Profile',
136 params: {
137 id: res.data.data.id,
138 }, });
135 } else { 139 } else {
136 previousUrl = JSON.parse(previousUrl); 140 previousUrl = JSON.parse(previousUrl);
137 console.log("onboarding-2", previousUrl) 141 console.log("onboarding-2", previousUrl)
138 router.push({ 142 router.push({
139 name: previousUrl.ur, 143 name: previousUrl.ur,
140 params: { 144 params: {
141 caseStudyId: previousUrl.caseStudyId, 145 caseStudyId: previousUrl.caseStudyId,
142 slideId: previousUrl.slideId, 146 slideId: previousUrl.slideId,
143 }, 147 },
144 }); 148 });
145 localStorage.removeItem("previous_url_spotlight"); 149 localStorage.removeItem("previous_url_spotlight");
146 150
147 } 151 }
148 152
149 153
150 }).catch(err => { 154 }).catch(err => {
151 console.log(err) 155 console.log(err)
152 }) 156 })
153 157
154 158
155 // Notify subscribers that the redirect callback has happened, passing the appState 159 // Notify subscribers that the redirect callback has happened, passing the appState
156 // (useful for retrieving any pre-authentication state) 160 // (useful for retrieving any pre-authentication state)
157 onRedirectCallback(appState); 161 onRedirectCallback(appState);
158 } 162 }
159 } catch (e) { 163 } catch (e) {
160 this.error = e; 164 this.error = e;
161 } finally { 165 } finally {
162 // Initialize our internal authentication state 166 // Initialize our internal authentication state
163 this.isAuthenticated = await this.auth0Client.isAuthenticated(); 167 this.isAuthenticated = await this.auth0Client.isAuthenticated();
164 this.user = await this.auth0Client.getUser(); 168 this.user = await this.auth0Client.getUser();
165 this.loading = false; 169 this.loading = false;
166 } 170 }
167 } 171 }
168 }); 172 });
169 173
170 return instance; 174 return instance;
171 }; 175 };
172 176
173 // Create a simple Vue plugin to expose the wrapper object throughout the application 177 // Create a simple Vue plugin to expose the wrapper object throughout the application
174 export const Auth0Plugin = { 178 export const Auth0Plugin = {
175 install(Vue, options) { 179 install(Vue, options) {
176 Vue.prototype.$auth = useAuth0(options); 180 Vue.prototype.$auth = useAuth0(options);
177 } 181 }
178 }; 182 };
src/components/AuthorIntro.vue
Diff comments   View file @2991bac
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 3
4 <div class="container-fluid episode-intro"> 4 <div class="container-fluid episode-intro">
5 <Header></Header> 5 <Header></Header>
6 6
7 <!-- menu wrapper --> 7 <!-- menu wrapper -->
8 <div class="intro-startup"> 8 <div class="intro-startup">
9 <div class="smasung-g-10wrp"> 9 <div class="smasung-g-10wrp">
10 <div class="top-area-blank"></div> 10 <div class="top-area-blank"></div>
11 <div class="samsung-compare-c"> 11 <div class="samsung-compare-c">
12 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div> 12 <div class="logo-1"><img :src="currentSlideData.payload.metaData.mobileImage" /></div>
13 13
14 </div> 14 </div>
15 <!-- <div class="samsung-compare-c"> 15 <!-- <div class="samsung-compare-c">
16 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div> 16 <div class="logo-1"><img src="../assets/images/logo-1.png" /></div>
17 <div class="vs">vs</div> 17 <div class="vs">vs</div>
18 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div> 18 <div class="logo-2"><img src="../assets/images/logo-2.png" /></div>
19 </div> --> 19 </div> -->
20 <div class="comment-box"> 20 <div class="comment-box">
21 <div class="comment-box-s-1"> 21 <div class="comment-box-s-1">
22 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> --> 22 <!-- <p>👋 Hi there! My name is <strong> Rashmi</strong>, and these are a few observations on the user workflows that I had while using the WhiteHat Jr. app.</p> -->
23 <p>{{currentSlideData.payload.metaData.textBox}}</p> 23 <p>{{currentSlideData.payload.metaData.textBox}}</p>
24 <div class="footer"> 24 <div class="footer">
25 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a> 25 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>
26 </div><!-- footer --> 26 </div><!-- footer -->
27 </div><!-- comment box 1 --> 27 </div><!-- comment box 1 -->
28 <!-- <div class="comment-box-s-1 comment-w-397"> 28 <!-- <div class="comment-box-s-1 comment-w-397">
29 <p> 29 <p>
30 Use arrow keys to navigate <br/> 30 Use arrow keys to navigate <br/>
31 <img src="../assets/images/key-arrow.jpg" class="key-arrow" /> 31 <img src="../assets/images/key-arrow.jpg" class="key-arrow" />
32 </p> 32 </p>
33 </div> --> 33 </div> -->
34 <!-- comment box 1 --> 34 <!-- comment box 1 -->
35 <div class="user-photo"> 35 <div class="user-photo">
36 <!-- <img src="../assets/images/comment-photo.png" /> --> 36 <!-- <img src="../assets/images/comment-photo.png" /> -->
37 <img :src="currentSlideData.payload.metaData.authorImage" /> 37 <img :src="currentSlideData.payload.metaData.authorImage" />
38 </div> 38 </div>
39 </div><!-- comment box --> 39 </div><!-- comment box -->
40 </div><!-- samsung g 10 --> 40 </div><!-- samsung g 10 -->
41 <div class="footer-nav"> 41 <div class="footer-nav">
42 <div class="footer-top"> 42 <div class="footer-top">
43 <ul class="top-intro-bt ps_right"> 43 <ul class="top-intro-bt ps_right">
44 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li> 44 <li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
45 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li> 45 <li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
46 </ul> 46 </ul>
47 </div><!-- footer top --> 47 </div><!-- footer top -->
48 <div class="footer-bottom"> 48 <div class="footer-bottom">
49 <ul> 49 <ul>
50 <li></li> 50 <li></li>
51 <li></li> 51 <li></li>
52 </ul> 52 </ul>
53 </div><!-- footer top --> 53 </div><!-- footer top -->
54 </div><!-- footer --> 54 </div><!-- footer -->
55 55
56 </div> 56 </div>
57 <!-- body wrapper --> 57 <!-- body wrapper -->
58 </div> 58 </div>
59 <!-- main wrapper --> 59 <!-- main wrapper -->
60 </main> 60 </main>
61 </template> 61 </template>
62 62
63 <script> 63 <script>
64 import Vue from "vue"; 64 import Vue from "vue";
65 import router from "../router"; 65 import router from "../router";
66 import Header from "./Header"; 66 import Header from "./Header";
67 import axios from "axios"; 67 import axios from "axios";
68 68
69 export default { 69 export default {
70 components: { 70 components: {
71 Header: Header, 71 Header: Header,
72 }, 72 },
73 name: "AuthorIntro", 73 name: "AuthorIntro",
74 74
75 data() { 75 data() {
76 76
77 return { 77 return {
78 allSlide:[], 78 allSlide:[],
79 currentSlideIndex:null, 79 currentSlideIndex:null,
80 currentSlideData:null, 80 currentSlideData:null,
81 //
82 userId:null,
81 }; 83 };
82 }, 84 },
83 mounted() { 85 mounted() {
84 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId); 86 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
85 if (allSlideData) { 87 if (allSlideData) {
86 this.allSlide = JSON.parse(allSlideData); 88 this.allSlide = JSON.parse(allSlideData);
87 this.getCurrentSlideData(); 89 // this.getCurrentSlideData();
90 this.generatecaseStudies();
88 }else{ 91 }else{
89 this.generatecaseStudies(); 92 this.generatecaseStudies();
90 } 93 }
91 94
92 }, 95 },
93 methods: { 96 methods: {
94 generatecaseStudies(){ 97 generatecaseStudies(){
95 axios 98 axios
96 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, { 99 .get("/caseStudy?caseStudyId="+this.$route.params.caseStudyId, {
97 headers: { 100 headers: {
98 Authorization: "Bearer " + this.usertoken, 101 Authorization: "Bearer " + this.usertoken,
99 }, 102 },
100 }) 103 })
101 .then((response) => { 104 .then((response) => {
102 105
103 console.log('response',response.data.data); 106 console.log('response',response.data.data);
104 this.openStudy(response.data.data); 107 this.openStudy(response.data.data);
105 }) 108 })
106 .catch((error) => console.log(error)); 109 .catch((error) => console.log(error));
107 }, 110 },
108 111
109 112
110 113
111 openStudy(payload) { 114 openStudy(payload) {
112 console.log("payload-", payload); 115 console.log("payload-", payload);
116 this.userId = payload.userId[0];
113 payload.intro.date = payload.createdAt; 117 payload.intro.date = payload.createdAt;
114 payload.intro.focusPoint = payload.focusAreas; 118 payload.intro.focusPoint = payload.focusAreas;
115 axios 119 axios
116 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 120 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
117 headers: { 121 headers: {
118 Authorization: "Bearer " + this.usertoken, 122 Authorization: "Bearer " + this.usertoken,
119 }, 123 },
120 }) 124 })
121 .then((response) => { 125 .then((response) => {
122 this.createSlide(payload, response.data.data); 126 this.createSlide(payload, response.data.data);
123 }) 127 })
124 .catch((error) => console.log(error)); 128 .catch((error) => console.log(error));
125 }, 129 },
126 130
127 createSlide(payload, slides) { 131 createSlide(payload, slides) {
128 var finalSlides = []; 132 var finalSlides = [];
129 slides.forEach((slides_) => { 133 slides.forEach((slides_) => {
130 var url = this.assignRoutes(slides_.templateId); 134 var url = this.assignRoutes(slides_.templateId);
131 var obj = { 135 var obj = {
132 forward: true, 136 forward: true,
133 backward: true, 137 backward: true,
134 ur: url, 138 ur: url,
135 slideId: slides_._id, 139 slideId: slides_._id,
136 caseStudyId: slides_.caseStudyId, 140 caseStudyId: slides_.caseStudyId,
137 payload: { 141 payload: {
138 metaData: slides_.metaData, 142 metaData: slides_.metaData,
139 comments: slides_.comments, 143 comments: slides_.comments,
140 insight: slides_.insight ? slides_.insight : null, 144 insight: slides_.insight ? slides_.insight : null,
141 }, 145 },
142 }; 146 };
143 // slides_ 147 // slides_
144 finalSlides.push(obj); 148 finalSlides.push(obj);
145 }); 149 });
146 console.log("payload", payload); 150 console.log("payload", payload);
147 // add first slide at begining 151 // add first slide at begining
148 finalSlides.unshift({ 152 finalSlides.unshift({
149 forward: true, 153 forward: true,
150 backward: false, 154 backward: false,
151 ur: "EpisodeIntro", 155 ur: "EpisodeIntro",
152 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 156 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
153 caseStudyId: payload._id, 157 caseStudyId: payload._id,
154 payload: { 158 payload: {
155 metaData: payload.intro, 159 metaData: payload.intro,
156 comments: [], 160 comments: [],
157 }, 161 },
158 }); 162 });
159 finalSlides.push({ 163 finalSlides.push({
160 forward: true, 164 forward: true,
161 backward: false, 165 backward: false,
162 ur: "Outro", 166 ur: "Outro",
163 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 167 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
164 caseStudyId: payload._id, 168 caseStudyId: payload._id,
165 payload: { 169 payload: {
166 metaData: payload.outro, 170 metaData: payload.outro,
167 comments: [], 171 comments: [],
168 }, 172 },
169 }); 173 });
170 174
171 console.log(finalSlides); 175 console.log(finalSlides);
172 console.log("payload", payload); 176 console.log("payload", payload);
173 localStorage.setItem( 177 localStorage.setItem(
174 "spotlight_slide" + payload._id, 178 "spotlight_slide" + payload._id,
175 JSON.stringify(finalSlides) 179 JSON.stringify(finalSlides)
176 ); 180 );
177 this.allSlide = finalSlides; 181 this.allSlide = finalSlides;
178 this.getCurrentSlideData(); 182 this.getCurrentSlideData();
179 }, 183 },
180 assignRoutes(tempId) { 184 assignRoutes(tempId) {
181 // /episode-intro 185 // /episode-intro
182 // /outro 186 // /outro
183 var routes = [ 187 var routes = [
184 { 188 {
185 url: "AuthorIntro", 189 url: "AuthorIntro",
186 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 190 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
187 }, 191 },
188 { 192 {
189 url: "NoScreenshotSingleAuthor", 193 url: "NoScreenshotSingleAuthor",
190 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 194 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
191 }, 195 },
192 { 196 {
193 url: "SingleMobileScreenInsightTwo", 197 url: "SingleMobileScreenInsightTwo",
194 tempId: "T3_cqNIf7tuqL4jyON63dA7", 198 tempId: "T3_cqNIf7tuqL4jyON63dA7",
195 }, 199 },
196 { 200 {
197 url: "TwoScreenWithoutInsight", 201 url: "TwoScreenWithoutInsight",
198 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 202 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
199 }, 203 },
200 { 204 {
201 url: "noscreenshotSingleautho", 205 url: "noscreenshotSingleautho",
202 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 206 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
203 }, 207 },
204 { 208 {
205 url: "SingleMobileScreenInsightOne", 209 url: "SingleMobileScreenInsightOne",
206 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 210 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
207 }, 211 },
208 { 212 {
209 url: "TwoScreenWithInsight", 213 url: "TwoScreenWithInsight",
210 tempId: "T7_za3c3sYgx7bVvtKzasdf", 214 tempId: "T7_za3c3sYgx7bVvtKzasdf",
211 }, 215 },
212 { 216 {
213 url: "AuthorReadingNow", 217 url: "AuthorReadingNow",
214 tempId: "T8_zb4d4fYgx7bVvtKzasdf", 218 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
215 }, 219 },
216 { 220 {
217 url: "AuthorReadingBreak", 221 url: "AuthorReadingBreak",
218 tempId: "T9_zb3e4fYgy7dVvfKdasdf", 222 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
219 }, 223 },
220 ]; 224 ];
221 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 225 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
222 return routes[i].url; 226 return routes[i].url;
223 }, 227 },
224 228
225 229
226 getCurrentSlideData(){ 230 getCurrentSlideData(){
227 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId); 231 var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
228 this.currentSlideIndex = i; 232 this.currentSlideIndex = i;
229 this.currentSlideData = this.allSlide[i] 233 this.currentSlideData = this.allSlide[i]
230 console.log("currentSlideData",this.currentSlideData) 234 console.log("currentSlideData",this.currentSlideData)
231 235
232 }, 236 },
233 goNext(){ 237 goNext(){
234 this.currentSlideIndex++ 238 this.currentSlideIndex++
235 this.$router.push({ 239 this.$router.push({
236 name: this.allSlide[this.currentSlideIndex].ur, 240 name: this.allSlide[this.currentSlideIndex].ur,
237 params: { 241 params: {
238 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 242 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
239 slideId: this.allSlide[this.currentSlideIndex].slideId, 243 slideId: this.allSlide[this.currentSlideIndex].slideId,
240 }, 244 },
241 }); 245 });
242 246
243 }, 247 },
244 goBack(){ 248 goBack(){
245 this.currentSlideIndex-- 249 this.currentSlideIndex--
246 this.$router.push({ 250 this.$router.push({
247 name: this.allSlide[this.currentSlideIndex].ur, 251 name: this.allSlide[this.currentSlideIndex].ur,
248 params: { 252 params: {
249 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId, 253 caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
250 slideId: this.allSlide[this.currentSlideIndex].slideId, 254 slideId: this.allSlide[this.currentSlideIndex].slideId,
251 }, 255 },
252 }); 256 });
253 257
254 }, 258 },
255 goToLogin() { 259 goToLogin() {
256 this.$router.push("/login"); 260 this.$router.push("/login");
257 }, 261 },
258 goToSignUp() { 262 goToSignUp() {
259 this.$router.push("/"); 263 this.$router.push("/");
260 }, 264 },
261 goToProfile() { 265 goToProfile() {
262 this.$router.push("/profile"); 266 this.$router.push({
267 name: "Profile",
268 params: {
269 id: this.userId,
270 },
271 });
263 }, 272 },
264 273
265 }, 274 },
266 }; 275 };
267 </script> 276 </script>
268 277
src/components/Header.vue
Diff comments   View file @2991bac
1 <template> 1 <template>
2 <nav class="navbar navbar-expand-sm spotLight-nav"> 2 <nav class="navbar navbar-expand-sm spotLight-nav">
3 <a @click="goTo" class="navbar-brand" href="javasript:void(0);" 3 <a @click="goTo" class="navbar-brand" href="javasript:void(0);"
4 ><img src="../assets/images/logo.png" 4 ><img src="../assets/images/logo.png"
5 /></a> 5 /></a>
6 <button 6 <button
7 class="navbar-toggler" 7 class="navbar-toggler"
8 type="button" 8 type="button"
9 data-toggle="collapse" 9 data-toggle="collapse"
10 data-target="#navbarsExample03" 10 data-target="#navbarsExample03"
11 aria-controls="navbarsExample03" 11 aria-controls="navbarsExample03"
12 aria-expanded="false" 12 aria-expanded="false"
13 aria-label="Toggle navigation" 13 aria-label="Toggle navigation"
14 > 14 >
15 <span class="navbar-toggler-icon"></span> 15 <span class="navbar-toggler-icon"></span>
16 <span class="navbar-toggler-icon"></span> 16 <span class="navbar-toggler-icon"></span>
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 </button> 18 </button>
19 19
20 <div class="collapse navbar-collapse" id="navbarsExample03"> 20 <div class="collapse navbar-collapse" id="navbarsExample03">
21 <!-- <ul class="navbar-nav mr-auto"> 21 <!-- <ul class="navbar-nav mr-auto">
22 <li class="nav-item active"> 22 <li class="nav-item active">
23 <a class="nav-link" href="javasript:void(0);"avasript:void(0);" 23 <a class="nav-link" href="javasript:void(0);"avasript:void(0);"
24 </li> 24 </li>
25 <li class="nav-item"> 25 <li class="nav-item">
26 <a class="nav-link" href="javasript:void(0);"avasript:void(0);" 26 <a class="nav-link" href="javasript:void(0);"avasript:void(0);"
27 </li> 27 </li>
28 <li class="nav-item"> 28 <li class="nav-item">
29 <a class="nav-link" href="javasript:void(0);"avasript:void(0);" 29 <a class="nav-link" href="javasript:void(0);"avasript:void(0);"
30 </li> 30 </li>
31 <li class="nav-item"> 31 <li class="nav-item">
32 <a class="nav-link" href="javasript:void(0);"avasript:void(0);" 32 <a class="nav-link" href="javasript:void(0);"avasript:void(0);"
33 </li> 33 </li>
34 </ul> --> 34 </ul> -->
35 </div> 35 </div>
36 <div class=""> 36 <div class="">
37 <a 37 <a
38 @click="goTo" 38 @click="goTo"
39 href="javascript:void(0);" 39 href="javascript:void(0);"
40 class="user-profile-photo common_color" 40 class="user-profile-photo common_color"
41 v-if="usertoken" 41 v-if="usertoken"
42 > 42 >
43 <img :src="profilePictue" 43 <img :src="profilePictue"
44 /></a> 44 /></a>
45 <a 45 <a
46 @click="goToLogin" 46 @click="goToLogin"
47 href="javascript:void(0);" 47 href="javascript:void(0);"
48 class="user-profile-photo insights-profile" 48 class="user-profile-photo insights-profile"
49 v-if="!usertoken" 49 v-if="!usertoken"
50 > 50 >
51 <img src="../assets/images/lock.svg" 51 <img src="../assets/images/lock.svg"
52 /></a> 52 /></a>
53 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 53 <div class="sub-menu-user" id="userprofileshow" style="display: none">
54 <!-- <ul> 54 <!-- <ul>
55 <li> 55 <li>
56 <a href="javascript:void(0);" 56 <a href="javascript:void(0);"
57 >Edit Profile</a 57 >Edit Profile</a
58 > 58 >
59 </li> 59 </li>
60 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 60 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
61 </ul> --> 61 </ul> -->
62 </div> 62 </div>
63 </div> 63 </div>
64 </nav> 64 </nav>
65 </template> 65 </template>
66 66
67 <script> 67 <script>
68 import $ from "jquery"; 68 import $ from "jquery";
69 import axios from "axios"; 69 import axios from "axios";
70 export default { 70 export default {
71 name: "Header", 71 name: "Header",
72 data() { 72 data() {
73 return { 73 return {
74 usertoken: null, 74 usertoken: null,
75 profilePictue: null, 75 profilePictue: null,
76 userId: null,
76 }; 77 };
77 }, 78 },
78 mounted() { 79 mounted() {
79
80
81 var userdata = localStorage.getItem("spotlight_usertoken"); 80 var userdata = localStorage.getItem("spotlight_usertoken");
81 this.userId = localStorage.getItem("spotlight_id");
82 if (userdata) { 82 if (userdata) {
83 userdata = JSON.parse(userdata); 83 userdata = JSON.parse(userdata);
84 this.usertoken = userdata.token; 84 this.usertoken = userdata.token;
85 this.getProfile(); 85 this.getProfile();
86 } 86 }
87 }, 87 },
88 methods: { 88 methods: {
89 goTo() { 89 goTo() {
90 this.$router.push("/profile"); 90 this.$router.push({
91 name: "Profile",
92 params: {
93 id: this.userId,
94 },
95 });
91 }, 96 },
92 goToLogin() { 97 goToLogin() {
93 localStorage.removeItem("spotlight_usertoken"); 98 localStorage.removeItem("spotlight_usertoken");
94 localStorage.removeItem("spotlight_email"); 99 localStorage.removeItem("spotlight_email");
100 localStorage.removeItem("spotlight_id");
95 this.$router.push("/login"); 101 this.$router.push("/login");
96 }, 102 },
97 getProfile() { 103 getProfile() {
98 axios 104 axios
99 .get("/profile", { 105 .get("/profile", {
100 headers: { 106 headers: {
101 Authorization: "Bearer " + this.usertoken, 107 Authorization: "Bearer " + this.usertoken,
102 }, 108 },
103 }) 109 })
104 .then((response) => { 110 .then((response) => {
105 this.assignClass(response.data.data.bgColor); 111 this.assignClass(response.data.data.bgColor);
106 this.profilePictue = response.data.data.profilePic; 112 this.profilePictue = response.data.data.profilePic;
107 console.log(response.data.data); 113 console.log(response.data.data);
108 }) 114 })
109 .catch((error) => console.log(error)); 115 .catch((error) => console.log(error));
110 }, 116 },
111 assignClass(bgClr) { 117 assignClass(bgClr) {
112 var cols = document.getElementsByClassName("common_color"); 118 var cols = document.getElementsByClassName("common_color");
113 for (var i = 0; i < cols.length; i++) { 119 for (var i = 0; i < cols.length; i++) {
114 cols[i].style.backgroundColor = bgClr; 120 cols[i].style.backgroundColor = bgClr;
115 } 121 }
116 }, 122 },
117 }, 123 },
118 }; 124 };
src/components/Intermediate.vue
Diff comments   View file @2991bac
1 <template> 1 <template>
2 2
3 <div class="contact-page"> 3 <div class="contact-page">
4 <p>Loading</p> 4 <p>Loading</p>
5 </div> 5 </div>
6 </template> 6 </template>
7 7
8 <script> 8 <script>
9 import router from '../router' 9 import router from '../router'
10 export default { 10 export default {
11 name: 'Intermediate', 11 name: 'Intermediate',
12 data() { 12 data() {
13 var userdata = localStorage.getItem('spotlight_usertoken') 13 var userdata = localStorage.getItem('spotlight_usertoken')
14 var userid = localStorage.getItem('spotlight_id')
14 if(userdata){ 15 if(userdata){
15 router.push({ path: '/profile'}) 16 router.push({ name: 'Profile',
17 params: {
18 id: userid,
19 }, });
16 } 20 }
17 return { 21 return {
18 msg: 'Welcome to Your Vue.js App' 22 msg: 'Welcome to Your Vue.js App'
19 } 23 }
20 }, 24 },
21 } 25 }
22 </script> 26 </script>
23 27
src/components/LandingPage.vue
Diff comments   View file @2991bac
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"> 48 <h1 class="welcome-hd-back">we’re stoked you’re back!</h1>
49 we’re stoked
50 you’re back!
51 </h1>
52 </div> 49 </div>
53 <!-- users land image --> 50 <!-- users land image -->
54 <div class="s-l-right-section"> 51 <div class="s-l-right-section">
55 <div class="form-layout"> 52 <div class="form-layout">
56 <form v-on:keyup.enter="loginWIthEmail"> 53 <form v-on:keyup.enter="loginWIthEmail">
57 <h5>Log In using</h5> 54 <h5>Log In using</h5>
58 <div class="social-login"> 55 <div class="social-login">
59 <ul> 56 <ul>
60 <li> 57 <li>
61 <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> 58 <a @click="login" class="cursor-pointer"
59 ><img src="../assets/images/google.svg"
60 /></a>
62 </li> 61 </li>
63 <li> 62 <li>
64 <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> 63 <a @click="login" class="cursor-pointer"
64 ><img src="../assets/images/linkdin.svg"
65 /></a>
65 </li> 66 </li>
66 <li> 67 <li>
67 <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> 68 <a @click="login" class="cursor-pointer"
69 ><img src="../assets/images/twitter.svg"
70 /></a>
68 </li> 71 </li>
69 </ul> 72 </ul>
70 </div> 73 </div>
71 <h5>or Log In with email</h5> 74 <h5>or Log In with email</h5>
72 <div class="fill-form"> 75 <div class="fill-form">
73 <label for="inputEmail" class="sr-only">Email address</label> 76 <label for="inputEmail" class="sr-only">Email address</label>
74 <input 77 <input
75 type="email" 78 type="email"
76 id="inputEmail" 79 id="inputEmail"
77 class="form-control" 80 class="form-control"
78 placeholder="Your Email ID" 81 placeholder="Your Email ID"
79 v-model="userData.email" 82 v-model="userData.email"
80 /> 83 />
81 <label for="inputPassword" class="sr-only">Password</label> 84 <label for="inputPassword" class="sr-only">Password</label>
82 <input 85 <input
83 type="password" 86 type="password"
84 id="inputPassword" 87 id="inputPassword"
85 class="form-control" 88 class="form-control"
86 placeholder="Password" 89 placeholder="Password"
87 v-model="userData.password" 90 v-model="userData.password"
88 /> 91 />
89 92
90 <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" 93 <a
91 @click="loginWIthEmail"> 94 href="javascript:void(0);"
95 class="btn btn-lg sb-button"
96 type="submit"
97 @click="loginWIthEmail"
98 >
92 <img src="../assets/images/key.svg" /> Log In to your account 99 <img src="../assets/images/key.svg" /> Log In to your account
93 </a> 100 </a>
94 <p class="forget-pass light-font-weight"> 101 <p class="forget-pass light-font-weight">
95 Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a> 102 Forgot Password?
103 <a class="cursor-pointer light-font-weight" @click="goToReset"
104 >Reset</a
105 >
96 </p> 106 </p>
97 <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3> 107 <h3 class="ft-normal">
108 Don’t have an account?
109 <a class="cursor-pointer no-underline" @click="goToSignUp"
110 >SignUp</a
111 >
112 </h3>
98 </div> 113 </div>
99 </form> 114 </form>
100 </div> 115 </div>
101 </div> 116 </div>
102 <!-- sign up --> 117 <!-- sign up -->
103 </div> 118 </div>
104 <!-- body wrapper --> 119 <!-- body wrapper -->
105 </div> 120 </div>
106 </main> 121 </main>
107 </template> 122 </template>
108 123
109 <script> 124 <script>
110
111 import Vue from "vue"; 125 import Vue from "vue";
112 import router from "../router"; 126 import router from "../router";
113 import $ from "jquery"; 127 import $ from "jquery";
114 import axios from "axios"; 128 import axios from "axios";
115 129
116 export default { 130 export default {
117 name: "LandingPage", 131 name: "LandingPage",
118 132
119 data() { 133 data() {
120 return { 134 return {
121 loggedinFlag: false, 135 loggedinFlag: false,
122 userData:{}, 136 userData: {},
123 }; 137 };
124 }, 138 },
125 mounted() { 139 mounted() {
126 // this.$auth.logout(); 140 // this.$auth.logout();
127 // localStorage.removeItem("spotlight_usertoken"); 141 // localStorage.removeItem("spotlight_usertoken");
128 // localStorage.removeItem("spotlight_email"); 142 // localStorage.removeItem("spotlight_email");
129 var userdata = localStorage.getItem("spotlight_usertoken"); 143 var userdata = localStorage.getItem("spotlight_usertoken");
144 var userid = localStorage.getItem("spotlight_id");
130 if (userdata) { 145 if (userdata) {
131 this.$router.push("/profile"); 146 // this.$router.push("/profile");
147 this.$router.push({
148 name: "Profile",
149 params: {
150 id: userid,
151 },
152 });
132 } 153 }
133 }, 154 },
134 methods: { 155 methods: {
135 login() { 156 login() {
136 this.$auth.loginWithRedirect(); 157 this.$auth.loginWithRedirect();
137 }, 158 },
138 goToSignUp(){ 159 goToSignUp() {
139 this.$router.push("/"); 160 this.$router.push("/");
140 }, 161 },
141 goToReset() { 162 goToReset() {
142 this.$router.push("/reset"); 163 this.$router.push("/reset");
143 }, 164 },
144 loginWIthEmail(){ 165 loginWIthEmail() {
145 axios 166 axios
146 .post("/login", this.userData) 167 .post("/login", this.userData)
147 .then((response) => { 168 .then((response) => {
148 console.log("login- response",response) 169 console.log("login- response", response);
149 this.$toaster.success(response.data.message) 170 this.$toaster.success(response.data.message);
150 if(response.data.status == 'success'){ 171 if (response.data.status == "success") {
151 localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data)) 172 localStorage.setItem(
152 this.$router.push("/profile"); 173 "spotlight_usertoken",
153 } 174 JSON.stringify(response.data.data)
175 );
176 localStorage.setItem("spotlight_id", res.data.data.id);
177 this.$router.push({
178 name: "Profile",
179 params: {
180 id: res.data.data.id,
181 },
182 });
183 }
154 }) 184 })
155 .catch( (error) =>{ 185 .catch((error) => {
156 if (error.response) { 186 if (error.response) {
157 this.$toaster.error(error.response.data.message) 187 this.$toaster.error(error.response.data.message);
158 if(error.response.data.message == 'Email Not Verified'){ 188 if (error.response.data.message == "Email Not Verified") {
159 localStorage.setItem('spotlight_email', this.userData.email); 189 localStorage.setItem("spotlight_email", this.userData.email);
160 this.$router.push({ name: 'Otp', params: { flag: true }}); 190 this.$router.push({ name: "Otp", params: { flag: true } });
161 } 191 }
162 } 192 }
163 }); 193 });
164 } 194 },
165 }, 195 },
166 }; 196 };
167 </script> 197 </script>
168 <style> 198 <style>
169 .light-font-weight { 199 .light-font-weight {
170 font-weight: 500 !important; 200 font-weight: 500 !important;
171 } 201 }
172 .no-underline{ 202 .no-underline {
src/components/Profile.vue
Diff comments   View file @2991bac
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <!-- profile --> 3 <!-- profile -->
4 <div class="popup-wrp" style="display: none"> 4 <div class="popup-wrp" style="display: none">
5 <div class="overlay" @click="hideDialog"></div> 5 <div class="overlay" @click="hideDialog"></div>
6 <div class="popup-set" id="add-profile" style="display: none"> 6 <div class="popup-set" id="add-profile" style="display: none">
7 <div class="popup-header"> 7 <div class="popup-header">
8 <div class="user-photo common_color"> 8 <div class="user-photo common_color">
9 <img :src="userData.profilePic" /> 9 <img :src="userData.profilePic" />
10 </div> 10 </div>
11 <!-- header user --> 11 <!-- header user -->
12 12
13 <ul> 13 <ul>
14 <li> 14 <li>
15 <a href="javasript:void(0);" 15 <a href="javasript:void(0);"
16 ><img src="../assets/images/upload-cloud.svg" /><span 16 ><img src="../assets/images/upload-cloud.svg" /><span
17 >Upload Avatar</span></a> 17 >Upload Avatar</span
18 ></a
19 >
18 </li> 20 </li>
19 <li> 21 <li>
20 <a href="javasript:void(0);" @click="getRandomAvatar()" 22 <a href="javasript:void(0);" @click="getRandomAvatar()"
21 ><img src="../assets/images/randomise.svg" /><span 23 ><img src="../assets/images/randomise.svg" /><span
22 >Randomise Avatar</span 24 >Randomise Avatar</span
23 ></a 25 ></a
24 > 26 >
25 </li> 27 </li>
26 </ul> 28 </ul>
27 </div> 29 </div>
28 <!-- header --> 30 <!-- header -->
29 <div class="popup-body"> 31 <div class="popup-body">
30 <form class="popup-forms"> 32 <form class="popup-forms">
31 <div class="row"> 33 <div class="row">
32 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 34 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
33 <div class="form-group floating-label"> 35 <div class="form-group floating-label">
34 <input 36 <input
35 type="text" 37 type="text"
36 class="form-control" 38 class="form-control"
37 v-model="userData.firstName" 39 v-model="userData.firstName"
38 placeholder=" " 40 placeholder=" "
39 id="fname" 41 id="fname"
40 /> 42 />
41 <label for="fname">First Name</label> 43 <label for="fname">First Name</label>
42 </div> 44 </div>
43 </div> 45 </div>
44 <!-- input --> 46 <!-- input -->
45 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 47 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
46 <div class="form-group floating-label"> 48 <div class="form-group floating-label">
47 <input 49 <input
48 type="text" 50 type="text"
49 class="form-control" 51 class="form-control"
50 value="" 52 value=""
51 placeholder=" " 53 placeholder=" "
52 id="lname" 54 id="lname"
53 v-model="userData.lastName" 55 v-model="userData.lastName"
54 /> 56 />
55 <label for="lname" class="lname">Last Name</label> 57 <label for="lname" class="lname">Last Name</label>
56 </div> 58 </div>
57 </div> 59 </div>
58 <!-- input --> 60 <!-- input -->
59 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> 61 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
60 <div class="form-group floating-label"> 62 <div class="form-group floating-label">
61 <input 63 <input
62 type="text" 64 type="text"
63 class="form-control" 65 class="form-control"
64 value="" 66 value=""
65 v-model="userData.designation" 67 v-model="userData.designation"
66 placeholder=" " 68 placeholder=" "
67 id="designation" 69 id="designation"
68 /> 70 />
69 <label for="designation">Designation</label> 71 <label for="designation">Designation</label>
70 </div> 72 </div>
71 </div> 73 </div>
72 <!-- input --> 74 <!-- input -->
73 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 75 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
74 <div class="form-group floating-label"> 76 <div class="form-group floating-label">
75 <input 77 <input
76 type="text" 78 type="text"
77 class="form-control" 79 class="form-control"
78 v-model="userData.organisation" 80 v-model="userData.organisation"
79 id="company" 81 id="company"
80 placeholder=" " 82 placeholder=" "
81 /> 83 />
82 <label for="company">Company</label> 84 <label for="company">Company</label>
83 </div> 85 </div>
84 </div> 86 </div>
85 <!-- input --> 87 <!-- input -->
86 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 88 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
87 <div class="form-group floating-label"> 89 <div class="form-group floating-label">
88 <textarea 90 <textarea
89 type="text" 91 type="text"
90 class="form-control" 92 class="form-control"
91 value="" 93 value=""
92 v-model="userData.bio" 94 v-model="userData.bio"
93 id="yourself" 95 id="yourself"
94 placeholder=" " 96 placeholder=" "
95 ></textarea> 97 ></textarea>
96 <label for="yourself" 98 <label for="yourself"
97 >Tell others a little about yourself</label 99 >Tell others a little about yourself</label
98 > 100 >
99 </div> 101 </div>
100 </div> 102 </div>
101 <!-- input --> 103 <!-- input -->
102 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 104 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
103 <p class="things">Three things that you talk more about</p> 105 <p class="things">Three things that you talk more about</p>
104 106
105 <ul class="interests"> 107 <ul class="interests">
106 <li v-for="(interest, i) in userData.interests" :key="i"> 108 <li v-for="(interest, i) in userData.interests" :key="i">
107 <span>{{ interest }}</span> 109 <span>{{ interest }}</span>
108 <a 110 <a
109 href="javascript:void(0);" 111 href="javascript:void(0);"
110 @click="removeInterest(i)" 112 @click="removeInterest(i)"
111 class="cat-minus" 113 class="cat-minus"
112 ><img src="../assets/images/minus.svg" 114 ><img src="../assets/images/minus.svg"
113 /></a> 115 /></a>
114 </li> 116 </li>
115 <li> 117 <li>
116 <input 118 <input
117 class="" 119 class=""
118 placeholder="Add interest" 120 placeholder="Add interest"
119 v-on:keyup.enter="addInterest" 121 v-on:keyup.enter="addInterest"
120 v-model="interestName" 122 v-model="interestName"
121 /> 123 />
122 <a href="javascript:void(0);" @click="addInterest()" 124 <a href="javascript:void(0);" @click="addInterest()"
123 ><img src="../assets/images/plus-circle.svg" 125 ><img src="../assets/images/plus-circle.svg"
124 /></a> 126 /></a>
125 </li> 127 </li>
126 </ul> 128 </ul>
127 </div> 129 </div>
128 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 130 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
129 <p class="things">Choose Background color</p> 131 <p class="things">Choose Background color</p>
130 132
131 <ul class="colors"> 133 <ul class="colors">
132 <li> 134 <li>
133 <a 135 <a
134 href="javascript:void(0);" 136 href="javascript:void(0);"
135 id="#C4C4C4" 137 id="#C4C4C4"
136 class="silver" 138 class="silver"
137 @click="changeColor('#C4C4C4')" 139 @click="changeColor('#C4C4C4')"
138 ></a> 140 ></a>
139 </li> 141 </li>
140 <li> 142 <li>
141 <a 143 <a
142 href="javascript:void(0);" 144 href="javascript:void(0);"
143 id="#FFF6D7" 145 id="#FFF6D7"
144 class="milk-punch" 146 class="milk-punch"
145 @click="changeColor('#FFF6D7')" 147 @click="changeColor('#FFF6D7')"
146 ></a> 148 ></a>
147 </li> 149 </li>
148 <li> 150 <li>
149 <a 151 <a
150 href="javascript:void(0);" 152 href="javascript:void(0);"
151 id="#BDDBFF" 153 id="#BDDBFF"
152 class="french-pass" 154 class="french-pass"
153 @click="changeColor('#BDDBFF')" 155 @click="changeColor('#BDDBFF')"
154 ></a> 156 ></a>
155 </li> 157 </li>
156 <li> 158 <li>
157 <a 159 <a
158 href="javascript:void(0);" 160 href="javascript:void(0);"
159 id="#C0FAFE" 161 id="#C0FAFE"
160 class="cyan-french-pass" 162 class="cyan-french-pass"
161 @click="changeColor('#C0FAFE')" 163 @click="changeColor('#C0FAFE')"
162 ></a> 164 ></a>
163 </li> 165 </li>
164 <li> 166 <li>
165 <a 167 <a
166 href="javascript:void(0);" 168 href="javascript:void(0);"
167 id="#FFDBDC" 169 id="#FFDBDC"
168 class="cosmos" 170 class="cosmos"
169 @click="changeColor('#FFDBDC')" 171 @click="changeColor('#FFDBDC')"
170 ></a> 172 ></a>
171 </li> 173 </li>
172 <li> 174 <li>
173 <a 175 <a
174 href="javascript:void(0);" 176 href="javascript:void(0);"
175 id="#FEE6AC" 177 id="#FEE6AC"
176 class="cape-Honey" 178 class="cape-Honey"
177 @click="changeColor('#FEE6AC')" 179 @click="changeColor('#FEE6AC')"
178 ></a> 180 ></a>
179 </li> 181 </li>
180 <li> 182 <li>
181 <a 183 <a
182 href="javascript:void(0);" 184 href="javascript:void(0);"
183 id="#E5DFF0" 185 id="#E5DFF0"
184 class="snuff" 186 class="snuff"
185 @click="changeColor('#E5DFF0')" 187 @click="changeColor('#E5DFF0')"
186 ></a> 188 ></a>
187 </li> 189 </li>
188 <li> 190 <li>
189 <a 191 <a
190 href="javascript:void(0);" 192 href="javascript:void(0);"
191 id="#DFE7EF" 193 id="#DFE7EF"
192 class="catskillWhite" 194 class="catskillWhite"
193 @click="changeColor('#DFE7EF')" 195 @click="changeColor('#DFE7EF')"
194 ></a> 196 ></a>
195 </li> 197 </li>
196 <li> 198 <li>
197 <a 199 <a
198 href="javascript:void(0);" 200 href="javascript:void(0);"
199 id="#FFF" 201 id="#FFF"
200 class="white" 202 class="white"
201 @click="changeColor('#FFF')" 203 @click="changeColor('#FFF')"
202 ></a> 204 ></a>
203 </li> 205 </li>
204 </ul> 206 </ul>
205 </div> 207 </div>
206 <div class="col-lg-12 mt-50"> 208 <div class="col-lg-12 mt-50">
207 <p class="notifications"> 209 <p class="notifications">
208 Recieve notifications when you recieve a comment/ Upvote 210 Recieve notifications when you recieve a comment/ Upvote
209 </p> 211 </p>
210 <div class="switch-bt-wrp"> 212 <div class="switch-bt-wrp">
211 <label class="switch-btn"> 213 <label class="switch-btn">
212 <input type="checkbox" class="toggle-btn" /> 214 <input type="checkbox" class="toggle-btn" />
213 <span class="rounded-toggle"></span> 215 <span class="rounded-toggle"></span>
214 </label> 216 </label>
215 <span class="onoff">on/off</span> 217 <span class="onoff">on/off</span>
216 </div> 218 </div>
217 </div> 219 </div>
218 <div class="col-lg-12"> 220 <div class="col-lg-12">
219 <p class="add-socail-ch"> 221 <p class="add-socail-ch">
220 Add your social Channels <span></span> 222 Add your social Channels <span></span>
221 </p> 223 </p>
222 </div> 224 </div>
223 225
224 <div 226 <div
225 class="row" 227 class="row"
226 style="width: 100%" 228 style="width: 100%"
227 v-for="(social, i) in selectedSocialLink" 229 v-for="(social, i) in selectedSocialLink"
228 :key="i" 230 :key="i"
229 > 231 >
230 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4"> 232 <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
231 <div class="form-group floating-label"> 233 <div class="form-group floating-label">
232 <select class="form-group"> 234 <select class="form-group">
233 <option value="Linkedin">{{ social.displayName }}</option> 235 <option value="Linkedin">{{ social.displayName }}</option>
234 </select> 236 </select>
235 <span class="select-arrow" 237 <span class="select-arrow"
236 ><img src="../assets/images/chevron-down.svg" 238 ><img src="../assets/images/chevron-down.svg"
237 /></span> 239 /></span>
238 </div> 240 </div>
239 </div> 241 </div>
240 <!-- input --> 242 <!-- input -->
241 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7"> 243 <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
242 <div class="form-group floating-label"> 244 <div class="form-group floating-label">
243 <input 245 <input
244 type="text" 246 type="text"
245 class="form-control" 247 class="form-control"
246 value="" 248 value=""
247 placeholder="Paste your profile URL here" 249 placeholder="Paste your profile URL here"
248 id="" 250 id=""
249 v-model="social.fieldValue" 251 v-model="social.fieldValue"
250 /> 252 />
251 </div> 253 </div>
252 </div> 254 </div>
253 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1"> 255 <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
254 <ul class="interests"> 256 <ul class="interests">
255 <li> 257 <li>
256 <a 258 <a
257 @click="removeSocialLink(i)" 259 @click="removeSocialLink(i)"
258 href="javascript:void(0);" 260 href="javascript:void(0);"
259 class="cat-minus" 261 class="cat-minus"
260 ><img src="../assets/images/minus.svg" 262 ><img src="../assets/images/minus.svg"
261 /></a> 263 /></a>
262 </li> 264 </li>
263 </ul> 265 </ul>
264 </div> 266 </div>
265 </div> 267 </div>
266 <!-- input --> 268 <!-- input -->
267 269
268 <!-- input --> 270 <!-- input -->
269 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 271 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
270 <div class="form-group floating-label"> 272 <div class="form-group floating-label">
271 <select 273 <select
272 class="form-group" 274 class="form-group"
273 v-model="currentLink" 275 v-model="currentLink"
274 v-on:change="addSocialLink(currentLink)" 276 v-on:change="addSocialLink(currentLink)"
275 > 277 >
276 <option value="null">Add another</option> 278 <option value="null">Add another</option>
277 <option 279 <option
278 v-for="(social, i) in socialLink" 280 v-for="(social, i) in socialLink"
279 :key="i" 281 :key="i"
280 :value="social.fieldName" 282 :value="social.fieldName"
281 > 283 >
282 {{ social.displayName }} 284 {{ social.displayName }}
283 </option> 285 </option>
284 </select> 286 </select>
285 <span class="select-arrow" 287 <span class="select-arrow"
286 ><img src="../assets/images/chevron-down.svg" 288 ><img src="../assets/images/chevron-down.svg"
287 /></span> 289 /></span>
288 </div> 290 </div>
289 </div> 291 </div>
290 <!-- input --> 292 <!-- input -->
291 </div> 293 </div>
292 <a href="javascript:void(0);" @click="saveProfile" class="next-bt" 294 <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
293 >Save</a 295 >Save</a
294 > 296 >
295 </form> 297 </form>
296 </div> 298 </div>
297 <div class="clearfix"></div> 299 <div class="clearfix"></div>
298 </div> 300 </div>
299 <!-- add profile --> 301 <!-- add profile -->
300 </div> 302 </div>
301 <!-- profile --> 303 <!-- profile -->
302 <div class="container-fluid inner-wrp"> 304 <div class="container-fluid inner-wrp">
303 <nav class="navbar navbar-expand-sm spotLight-nav"> 305 <nav class="navbar navbar-expand-sm spotLight-nav">
304 <a class="navbar-brand" href="javasript:void(0);" 306 <a class="navbar-brand" href="javasript:void(0);"
305 ><img src="../assets/images/logo.png" 307 ><img src="../assets/images/logo.png"
306 /></a> 308 /></a>
307 <button 309 <button
308 class="navbar-toggler" 310 class="navbar-toggler"
309 type="button" 311 type="button"
310 data-toggle="collapse" 312 data-toggle="collapse"
311 data-target="#navbarsExample03" 313 data-target="#navbarsExample03"
312 aria-controls="navbarsExample03" 314 aria-controls="navbarsExample03"
313 aria-expanded="false" 315 aria-expanded="false"
314 aria-label="Toggle navigation" 316 aria-label="Toggle navigation"
315 > 317 >
316 <span class="navbar-toggler-icon"></span> 318 <span class="navbar-toggler-icon"></span>
317 <span class="navbar-toggler-icon"></span> 319 <span class="navbar-toggler-icon"></span>
318 <span class="navbar-toggler-icon"></span> 320 <span class="navbar-toggler-icon"></span>
319 </button> 321 </button>
320 322
321 <div class="collapse navbar-collapse" id="navbarsExample03"> 323 <div class="collapse navbar-collapse" id="navbarsExample03">
322 <ul class="navbar-nav mr-auto"> 324 <ul class="navbar-nav mr-auto">
323 <li class="nav-item active"> 325 <li class="nav-item active">
324 <a class="nav-link" href="javasript:void(0);">About</a> 326 <a class="nav-link" href="javasript:void(0);">About</a>
325 </li> 327 </li>
326 <li class="nav-item"> 328 <li class="nav-item">
327 <a class="nav-link" href="javasript:void(0);">Masterclass</a> 329 <a class="nav-link" href="javasript:void(0);">Masterclass</a>
328 </li> 330 </li>
329 <li class="nav-item"> 331 <li class="nav-item">
330 <a class="nav-link" href="javasript:void(0);">Stories</a> 332 <a class="nav-link" href="javasript:void(0);">Stories</a>
331 </li> 333 </li>
332 <li class="nav-item"> 334 <li class="nav-item">
333 <a class="nav-link" href="javasript:void(0);">Library</a> 335 <a class="nav-link" href="javasript:void(0);">Library</a>
334 </li> 336 </li>
335 </ul> 337 </ul>
336 </div> 338 </div>
337 <a 339 <a
338 v-if="this.userData.firstLogin" 340 v-if="this.userData.firstLogin"
339 href="javasript:void(0);" 341 href="javasript:void(0);"
340 @click="addProfileDialog" 342 @click="addProfileDialog"
341 class="update_profile" 343 class="update_profile"
342 ><span></span> Update Profile</a 344 ><span></span> Update Profile</a
343 > 345 >
344 <div class=""> 346 <div class="">
345 <a 347 <a
346 href="javascript:void(0);" 348 href="javascript:void(0);"
347 class="user-profile-photo common_color" 349 class="user-profile-photo common_color"
348 @click="userprofileshowDialog" 350 @click="userprofileshowDialog"
349 ><img :src="userData.profilePic" 351 ><img :src="userData.profilePic"
350 /></a> 352 /></a>
351 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 353 <div class="sub-menu-user" id="userprofileshow" style="display: none">
352 <ul> 354 <ul>
353 <li> 355 <li v-if="this.sameUser">
354 <a href="javascript:void(0);" @click="addProfileDialog" 356 <a href="javascript:void(0);" @click="addProfileDialog"
355 >Edit Profile</a 357 >Edit Profile</a
356 > 358 >
357 </li> 359 </li>
358 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 360 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
359 </ul> 361 </ul>
360 </div> 362 </div>
361 </div> 363 </div>
362 </nav> 364 </nav>
363 365
364 <!-- <Header></Header> --> 366 <!-- <Header></Header> -->
365 <!-- menu wrapper --> 367 <!-- menu wrapper -->
366 <div class="row profile-tab-spc-top"> 368 <div class="row profile-tab-spc-top">
367 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> 369 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
368 <div class="inner-profile-ps common_color"> 370 <div class="inner-profile-ps common_color">
369 <img :src="userData.profilePic" class="" /> 371 <img :src="userData.profilePic" class="" />
370 </div> 372 </div>
371 <!-- user profile --> 373 <!-- user profile -->
372 374
373 <div class="user-profile"> 375 <div class="user-profile">
374 <h1> 376 <h1>
375 {{ userData.firstName }} {{ userData.lastName }} 377 {{ userData.firstName }} {{ userData.lastName }}
376 <span 378 <span
377 href="javasript:void(0);" 379 href="javasript:void(0);"
378 class="tags no-cursor no-underline" 380 class="tags no-cursor no-underline"
379 >{{ userData.role }}</span 381 >{{ userData.role }}</span
380 > 382 >
381 </h1> 383 </h1>
382 <ul class="joined-info"> 384 <ul class="joined-info">
383 <li> 385 <li>
384 <a 386 <span v-if="this.sameUser">
385 href="javascript:void(0);" 387 <a
386 v-if="!userData.designation && !userData.organisation" 388 href="javascript:void(0);"
387 @click="addProfileDialog" 389 v-if="!userData.designation && !userData.organisation"
388 >Add your work</a 390 @click="addProfileDialog"
389 > 391 >Add your work</a
392 >
393 </span>
390 <a 394 <a
391 class="no-cursor no-underline" 395 class="no-cursor no-underline"
392 href="javascript:void(0);" 396 href="javascript:void(0);"
393 v-if="userData.designation" 397 v-if="userData.designation"
394 >{{ userData.designation }}</a 398 >{{ userData.designation }}</a
395 > 399 >
396 <a 400 <a
397 class="no-cursor no-underline" 401 class="no-cursor no-underline"
398 href="javascript:void(0);" 402 href="javascript:void(0);"
399 v-if="userData.designation && userData.organisation" 403 v-if="userData.designation && userData.organisation"
400 >at</a 404 >at</a
401 > 405 >
402 <a 406 <a
403 class="no-cursor no-underline" 407 class="no-cursor no-underline"
404 href="javascript:void(0);" 408 href="javascript:void(0);"
405 v-if="userData.organisation" 409 v-if="userData.organisation"
406 >{{ userData.organisation }}</a 410 >{{ userData.organisation }}</a
407 > 411 >
408 <img src="../assets/images/u-info-icon.png" /> <span></span> 412 <img src="../assets/images/u-info-icon.png" /> <span></span>
409 </li> 413 </li>
410 <li> 414 <li>
411 <a href="javasript:void(0);" content="Karma Points" v-tippy> 415 <a href="javasript:void(0);" content="Karma Points" v-tippy>
412 {{ userData.karmaPoints }} Karma</a 416 {{ userData.karmaPoints }} Karma</a
413 > 417 >
414 <span></span> 418 <span></span>
415 </li> 419 </li>
416 <li> 420 <li>
417 <a href="javasript:void(0);" class="no-cursor no-underline" 421 <a href="javasript:void(0);" class="no-cursor no-underline"
418 >Joined on 422 >Joined on
419 {{ moment(userData.createdAt).format("MMM YYYY") }}</a 423 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
420 > 424 >
421 </li> 425 </li>
422 </ul> 426 </ul>
423 <p>{{ userData.bio }}</p> 427 <p>{{ userData.bio }}</p>
424 <div class="talk-to-me-about" v-if="userData.interests.length != 0"> 428 <div class="talk-to-me-about" v-if="userData.interests.length != 0">
425 <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong> 429 <span>Talk to me about</span>
426 </div><!-- talk to me about --> 430 <strong>{{ createString(userData.interests) }}</strong>
431 </div>
432 <!-- talk to me about -->
427 </div> 433 </div>
428
429 </div> 434 </div>
430 <!-- user profile --> 435 <!-- user profile -->
431 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> 436 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
432 <div class="list-style-group" v-if="userData.awards.views != null"> 437 <div class="list-style-group" v-if="userData.awards.views != null">
433 <p>Awards</p> 438 <p>Awards</p>
434 <ul class="list-style"> 439 <ul class="list-style">
435 <li> 440 <li>
436 <a href="javascript:void(0);" 441 <a href="javascript:void(0);"
437 ><img src="../assets/images/icon-1.png" 442 ><img src="../assets/images/icon-1.png"
438 /></a> 443 /></a>
439 </li> 444 </li>
440 </ul> 445 </ul>
441 </div> 446 </div>
442 <!-- list style --> 447 <!-- list style -->
443 </div> 448 </div>
444 </div> 449 </div>
445 <div class="clearfix"></div> 450 <div class="clearfix"></div>
446 <div class="row top-brd profile-tab-spc-top"> 451 <div class="row top-brd profile-tab-spc-top">
447 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 452 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
448 <ul class="profile-tab"> 453 <ul class="profile-tab">
449 <li class="active c-0"> 454 <li class="active c-0">
450 <a href="javascript:void(0);" @click="caseDialog" 455 <a href="javascript:void(0);" @click="caseDialog"
451 >Case-studies({{ caseStudies.length }})</a 456 >Case-studies({{ caseStudies.length }})</a
452 > 457 >
453 </li> 458 </li>
454 <li class="rp-all"> 459 <li class="rp-all">
455 <a href="javascript:void(0);" @click="repliesDialog" 460 <a href="javascript:void(0);" @click="repliesDialog"
456 >Comments/Replies({{this.userComments.length}})</a 461 >Comments/Replies({{ this.userComments.length }})</a
457 > 462 >
458 </li> 463 </li>
459 </ul> 464 </ul>
460 </div> 465 </div>
461 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right"> 466 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 social-link-right">
462 <ul class="social-connects" v-if="selectedSocialLink.length > 0"> 467 <ul class="social-connects" v-if="selectedSocialLink.length > 0">
463 <li><span>Follow</span></li> 468 <li><span>Follow</span></li>
464 <li v-for="(social, i) in selectedSocialLink" :key="i"> 469 <li v-for="(social, i) in selectedSocialLink" :key="i">
465 <a 470 <a
466 href="javascript:void(0);" 471 href="javascript:void(0);"
467 @click="openUrl(social.fieldValue)" 472 @click="openUrl(social.fieldValue)"
468 class="cursor-pointer" 473 class="cursor-pointer"
469 ><img :src="social.image" 474 ><img :src="social.image"
470 /></a> 475 /></a>
471 </li> 476 </li>
472 </ul> 477 </ul>
473 <ul class="social-connects" v-if="selectedSocialLink.length == 0"> 478 <ul class="social-connects" v-if="selectedSocialLink.length == 0">
474 <li> 479 <li v-if="this.sameUser">
475 <a 480 <a
476 href="javascript:void(0);" 481 href="javascript:void(0);"
477 @click="addProfileDialog" 482 @click="addProfileDialog"
478 class="active cursor-pointer" 483 class="active cursor-pointer"
479 ><img src="../assets/images/plus.png" 484 ><img src="../assets/images/plus.png"
480 /></a> 485 /></a>
481 <span class="connect-social-channel" 486 <span class="connect-social-channel"
482 >Connect your social channels</span 487 >Connect your social channels</span
483 > 488 >
484 </li> 489 </li>
485 </ul> 490 </ul>
486 </div> 491 </div>
487 </div> 492 </div>
488 <!-- tab style --> 493 <!-- tab style -->
489 <div class="profile-data-wrp"> 494 <div class="profile-data-wrp">
490 <div class="container-fluid data-wrp" id="case-study-0"> 495 <div class="container-fluid data-wrp" id="case-study-0">
491 <div class="row" v-if="caseStudies.length == 0"> 496 <div class="row" v-if="caseStudies.length == 0">
492 <div class="col-6 col-lg-6"> 497 <div class="col-6 col-lg-6">
493 <div class="full-w-height-profile ex-light seats_bg"> 498 <div class="full-w-height-profile ex-light seats_bg">
494 <a 499 <a
495 href="javasript:void(0);" 500 href="javasript:void(0);"
496 class="profile-md-bt center-and-spc bt-spc-top" 501 class="profile-md-bt center-and-spc bt-spc-top"
497 @click="openUrl('https://www.productgrowth.org/spotlight')" 502 @click="openUrl('https://www.productgrowth.org/spotlight')"
498 >Explore Spotlights</a 503 >Explore Spotlights</a
499 > 504 >
500 <p>Explore the spotlights others has put together</p> 505 <p>Explore the spotlights others has put together</p>
501 </div> 506 </div>
502 <!-- full width --> 507 <!-- full width -->
503 </div> 508 </div>
504 <!-- col 6 --> 509 <!-- col 6 -->
505 <div class="col-6 col-lg-6"> 510 <div class="col-6 col-lg-6">
506 <div class="full-w-height-profile ex-light spotlight_bg"> 511 <div class="full-w-height-profile ex-light spotlight_bg">
507 <img src="../assets/images/add-role.svg" class="add-role" /> 512 <img src="../assets/images/add-role.svg" class="add-role" />
508 <div class="clearfix"></div> 513 <div class="clearfix"></div>
509 <!-- clearfix --> 514 <!-- clearfix -->
510 <a 515 <a
511 href="javasript:void(0);" 516 href="javasript:void(0);"
512 class="profile-md-bt center-and-spc" 517 class="profile-md-bt center-and-spc"
513 @click=" 518 @click="
514 openUrl( 519 openUrl(
515 'https://www.productgrowth.org/spotlight#typeform-spotlight' 520 'https://www.productgrowth.org/spotlight#typeform-spotlight'
516 ) 521 )
517 " 522 "
518 >Publish Spotlight</a 523 >Publish Spotlight</a
519 > 524 >
520 <p>Share your own insights through Spotlight</p> 525 <p>Share your own insights through Spotlight</p>
521 </div> 526 </div>
522 <!-- full width --> 527 <!-- full width -->
523 </div> 528 </div>
524 <!-- col 6 --> 529 <!-- col 6 -->
525 </div> 530 </div>
526 531
527 <div class="profile-data-wrp" v-if="caseStudies.length != 0"> 532 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
528 <div class="container-fluid data-wrp"> 533 <div class="container-fluid data-wrp">
529 <div class="row"> 534 <div class="row">
530 <div class="" v-for="(study, i) in caseStudies" :key="i"> 535 <div class="" v-for="(study, i) in caseStudies" :key="i">
531 <div class="card-warpper" @click="openStudy(study)"> 536 <div class="card-warpper" @click="openStudy(study)">
532 <div class="company-detail"> 537 <div class="company-detail">
533 <div class="c-logo"> 538 <div class="c-logo">
534 <!-- <img src="../assets/images/image 46.png" /> --> 539 <!-- <img src="../assets/images/image 46.png" /> -->
535 <img :src="study.intro.logoURL" /> 540 <img :src="study.intro.logoURL" />
536 </div> 541 </div>
537 <div class="c-tag"> 542 <div class="c-tag">
538 <img 543 <img
539 src="../assets/images/retake-blue.svg" 544 src="../assets/images/retake-blue.svg"
540 v-if="study.intro.type == 'Retake'" 545 v-if="study.intro.type == 'Retake'"
541 /> 546 />
542 <img 547 <img
543 src="../assets/images/behind-blue.svg" 548 src="../assets/images/behind-blue.svg"
544 v-if="study.intro.type == 'Behind-the-scenes'" 549 v-if="study.intro.type == 'Behind-the-scenes'"
545 /> 550 />
546 <img 551 <img
547 src="../assets/images/critique-blue.svg" 552 src="../assets/images/critique-blue.svg"
548 v-if="study.intro.type == 'Critique'" 553 v-if="study.intro.type == 'Critique'"
549 /> 554 />
550 <img 555 <img
551 src="../assets/images/juxtapose-blue.svg" 556 src="../assets/images/juxtapose-blue.svg"
552 v-if="study.intro.type == 'Juxtapose'" 557 v-if="study.intro.type == 'Juxtapose'"
553 /> 558 />
554 </div> 559 </div>
555 </div> 560 </div>
556 561
557 <!-- company detail--> 562 <!-- company detail-->
558 <h1>{{ study.intro.name }}</h1> 563 <h1>{{ study.intro.name }}</h1>
559 <div class="user-views"> 564 <div class="user-views">
560 <ul> 565 <ul>
561 <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li> 566 <li>
562 <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li> 567 <img src="../assets/images/eye-1.svg" class="spctp" />
563 <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li> 568 {{ study.views }} Views
564 </ul> 569 </li>
565 570 <li>
566 </div><!-- user views --> 571 <img src="../assets/images/star-1.svg" />
572 {{ study.avgRating }}
573 <span v-if="!study.avgRating">0</span> Rating
574 </li>
575 <li>
576 <img src="../assets/images/calendar-1.svg" />
577 {{ moment(study.createdAt).format("DD MMM YYYY") }}
578 </li>
579 </ul>
580 </div>
581 <!-- user views -->
567 <div class="u-detail"> 582 <div class="u-detail">
568 <img src="../assets/images/user-2.png" /> 583 <img src="../assets/images/user-2.png" />
569 <h2 v-for="(name, j) in study.intro.authors" :key="j"> 584 <h2 v-for="(name, j) in study.intro.authors" :key="j">
570 {{ name }} 585 {{ name }}
571 </h2> 586 </h2>
572
573 </div> 587 </div>
574 <!-- user detail --> 588 <!-- user detail -->
575 <p> 589 <p>
576 <span v-for="(area, j) in study.focusAreas" :key="j"> 590 <span v-for="(area, j) in study.focusAreas" :key="j">
577 {{ area }} 591 {{ area }}
578 </span> 592 </span>
579 </p> 593 </p>
580 <ul class="tags-list"> 594 <ul class="tags-list">
581 <li v-for="(tags, j) in study.insightTags" :key="j"> 595 <li v-for="(tags, j) in study.insightTags" :key="j">
582 <a 596 <a
583 href="javasript:void(0);" 597 href="javasript:void(0);"
584 class="insight-design" 598 class="insight-design"
585 v-if="tags == 'Design'" 599 v-if="tags == 'Design'"
586 >Design</a 600 >Design</a
587 > 601 >
588 <a 602 <a
589 href="javasript:void(0);" 603 href="javasript:void(0);"
590 class="insight-product" 604 class="insight-product"
591 v-if="tags == 'Product'" 605 v-if="tags == 'Product'"
592 >Product</a 606 >Product</a
593 > 607 >
594 <a 608 <a
595 href="javasript:void(0);" 609 href="javasript:void(0);"
596 class="insight-marketing" 610 class="insight-marketing"
597 v-if="tags == 'Marketing'" 611 v-if="tags == 'Marketing'"
598 >Marketing</a 612 >Marketing</a
599 > 613 >
600 <a 614 <a
601 href="javasript:void(0);" 615 href="javasript:void(0);"
602 class="insight-pricing" 616 class="insight-pricing"
603 v-if="tags == 'Pricing'" 617 v-if="tags == 'Pricing'"
604 >Pricing</a 618 >Pricing</a
605 > 619 >
606 <a 620 <a
607 href="javasript:void(0);" 621 href="javasript:void(0);"
608 class="insight-psychology" 622 class="insight-psychology"
609 v-if="tags == 'Psychology'" 623 v-if="tags == 'Psychology'"
610 >Psychology</a 624 >Psychology</a
611 > 625 >
612 </li> 626 </li>
613 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> 627 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
614 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> 628 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
615 </ul> 629 </ul>
616 <div class="clearfix"></div> 630 <div class="clearfix"></div>
617 <a href="#" class="action-set"> 631 <a href="#" class="action-set">
618 <img src="../assets/images/arrow-right-action.svg" /> 632 <img src="../assets/images/arrow-right-action.svg" />
619 </a> 633 </a>
620 <div class="read-time"> 634 <div class="read-time">
621 <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a> 635 <a href="#"
622 </div><!-- read time --> 636 ><img src="../assets/images/clock.svg" />
637 {{ study.intro.readTime }} Min Read</a
638 >
639 </div>
640 <!-- read time -->
623 </div> 641 </div>
624 <!-- card wrpper --> 642 <!-- card wrpper -->
625 <!-- card wrpper --> 643 <!-- card wrpper -->
626 </div> 644 </div>
627 <!-- all card wrpper --> 645 <!-- all card wrpper -->
628 </div> 646 </div>
629 </div> 647 </div>
630 </div> 648 </div>
631 <!-- data wrp --> 649 <!-- data wrp -->
632 </div> 650 </div>
633 <!-- case study 0 --> 651 <!-- case study 0 -->
634 <div 652 <div
635 class="container-fluid data-wrp" 653 class="container-fluid data-wrp"
636 id="all-replies" 654 id="all-replies"
637 style="display: none" 655 style="display: none"
638 > 656 >
639 <div class="row"> 657 <div class="row">
640 <div class="replies col-md-12" > 658 <div class="replies col-md-12">
641 <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" > 659 <div
642 <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1> 660 class="replies-wrp"
661 v-for="(comments, j) in userComments"
662 :key="j"
663 >
664 <h1>
665 {{ comments.casestudy.intro.name }}
666 <span>{{ comments.casestudy.intro.type }} </span>
667 </h1>
643 <ul class="joined-info"> 668 <ul class="joined-info">
644 <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li> 669 <li>
670 <a href="javasript:void(0);"
671 >{{ dateGenerator(comments.createdAt) }} D</a
672 >
673 <span></span>
674 </li>
645 <li><img src="../assets/images/heart.png" /></li> 675 <li><img src="../assets/images/heart.png" /></li>
646 <li><a href="javasript:void(0);"> {{comments.likes}}</a></li> 676 <li>
677 <a href="javasript:void(0);"> {{ comments.likes }}</a>
678 </li>
647 <li class="comment-spc"> 679 <li class="comment-spc">
648 <img src="../assets/images/comment.svg" /> 680 <img src="../assets/images/comment.svg" />
649 </li> 681 </li>
650 <li><a href="javasript:void(0);"> {{comments.replies}}</a></li> 682 <li>
683 <a href="javasript:void(0);"> {{ comments.replies }}</a>
684 </li>
651 </ul> 685 </ul>
652 <p> 686 <p>
653 {{comments.comment}} 687 {{ comments.comment }}
654 <!-- I wonder what the difference between “<strong> 688 <!-- I wonder what the difference between “<strong>
655 Assistant</strong 689 Assistant</strong
656 >” and “<strong>Pickup and Drop</strong>” are. If they are the 690 >” and “<strong>Pickup and Drop</strong>” are. If they are the
657 same, there are two “call to actions” for the same workflow --> 691 same, there are two “call to actions” for the same workflow -->
658 </p> 692 </p>
659 </div> 693 </div>
660 <!-- replies wrapper --> 694 <!-- replies wrapper -->
661 </div> 695 </div>
662 <!-- all card wrpper --> 696 <!-- all card wrpper -->
663 </div> 697 </div>
664 </div> 698 </div>
665 <!-- all Relpies --> 699 <!-- all Relpies -->
666 </div> 700 </div>
667 <!-- data wrp --> 701 <!-- data wrp -->
668 <!-- body wrapper --> 702 <!-- body wrapper -->
669 </div> 703 </div>
670 </main> 704 </main>
671 </template> 705 </template>
672 706
673 <script> 707 <script>
674 import Vue from "vue"; 708 import Vue from "vue";
675 import router from "../router"; 709 import router from "../router";
676 import $ from "jquery"; 710 import $ from "jquery";
677 import axios from "axios"; 711 import axios from "axios";
678 import Header from "./Header"; 712 import Header from "./Header";
679 import moment from 'moment'; 713 import moment from "moment";
680 714
681 export default { 715 export default {
682 name: "Profile", 716 name: "Profile",
683 components: { 717 components: {
684 Header: Header, 718 Header: Header,
685 }, 719 },
686 data: () => ({ 720 data: () => ({
687 loggedinFlag: false, 721 loggedinFlag: false,
688 usertoken: null, 722 usertoken: null,
689 currentLink: null, 723 currentLink: null,
690 userData: { 724 userData: {
691 socialMediaProfiles: { 725 socialMediaProfiles: {
692 facebook: null, 726 facebook: null,
693 linkedin: null, 727 linkedin: null,
694 medium: null, 728 medium: null,
695 twitter: null, 729 twitter: null,
696 behance: null, 730 behance: null,
697 dribble: null, 731 dribble: null,
698 github: null, 732 github: null,
699 stackoverflow: null, 733 stackoverflow: null,
700 instagram: null, 734 instagram: null,
701 }, 735 },
702 awards: { 736 awards: {
703 views: null, 737 views: null,
704 likes: null, 738 likes: null,
705 comments: null, 739 comments: null,
706 }, 740 },
707 verified: true, 741 verified: true,
708 phoneNo: null, 742 phoneNo: null,
709 bio: null, 743 bio: null,
710 designation: null, 744 designation: null,
711 organisation: null, 745 organisation: null,
712 bgColor: null, 746 bgColor: null,
713 interests: [], 747 interests: [],
714 karmaPoints: null, 748 karmaPoints: null,
715 socialLogin: null, 749 socialLogin: null,
716 firstLogin: null, 750 firstLogin: null,
717 notification: null, 751 notification: null,
718 profilePic: null, 752 profilePic: null,
719 role: null, 753 role: null,
720 name: null, 754 name: null,
721 email: null, 755 email: null,
722 firstName: null, 756 firstName: null,
723 lastName: null, 757 lastName: null,
724 }, 758 },
725 caseStudies: [], 759 caseStudies: [],
726 interestName: null, 760 interestName: null,
727 oldId: null, 761 oldId: null,
728 currentSocialLinkName: null, 762 currentSocialLinkName: null,
729 showCompany: false, 763 showCompany: false,
730 showDesignation: false, 764 showDesignation: false,
765 sameUser: false,
731 socialLink: [ 766 socialLink: [
732 { 767 {
733 displayName: "Facebook", 768 displayName: "Facebook",
734 fieldName: "facebook", 769 fieldName: "facebook",
735 fieldValue: null, 770 fieldValue: null,
736 image: require(`../assets/images/facebook.png`), 771 image: require(`../assets/images/facebook.png`),
737 }, 772 },
738 { 773 {
739 displayName: "Linkedin", 774 displayName: "Linkedin",
740 fieldName: "linkedin", 775 fieldName: "linkedin",
741 fieldValue: null, 776 fieldValue: null,
742 image: require(`../assets/images/linkedin.png`), 777 image: require(`../assets/images/linkedin.png`),
743 }, 778 },
744 { 779 {
745 displayName: "Medium", 780 displayName: "Medium",
746 fieldName: "medium", 781 fieldName: "medium",
747 fieldValue: null, 782 fieldValue: null,
748 image: require(`../assets/images/medium.png`), 783 image: require(`../assets/images/medium.png`),
749 }, 784 },
750 { 785 {
751 displayName: "Twitter", 786 displayName: "Twitter",
752 fieldName: "twitter", 787 fieldName: "twitter",
753 fieldValue: null, 788 fieldValue: null,
754 image: require(`../assets/images/twitter.png`), 789 image: require(`../assets/images/twitter.png`),
755 }, 790 },
756 { 791 {
757 displayName: "Behance", 792 displayName: "Behance",
758 fieldName: "behance", 793 fieldName: "behance",
759 fieldValue: null, 794 fieldValue: null,
760 image: require(`../assets/images/behance.png`), 795 image: require(`../assets/images/behance.png`),
761 }, 796 },
762 { 797 {
763 displayName: "Dribble", 798 displayName: "Dribble",
764 fieldName: "dribble", 799 fieldName: "dribble",
765 fieldValue: null, 800 fieldValue: null,
766 image: require(`../assets/images/dribbble.png`), 801 image: require(`../assets/images/dribbble.png`),
767 }, 802 },
768 { 803 {
769 displayName: "Github", 804 displayName: "Github",
770 fieldName: "github", 805 fieldName: "github",
771 fieldValue: null, 806 fieldValue: null,
772 image: require(`../assets/images/github.png`), 807 image: require(`../assets/images/github.png`),
773 }, 808 },
774 { 809 {
775 displayName: "Stackoverflow", 810 displayName: "Stackoverflow",
776 fieldName: "stackoverflow", 811 fieldName: "stackoverflow",
777 fieldValue: null, 812 fieldValue: null,
778 image: require(`../assets/images/stack overflow.png`), 813 image: require(`../assets/images/stack overflow.png`),
779 }, 814 },
780 { 815 {
781 displayName: "Instagram", 816 displayName: "Instagram",
782 fieldName: "instagram", 817 fieldName: "instagram",
783 fieldValue: null, 818 fieldValue: null,
784 image: require(`../assets/images/instagram.png`), 819 image: require(`../assets/images/instagram.png`),
785 }, 820 },
786 ], 821 ],
787 selectedSocialLink: [], 822 selectedSocialLink: [],
788 userComments:[], 823 userComments: [],
789 }), 824 }),
790 825
791 mounted() { 826 mounted() {
792 this.userData = {}; 827 this.userData = {};
793 // this.socialLink = []; 828 // this.socialLink = [];
794 this.userData.interests = []; 829 this.userData.interests = [];
795 var userdata = localStorage.getItem("spotlight_usertoken"); 830 var userdata = localStorage.getItem("spotlight_usertoken");
831 var userId = localStorage.getItem("spotlight_id");
832 if (userId) {
833 if (this.$route.params.id == userId) {
834 this.sameUser = true;
835 }
836 }
837
796 if (userdata) { 838 if (userdata) {
797 userdata = JSON.parse(userdata); 839 userdata = JSON.parse(userdata);
798 this.usertoken = userdata.token; 840 this.usertoken = userdata.token;
799 this.getProfile(); 841 // this.getProfile();
800 this.getCaseStudies(); 842 if (this.sameUser) {
801 this.getUserComments(); 843 this.getProfileById();
802 }else{ 844 this.getUserComments();
803 this.logout(); 845 this.getCaseStudies();
846 }
847 }
848 if (!this.sameUser) {
849 this.getProfileById();
850 this.getCaseStudieById();
851 this.getUserCommentsById();
804 } 852 }
805 }, 853 },
806 methods: { 854 methods: {
807 goToSignUp() { 855 goToSignUp() {
808 this.$router.push("/"); 856 this.$router.push("/");
809 }, 857 },
810 goToReset() { 858 goToReset() {
811 this.$router.push("/reset"); 859 this.$router.push("/reset");
812 }, 860 },
813 logout() { 861 logout() {
814 localStorage.removeItem("spotlight_usertoken"); 862 localStorage.removeItem("spotlight_usertoken");
863 localStorage.removeItem("spotlight_id");
815 localStorage.removeItem("spotlight_email"); 864 localStorage.removeItem("spotlight_email");
816 this.$router.push("/login"); 865 this.$router.push("/login");
817 }, 866 },
818 dateGenerator(curreDate){ 867 dateGenerator(curreDate) {
819 var todayDate = moment(new Date(), "DD.MM.YYYY"); 868 var todayDate = moment(new Date(), "DD.MM.YYYY");
820 var endDate = moment(new Date(curreDate), "DD.MM.YYYY"); 869 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
821 var result = todayDate.diff(endDate, 'days'); 870 var result = todayDate.diff(endDate, "days");
822 return result; 871 return result;
823 }, 872 },
824 prefillSocialLink(links) { 873 prefillSocialLink(links) {
825 var keys = []; 874 var keys = [];
826 keys = Object.keys(links); 875 keys = Object.keys(links);
827 keys.forEach((link_) => { 876 keys.forEach((link_) => {
828 console.log(link_, ":", links[link_]); 877 console.log(link_, ":", links[link_]);
829 if (links[link_] != null) { 878 if (links[link_] != null) {
830 var i = this.socialLink.findIndex( 879 var i = this.socialLink.findIndex(
831 (links_) => links_.fieldName == link_ 880 (links_) => links_.fieldName == link_
832 ); 881 );
833 if (i != -1) { 882 if (i != -1) {
834 this.selectedSocialLink.push({ 883 this.selectedSocialLink.push({
835 displayName: this.socialLink[i].displayName, 884 displayName: this.socialLink[i].displayName,
836 fieldName: this.socialLink[i].fieldName, 885 fieldName: this.socialLink[i].fieldName,
837 image: this.socialLink[i].image, 886 image: this.socialLink[i].image,
838 fieldValue: links[link_], 887 fieldValue: links[link_],
839 }); 888 });
840 } 889 }
841 } 890 }
842 }); 891 });
843 console.log("links-- are--", links); 892 console.log("links-- are--", links);
844 }, 893 },
845 addSocialLink(id) { 894 addSocialLink(id) {
846 this.currentLink = null; 895 this.currentLink = null;
847 var i = this.selectedSocialLink.findIndex( 896 var i = this.selectedSocialLink.findIndex(
848 (link_) => link_.fieldName == id 897 (link_) => link_.fieldName == id
849 ); 898 );
850 var j = this.socialLink.findIndex((links_) => links_.fieldName == id); 899 var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
851 if (i == -1) { 900 if (i == -1) {
852 this.selectedSocialLink.push({ 901 this.selectedSocialLink.push({
853 displayName: this.socialLink[j].displayName, 902 displayName: this.socialLink[j].displayName,
854 fieldName: this.socialLink[j].fieldName, 903 fieldName: this.socialLink[j].fieldName,
855 image: this.socialLink[j].image, 904 image: this.socialLink[j].image,
856 fieldValue: null, 905 fieldValue: null,
857 }); 906 });
858 } else { 907 } else {
859 this.$toaster.info(this.socialLink[j].displayName + " Already Exist"); 908 this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
860 } 909 }
861 }, 910 },
862 removeSocialLink(i) { 911 removeSocialLink(i) {
863 var name = this.selectedSocialLink[i].fieldName; 912 var name = this.selectedSocialLink[i].fieldName;
864 this.userData.socialMediaProfiles[name] = null; 913 this.userData.socialMediaProfiles[name] = null;
865 this.selectedSocialLink.splice(i, 1); 914 this.selectedSocialLink.splice(i, 1);
866 }, 915 },
867 916
868 addInterest() { 917 addInterest() {
869 console.log(this.userData.interests.length, "called", this.interestName); 918 console.log(this.userData.interests.length, "called", this.interestName);
870 if (this.userData.interests.length <= 2) { 919 if (this.userData.interests.length <= 2) {
871 this.userData.interests.push(this.interestName); 920 this.userData.interests.push(this.interestName);
872 this.interestName = null; 921 this.interestName = null;
873 } else { 922 } else {
874 this.$toaster.info("Only 3 interest are allowed"); 923 this.$toaster.info("Only 3 interest are allowed");
875 } 924 }
876 }, 925 },
877 removeInterest(i) { 926 removeInterest(i) {
878 console.log("i", i); 927 console.log("i", i);
879 this.userData.interests.splice(i, 1); 928 this.userData.interests.splice(i, 1);
880 console.log(" this.userData", this.userData.interests); 929 console.log(" this.userData", this.userData.interests);
881 }, 930 },
882 assignClass() { 931 assignClass() {
883 var element = document.getElementById(this.userData.bgColor); 932 var element = document.getElementById(this.userData.bgColor);
884 element.classList.add("active"); 933 element.classList.add("active");
885 var cols = document.getElementsByClassName("common_color"); 934 var cols = document.getElementsByClassName("common_color");
886 for (var i = 0; i < cols.length; i++) { 935 for (var i = 0; i < cols.length; i++) {
887 cols[i].style.backgroundColor = this.userData.bgColor; 936 cols[i].style.backgroundColor = this.userData.bgColor;
888 } 937 }
889 }, 938 },
890 createString(list){ 939 createString(list) {
891 var name = ""; 940 var name = "";
892 list.forEach(element => { 941 list.forEach((element) => {
893 name = name+','+element; 942 name = name + "," + element;
894 }); 943 });
895 944
896 console.log("name is",name); 945 console.log("name is", name);
897 return name.substring(1);; 946 return name.substring(1);
898 }, 947 },
899 changeColor(clr) { 948 changeColor(clr) {
900 console.log(this.oldId, "clr", clr); 949 console.log(this.oldId, "clr", clr);
901 var element = document.getElementById(clr); 950 var element = document.getElementById(clr);
902 element.classList.add("active"); 951 element.classList.add("active");
903 var removeelement = document.getElementById(this.oldId); 952 var removeelement = document.getElementById(this.oldId);
904 removeelement.classList.remove("active"); 953 removeelement.classList.remove("active");
905 this.oldId = clr; 954 this.oldId = clr;
906 var cols = document.getElementsByClassName("common_color"); 955 var cols = document.getElementsByClassName("common_color");
907 for (var i = 0; i < cols.length; i++) { 956 for (var i = 0; i < cols.length; i++) {
908 cols[i].style.backgroundColor = clr; 957 cols[i].style.backgroundColor = clr;
909 } 958 }
910 this.userData.bgColor = clr; 959 this.userData.bgColor = clr;
911 }, 960 },
961
962 getProfileById() {
963 axios
964 .get("/userProfile?userId=" + this.$route.params.id, {})
965 .then((response) => {
966 if (!response.data.data.socialMediaProfiles) {
967 this.userData.socialMediaProfiles = {};
968 }
969 this.userData = response.data.data;
970
971 // this.userData = response.data.data;
972 this.oldId = this.userData.bgColor;
973 console.log(this.oldId, "this.userData.", this.userData);
974 console.log("this.userData.firstLogin ", this.userData.firstLogin);
975 this.prefillSocialLink(this.userData.socialMediaProfiles);
976 if (this.userData.firstLogin == true) {
977 this.addProfileDialog();
978 }
979 this.assignClass();
980 console.log(response.data.data);
981 })
982 .catch((error) => console.log(error));
983 },
912 getProfile() { 984 getProfile() {
913 axios 985 axios
914 .get("/profile", { 986 .get("/profile", {
915 headers: { 987 headers: {
916 Authorization: "Bearer " + this.usertoken, 988 Authorization: "Bearer " + this.usertoken,
917 }, 989 },
918 }) 990 })
919 .then((response) => { 991 .then((response) => {
920 if (!response.data.data.socialMediaProfiles) { 992 if (!response.data.data.socialMediaProfiles) {
921 this.userData.socialMediaProfiles = {}; 993 this.userData.socialMediaProfiles = {};
922 } 994 }
923 this.userData = response.data.data; 995 this.userData = response.data.data;
924 996
925 // this.userData = response.data.data; 997 // this.userData = response.data.data;
926 this.oldId = this.userData.bgColor; 998 this.oldId = this.userData.bgColor;
927 console.log(this.oldId, "this.userData.", this.userData); 999 console.log(this.oldId, "this.userData.", this.userData);
928 console.log("this.userData.firstLogin ", this.userData.firstLogin); 1000 console.log("this.userData.firstLogin ", this.userData.firstLogin);
929 this.prefillSocialLink(this.userData.socialMediaProfiles); 1001 this.prefillSocialLink(this.userData.socialMediaProfiles);
930 if (this.userData.firstLogin == true) { 1002 if (this.userData.firstLogin == true) {
931 this.addProfileDialog(); 1003 this.addProfileDialog();
932 } 1004 }
933 this.assignClass(); 1005 this.assignClass();
934 console.log(response.data.data); 1006 console.log(response.data.data);
935 }) 1007 })
936 .catch((error) => console.log(error)); 1008 .catch((error) => console.log(error));
937 }, 1009 },
938 getRandomAvatar() { 1010 getRandomAvatar() {
939 axios 1011 axios
940 .get("/randomAvatar", { 1012 .get("/randomAvatar", {
941 headers: { 1013 headers: {
942 Authorization: "Bearer " + this.usertoken, 1014 Authorization: "Bearer " + this.usertoken,
943 }, 1015 },
944 }) 1016 })
945 .then((response) => { 1017 .then((response) => {
946 this.userData.profilePic = response.data.imageURL; 1018 this.userData.profilePic = response.data.imageURL;
947 console.log(response.data.imageURL); 1019 console.log(response.data.imageURL);
948 }) 1020 })
949 .catch((error) => console.log(error)); 1021 .catch((error) => console.log(error));
950 }, 1022 },
1023 getUserCommentsById() {
1024 axios
1025 .get("/userProfile/comments?userId=" + this.$route.params.id, {})
1026 .then((response) => {
1027 this.userComments = response.data.data;
1028 console.log(response.data);
1029 })
1030 .catch((error) => console.log(error));
1031 },
951 getUserComments() { 1032 getUserComments() {
952 axios 1033 axios
953 .get("/profile/comments", { 1034 .get("/profile/comments", {
954 headers: { 1035 headers: {
955 Authorization: "Bearer " + this.usertoken, 1036 Authorization: "Bearer " + this.usertoken,
956 }, 1037 },
957 }) 1038 })
958 .then((response) => { 1039 .then((response) => {
959 this.userComments = response.data.data; 1040 this.userComments = response.data.data;
960 console.log(response.data); 1041 console.log(response.data);
961 }) 1042 })
962 .catch((error) => console.log(error)); 1043 .catch((error) => console.log(error));
963 }, 1044 },
1045 getCaseStudieById() {
1046 axios
1047 .get("/profile/caseStudy?userId=" + this.$route.params.id)
1048 .then((response) => {
1049 console.log("----", response.data.data.caseStudies);
1050 this.caseStudies = response.data.data.caseStudies;
1051 })
1052 .catch((error) => console.log(error));
1053 },
964 getCaseStudies() { 1054 getCaseStudies() {
965 axios 1055 axios
966 .get("/caseStudy/all", { 1056 .get("/caseStudy/all", {
967 headers: { 1057 headers: {
968 Authorization: "Bearer " + this.usertoken, 1058 Authorization: "Bearer " + this.usertoken,
969 }, 1059 },
970 }) 1060 })
971 .then((response) => { 1061 .then((response) => {
972 console.log("----",response.data.data.caseStudies); 1062 console.log("----", response.data.data.caseStudies);
973 this.caseStudies = response.data.data.caseStudies; 1063 this.caseStudies = response.data.data.caseStudies;
974 }) 1064 })
975 .catch((error) => console.log(error)); 1065 .catch((error) => console.log(error));
976 }, 1066 },
977 openStudy(payload) { 1067 openStudy(payload) {
978 console.log("payload-", payload); 1068 console.log("payload-", payload);
979 payload.intro.date = payload.createdAt; 1069 payload.intro.date = payload.createdAt;
980 payload.intro.focusPoint = payload.focusAreas; 1070 payload.intro.focusPoint = payload.focusAreas;
981 axios 1071 axios
982 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 1072 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
983 headers: { 1073 headers: {
984 Authorization: "Bearer " + this.usertoken, 1074 Authorization: "Bearer " + this.usertoken,
985 }, 1075 },
986 }) 1076 })
987 .then((response) => { 1077 .then((response) => {
988 this.createSlide(payload, response.data.data); 1078 this.createSlide(payload, response.data.data);
989 }) 1079 })
990 .catch((error) => console.log(error)); 1080 .catch((error) => console.log(error));
991 }, 1081 },
992 1082
993 createSlide(payload, slides) { 1083 createSlide(payload, slides) {
994 var finalSlides = []; 1084 var finalSlides = [];
995 slides.forEach((slides_) => { 1085 slides.forEach((slides_) => {
996 var url = this.assignRoutes(slides_.templateId); 1086 var url = this.assignRoutes(slides_.templateId);
997 var obj = { 1087 var obj = {
998 forward: true, 1088 forward: true,
999 backward: true, 1089 backward: true,
1000 ur: url, 1090 ur: url,
1001 slideId: slides_._id, 1091 slideId: slides_._id,
1002 caseStudyId: slides_.caseStudyId, 1092 caseStudyId: slides_.caseStudyId,
1003 payload: { 1093 payload: {
1004 metaData: slides_.metaData, 1094 metaData: slides_.metaData,
1005 comments: slides_.comments, 1095 comments: slides_.comments,
1006 insight: slides_.insight ? slides_.insight : null, 1096 insight: slides_.insight ? slides_.insight : null,
1007 }, 1097 },
1008 }; 1098 };
1009 // slides_ 1099 // slides_
1010 finalSlides.push(obj); 1100 finalSlides.push(obj);
1011 }); 1101 });
1012 console.log("payload", payload); 1102 console.log("payload", payload);
1013 // add first slide at begining 1103 // add first slide at begining
1014 finalSlides.unshift({ 1104 finalSlides.unshift({
1015 forward: true, 1105 forward: true,
1016 backward: false, 1106 backward: false,
1017 ur: "EpisodeIntro", 1107 ur: "EpisodeIntro",
1018 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 1108 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
1019 caseStudyId: payload._id, 1109 caseStudyId: payload._id,
1020 payload: { 1110 payload: {
1021 metaData: payload.intro, 1111 metaData: payload.intro,
1022 comments: [], 1112 comments: [],
1023 }, 1113 },
1024 }); 1114 });
1025 finalSlides.push({ 1115 finalSlides.push({
1026 forward: true, 1116 forward: true,
1027 backward: false, 1117 backward: false,
1028 ur: "Outro", 1118 ur: "Outro",
1029 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 1119 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
1030 caseStudyId: payload._id, 1120 caseStudyId: payload._id,
1031 payload: { 1121 payload: {
1032 metaData: payload.outro, 1122 metaData: payload.outro,
1033 comments: [], 1123 comments: [],
1034 }, 1124 },
1035 }); 1125 });
1036 1126
1037 console.log(finalSlides); 1127 console.log(finalSlides);
1038 console.log("payload", payload); 1128 console.log("payload", payload);
1039 localStorage.setItem( 1129 localStorage.setItem(
1040 "spotlight_slide" + payload._id, 1130 "spotlight_slide" + payload._id,
1041 JSON.stringify(finalSlides) 1131 JSON.stringify(finalSlides)
1042 ); 1132 );
1043 this.$router.push({ 1133 this.$router.push({
1044 name: "EpisodeIntro", 1134 name: "EpisodeIntro",
1045 params: { 1135 params: {
1046 caseStudyId: finalSlides[0].caseStudyId, 1136 caseStudyId: finalSlides[0].caseStudyId,
1047 slideId: finalSlides[0].slideId, 1137 slideId: finalSlides[0].slideId,
1048 }, 1138 },
1049 }); 1139 });
1050 }, 1140 },
1051 assignRoutes(tempId) { 1141 assignRoutes(tempId) {
1052 // /episode-intro 1142 // /episode-intro
1053 // /outro 1143 // /outro
1054 var routes = [ 1144 var routes = [
1055 { 1145 {
1056 url: "AuthorIntro", 1146 url: "AuthorIntro",
1057 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 1147 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
1058 }, 1148 },
1059 { 1149 {
1060 url: "NoScreenshotSingleAuthor", 1150 url: "NoScreenshotSingleAuthor",
1061 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 1151 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
1062 }, 1152 },
1063 { 1153 {
1064 url: "SingleMobileScreenInsightTwo", 1154 url: "SingleMobileScreenInsightTwo",
1065 tempId: "T3_cqNIf7tuqL4jyON63dA7", 1155 tempId: "T3_cqNIf7tuqL4jyON63dA7",
1066 }, 1156 },
1067 { 1157 {
1068 url: "TwoScreenWithoutInsight", 1158 url: "TwoScreenWithoutInsight",
1069 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 1159 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
1070 }, 1160 },
1071 { 1161 {
1072 url: "noscreenshotSingleautho", 1162 url: "noscreenshotSingleautho",
1073 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 1163 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
1074 }, 1164 },
1075 { 1165 {
1076 url: "SingleMobileScreenInsightOne", 1166 url: "SingleMobileScreenInsightOne",
1077 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 1167 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
1078 }, 1168 },
1079 { 1169 {
1080 url: "TwoScreenWithInsight", 1170 url: "TwoScreenWithInsight",
1081 tempId: "T7_za3c3sYgx7bVvtKzasdf", 1171 tempId: "T7_za3c3sYgx7bVvtKzasdf",
1082 }, 1172 },
1083 { 1173 {
1084 url: "AuthorReadingNow", 1174 url: "AuthorReadingNow",
1085 tempId: "T8_zb4d4fYgx7bVvtKzasdf", 1175 tempId: "T8_zb4d4fYgx7bVvtKzasdf",
1086 }, 1176 },
1087 { 1177 {
1088 url: "AuthorReadingBreak", 1178 url: "AuthorReadingBreak",
1089 tempId: "T9_zb3e4fYgy7dVvfKdasdf", 1179 tempId: "T9_zb3e4fYgy7dVvfKdasdf",
1090 }, 1180 },
1091 ]; 1181 ];
1092 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 1182 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
1093 return routes[i].url; 1183 return routes[i].url;
1094 }, 1184 },
1095 saveProfile() { 1185 saveProfile() {
1096 var obj = {}; 1186 var obj = {};
1097 if (this.userData.firstLogin == true) { 1187 if (this.userData.firstLogin == true) {
1098 this.userData.firstLogin = false; 1188 this.userData.firstLogin = false;
1099 } 1189 }
1100 this.userData.name = 1190 this.userData.name =
1101 this.userData.firstName + " " + this.userData.lastName; 1191 this.userData.firstName + " " + this.userData.lastName;
1102 obj = Object.assign(obj, this.userData); 1192 obj = Object.assign(obj, this.userData);
1103 // if(!obj.socialMediaProfiles){ 1193 // if(!obj.socialMediaProfiles){
1104 // obj.socialMediaProfiles = {}; 1194 // obj.socialMediaProfiles = {};
1105 // } 1195 // }
1106 this.selectedSocialLink.forEach((element) => { 1196 this.selectedSocialLink.forEach((element) => {
1107 var key = element.fieldName; 1197 var key = element.fieldName;
1108 obj.socialMediaProfiles[key] = element.fieldValue; 1198 obj.socialMediaProfiles[key] = element.fieldValue;
1109 }); 1199 });
1110 delete obj.createdAt; 1200 delete obj.createdAt;
1111 delete obj.email; 1201 delete obj.email;
1112 delete obj.role; 1202 delete obj.role;
1113 delete obj.verified; 1203 delete obj.verified;
1114 delete obj.updatedAt; 1204 delete obj.updatedAt;
1115 delete obj.__v; 1205 delete obj.__v;
1116 delete obj._id; 1206 delete obj._id;
1117 delete obj.karmaPoints; 1207 delete obj.karmaPoints;
1118 delete obj.awards; 1208 delete obj.awards;
1119 delete obj.socialLogin; 1209 delete obj.socialLogin;
1120 delete obj.phoneNo; 1210 delete obj.phoneNo;
1121 axios 1211 axios
1122 .put("/profile", obj, { 1212 .put("/profile", obj, {
1123 headers: { 1213 headers: {
1124 Authorization: "Bearer " + this.usertoken, 1214 Authorization: "Bearer " + this.usertoken,
1125 }, 1215 },
1126 }) 1216 })
1127 .then((response) => { 1217 .then((response) => {
1128 // this.userData = response.data.data; 1218 // this.userData = response.data.data;
1129 this.$toaster.success("Profile Updated"); 1219 this.$toaster.success("Profile Updated");
1130 this.closeDialog(); 1220 this.closeDialog();
1131 console.log(response.data.data); 1221 console.log(response.data.data);
1132 }) 1222 })
1133 .catch((error) => { 1223 .catch((error) => {
1134 if (error.response) { 1224 if (error.response) {
1135 this.$toaster.error(error.response.data.message); 1225 this.$toaster.error(error.response.data.message);
1136 } 1226 }
1137 }); 1227 });
1138 }, 1228 },
1139 addProfileDialog() { 1229 addProfileDialog() {
1140 $(".inner-wrp").addClass("body-blur"); 1230 $(".inner-wrp").addClass("body-blur");
1141 $("#add-social-links").hide(); 1231 $("#add-social-links").hide();
1142 $(".popup-wrp, #add-profile").show(); 1232 $(".popup-wrp, #add-profile").show();
1143 }, 1233 },
1144 nextProfileDialog() { 1234 nextProfileDialog() {
1145 $("#add-profile").hide(); 1235 $("#add-profile").hide();
1146 $("#add-social-links").show(); 1236 $("#add-social-links").show();
1147 this.saveProfile(); 1237 this.saveProfile();
1148 }, 1238 },
1149 closeDialog() { 1239 closeDialog() {
1150 $(".popup-wrp").hide(); 1240 $(".popup-wrp").hide();
1151 $(".inner-wrp").removeClass("body-blur"); 1241 $(".inner-wrp").removeClass("body-blur");
1152 // this.saveProfile(); 1242 // this.saveProfile();
1153 }, 1243 },
1154 hideDialog() { 1244 hideDialog() {
1155 $(".popup-wrp").hide(); 1245 $(".popup-wrp").hide();
1156 $(".inner-wrp").removeClass("body-blur"); 1246 $(".inner-wrp").removeClass("body-blur");
1157 }, 1247 },
1158 /// 1248 ///
1159 caseDialog() { 1249 caseDialog() {
1160 $(".rp-all").removeClass("active"); 1250 $(".rp-all").removeClass("active");
1161 $(".c-0").addClass("active"); 1251 $(".c-0").addClass("active");
1162 $("#all-replies").hide(); 1252 $("#all-replies").hide();
1163 $("#case-study-0").show(); 1253 $("#case-study-0").show();
1164 }, 1254 },
1165 repliesDialog() { 1255 repliesDialog() {
1166 $(".c-0").removeClass("active"); 1256 $(".c-0").removeClass("active");
1167 $(".rp-all").addClass("active"); 1257 $(".rp-all").addClass("active");
1168 $("#case-study-0").hide(); 1258 $("#case-study-0").hide();
1169 $("#all-replies").show(); 1259 $("#all-replies").show();
1170 }, 1260 },
1171 1261
1172 userprofileshowDialog() { 1262 userprofileshowDialog() {
1173 $("#userprofileshow").toggle(); 1263 $("#userprofileshow").toggle();
1174 }, 1264 },
1175 openUrl(url) { 1265 openUrl(url) {
1176 window.open(url); 1266 window.open(url);
1177 }, 1267 },
1178 }, 1268 },
1179 }; 1269 };
1180 </script> 1270 </script>
1181 <style> 1271 <style>
1182 .no-cursor { 1272 .no-cursor {
1183 cursor: default !important; 1273 cursor: default !important;
1184 } 1274 }
1185 .no-underline { 1275 .no-underline {
1186 text-decoration: none !important; 1276 text-decoration: none !important;
1187 } 1277 }
1188 .position-left { 1278 .position-left {
1189 left: 15px !important; 1279 left: 15px !important;
1190 } 1280 }
1191 .padding-right { 1281 .padding-right {
1192 padding-right: 0px !important; 1282 padding-right: 0px !important;
1193 } 1283 }
1194 1284
1195 .social-link-right { 1285 .social-link-right {
1196 display: flex; 1286 display: flex;
1197 flex-flow: column wrap; 1287 flex-flow: column wrap;
1198 align-content: flex-end; 1288 align-content: flex-end;
1199 } 1289 }
src/components/SignUp.vue
Diff comments   View file @2991bac
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> 48 <h1>
49 Hello, there!<br /> 49 Hello, there!<br />
50 welcome to spotlight 50 welcome to spotlight
51 <!-- Welcome to <br /> 51 <!-- Welcome to <br />
52 Productgrowth --> 52 Productgrowth -->
53 </h1> 53 </h1>
54 <ul class="sign-in-up-list"> 54 <ul class="sign-in-up-list">
55 <li> 55 <li>
56 <img src="../assets/images/check.svg" /><span 56 <img src="../assets/images/check.svg" /><span
57 >Collaborate, Contribute and Explore with fellow product enthusiasts</span 57 >Collaborate, Contribute and Explore with fellow product enthusiasts</span
58 > 58 >
59 </li> 59 </li>
60 <li> 60 <li>
61 <img src="../assets/images/check.svg" /><span 61 <img src="../assets/images/check.svg" /><span
62 >Get access to insightful Case Studies and participate in Roundtables</span 62 >Get access to insightful Case Studies and participate in Roundtables</span
63 > 63 >
64 </li> 64 </li>
65 <li> 65 <li>
66 <img src="../assets/images/check.svg" /><span 66 <img src="../assets/images/check.svg" /><span
67 >Engage actively on the 67 >Engage actively on the
68 Bounce Board - we’re all ears! 68 Bounce Board - we’re all ears!
69 </span 69 </span
70 > 70 >
71 </li> 71 </li>
72 </ul> 72 </ul>
73 </div> 73 </div>
74 <!-- users land image --> 74 <!-- users land image -->
75 <div class="s-l-right-section"> 75 <div class="s-l-right-section">
76 <div class="form-layout"> 76 <div class="form-layout">
77 <form v-on:keyup.enter="signup"> 77 <form v-on:keyup.enter="signup">
78 <h5>Sign Up using</h5> 78 <h5>Sign Up using</h5>
79 <div class="social-login"> 79 <div class="social-login">
80 <ul> 80 <ul>
81 <li> 81 <li>
82 <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a> 82 <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
83 </li> 83 </li>
84 <li> 84 <li>
85 <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a> 85 <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
86 </li> 86 </li>
87 <li> 87 <li>
88 <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a> 88 <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
89 </li> 89 </li>
90 </ul> 90 </ul>
91 </div> 91 </div>
92 <h5>or Sign Up with Email</h5> 92 <h5>or Sign Up with Email</h5>
93 <div class="fill-form"> 93 <div class="fill-form">
94 <label for="inputEmail" class="sr-only">Email address</label> 94 <label for="inputEmail" class="sr-only">Email address</label>
95 <input 95 <input
96 type="email" 96 type="email"
97 id="inputEmail" 97 id="inputEmail"
98 class="form-control" 98 class="form-control"
99 placeholder="Your Email ID" 99 placeholder="Your Email ID"
100 autocomplete="off" 100 autocomplete="off"
101 v-model="userData.email" 101 v-model="userData.email"
102 /> 102 />
103 <label for="inputPassword" class="sr-only">Password</label> 103 <label for="inputPassword" class="sr-only">Password</label>
104 <input 104 <input
105 type="password" 105 type="password"
106 id="inputPassword" 106 id="inputPassword"
107 class="form-control" 107 class="form-control"
108 placeholder="Password" 108 placeholder="Password"
109 v-model="userData.password" 109 v-model="userData.password"
110 /> 110 />
111 111
112 <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup"> 112 <a href="javascript:void(0);" class="btn btn-lg sb-button" @click="signup">
113 <img src="../assets/images/user-plus.svg" /> Create Account 113 <img src="../assets/images/user-plus.svg" /> Create Account
114 </a> 114 </a>
115 <p class=""> 115 <p class="">
116 By signing up I agree to the <a>Privacy Policy</a> and 116 By signing up I agree to the <a>Privacy Policy</a> and
117 <a>Terms of Service</a> 117 <a>Terms of Service</a>
118 </p> 118 </p>
119 <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3> 119 <h3 class="ft-normal">Have an account? <a class="cursor-pointer no-underline" @click="goToLogin">Login</a></h3>
120 </div> 120 </div>
121 </form> 121 </form>
122 </div> 122 </div>
123 </div> 123 </div>
124 <!-- sign up --> 124 <!-- sign up -->
125 125
126 </div> 126 </div>
127 <!-- body wrapper --> 127 <!-- body wrapper -->
128 </div> 128 </div>
129 </main> 129 </main>
130 </template> 130 </template>
131 131
132 <script> 132 <script>
133 import Vue from "vue"; 133 import Vue from "vue";
134 import router from "../router"; 134 import router from "../router";
135 import axios from "axios"; 135 import axios from "axios";
136 136
137 export default { 137 export default {
138 name: "SignUp", 138 name: "SignUp",
139 139
140 data() { 140 data() {
141 return { 141 return {
142 userData: {}, 142 userData: {},
143 }; 143 };
144 }, 144 },
145 mounted() { 145 mounted() {
146 // this.$auth.logout(); 146 // this.$auth.logout();
147 // localStorage.removeItem("spotlight_usertoken"); 147 // localStorage.removeItem("spotlight_usertoken");
148 var userdata = localStorage.getItem("spotlight_usertoken"); 148 var userdata = localStorage.getItem("spotlight_usertoken");
149 var userId = localStorage.getItem("spotlight_id");
150
149 if (userdata) { 151 if (userdata) {
150 this.$router.push("/profile"); 152 this.$router.push({
153 name: "Profile",
154 params: {
155 id: userId,
156 },
157 });
151 } 158 }
152 // localStorage.removeItem("spotlight_email"); 159 // localStorage.removeItem("spotlight_email");
153 }, 160 },
154 methods: { 161 methods: {
155 login() { 162 login() {
156 this.$auth.loginWithRedirect(); 163 this.$auth.loginWithRedirect();
157 }, 164 },
158 goToLogin() { 165 goToLogin() {
159 this.$router.push("/login"); 166 this.$router.push("/login");
160 }, 167 },
161 signup() { 168 signup() {
162 axios 169 axios
163 .post("/signup", this.userData) 170 .post("/signup", this.userData)
164 .then((response) => { 171 .then((response) => {
165 this.$toaster.success(response.data.message); 172 this.$toaster.success(response.data.message);
166 if(response.data.status == 'success'){ 173 if(response.data.status == 'success'){
167 localStorage.setItem('spotlight_email', this.userData.email); 174 localStorage.setItem('spotlight_email', this.userData.email);
168 this.$router.push({ name: 'Otp', params: { flag: false }}); 175 this.$router.push({ name: 'Otp', params: { flag: false }});
169 } 176 }
170 }) 177 })
171 .catch( (error) =>{ 178 .catch( (error) =>{
172 if (error.response) { 179 if (error.response) {
173 this.$toaster.error(error.response.data.message); 180 this.$toaster.error(error.response.data.message);
174 } 181 }
175 }); 182 });
176 }, 183 },
177 }, 184 },
178 }; 185 };
179 </script> 186 </script>
180 <style> 187 <style>
181 .light-font-weight { 188 .light-font-weight {
182 font-weight: 500 !important; 189 font-weight: 500 !important;
183 } 190 }
184 </style> 191 </style>
185 192
src/router/index.js
Diff comments   View file @2991bac
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 import { authGuard } from "../auth/authGuard" 3 import { authGuard } from "../auth/authGuard"
4 import LandingPage from '@/components/LandingPage' 4 import LandingPage from '@/components/LandingPage'
5 import SignUp from '@/components/SignUp' 5 import SignUp from '@/components/SignUp'
6 import Reset from '@/components/Reset' 6 import Reset from '@/components/Reset'
7 import Profile from '@/components/Profile' 7 import Profile from '@/components/Profile'
8 import welcome from '@/components/welcome' 8 import welcome from '@/components/welcome'
9 import Intermediate from '@/components/Intermediate' 9 import Intermediate from '@/components/Intermediate'
10 import Insight from '@/components/Insight' 10 import Insight from '@/components/Insight'
11 import ProductInsight from '@/components/ProductInsight' 11 import ProductInsight from '@/components/ProductInsight'
12 import EpisodeIntro from '@/components/EpisodeIntro' 12 import EpisodeIntro from '@/components/EpisodeIntro'
13 import AuthorIntro from '@/components/AuthorIntro' 13 import AuthorIntro from '@/components/AuthorIntro'
14 import AuthorReadingNow from '@/components/AuthorReadingNow' 14 import AuthorReadingNow from '@/components/AuthorReadingNow'
15 import AuthorReadingBreak from '@/components/AuthorReadingBreak' 15 import AuthorReadingBreak from '@/components/AuthorReadingBreak'
16 import SingleAuthor from '@/components/SingleAuthor' 16 import SingleAuthor from '@/components/SingleAuthor'
17 import Outro from '@/components/outro' 17 import Outro from '@/components/outro'
18 import SingleMobileInsight from '@/components/SingleMobileInsight' 18 import SingleMobileInsight from '@/components/SingleMobileInsight'
19 import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight' 19 import TwoScreenWithoutInsight from '@/components/TwoScreenWithoutInsight'
20 import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne' 20 import SingleMobileScreenInsightOne from '@/components/SingleMobileScreenInsightOne'
21 import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne' 21 import SingleWebScreenInsightOne from '@/components/SingleWebScreenInsightOne'
22 import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo' 22 import SingleMobileScreenInsightTwo from '@/components/SingleMobileScreenInsightTwo'
23 import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight' 23 import SingleScreengrabOneInsight from '@/components/SingleScreengrabOneInsight'
24 import TwoScreenWithInsight from '@/components/TwoScreenWithInsight' 24 import TwoScreenWithInsight from '@/components/TwoScreenWithInsight'
25 import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments' 25 import TwoScreengrabWithComments from '@/components/TwoScreengrabWithComments'
26 import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight' 26 import TwoWebScreenWithInsight from '@/components/TwoWebScreenWithInsight'
27 import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor' 27 import NoScreenshotSingleAuthor from '@/components/NoScreenshotSingleAuthor'
28 import TwoAuthor from '@/components/TwoAuthor' 28 import TwoAuthor from '@/components/TwoAuthor'
29 import TwoAuthorDesktop from '@/components/TwoAuthorDesktop' 29 import TwoAuthorDesktop from '@/components/TwoAuthorDesktop'
30 import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow' 30 import TwoAuthorReadingNow from '@/components/TwoAuthorReadingNow'
31 import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments' 31 import SingleMobileScreenChatComments from '@/components/SingleMobileScreenChatComments'
32 import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor' 32 import TwoScreensWithTwoAuthor from '@/components/TwoScreensWithTwoAuthor'
33 import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor' 33 import NoScreenshotTwoAuthor from '@/components/NoScreenshotTwoAuthor'
34 import ToAddYourComment from '@/components/ToAddYourComment' 34 import ToAddYourComment from '@/components/ToAddYourComment'
35 import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard' 35 import ReadingFlowBounceBoard from '@/components/ReadingFlowBounceBoard'
36 import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat' 36 import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat'
37 import Otp from '@/components/Otp' 37 import Otp from '@/components/Otp'
38 import ChangePassword from '@/components/ChangePassword' 38 import ChangePassword from '@/components/ChangePassword'
39 import noscreenshotSingleautho from '@/components/noscreenshotSingleautho' 39 import noscreenshotSingleautho from '@/components/noscreenshotSingleautho'
40 40
41 41
42 import router from '../router' 42 import router from '../router'
43 Vue.use(Router) 43 Vue.use(Router)
44 44
45 export default new Router({ 45 export default new Router({
46 mode: 'history', 46 mode: 'history',
47 routes: [{ 47 routes: [{
48 path: '/login', 48 path: '/login',
49 name: 'LandingPage', 49 name: 'LandingPage',
50 component: LandingPage, 50 component: LandingPage,
51 // beforeEnter: function(to, from, next) { 51 // beforeEnter: function(to, from, next) {
52 // var userdata = localStorage.getItem('spotlight_usertoken') 52 // var userdata = localStorage.getItem('spotlight_usertoken')
53 // if (userdata) { 53 // if (userdata) {
54 // router.push({ name: 'Welcome' }) 54 // router.push({ name: 'Welcome' })
55 // } 55 // }
56 // next() 56 // next()
57 // } 57 // }
58 }, 58 },
59 { 59 {
60 path: '/', 60 path: '/',
61 name: 'SignUp', 61 name: 'SignUp',
62 component: SignUp, 62 component: SignUp,
63 }, 63 },
64 { 64 {
65 path: '/intermediate', 65 path: '/intermediate',
66 name: 'Intermediate', 66 name: 'Intermediate',
67 component: Intermediate 67 component: Intermediate
68 }, 68 },
69 { 69 {
70 path: '/reset', 70 path: '/reset',
71 name: 'Reset', 71 name: 'Reset',
72 component: Reset, 72 component: Reset,
73 }, 73 },
74 { 74 {
75 path: '/profile', 75 path: '/profile/:id',
76 name: 'Profile', 76 name: 'Profile',
77 component: Profile, 77 component: Profile,
78 }, 78 },
79 { 79 {
80 path: '/insight', 80 path: '/insight',
81 name: 'Insight', 81 name: 'Insight',
82 component: Insight, 82 component: Insight,
83 }, 83 },
84 { 84 {
85 path: '/product-insight', 85 path: '/product-insight',
86 name: 'ProductInsight', 86 name: 'ProductInsight',
87 component: ProductInsight, 87 component: ProductInsight,
88 }, 88 },
89 { 89 {
90 path: '/episode-intro/:caseStudyId/:slideId', 90 path: '/episode-intro/:caseStudyId/:slideId',
91 name: 'EpisodeIntro', 91 name: 'EpisodeIntro',
92 component: EpisodeIntro, 92 component: EpisodeIntro,
93 }, 93 },
94 , 94 ,
95 { 95 {
96 path: '/author-intro/:caseStudyId/:slideId', 96 path: '/author-intro/:caseStudyId/:slideId',
97 name: 'AuthorIntro', 97 name: 'AuthorIntro',
98 component: AuthorIntro, 98 component: AuthorIntro,
99 }, 99 },
100 { 100 {
101 path: '/author-reading-now/:caseStudyId/:slideId', 101 path: '/author-reading-now/:caseStudyId/:slideId',
102 name: 'AuthorReadingNow', 102 name: 'AuthorReadingNow',
103 component: AuthorReadingNow, 103 component: AuthorReadingNow,
104 }, 104 },
105 { 105 {
106 path: '/author-reading-break/:caseStudyId/:slideId', 106 path: '/author-reading-break/:caseStudyId/:slideId',
107 name: 'AuthorReadingBreak', 107 name: 'AuthorReadingBreak',
108 component: AuthorReadingBreak, 108 component: AuthorReadingBreak,
109 }, 109 },
110 { 110 {
111 path: '/single-author', 111 path: '/single-author',
112 name: 'SingleAuthor', 112 name: 'SingleAuthor',
113 component: SingleAuthor, 113 component: SingleAuthor,
114 }, 114 },
115 { 115 {
116 path: '/outro/:caseStudyId/:slideId', 116 path: '/outro/:caseStudyId/:slideId',
117 name: 'Outro', 117 name: 'Outro',
118 component: Outro, 118 component: Outro,
119 }, 119 },
120 { 120 {
121 path: '/single-mobile-insight', 121 path: '/single-mobile-insight',
122 name: 'SingleMobileInsight', 122 name: 'SingleMobileInsight',
123 component: SingleMobileInsight, 123 component: SingleMobileInsight,
124 }, 124 },
125 { 125 {
126 path: '/two-screen-without-insight/:caseStudyId/:slideId', 126 path: '/two-screen-without-insight/:caseStudyId/:slideId',
127 name: 'TwoScreenWithoutInsight', 127 name: 'TwoScreenWithoutInsight',
128 component: TwoScreenWithoutInsight, 128 component: TwoScreenWithoutInsight,
129 }, 129 },
130 { 130 {
131 path: '/single-m-screen-insight-one/:caseStudyId/:slideId', 131 path: '/single-m-screen-insight-one/:caseStudyId/:slideId',
132 name: 'SingleMobileScreenInsightOne', 132 name: 'SingleMobileScreenInsightOne',
133 component: SingleMobileScreenInsightOne, 133 component: SingleMobileScreenInsightOne,
134 }, 134 },
135 { 135 {
136 path: '/single-m-screen-insight-two/:caseStudyId/:slideId', 136 path: '/single-m-screen-insight-two/:caseStudyId/:slideId',
137 name: 'SingleMobileScreenInsightTwo', 137 name: 'SingleMobileScreenInsightTwo',
138 component: SingleMobileScreenInsightTwo, 138 component: SingleMobileScreenInsightTwo,
139 }, 139 },
140 { 140 {
141 path: '/single-web-screen-insight-one', 141 path: '/single-web-screen-insight-one',
142 name: 'SingleWebScreenInsightOne', 142 name: 'SingleWebScreenInsightOne',
143 component: SingleWebScreenInsightOne, 143 component: SingleWebScreenInsightOne,
144 }, 144 },
145 { 145 {
146 path: '/single-screengrab-one-insight', 146 path: '/single-screengrab-one-insight',
147 name: 'SingleScreengrabOneInsight', 147 name: 'SingleScreengrabOneInsight',
148 component: SingleScreengrabOneInsight, 148 component: SingleScreengrabOneInsight,
149 }, 149 },
150 { 150 {
151 path: '/two-screen-with-insight/:caseStudyId/:slideId', 151 path: '/two-screen-with-insight/:caseStudyId/:slideId',
152 name: 'TwoScreenWithInsight', 152 name: 'TwoScreenWithInsight',
153 component: TwoScreenWithInsight, 153 component: TwoScreenWithInsight,
154 }, 154 },
155 { 155 {
156 path: '/two-screengrab-with-comments', 156 path: '/two-screengrab-with-comments',
157 name: 'TwoScreengrabWithComments', 157 name: 'TwoScreengrabWithComments',
158 component: TwoScreengrabWithComments, 158 component: TwoScreengrabWithComments,
159 }, 159 },
160 { 160 {
161 path: '/two-webscreen-with-insight', 161 path: '/two-webscreen-with-insight',
162 name: 'TwoWebScreenWithInsight', 162 name: 'TwoWebScreenWithInsight',
163 component: TwoWebScreenWithInsight, 163 component: TwoWebScreenWithInsight,
164 }, 164 },
165 { 165 {
166 path: '/noscreenshot-single-author/:caseStudyId/:slideId', 166 path: '/noscreenshot-single-author/:caseStudyId/:slideId',
167 name: 'NoScreenshotSingleAuthor', 167 name: 'NoScreenshotSingleAuthor',
168 component: NoScreenshotSingleAuthor, 168 component: NoScreenshotSingleAuthor,
169 }, 169 },
170 { 170 {
171 path: '/two-author-intro', 171 path: '/two-author-intro',
172 name: 'TwoAuthor', 172 name: 'TwoAuthor',
173 component: TwoAuthor, 173 component: TwoAuthor,
174 }, 174 },
175 { 175 {
176 path: '/two-author-desktop', 176 path: '/two-author-desktop',
177 name: 'TwoAuthorDesktop', 177 name: 'TwoAuthorDesktop',
178 component: TwoAuthorDesktop, 178 component: TwoAuthorDesktop,
179 }, 179 },
180 { 180 {
181 path: '/two-author-reading-now', 181 path: '/two-author-reading-now',
182 name: 'TwoAuthorReadingNow', 182 name: 'TwoAuthorReadingNow',
183 component: TwoAuthorReadingNow, 183 component: TwoAuthorReadingNow,
184 }, 184 },
185 { 185 {
186 path: '/single-mobile-screen-chat-comments', 186 path: '/single-mobile-screen-chat-comments',
187 name: 'SingleMobileScreenChatComments', 187 name: 'SingleMobileScreenChatComments',
188 component: SingleMobileScreenChatComments, 188 component: SingleMobileScreenChatComments,
189 }, 189 },
190 { 190 {
191 path: '/two-screen-with-two-author', 191 path: '/two-screen-with-two-author',
192 name: 'TwoScreensWithTwoAuthor', 192 name: 'TwoScreensWithTwoAuthor',
193 component: TwoScreensWithTwoAuthor, 193 component: TwoScreensWithTwoAuthor,
194 }, 194 },
195 { 195 {
196 path: '/no-screenshot-two-author', 196 path: '/no-screenshot-two-author',
197 name: 'NoScreenshotTwoAuthor', 197 name: 'NoScreenshotTwoAuthor',
198 component: NoScreenshotTwoAuthor, 198 component: NoScreenshotTwoAuthor,
199 }, 199 },
200 { 200 {
201 path: '/to-add-your-comment', 201 path: '/to-add-your-comment',
202 name: 'ToAddYourComment', 202 name: 'ToAddYourComment',
203 component: ToAddYourComment, 203 component: ToAddYourComment,
204 }, 204 },
205 { 205 {
206 path: '/reading-flow-bounce-board', 206 path: '/reading-flow-bounce-board',
207 name: 'ReadingFlowBounceBoard', 207 name: 'ReadingFlowBounceBoard',
208 component: ReadingFlowBounceBoard, 208 component: ReadingFlowBounceBoard,
209 }, 209 },
210 { 210 {
211 path: '/reading-flow-bounce-board-chat', 211 path: '/reading-flow-bounce-board-chat',
212 name: 'ReadingFlowBounceBoard_chat', 212 name: 'ReadingFlowBounceBoard_chat',
213 component: ReadingFlowBounceBoard_chat, 213 component: ReadingFlowBounceBoard_chat,
214 }, 214 },
215 { 215 {
216 path: '/otp/:flag', 216 path: '/otp/:flag',
217 name: 'Otp', 217 name: 'Otp',
218 component: Otp, 218 component: Otp,
219 }, 219 },
220 { 220 {
221 path: '/changepassword', 221 path: '/changepassword',
222 name: 'ChangePassword', 222 name: 'ChangePassword',
223 component: ChangePassword, 223 component: ChangePassword,
224 }, 224 },
225 { 225 {
226 path: '/noscreenshot-s-autho/:caseStudyId/:slideId', 226 path: '/noscreenshot-s-autho/:caseStudyId/:slideId',
227 name: 'noscreenshotSingleautho', 227 name: 'noscreenshotSingleautho',
228 component: noscreenshotSingleautho, 228 component: noscreenshotSingleautho,
229 }, 229 },
230 ], 230 ],
231 scrollBehavior(to, from, savedPosition) { 231 scrollBehavior(to, from, savedPosition) {
232 this.seen = false 232 this.seen = false
233 return { x: 0, y: 0 } 233 return { x: 0, y: 0 }
234 } 234 }
235 }) 235 })
236 236
237 // noscreenshot-s-autho 237 // noscreenshot-s-autho
238 //two-screen-without-insight 238 //two-screen-without-insight
239 //single-m-screen-insight-one 239 //single-m-screen-insight-one
240 //two-screen-with-insight 240 //two-screen-with-insight