From d40543f4ca0cb59d020eafbc4e7b8e3e3874243c Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Wed, 27 Sep 2017 20:59:49 +0200 Subject: [PATCH] Paglias Client Fixes (#9086) * fix login background on bigger screens * redirect to correct page after login / signup * fix mountains in background --- .../components/auth/registerLoginReset.vue | 50 ++++++++++++++----- .../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, 71 insertions(+), 23 deletions(-) diff --git a/website/client/components/auth/registerLoginReset.vue b/website/client/components/auth/registerLoginReset.vue index 05da81fc8d..70d5b7804b 100644 --- a/website/client/components/auth/registerLoginReset.vue +++ b/website/client/components/auth/registerLoginReset.vue @@ -83,7 +83,7 @@ :enabled="!resetPasswordSetNewOneData.hasError" ) {{$t('setNewPass')}} - #bottom-wrap + #bottom-wrap(:class="`bottom-wrap-${!registering ? 'login' : 'register'}`") #bottom-background .seamless_mountains_demo_repeat .midground_foreground_extended2 @@ -104,7 +104,16 @@ @import '~client/assets/scss/colors.scss'; @media only screen and (min-height: 1080px) { - #bottom-wrap { + .bottom-wrap-register { + margin-top: 6em; + position: fixed !important; + width: 100%; + bottom: 0; + } + } + + @media only screen and (min-height: 862px) { + .bottom-wrap-login { margin-top: 6em; position: fixed !important; width: 100%; @@ -116,7 +125,7 @@ background-color: $purple-200; background: $purple-200; /* For browsers that do not support gradients */ background: linear-gradient(to bottom, #4f2a93, #6133b4); /* Standard syntax */ - min-height: 100%; + min-height: 100vh; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ @@ -249,7 +258,7 @@ } .toggle-link { - color: #fff !important; + color: $white !important; } .forgot-password { @@ -367,16 +376,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) { @@ -390,16 +402,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; @@ -414,10 +429,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 c1039defb5..8daef613a8 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 2fd58beb09..023ccbafc4 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 3350b0f5dc..005693fc7b 100644 --- a/website/client/router.js +++ b/website/client/router.js @@ -275,9 +275,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 7b5fcdc41c..96f2f7d157 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: '', }, });