Fix enter to submit, and dynamic entities not loading

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AutoLogout: typeof import('./src/components/AutoLogout.vue')['default']
     ChatMessage: typeof import('./src/components/ChatMessage.vue')['default']
     ChatWidget: typeof import('./src/components/ChatWidget.vue')['default']
     ChatWidgetOld: typeof import('./src/components/ChatWidgetOld.vue')['default']

server/controllers/UserController.ts

@@ -49,10 +49,17 @@ export class UserController {
     this.oauthInjectedService.requestTokenKey = undefined
     this.oauthInjectedService.requestTokenSecret = undefined
     session['clientConfig'] = undefined
-    if(!this.obpExplorerHome) {
-      console.error(`VITE_OBP_API_EXPLORER_HOST: ${this.obpExplorerHome}`)
+
+    if (request.query.redirect) {
+      response.redirect(request.query.redirect as string)
+    } else {
+      if(!this.obpExplorerHome) {
+        console.error(`VITE_OBP_API_EXPLORER_HOST: ${this.obpExplorerHome}`)
+      }
+      response.redirect(this.obpExplorerHome)
     }
-    response.redirect(this.obpExplorerHome)
+
+
     return response
   }
 

server/middlewares/OauthAccessTokenMiddleware.ts

@@ -64,15 +64,31 @@ export default class OauthAccessTokenMiddleware implements ExpressMiddlewareInte
           console.log(`OauthAccessTokenMiddleware.ts use says: clientConfig: ${JSON.stringify(clientConfig)}`)
           session['clientConfig'] = clientConfig
           console.log('OauthAccessTokenMiddleware.ts use says: Seems OK, redirecting..')
+
+          let redirectPage: String
+
           const obpExplorerHome = process.env.VITE_OBP_API_EXPLORER_HOST
           if(!obpExplorerHome) {
             console.error(`VITE_OBP_API_EXPLORER_HOST: ${obpExplorerHome}`)
           }
-          console.log(`OauthAccessTokenMiddleware.ts use says: Will redirect to: ${obpExplorerHome}`)
+
+          if (session['redirectPage']) {
+            try {
+              redirectPage = session['redirectPage']
+
+            } catch (e) {
+              console.log('OauthAccessTokenMiddleware.ts use says: Error decoding redirect URI')
+              redirectPage = obpExplorerHome
+            }
+          } else {
+            redirectPage = obpExplorerHome
+          }
+
+          console.log(`OauthAccessTokenMiddleware.ts use says: Will redirect to: ${redirectPage}`)
           console.log('OauthAccessTokenMiddleware.ts use says: Here comes the session:')
           console.log(session)
 
-          response.redirect(`${obpExplorerHome}`)
+          response.redirect(redirectPage)
         }
       }
     )

server/middlewares/OauthRequestTokenMiddleware.ts

@@ -39,6 +39,13 @@ export default class OauthRequestTokenMiddleware implements ExpressMiddlewareInt
     console.debug('process.env.VITE_OBP_API_PORTAL_HOST:', process.env.VITE_OBP_API_PORTAL_HOST)
     const oauthService = this.oauthInjectedService
     const consumer = oauthService.getConsumer()
