From aa1dbfabf2f307f056f86a1d665dc75e78dd56c3 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 11 Jun 2024 11:57:33 +0800
Subject: [PATCH] #216 done by using return-to URL mechanism

---
 src/components/Header.vue |  9 ++++++---
 src/router/index.js       | 10 +---------
 src/stores/login.js       | 21 ++++++++++++++++++++-
 src/views/Login/index.vue | 25 +++++++++++++++++++------
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 57fb993..9b65c31 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,7 +5,7 @@
           <DspLogo />
       </figure>
       <div class="flex justify-between items-center" v-show="showMember">
-        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
+        <button id="logout_btn" class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
           Logout
         </button>
         <!-- <figure>
@@ -56,9 +56,12 @@ export default {
         // 傳給 Map，通知 Sidebar 要關閉。
         this.$emitter.emit('leaveFilter', false);
         leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
-      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
+      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
+        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
         leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
-      } else this.logOut();
+      } else {
+        this.logOut();
+      }
     },
   },
   mounted() {
diff --git a/src/router/index.js b/src/router/index.js
index 723125b..e40a3ca 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory, } from "vue-router";
 import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
@@ -120,14 +120,6 @@ const routes = [
           }
         ]
       },
-      {
-        path: "/rule/:type/:fileId/conformance/:checkId",
-        name: "CheckConformance",
-        component: Conformance,
-        meta: {
-          file: {},
-        }
-      }
     ]
   },
   {
diff --git a/src/stores/login.js b/src/stores/login.js
index 713289c..ea74501 100644
--- a/src/stores/login.js
+++ b/src/stores/login.js
@@ -14,6 +14,8 @@ export default defineStore('loginStore', {
     },
     isInvalid: false,
     userData: {},
+    isLoggedIn: false,
+    rememberedReturnToUrl: "",
     // expired: new Date().setMonth(6), // 設定 Refresh Token 的到期日為半年後
   }),
   actions: {
@@ -38,7 +40,18 @@ export default defineStore('loginStore', {
         document.cookie = `luciaToken=${accessToken}`;
         // document.cookie = `luciaRefreshToken=${refreshToken};expires=${new Date(this.expired)};`;
 
-        this.$router.push('/files');
+        this.isLoggedIn = true;
+
+        // 大部分的情況下，預設導向至 FILES 頁面
+        // 然而有一種情況是使用者在沒有登入的情況下貼上了某一個頁面的網址，
+        // 則在此情況下時，我們會在使用者稍後登入後，把使用者帶到剛才記住的 return-to 網址
+        if(this.rememberedReturnToUrl !== "") {
+          console.log('1111', );
+          window.location.href = this.rememberedReturnToUrl;
+        } else {
+          console.log('2222', );
+          this.$router.push('/login');
+        }   
       } catch(error) {
         this.isInvalid = true;
       };
@@ -72,6 +85,9 @@ export default defineStore('loginStore', {
     logOut() {
       delete axios.defaults.headers.common["Authorization"];
       document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
+
+      this.isLoggedIn = false;
+
       this.$router.push('/login');
     },
     /**
@@ -100,5 +116,8 @@ export default defineStore('loginStore', {
         this.$router.push('/login');
       };
     },
+    setRememberedReturnToUrl(returnToUrl){
+      this.rememberedReturnToUrl = returnToUrl
+    }
   }
 });
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index a255c4f..ac4ce78 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -9,25 +9,33 @@
             <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
               <IconMember class="h-5 w-5 fill-current"/>
             </span>
-            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
+            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 "
+              :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username"
+              @change="changeHandler($event)"/>
           </label>
           <label for="passwordt" class="relative block">
             <p class="text-sm font-normal mb-2">Password</p>
             <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
               <IconLockKey class="h-5 w-5 fill-current"/>
             </span>
-            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
-            <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
+            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon"
+              class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 "
+              :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
+            <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password"
+              @click="showPassword = !showPassword">
               <IconEyeOpen class="h-5 w-5" v-if="showPassword"/>
               <IconEyeClose class="h-5 w-5" v-else/>
             </span>
           </label>
           <p class="my-4 text-danger">
             <span v-show="isInvalid">
-              <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
+              <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>
+                Incorrect account or password.
             </span>
           </p>
-          <button type="submit" class="w-full btn btn-lg" :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'" :disabled="isDisabledButton">
+          <button id="login_btn_main_btn" type="submit" class="w-full btn btn-lg"
+            :class="this.isDisabled ? 'btn-disable' : 'btn-c-primary'"
+            :disabled="isDisabledButton">
             Log in
           </button>
         </form>
@@ -37,7 +45,7 @@
 </template>
 
 <script>
-import { storeToRefs } from 'pinia';
+import { storeToRefs, mapActions } from 'pinia';
 import loginStore from '@/stores/login.js';
 import IconMember from '@/components/icons/IconMember.vue';
 import IconLockKey from '@/components/icons/IconLockKey.vue';
@@ -93,6 +101,11 @@ export default {
         this.isInvalid = false;
       }
     },
+    ...mapActions(loginStore, ['setRememberedReturnToUrl']),
+  },
+  created() {
+    // 考慮到使用者可能在未登入的情況下貼入一個頁面網址連結過來瀏覽器
+    this.setRememberedReturnToUrl(this.$route.query['return-to']);
   },
 };
 </script>