From 3f538ccf956ffcd14fdfd4b2f29210389013b3ff Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 6 Apr 2022 12:26:36 +0200
Subject: [PATCH] Avoid NavigationDuplicated error after Login

Only redirect on mounted if already logged-in

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/views/User/Login.vue                      | 16 +++++++---------
 .../unit/specs/components/User/login.spec.ts     |  6 +++---
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 56bff7077..953b75574 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { Component, Prop, Vue } from "vue-property-decorator";
 import { Route } from "vue-router";
 import { ICurrentUser } from "@/types/current-user.model";
 import { LoginError, LoginErrorCode } from "@/types/enums";
@@ -207,6 +207,11 @@ export default class Login extends Vue {
     const { query } = this.$route;
     this.errorCode = query.code as LoginErrorCode;
     this.redirect = query.redirect as string | undefined;
+
+    // Already-logged-in and accessing /login
+    if (this.currentUser.isLoggedIn) {
+      this.$router.push("/");
+    }
   }
 
   async loginAction(e: Event): Promise<Route | void> {
@@ -240,7 +245,7 @@ export default class Login extends Vue {
       if (window.localStorage) {
         window.localStorage.setItem("welcome-back", "yes");
       }
-      this.$router.push({ name: RouteName.HOME });
+      this.$router.replace({ name: RouteName.HOME });
       return;
     } catch (err: any) {
       this.submitted = false;
@@ -279,13 +284,6 @@ export default class Login extends Vue {
     }
   }
 
-  @Watch("currentUser")
-  redirectToHomepageIfAlreadyLoggedIn(): Promise<Route> | void {
-    if (this.currentUser.isLoggedIn) {
-      return this.$router.push("/");
-    }
-  }
-
   get hasCaseWarning(): boolean {
     return this.credentials.email !== this.credentials.email.toLowerCase();
   }
diff --git a/js/tests/unit/specs/components/User/login.spec.ts b/js/tests/unit/specs/components/User/login.spec.ts
index 79ee76602..969d70916 100644
--- a/js/tests/unit/specs/components/User/login.spec.ts
+++ b/js/tests/unit/specs/components/User/login.spec.ts
@@ -22,7 +22,7 @@ import { InMemoryCache } from "@apollo/client/cache";
 const localVue = createLocalVue();
 localVue.use(Buefy);
 config.mocks.$t = (key: string): string => key;
-const $router = { push: jest.fn() };
+const $router = { push: jest.fn(), replace: jest.fn() };
 
 describe("Render login form", () => {
   let wrapper: Wrapper<Vue>;
@@ -125,9 +125,9 @@ describe("Render login form", () => {
     await flushPromises();
     expect(currentUser?.email).toBe("some@email.tld");
     expect(currentUser?.id).toBe("1");
-    expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true);
+    expect(jest.isMockFunction(wrapper.vm.$router.replace)).toBe(true);
     await flushPromises();
-    expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME });
+    expect($router.replace).toHaveBeenCalledWith({ name: RouteName.HOME });
   });
 
   it("handles a login error", async () => {