+    const redirectPage = request.query.redirect
+    const session = request.session
+
+    if (redirectPage) {
+      session['redirectPage'] = redirectPage
+    }
+
     consumer.getOAuthRequestToken((error: any, oauthTokenKey: string, oauthTokenSecret: string) => {
       if (error) {
         const errorStr = JSON.stringify(error)

src/components/AutoLogout.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ElNotification, NotificationHandle } from 'element-plus';
+import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue';
+
+// Props can be defined with defineProps
+const props = defineProps({
+    // Define your props here
+});
+
+// Types of events that will reset the timeout
+const events = ['click', 'mousemove', 'keydown', 'keypress', 'mousedown', 'scroll', 'load'];
+
+// Set timers
+let warningTimeout: NodeJS.Timeout;
+let logoutTimeout: NodeJS.Timeout;
+
+let logoutTime: number;
+let countdownInterval: NodeJS.Timeout;
+
+// Add these variables at the top of your script
+let defaultWarningDelay = 1000 * 270; // 4.5 minutes by default
+let defaultLogoutDelay = 1000 * 300; // 5 minutes by default
+
+
+// Methods
+function setTimers(warningDelay = defaultWarningDelay, logoutDelay = defaultLogoutDelay) {
+    logoutTime = Date.now() + logoutDelay;
+
+    warningTimeout = setTimeout(warningMessage, warningDelay); // 4 seconds for development, change later
+    logoutTimeout = setTimeout(logout, logoutDelay); // 15 seconds for development, change later
+}
+
+let warningNotification: NotificationHandle;
+
+async function getOBPSuggestedTimeout() {
+    const obpApiHost = import.meta.env.VITE_OBP_API_HOST;
+    let timeoutInSeconds: number;
+    // Fetch the suggested timeout from the OBP API
+
+    const response = await fetch(`${obpApiHost}/obp/v5.1.0/ui/suggested-session-timeout`);
+    const json = await response.json();
+    if(json.timeout_in_seconds) {
+      timeoutInSeconds = json.timeout_in_seconds;
+      console.log(`Suggested value ${timeoutInSeconds} is used`);
+    } else {
+      timeoutInSeconds = 5 * 60 + 1; // Set default value to 301 seconds
+      console.log(`Default value ${timeoutInSeconds} is used`);
+    }
+
+    return timeoutInSeconds;
+} 
+
+function resetTimeout() {
+    // Logic to reset the timeout
+    clearTimeout(warningTimeout);
+    clearTimeout(logoutTimeout);
+    clearInterval(countdownInterval);
+
+
+    if (warningNotification) {
+        warningNotification.close();
+    }
+
+    setTimers();
+}
+
+function warningMessage() {
+    // Logic to show warning message
+    console.log('Warning: You will be logged out soon');
+
+    let secondsLeft = ref(Math.ceil((logoutTime - Date.now()) / 1000));
+    // Update the countdown every second
+    countdownInterval = setInterval(() => {
+        secondsLeft.value = Math.ceil((logoutTime - Date.now()) / 1000);
+
+        // If time's up or almost up, clear the interval
+        if (secondsLeft.value <= 0) {
+            clearInterval(countdownInterval);
+            return;
+        }
+
+
+    }, 1000);
+
+    warningNotification = ElNotification({
+        title: 'Inactivity Warning',
+        message: () => h('p', null, [
+            h('span', null, 'You will be logged out in'),
+            h('strong', { style: 'color: red' }, ` ${secondsLeft.value} `),
+            h('span', null, 'seconds.'),
+        ])
+        ,
+        type: 'warning',
+        duration: 0,
+        position: 'top-left',
+        showClose: false,
+    })
+}
+
+function logout() {
+    // Logic to log out the user
+    console.log('Logging out...');
+    document.getElementById("logoff")?.click(); // If the ID of the logout button changes, this will not work
+}
+
+// Lifecycle hooks
+onMounted(() => {
+    events.forEach(event => {
+        window.addEventListener(event, resetTimeout);
+    })
+
+    setTimers();
+
+    // Update with API suggested values when available
+    getOBPSuggestedTimeout().then(timeoutInSeconds => {
+        // Convert to milliseconds
+        const logoutDelay = timeoutInSeconds * 1000;
+        // Set warning to appear 30 seconds before logout
+        const warningDelay = Math.max(logoutDelay - 30000, 0);
+
+        // Update the defaults
+        defaultWarningDelay = warningDelay;
+        defaultLogoutDelay = logoutDelay;
+
+        // Reset timers with new values
+        resetTimeout();
+    }).catch(error => {
+        console.error("Failed to get suggested timeout:", error);
+        // Continue with defaults
+    });
+});
+
+onBeforeUnmount(() => {
+    // Cleanup code before component is unmounted
+    clearTimeout(warningTimeout);
+    clearTimeout(logoutTimeout);
+    clearInterval(countdownInterval);
+    events.forEach(event => {
+        window.removeEventListener(event, resetTimeout);
+    });
+});
+
+
+
+
+</script>
+
+<style scoped>
+/* Your component styles here */
+</style>
+
+
+<template>
+    <div>
+        <!-- Your component content here -->
+    </div>
+</template>