feat(frontend): implement OAuth consent page and service integration

Author: Lasim

services/frontend/src/i18n/locales/en/index.ts

@@ -15,6 +15,7 @@ import credentialsMessages from './credentials'
 import mcpCatalogMessages from './mcp-catalog'
 import mcpCategoriesMessages from './mcp-categories'
 import mcpInstallationsMessages from './mcp-installations'
+import oauthMessages from './oauth'
 
 export default {
   ...commonMessages,
@@ -33,6 +34,7 @@ export default {
   ...mcpCategoriesMessages,
   mcpCatalog: mcpCatalogMessages,
   mcpInstallations: mcpInstallationsMessages,
+  oauth: oauthMessages,
   // If there are any top-level keys directly under 'en', they can be added here.
   // For example, if you had a global 'appName': 'My Application'
   // appName: 'DeployStack Application',

services/frontend/src/i18n/locales/en/oauth.ts

@@ -0,0 +1,55 @@
+export default {
+  consent: {
+    title: 'Authorize Application',
+    subtitle: 'Allow {clientName} to access your account?',
+    signedInAs: 'Signed in as',
+    permissionsTitle: 'Allowing will authorize {clientName} to:',
+    buttons: {
+      allow: 'Allow Access',
+      deny: 'Deny Access',
+      approving: 'Approving...',
+      denying: 'Denying...'
+    },
+    security: {
+      redirectNotice: 'This will redirect you back to the {clientName}.',
+      revokeNotice: 'You can revoke this access at any time in your account settings.'
+    },
+    loading: {
+      title: 'Loading consent details...',
+      message: 'Please wait while we prepare the authorization request.'
+    },
+    errors: {
+      title: 'Authorization Error',
+      missingRequestId: 'Missing request ID parameter',
+      requestNotFound: 'Authorization request not found or has expired',
+      unauthorized: 'You must be logged in to authorize applications',
+      invalidRequest: 'Invalid authorization request',
+      networkError: 'Network error occurred. Please try again.',
+      processingError: 'Failed to process authorization request',
+      unknownError: 'An unknown error occurred',
+      returnToDashboard: 'Return to Dashboard'
+    },
+    scopes: {
+      'mcp:read': {
+        name: 'MCP Server Access',
+        description: 'Access your MCP server installations and configurations'
+      },
+      'account:read': {
+        name: 'Account Information',
+        description: 'Read your account information and settings'
+      },
+      'user:read': {
+        name: 'User Profile',
+        description: 'Read your user profile information'
+      },
+      'teams:read': {
+        name: 'Team Access',
+        description: 'Read your team memberships and team information'
+      },
+      'offline_access': {
+        name: 'Offline Access',
+        description: 'Maintain access when you\'re not actively using the application'
+      }
+    }
+  }
+}

services/frontend/src/router/index.ts

@@ -49,6 +49,15 @@ const routes = [
     component: () => import('../views/Logout.vue'),
     meta: { requiresSetup: true }, // Or false, depending on whether logout should be accessible if setup isn't complete
   },
+  {
+    path: '/oauth/consent',
+    name: 'OAuthConsent',
+    component: () => import('../views/oauth/ConsentPage.vue'),
+    meta: {
+      requiresSetup: true,
+      title: 'Authorize Application'
+    },
+  },
   // Dashboard temporarily disabled - redirect users to MCP Server instead
   // {
   //   path: '/dashboard',

services/frontend/src/services/oauthService.ts

@@ -0,0 +1,119 @@
+import { getEnv } from '@/utils/env';
+
+export interface ConsentDetails {
+  success: boolean;
+  request_id: string;
+  client_id: string;
+  client_name: string;
+  user_email: string;
+  scopes: Array<{
+    name: string;
+    description: string;
+  }>;
+  expires_at: string;
+}
+
+export interface ConsentDecision {
+  success: boolean;
+  redirect_url?: string;
+  error?: string;
+  error_description?: string;
+}
+
+export class OAuthService {
+  private static getApiUrl(): string {
+    const apiUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL');
+    if (!apiUrl) {
+      throw new Error('API URL not configured. Make sure VITE_DEPLOYSTACK_BACKEND_URL is set.');
+    }
+    return apiUrl;
+  }
+
+  /**
+   * Get consent details for an OAuth authorization request
+   */
+  static async getConsentDetails(requestId: string): Promise<ConsentDetails> {
+    try {
+      const apiUrl = this.getApiUrl();
+      const response = await fetch(`${apiUrl}/api/oauth2/consent/details?request_id=${encodeURIComponent(requestId)}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include', // Important for sending session cookies
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          throw new Error('UNAUTHORIZED');
+        }
+        if (response.status === 404) {
+          throw new Error('REQUEST_NOT_FOUND');
+        }
+        if (response.status === 400) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error_description || 'INVALID_REQUEST');
+        }
+
+        throw new Error(`Failed to get consent details: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.error_description || 'Failed to get consent details');
+      }
+
+      return data;
+    } catch (error) {
+      console.error('Error getting consent details:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Submit consent decision (approve or deny)
+   */
+  static async submitConsentDecision(requestId: string, action: 'approve' | 'deny'): Promise<ConsentDecision> {
+    try {
+      const apiUrl = this.getApiUrl();
+      const response = await fetch(`${apiUrl}/api/oauth2/consent`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          request_id: requestId,
+          action: action
+        }),
+      });
+
+      if (!response.ok) {
+        if (response.status === 401) {
+          throw new Error('UNAUTHORIZED');
+        }
+        if (response.status === 404) {
+          throw new Error('REQUEST_NOT_FOUND');
+        }
+        if (response.status === 400) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error_description || 'INVALID_REQUEST');
+        }
+
+        throw new Error(`Failed to submit consent decision: ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.error_description || 'Failed to process consent decision');
+      }
+
+      return data;
+    } catch (error) {
+      console.error('Error submitting consent decision:', error);
+      throw error;
+    }
+  }
+}