From ff9aa978ab84b79c2f541b7495954433204beff1 Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Wed, 27 Sep 2017 13:55:43 +0200 Subject: [PATCH] redirect to correct page after login / signup --- .../client/components/auth/registerLogin.vue | 35 +++++++++++++------ .../client/components/static/groupPlans.vue | 8 +++-- website/client/components/static/home.vue | 12 ++++--- website/client/router.js | 23 ++++++++++-- website/client/store/index.js | 1 - 5 files changed, 59 insertions(+), 20 deletions(-) diff --git a/website/client/components/auth/registerLogin.vue b/website/client/components/auth/registerLogin.vue index fbc32d83b7c..541c5235d46 100644 --- a/website/client/components/auth/registerLogin.vue +++ b/website/client/components/auth/registerLogin.vue @@ -226,7 +226,7 @@ } .toggle-link { - color: #fff !important; + color: $white !important; } .forgot-password { @@ -307,16 +307,19 @@ export default { passwordConfirm: this.passwordConfirm, }); - if (this.$store.state.afterLoginRedirect) { - window.location.href = this.$store.state.afterLoginRedirect; - return; + let redirectTo; + + if (this.$route.query.redirectTo) { + redirectTo = this.$route.query.redirectTo; + } else { + redirectTo = '/'; } // @TODO do not reload entire page // problem is that app.vue created hook should be called again // after user is logged in / just signed up // ALSO it's the only way to make sure language data is reloaded and correct for the logged in user - window.location.href = '/'; + window.location.href = redirectTo; }, async login () { if (!this.username) { @@ -330,16 +333,19 @@ export default { password: this.password, }); - if (this.$store.state.afterLoginRedirect) { - window.location.href = this.$store.state.afterLoginRedirect; - return; + let redirectTo; + + if (this.$route.query.redirectTo) { + redirectTo = this.$route.query.redirectTo; + } else { + redirectTo = '/'; } // @TODO do not reload entire page // problem is that app.vue created hook should be called again // after user is logged in / just signed up // ALSO it's the only way to make sure language data is reloaded and correct for the logged in user - window.location.href = '/'; + window.location.href = redirectTo; }, async socialAuth (network) { const url = window.location.href; @@ -354,10 +360,19 @@ export default { auth, }); + let redirectTo; + + if (this.$route.query.redirectTo) { + redirectTo = this.$route.query.redirectTo; + } else { + redirectTo = '/'; + } + // @TODO do not reload entire page // problem is that app.vue created hook should be called again // after user is logged in / just signed up - window.location.href = '/'; + // ALSO it's the only way to make sure language data is reloaded and correct for the logged in user + window.location.href = redirectTo; }, handleSubmit () { if (this.registering) { diff --git a/website/client/components/static/groupPlans.vue b/website/client/components/static/groupPlans.vue index c1039defb54..8daef613a80 100644 --- a/website/client/components/static/groupPlans.vue +++ b/website/client/components/static/groupPlans.vue @@ -44,8 +44,12 @@ methods: { goToNewGroupPage () { if (!this.$store.state.isUserLoggedIn) { - this.$store.state.afterLoginRedirect = '/group-plans'; - this.$router.push('/register'); + this.$router.push({ + name: 'register', + query: { + redirectTo: '/group-plans', + }, + }); return; } diff --git a/website/client/components/static/home.vue b/website/client/components/static/home.vue index 2fd58beb09f..023ccbafc4c 100644 --- a/website/client/components/static/home.vue +++ b/website/client/components/static/home.vue @@ -620,6 +620,7 @@ let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); }, + // @TODO this is totally duplicate from the registerLogin component async register () { if (this.password !== this.passwordConfirm) { alert('Passwords must match'); @@ -633,12 +634,15 @@ passwordConfirm: this.passwordConfirm, }); - if (this.$store.state.afterLoginRedirect) { - window.location.href = this.$store.state.afterLoginRedirect; - return; + let redirectTo; + + if (this.$route.query.redirectTo) { + redirectTo = this.$route.query.redirectTo; + } else { + redirectTo = '/'; } - window.location.href = '/'; + window.location.href = redirectTo; }, playButtonClick () { Analytics.track({ diff --git a/website/client/router.js b/website/client/router.js index 3ab5a48ec37..ff6c8f94168 100644 --- a/website/client/router.js +++ b/website/client/router.js @@ -274,9 +274,26 @@ router.beforeEach(function routerGuard (to, from, next) { if (!isUserLoggedIn && routeRequiresLogin) { // Redirect to the login page unless the user is trying to reach the // root of the website, in which case show the home page. - // TODO when redirecting to login if user login then redirect back to initial page - // so if you tried to go to /party you'll be redirected to /party after login/signup - return next({name: to.path === '/' ? 'home' : 'login'}); + // Pass the requested page as a query parameter to redirect later. + + const redirectTo = to.path === '/' ? 'home' : 'login'; + return next({ + name: redirectTo, + query: redirectTo === 'login' ? { + redirectTo: to.path, + } : null, + }); + } + + // Keep the redirectTo query param when going from login to register + // !to.query.redirectTo is to avoid entering a loop of infinite redirects + if (to.name === 'register' && !to.query.redirectTo && from.name === 'login' && from.query.redirectTo) { + return next({ + name: 'register', + query: { + redirectTo: from.query.redirectTo, + }, + }); } if (isUserLoggedIn && (to.name === 'login' || to.name === 'register')) { diff --git a/website/client/store/index.js b/website/client/store/index.js index 7b5fcdc41ca..96f2f7d157c 100644 --- a/website/client/store/index.js +++ b/website/client/store/index.js @@ -129,7 +129,6 @@ export default function () { upgradingGroup: {}, notificationStore: [], modalStack: [], - afterLoginRedirect: '', userIdToMessage: '', }, });