Paglias Client Fixes (#9086)

* fix login background on bigger screens

* redirect to correct page after login / signup

* fix mountains in background

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) {
+      let redirectTo;
-        window.location.href = this.$store.state.afterLoginRedirect;
+
-        return;
+      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) {
+      let redirectTo;
-        window.location.href = this.$store.state.afterLoginRedirect;
+
-        return;
+      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) {

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({
-          this.$router.push('/register');
+            name: 'register',
+            query: {
+              redirectTo: '/group-plans',
+            },
+          });
           return;
         }
 

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) {
+        let redirectTo;
-          window.location.href = this.$store.state.afterLoginRedirect;
+
-          return;
+        if (this.$route.query.redirectTo) {
+          redirectTo = this.$route.query.redirectTo;
+        } else {
+          redirectTo = '/';
         }
 
-        window.location.href = '/';
+        window.location.href = redirectTo;
       },
       playButtonClick () {
         Analytics.track({

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
+    // Pass the requested page as a query parameter to redirect later.
-    // so if you tried to go to /party you'll be redirected to /party after login/signup
+
-    return next({name: to.path === '/' ? 'home' : 'login'});
+    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')) {

website/client/store/index.js

@@ -129,7 +129,6 @@ export default function () {
       upgradingGroup: {},
       notificationStore: [],
       modalStack: [],
-      afterLoginRedirect: '',
       userIdToMessage: '',
     },
   });