redirect to correct page after login / signup

HabitRPG · Sep 27, 2017 · ff9aa97 · ff9aa97
1 parent 26ad65c
commit ff9aa97
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -129,7 +129,6 @@ export default function () {
       upgradingGroup: {},
       notificationStore: [],
       modalStack: [],
-      afterLoginRedirect: '',
       userIdToMessage: '',
     },
   });