changing url path structure to resource-docs

Author: simonredfern

.env.example

@@ -1,49 +1,35 @@
-VITE_OBP_API_HOST=https://apisandbox.openbankproject.com
-
-### OBP-API mode ###################################
-# If OBP-API split to two instances, eg: apis,portal
-# Then API_Explorer need to set two api hosts: api_hostname and this api_portal_hostname, for all Rest Apis will call api_hostname
-# but for all the portal home page link, we need to use this props. If do not set this, it will use api_hostname value instead.
-VITE_OBP_API_PORTAL_HOST=https://apisandbox.openbankproject.com
-####################################################################################
-
-VITE_OBP_API_VERSION=v6.0.0
-#The default version of the root page, it has the default value `OBP+VITE_OBP_API_VERSION`
-#The format must follow standard+Version, e.g., OBPv5.1.0, BGv1, or BGv1.3.
-#VITE_OBP_API_DEFAULT_RESOURCE_DOC_VERSION=OBPv6.0.0
-
-# API Manager
-VITE_OBP_API_MANAGER_HOST=https://apimanagersandbox.openbankproject.com
-VITE_SHOW_API_MANAGER_BUTTON=false
-
-VITE_OBP_API_EXPLORER_HOST=http://localhost:5173
-VITE_OBP_CONSUMER_KEY=your_consumer_key
-VITE_OBP_CONSUMER_SECRET=your_consumer_secret
-VITE_OBP_REDIRECT_URL=http://localhost:5173/api/callback
-VITE_OPB_SERVER_SESSION_PASSWORD=very secret
-# The above code connects to localhost on port 6379. 
-# To connect to a different host or port, use a connection string in the format 
-# redis[s]://[[username][:password]@][host][:port][/db-number]
-# Be sure to secure your Redis instance
-VITE_OBP_REDIS_URL = redis://127.0.0.1:6379
-
-# Enable the chatbot interface "Opey"
-# Note: For Opey to be connected you will need to create a public key for API Explorer II
-# To do this: 
-VITE_CHATBOT_ENABLED=false
-VITE_CHATBOT_URL=http://localhost:5000
-VITE_OPEY_CONSUMER_ID=opey_consumer_id # For granting a consent to Opey
-
-# Product styling setting
-#VITE_OBP_LINKS_COLOR="#52b165"
-#VITE_OBP_HEADER_LINKS_COLOR="#39455f"
-#VITE_OBP_HEADER_LINKS_HOVER_COLOR="#39455f"
-#VITE_OBP_HEADER_LINKS_BACKGROUND_COLOR="#eef0f4"
-#VITE_OBP_LOGO_URL=https://static.openbankproject.com/images/obp_logo.png
-
-# https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production
-# The value could be: development, staging, production
-# NODE_ENV=development
-
-# If you have a problem with session storage (which will cause problems with login) you can enable this. See README for further info.
-#DEBUG=express-session
+### OBP-API Configuration ###
+VITE_OBP_API_PORTAL_HOST=http://127.0.0.1:8080                                    # OBP API Portal URL (for "Portal Home" navigation link)
+VITE_OBP_API_HOST=http://127.0.0.1:8080                                           # OBP API server base URL (for all backend API requests)
+# VITE_OBP_API_VERSION is NO LONGER USED - hardcoded to v5.1.0 in shared-constants.ts for stability
+VITE_OBP_API_MANAGER_HOST=https://apimanagersandbox.openbankproject.com          # OBP API Manager URL (optional - for navigation link)
+VITE_OBP_API_EXPLORER_HOST=http://localhost:5173                                 # API Explorer application URL (used for OAuth2 redirects and internal routing)
+VITE_OPB_SERVER_SESSION_PASSWORD=your-secret-session-password-here               # Secret key for session encryption (keep this secure!)
+VITE_SHOW_API_MANAGER_BUTTON=false                                               # Show/hide API Manager button in navigation (true/false)
+
+### Redis Configuration ###
+VITE_OBP_REDIS_URL=redis://127.0.0.1:6379                                        # Redis connection string for session storage (format: redis://host:port)
+
+### Opey Configuration ###
+VITE_CHATBOT_ENABLED=false                                                       # Enable/disable Opey chatbot widget (true/false)
+VITE_CHATBOT_URL=http://localhost:5000                                           # Opey chatbot service URL (only needed if chatbot is enabled)
+
+### OAuth2/OIDC Configuration ###
+VITE_OBP_OAUTH2_CLIENT_ID=48ac28e9-9ee3-47fd-8448-69a62764b779                   # OAuth2 client ID (UUID - must match OIDC server registration)
+VITE_OBP_OAUTH2_CLIENT_SECRET=fOTQF7jfg8C74u7ZhSjVQpoBYvD0KpWfM5UsEZBSFFM        # OAuth2 client secret (keep this secure!)
+VITE_OBP_OAUTH2_REDIRECT_URL=http://localhost:5173/api/oauth2/callback          # OAuth2 callback URL (must exactly match OIDC client registration)
+VITE_OBP_OAUTH2_WELL_KNOWN_URL=http://localhost:9000/obp-oidc/.well-known/openid-configuration  # OIDC discovery endpoint URL
+VITE_OBP_OAUTH2_TOKEN_REFRESH_THRESHOLD=300                                     # Seconds before token expiry to trigger refresh (default: 300)
+
+### Resource Documentation Version (Optional) ###
+# VITE_OBP_API_DEFAULT_RESOURCE_DOC_VERSION=OBPv5.1.0                            # Default resource docs version for frontend URLs (format: OBPv5.1.0 - with OBP prefix, auto-constructed if not set)
+
+### Session Configuration (Optional) ###
+# VITE_SESSION_MAX_AGE=3600                                                      # Session timeout in seconds (default: 3600 = 1 hour)
+
+### Styling Configuration (Optional) ###
+# VITE_OBP_LOGO_URL=https://example.com/logo.png                                # Custom logo image URL (uses default OBP logo if not set)
+# VITE_OBP_LINKS_COLOR=#3c8dbc                                                   # Primary link color (CSS color value)
+# VITE_OBP_HEADER_LINKS_COLOR=#39455f                                            # Header navigation link color
+# VITE_OBP_HEADER_LINKS_HOVER_COLOR=#39455f                                      # Header navigation link hover color
+# VITE_OBP_HEADER_LINKS_BACKGROUND_COLOR=#eef0f4                                 # Header navigation active link background color

