redirect after login back to page

Author: simonredfern

src/components/ChatWidget.vue

@@ -3,21 +3,31 @@ placeholder for Opey II Chat widget
 -->
 <script lang="ts">
 
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { Close, Top as ElTop, WarnTriangleFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import ChatMessage from './ChatMessage.vue';
 import { v4 as uuidv4 } from 'uuid';
 import { OpeyMessage, UserMessage } from '@/models/MessageModel';
 import { getCurrentUser } from '@/obp';
 import { useChat } from '@/stores/chat';
+import { useRoute } from 'vue-router'
 
 export default {
     setup () {
+        const route = useRoute()
+        const getLoginUrl = computed(() => {
+            const currentPath = route.path
+            const queryString = new URLSearchParams(route.query as Record<string, string>).toString()
+            const fullPath = queryString ? `${currentPath}?${queryString}` : currentPath
+            return `/api/oauth2/connect?redirect=${encodeURIComponent(fullPath)}`
+        })
+
         return {
             Close,
             ElTop,
             WarnTriangleFilled,
+            getLoginUrl,
         }
     },
     data() {
@@ -125,7 +135,7 @@ export default {
                     </div>
                     <div v-else-if="!chat.userIsAuthenticated" class="login-container">
                         <p class="login-message" size="large">Opey is only available once logged on.</p>
-                        <a href="/api/oauth2/connect" class="login-button router-link">Log on</a>
+                        <a :href="getLoginUrl" class="login-button router-link">Log on</a>
                     </div>
                     <div v-else class="messages-container" v-bind:class="{ disabled: !chat.userIsAuthenticated }">
                         <el-scrollbar>

src/components/ChatWidgetOld.vue

@@ -31,7 +31,7 @@
   import axios from 'axios';
   import 'prismjs/themes/prism.css'; // Choose a theme you like
   import { v4 as uuidv4 } from 'uuid';
-  import { inject } from 'vue';
+  import { inject, computed } from 'vue';
   import { obpApiHostKey } from '@/obp/keys';
   import { getCurrentUser } from '../obp';
   import { getOpeyJWT, getobpConsent, answerobpConsentChallenge } from '@/obp/common-functions'
@@ -40,6 +40,7 @@
   import { useConnectionStore } from '@/stores/connection';
   import { useChatStore } from '@/stores/chat';
   import { ElMessage } from 'element-plus';
+  import { useRoute } from 'vue-router';
 
   import 'prismjs/components/prism-markup';
   import 'prismjs/components/prism-javascript';
@@ -73,7 +74,15 @@
 
       const { isConnected } = storeToRefs(connectionStore);
 
-      return {isStreaming, chatMessages, lastError, currentMessageSnapshot, chatStore, connectionStore}
+      const route = useRoute();
+      const loginUrl = computed(() => {
+        const currentPath = route.path;
+        const queryString = new URLSearchParams(route.query as Record<string, string>).toString();
+        const fullPath = queryString ? `${currentPath}?${queryString}` : currentPath;
+        return `/api/oauth2/connect?redirect=${encodeURIComponent(fullPath)}`;
+      });
+
+      return {isStreaming, chatMessages, lastError, currentMessageSnapshot, chatStore, connectionStore, loginUrl}
     },
     data() {
       return {
@@ -378,7 +387,7 @@
 
         </div>
         <div v-else class="chat-messages">
-          <p>Opey is only availabled when logged in. <a v-bind:href="'/api/oauth2/connect'">Log In</a> </p>
+          <p>Opey is only availabled when logged in. <a v-bind:href="loginUrl">Log In</a> </p>
         </div>
         <el-alert
           v-if="this.errorState"

src/components/HeaderNav.vue

@@ -193,7 +193,8 @@ watchEffect(() => {
 
 const getCurrentPath = () => {
   const currentPath = route.path
-  return currentPath
+  const queryString = new URLSearchParams(route.query as Record<string, string>).toString()
+  return queryString ? `${currentPath}?${queryString}` : currentPath
 }
 
 </script>