OAuth2 login first step works

Author: simonredfern

server/controllers/OpeyIIController.ts

@@ -28,12 +28,18 @@
 import { Controller, Session, Req, Res, Get, Delete, Post, Put } from 'routing-controllers'
 import { Request, Response } from 'express'
 import OBPClientService from '../services/OBPClientService'
-import { Service } from 'typedi'
+import { Service, Container } from 'typedi'
 
 @Service()
 @Controller()
 export class OBPController {
-  constructor(private obpClientService: OBPClientService) {}
+  private obpClientService: OBPClientService
+
+  constructor() {
+    // Explicitly get OBPClientService from the container to avoid injection issues
+    this.obpClientService = Container.get(OBPClientService)
+  }
+
   @Get('/get')
   async get(@Session() session: any, @Req() request: Request, @Res() response: Response): Response {
     const path = request.query.path

server/controllers/RequestController.ts

@@ -29,7 +29,7 @@ import { Controller, Session, Req, Res, Get } from 'routing-controllers'
 import { Request, Response } from 'express'
 import OBPClientService from '../services/OBPClientService'
 
-import { Service } from 'typedi'
+import { Service, Container } from 'typedi'
 import { OAuthConfig } from 'obp-typescript'
 import { commitId } from '../app'
 
@@ -43,7 +43,13 @@ export class StatusController {
     'stored_procedure_vDec2019',
     'rabbitmq_vOct2024'
   ]
-  constructor(private obpClientService: OBPClientService) {}
+  private obpClientService: OBPClientService
+
+  constructor() {
+    // Explicitly get OBPClientService from the container to avoid injection issues
+    this.obpClientService = Container.get(OBPClientService)
+  }
+
   @Get('/')
   async index(
     @Session() session: any,

server/controllers/StatusController.ts

@@ -28,18 +28,22 @@
 import { Controller, Session, Req, Res, Get } from 'routing-controllers'
 import { Request, Response } from 'express'
 import OBPClientService from '../services/OBPClientService'
-import { Service } from 'typedi'
+import { Service, Container } from 'typedi'
 import { OAuth2Service } from '../services/OAuth2Service'
 
 @Service()
 @Controller('/user')
 export class UserController {
   private obpExplorerHome = process.env.VITE_OBP_API_EXPLORER_HOST
+  private obpClientService: OBPClientService
+  private oauth2Service: OAuth2Service
+
+  constructor() {
+    // Explicitly get services from the container to avoid injection issues
+    this.obpClientService = Container.get(OBPClientService)
+    this.oauth2Service = Container.get(OAuth2Service)
+  }
 
-  constructor(
-    private obpClientService: OBPClientService,
-    private oauth2Service: OAuth2Service
-  ) {}
   @Get('/logoff')
   async logout(
     @Session() session: any,

server/controllers/UserController.ts

@@ -0,0 +1,2 @@
+// DEFAULT_OBP_API_VERSION is used in case the environment variable VITE_OBP_API_VERSION is not set
+export const DEFAULT_OBP_API_VERSION = 'v6.0.0'

shared-constants.js

@@ -1,6 +1,6 @@
 <!--
 placeholder for Opey II Chat widget
---> 
+-->
 <script lang="ts">
 
 import { ref, reactive } from 'vue'
@@ -14,7 +14,7 @@ import { useChat } from '@/stores/chat';
 
 export default {
     setup () {
-        return { 
+        return {
             Close,
             ElTop,
             WarnTriangleFilled,
@@ -36,7 +36,7 @@ export default {
         this.chat = useChat()
         const isLoggedIn = await this.checkLoginStatus()
         console.log('Is logged in: ', isLoggedIn)
-        
+
     },
     methods: {
         async toggleChat() {
@@ -55,14 +55,14 @@ export default {
                         this.errorState.message = "Woops! Looks like we are having trouble connecting to Opey..."
                         this.errorState.icon = WarnTriangleFilled
                     }
-                    
+
                 }
                 return true
             } else {
                 return false
             }
         },
-        
+
         async onSubmit() {
             // Add user message to the messages array
             const userMessage: UserMessage = {
@@ -71,7 +71,7 @@ export default {
                 content: this.input,
                 isToolCallApproval: false,
             };
-            
+
             // Set status to loading // Clear input field after sending
             this.chat.status = 'loading';
             this.input = '';
@@ -80,7 +80,7 @@ export default {
                 await this.chat.stream({
                     message: userMessage,
                 }
-                    
+
                 )
                 console.log('Opey Status: ', this.chat.status)
             } catch (error) {
@@ -112,11 +112,11 @@ export default {
         <div class="chat-container-inner" id="chat-container">
             <el-container direction="vertical">
                 <el-header>
-                    <img alt="Opey Logo" src="@/assets/opey-logo-inv.png"> 
+                    <img alt="Opey Logo" src="@/assets/opey-logo-inv.png">
                     <el-button type="danger" :icon="Close" @click="toggleChat" size="small" circle></el-button>
                 </el-header>
                 <el-main>
-                    
+
                     <div v-if="errorState.type === 'authenticationError'" class="login-container">
                         <el-icon :size="40" color="#FF4D4F">
                             <component :is="errorState.icon" />
@@ -125,7 +125,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/connect" class="login-button router-link">Log on</a>
+                        <a href="/api/oauth2/connect" class="login-button router-link">Log on</a>
                     </div>
                     <div v-else class="messages-container" v-bind:class="{ disabled: !chat.userIsAuthenticated }">
                         <el-scrollbar>
@@ -322,7 +322,7 @@ textarea::-webkit-scrollbar-thumb {
 
 /* Handle on hover */
 textarea::-webkit-scrollbar-thumb:hover {
-  
+
   background: #888;
 }
 
@@ -334,4 +334,4 @@ textarea::-webkit-scrollbar-thumb:hover {
 .user-input-container button {
     margin-bottom: 0px;
 }
-</style>
+</style>

src/components/ChatWidget.vue

@@ -54,10 +54,10 @@
     setup() {
       /**
        * Pinia stores only work properly in the vue composition API, hence the setup() call here, which allows us to use the vue composition API within the vue options API
-       * See https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/ 
+       * See https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/
        * and https://vuejs.org/api/composition-api-setup.html
-       * */ 
-       
+       * */
+
       // We use a pinia store to store the chat messages, and status data like if there is a message stream currently happening or an error state.
       const chatStore = useChatStore();
 
@@ -139,17 +139,17 @@
               type: 'error'
             });
           }
-          
+
         } catch (error) {
           console.log('Error getting consent for opey from OBP: ', error)
           this.errorState = true
           ElMessage({
             message: 'Error getting consent for opey from OBP',
             type: 'error'
           });
-          
+
         }
-      
+
       },
       async answerConsentChallenge() {
         const challengeAnswer = this.consentChallengeAnswer
@@ -160,7 +160,7 @@
 
         try {
           console.log(`Answering consent challenge with: ${challengeAnswer} and consent_id: ${this.consentId}`)
-          
+
 
           // send the challenge answer to Opey for approval
           const response = await axios.post(
@@ -174,7 +174,7 @@
               withCredentials: true,
             }
           )
-          
+
           console.log("Consent challenge response: ", response.status, response.headers)
           if (response.status === 200) {
             console.log('Consent challenge answered successfully, Consent approved')
@@ -185,7 +185,7 @@
             } else {
               console.log('Consent denied')
             }
-          } 
+          }
         } catch (error) {
 
             console.log('Error answering consent challenge: ', error)
@@ -230,9 +230,9 @@
       },
       /**
        * This function highlights code blocks in the chat messages
-       * 
-       * @param content 
-       * @param language 
+       *
+       * @param content
+       * @param language
        */
       highlightCode(content, language) {
         if (Prism.languages[language]) {
@@ -365,7 +365,7 @@
                 </button>
               </el-tooltip>
               <div class="detail">
-                
+
               </div>
             </div>
           </div>
@@ -374,11 +374,11 @@
             <div class="dot"></div>
             <div class="dot"></div>
           </div>
-          
-          
+
+
         </div>
         <div v-else class="chat-messages">
-          <p>Opey is only availabled when logged in. <a v-bind:href="'/api/connect'">Log In</a> </p>
+          <p>Opey is only availabled when logged in. <a v-bind:href="'/api/oauth2/connect'">Log In</a> </p>
         </div>
         <el-alert
           v-if="this.errorState"
@@ -397,8 +397,8 @@
           >
           </el-input>
           <!--<textarea v-model="userInput" placeholder="Type your message..." @keypress="submitEnter"></textarea>-->
-          <button 
-            @click="sendMessage" 
+          <button
+            @click="sendMessage"
             :disabled="!isLoggedIn || this.awaitingConnection ? '' : disabled"
             :style="!isLoggedIn || this.awaitingConnection ? 'background-color:#929292; cursor:not-allowed' : ''"
           >
@@ -462,8 +462,8 @@
 
 .quit-button {
   position: absolute;
-  top: -12px; 
-  right: -12px; 
+  top: -12px;
+  right: -12px;
   width: 24px;
   height: 24px;
   background-color: red;
@@ -654,4 +654,4 @@
   cursor: nwse-resize;
   z-index: 1001;
 }
-</style>
+</style>

src/components/ChatWidgetOld.vue

@@ -173,7 +173,7 @@ const getCurrentPath = () => {
           <arrow-down />
         </el-icon>
       </span>-->
-      <a v-bind:href="'/api/connect?redirect='+ encodeURIComponent(getCurrentPath())" v-show="isShowLoginButton" class="login-button router-link" id="login">
+      <a v-bind:href="'/api/oauth2/connect?redirect='+ encodeURIComponent(getCurrentPath())" v-show="isShowLoginButton" class="login-button router-link" id="login">
         {{ $t('header.login') }}
       </a>
       <span v-show="isShowLogOffButton" class="login-user">{{ loginUsername }}</span>