server/controllers/StatusController.ts

@@ -32,6 +32,11 @@ import OBPClientService from '../services/OBPClientService'
 import { Service, Container } from 'typedi'
 import { OAuthConfig } from 'obp-typescript'
 import { commitId } from '../app'
+import {
+  RESOURCE_DOCS_API_VERSION,
+  MESSAGE_DOCS_API_VERSION,
+  API_VERSIONS_LIST_API_VERSION
+} from '../../shared-constants'
 
 @Service()
 @Controller('/status')
@@ -104,7 +109,7 @@ export class StatusController {
 
   async checkResourceDocs(oauthConfig: OAuthConfig, version: string): Promise<boolean> {
     try {
-      const path = `/obp/${version}/resource-docs/${version}/obp`
+      const path = `/obp/${RESOURCE_DOCS_API_VERSION}/resource-docs/${version}/obp`
       const resourceDocs = await this.obpClientService.get(path, oauthConfig)
       return !this.isCodeError(resourceDocs, path)
     } catch (error) {
@@ -115,7 +120,7 @@ export class StatusController {
     try {
       const messageDocsCodeResult = await Promise.all(
         this.connectors.map(async (connector) => {
-          const path = `/obp/${version}/message-docs/${connector}`
+          const path = `/obp/${MESSAGE_DOCS_API_VERSION}/message-docs/${connector}`
           return !this.isCodeError(await this.obpClientService.get(path, oauthConfig), path)
         })
       )
@@ -127,7 +132,7 @@ export class StatusController {
 
   async checkApiVersions(oauthConfig: OAuthConfig, version: string): Promise<boolean> {
     try {
-      const path = `/obp/${version}/api/versions`
+      const path = `/obp/${API_VERSIONS_LIST_API_VERSION}/api/versions`
       const versions = await this.obpClientService.get(path, oauthConfig)
       return !this.isCodeError(versions, path)
     } catch (error) {

server/controllers/UserController.ts

@@ -136,7 +136,8 @@ export class UserController {
 
       if (clientConfig && clientConfig.oauth2?.accessToken) {
         try {
-          const version = process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION
+          // Always use v5.1.0 for application infrastructure - stable and debuggable
+          const version = DEFAULT_OBP_API_VERSION
           console.log('UserController: Fetching OBP user from /obp/' + version + '/users/current')
           const obpUser = await this.obpClientService.get(
             `/obp/${version}/users/current`,

server/middlewares/OAuth2CallbackMiddleware.ts

@@ -29,6 +29,7 @@ import { ExpressMiddlewareInterface } from 'routing-controllers'
 import { Request, Response } from 'express'
 import { Service, Container } from 'typedi'
 import { OAuth2Service } from '../services/OAuth2Service'
+import { DEFAULT_OBP_API_VERSION } from '../../shared-constants'
 import jwt from 'jsonwebtoken'
 
 /**
@@ -317,9 +318,11 @@ export default class OAuth2CallbackMiddleware implements ExpressMiddlewareInterf
 
       // Create clientConfig for OBP API calls with OAuth2 Bearer token
       // This allows OBPClientService to work with OAuth2 authentication
+      // Store session data for authenticated requests
+      // Always use v5.1.0 for application infrastructure - stable and debuggable
       session['clientConfig'] = {
         baseUri: process.env.VITE_OBP_API_HOST || 'http://localhost:8080',
-        version: process.env.VITE_OBP_API_VERSION || 'v5.1.0',
+        version: DEFAULT_OBP_API_VERSION,
         oauth2: {
           accessToken: tokens.accessToken,
           tokenType: tokens.tokenType || 'Bearer'

server/services/OBPClientService.ts

@@ -72,9 +72,10 @@ export default class OBPClientService {
   constructor() {
     if (!process.env.VITE_OBP_API_HOST) throw new Error('VITE_OBP_API_HOST is not set')
 
+    // Always use v5.1.0 for application infrastructure - stable and debuggable
     this.clientConfig = {
       baseUri: process.env.VITE_OBP_API_HOST!,
-      version: process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION
+      version: DEFAULT_OBP_API_VERSION
     }
   }
   async get(path: string, clientConfig: any): Promise<any> {

server/services/OBPConsentsService.ts

@@ -90,9 +90,10 @@ export default class OBPConsentsService {
     // I.e. give permission to Opey to do anything on behalf of the logged in user
 
     // Get the Consents API client from the OBP SDK
+    // Always use v5.1.0 for application infrastructure - stable and debuggable
     const client = await this.createUserConsentsClient(
       session,
-      `/obp/${process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION}/my/consents/IMPLICIT`,
+      `/obp/${DEFAULT_OBP_API_VERSION}/my/consents/IMPLICIT`,
       'POST'
     )
     if (!client) {
@@ -161,8 +162,9 @@ export default class OBPConsentsService {
     }
 
     try {
+      // Always use v5.1.0 for application infrastructure - stable and debuggable
       const response = await this._sendOBPRequest(
-        `/obp/${process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION}/user/current/consents/${consentId}`,
+        `/obp/${DEFAULT_OBP_API_VERSION}/user/current/consents/${consentId}`,
         'GET',
         clientConfig
       )
@@ -212,8 +214,9 @@ export default class OBPConsentsService {
 
     // We need to change this back to consent infos once OBP shows 'EXPIRED' in the status
     // Right now we have to check the JWT ourselves
-    const consentInfosPath = `/obp/${process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION}/my/consents`
-    //const consentInfosPath = `/obp/${process.env.VITE_OBP_API_VERSION ?? DEFAULT_OBP_API_VERSION}/my/consent-infos`
+    // Always use v5.1.0 for application infrastructure - stable and debuggable
+    const consentInfosPath = `/obp/${DEFAULT_OBP_API_VERSION}/my/consents`
+    //const consentInfosPath = `/obp/${DEFAULT_OBP_API_VERSION}/my/consent-infos`
 
     let opeyConsentId: string | null = null
     try {

shared-constants.ts

@@ -1,2 +1,30 @@
 // 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'
+export const DEFAULT_OBP_API_VERSION = 'v5.1.0'
+
+// Hardcoded API versions for all application endpoints
+// Using v5.1.0 as the standard stable version - more stable than v6.0.0 and bugs can be fixed
+// These versions should NOT change based on user's documentation version selection in the UI
+
+/**
+ * Resource documentation endpoint version
+ * Endpoint: GET /obp/{version}/resource-docs/{docVersion}/obp
+ */
+export const RESOURCE_DOCS_API_VERSION = 'v5.1.0'
+
+/**
+ * Message documentation endpoint version
+ * Endpoint: GET /obp/{version}/message-docs/{connector}
+ */
+export const MESSAGE_DOCS_API_VERSION = 'v5.1.0'
+
+/**
+ * API versions list endpoint version
+ * Endpoint: GET /obp/{version}/api/versions
+ */
+export const API_VERSIONS_LIST_API_VERSION = 'v5.1.0'
+
+/**
+ * Glossary endpoint version
+ * Endpoint: GET /obp/{version}/api/glossary
+ */
+export const GLOSSARY_API_VERSION = 'v5.1.0'

src/components/AutoLogout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ElNotification, NotificationHandle } from 'element-plus';
 import { ref, computed, h, onMounted, onBeforeUnmount } from 'vue';
+import { DEFAULT_OBP_API_VERSION } from '../../shared-constants';
 
 // Props can be defined with defineProps
 const props = defineProps({
@@ -37,7 +38,8 @@ async function getOBPSuggestedTimeout() {
     let timeoutInSeconds: number;
     // Fetch the suggested timeout from the OBP API
 
-    const response = await fetch(`${obpApiHost}/obp/${import.meta.env.VITE_OBP_API_VERSION}/ui/suggested-session-timeout`);
+    // Always use v5.1.0 for application infrastructure - stable and debuggable
+    const response = await fetch(`${obpApiHost}/obp/${DEFAULT_OBP_API_VERSION}/ui/suggested-session-timeout`);
     const json = await response.json();
     if(json.timeout_in_seconds) {
       timeoutInSeconds = json.timeout_in_seconds;
@@ -48,7 +50,7 @@ async function getOBPSuggestedTimeout() {
     }
 
     return timeoutInSeconds;
-} 
+}
 
 function resetTimeout() {
     // Logic to reset the timeout
@@ -72,14 +74,14 @@ function warningMessage() {
     // 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({
@@ -117,11 +119,11 @@ onMounted(() => {
         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 => {
@@ -154,4 +156,4 @@ onBeforeUnmount(() => {
     <div>
         <!-- Your component content here -->
     </div>
-</template>
+</template>

src/components/Content.vue

@@ -32,7 +32,7 @@ import { ElNotification } from 'element-plus'
 import { inject, onMounted, provide, ref } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import {
-OBP_API_VERSION,
+OBP_API_DEFAULT_RESOURCE_DOC_VERSION,
 createMyAPICollection,
 createMyAPICollectionEndpoint,
 deleteMyAPICollectionEndpoint,
@@ -43,7 +43,7 @@ import { SUMMARY_PAGER_LINKS_COLOR as summaryPagerLinksColorSetting } from '../o
 import { initializeAPICollections, setTabActive } from './SearchNav.vue'
 
 const route = useRoute()
-const obpVersion = 'OBP' + OBP_API_VERSION
+const obpVersion = OBP_API_DEFAULT_RESOURCE_DOC_VERSION
 const description = ref('')
 const summary = ref('')
 const resourceDocs = inject(obpResourceDocsKey)
@@ -142,15 +142,15 @@ const showNotification = (message: string, type: string): void => {
 }
 
 onMounted(async () => {
-  routeId = route.params.id
-  version = route.query.version ? route.query.version : obpVersion
+  routeId = route.query.operationid
+  version = route.params.version ? route.params.version : obpVersion
   setOperationDetails(routeId, version)
   setPager(routeId)
   await tagFavoriteButton(routeId)
 })
 onBeforeRouteUpdate(async (to) => {
-  routeId = to.params.id
-  version = route.query.version ? route.query.version : obpVersion
+  routeId = to.query.operationid
+  version = to.params.version ? to.params.version : obpVersion
   setOperationDetails(routeId, version)
   setPager(routeId)
   await tagFavoriteButton(routeId)
@@ -180,12 +180,12 @@ onBeforeRouteUpdate(async (to) => {
               <ArrowLeftBold />
             </el-icon>
             <RouterLink v-show="displayPrev" class="pager-router-link"
-              :to="{ name: 'api', params: { id: prev.id }, query: { version: prev.version } }">{{ prev.title }}
+              :to="{ name: 'api', params: { version: prev.version }, query: { operationid: prev.id } }">{{ prev.title }}
             </RouterLink>
           </el-col>
           <el-col :span="12" class="pager-right">
             <RouterLink v-show="displayNext" class="pager-router-link"
-              :to="{ name: 'api', params: { id: next.id }, query: { version: next.version } }">{{ next.title }}
+              :to="{ name: 'api', params: { version: next.version }, query: { operationid: next.id } }">{{ next.title }}
             </RouterLink>
             <el-icon v-show="displayNext">
               <ArrowRightBold />

src/components/HeaderNav.vue

@@ -29,7 +29,7 @@
 import { ref, inject, watchEffect, onMounted, computed } from 'vue'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useRoute, useRouter } from 'vue-router'
-import { OBP_API_VERSION, getCurrentUser } from '../obp'
+import { OBP_API_DEFAULT_RESOURCE_DOC_VERSION, getCurrentUser } from '../obp'
 import { getOBPAPIVersions } from '../obp/api-version'
 import {
   LOGO_URL as logoSource,
@@ -84,7 +84,7 @@ const handleMore = (command: string) => {
   if (command.includes('_')) {
     router.push({ name: 'message-docs', params: { id: command } })
   } else {
-    router.replace({ path: '/operationid', query: { version: command } })
+    router.replace({ path: `/resource-docs/${command}` })
   }
 }
 
@@ -129,7 +129,7 @@ const getCurrentPath = () => {
       <a v-bind:href="obpApiHybridPost" class="router-link" id="header-nav-home">
         {{ $t('header.portal_home') }}
       </a>
-      <RouterLink class="router-link" id="header-nav-tags" :to="'/operationid?version=OBP' + OBP_API_VERSION">{{
+      <RouterLink class="router-link" id="header-nav-tags" :to="'/resource-docs/' + OBP_API_DEFAULT_RESOURCE_DOC_VERSION">{{
         $t('header.api_explorer') }}</RouterLink>
       <RouterLink class="router-link" id="header-nav-glossary" to="/glossary">{{
         $t('header.glossary')