feat(profile): add developer settings page with API token display #105
Conversation
Create comprehensive developer settings page accessible via user menu. Features secure API token display with masking, copy functionality, and proper authentication. Includes responsive table design and security guidelines for developers. Key features: - Real-time API token retrieval from OIDC bearer token - Token masking with fixed-width display for better UX - One-click copy to clipboard with toast notifications - Security best practices documentation - Responsive table layout with consistent styling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a Developer API Access feature: new ProfileDeveloperComponent to load, mask, and copy a developer API token; new client API method; server endpoint GET /api/profile/developer; route registration; and header/profile menu updates to navigate to the new page. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant H as Header
participant R as Router
participant C as ProfileDeveloperComponent
participant S as UserService
participant API as /api/profile/developer
participant Ctrl as ProfileController
participant Auth as Auth Context
U->>H: Click "Developer Settings"
H->>R: routerLink /profile/developer
R->>C: instantiate
rect rgba(200,210,255,0.18)
C->>S: getDeveloperTokenInfo()
S->>API: GET /api/profile/developer
API->>Ctrl: handle request
Ctrl->>Auth: validate & extract user/token
Auth-->>Ctrl: user & token
Ctrl-->>API: { token, type }
API-->>S: 200 OK with token data
S-->>C: token data
C-->>C: set loading=false
end
C-->>U: render masked token
alt User copies token
U->>C: Click copy
C-->>U: clipboard + toast
end
alt Toggle visibility
U->>C: Toggle visibility
C-->>U: masked/unmasked token
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches🧪 Generate unit tests
Tip 🧪 Early access (models): enabledWe are currently testing Sonnet 4.5 code review models, which should lead to better review quality. However, this model may result in higher noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience. Note:
Comment |
github-actions
bot
requested review from
andrest50,
asithade,
audigregorie,
dealako and
mauriciozanettisalomao
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive developer settings page that allows users to view and manage their API tokens through a secure interface accessible from the user menu. The implementation provides real-time token retrieval with proper authentication and user-friendly security features.
- Adds a new developer settings route and component with secure API token display
- Implements token masking, visibility toggle, and clipboard copy functionality
- Updates navigation to route to the new developer settings page instead of external link
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/lfx-one/src/server/routes/profile.route.ts | Adds new GET endpoint for developer token information |
| apps/lfx-one/src/server/controllers/profile.controller.ts | Implements controller method to retrieve and return user's bearer token |
| apps/lfx-one/src/app/shared/services/user.service.ts | Adds service method to fetch developer token info from API |
| apps/lfx-one/src/app/shared/components/header/header.component.ts | Updates developer settings menu item to use internal routing |
| apps/lfx-one/src/app/modules/profile/profile.routes.ts | Adds route configuration for developer settings page |
| apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts | Main component implementing token display, masking, and copy functionality |
| apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html | Template with responsive table layout and security guidelines |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
Outdated
Show resolved
Hide resolved
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
Outdated
Show resolved
Hide resolved
🚀 Deployment StatusYour branch has been deployed to: https://ui-pr-105.dev.v2.cluster.linuxfound.info Deployment Details:
The deployment will be automatically removed when this PR is closed. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html (1)
1-103: Fix Prettier formatting failureCI flagged this template for Prettier violations. Please run the project’s Prettier config (e.g.,
npm run lint -- --fixornpx prettier --write apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html) so the pipeline passes.
🧹 Nitpick comments (1)
apps/lfx-one/src/app/shared/services/user.service.ts (1)
127-132: Introduce a typed interface for token payloadDefine a DeveloperTokenInfo interface and use it here for consistency and reuse.
- public getDeveloperTokenInfo(): Observable<{ token: string; type: string }> { - return this.http.get<{ token: string; type: string }>('/api/profile/developer').pipe(take(1)); + public getDeveloperTokenInfo(): Observable<DeveloperTokenInfo> { + return this.http.get<DeveloperTokenInfo>('/api/profile/developer').pipe(take(1)); }Add near the top of this file (or in shared interfaces if preferred):
export interface DeveloperTokenInfo { token: string; type: 'Bearer' | string; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html(1 hunks)apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts(1 hunks)apps/lfx-one/src/app/modules/profile/profile.routes.ts(1 hunks)apps/lfx-one/src/app/shared/components/header/header.component.ts(1 hunks)apps/lfx-one/src/app/shared/services/user.service.ts(1 hunks)apps/lfx-one/src/server/controllers/profile.controller.ts(1 hunks)apps/lfx-one/src/server/routes/profile.route.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Files:
apps/lfx-one/src/app/shared/services/user.service.tsapps/lfx-one/src/app/shared/components/header/header.component.tsapps/lfx-one/src/app/modules/profile/profile.routes.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.tsapps/lfx-one/src/server/routes/profile.route.tsapps/lfx-one/src/server/controllers/profile.controller.ts
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/app/shared/services/user.service.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.htmlapps/lfx-one/src/app/shared/components/header/header.component.tsapps/lfx-one/src/app/modules/profile/profile.routes.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.tsapps/lfx-one/src/server/routes/profile.route.tsapps/lfx-one/src/server/controllers/profile.controller.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-one/src/app/shared/services/user.service.tsapps/lfx-one/src/app/shared/components/header/header.component.tsapps/lfx-one/src/app/modules/profile/profile.routes.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.tsapps/lfx-one/src/server/routes/profile.route.tsapps/lfx-one/src/server/controllers/profile.controller.ts
apps/lfx-one/src/**/*.html
📄 CodeRabbit inference engine (CLAUDE.md)
apps/lfx-one/src/**/*.html: Always add data-testid attributes when creating new Angular components for reliable test targeting
Use data-testid naming convention [section]-[component]-[element]
Files:
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html
🧬 Code graph analysis (1)
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts (1)
apps/lfx-one/src/app/shared/components/header/header.component.ts (1)
Component(22-141)
🪛 GitHub Actions: Quality Checks
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html
[warning] 1-1: Code style issues found in the above file. Run Prettier with --write to fix.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-push
🔇 Additional comments (4)
apps/lfx-one/src/server/routes/profile.route.ts (1)
46-48: Route wiring looks correct; confirm auth middleware appliesGood addition and placement. Please confirm this router is mounted behind the same auth middleware as other profile routes so the token endpoint is not publicly reachable.
apps/lfx-one/src/app/shared/components/header/header.component.ts (1)
58-61: Switch to routerLink is correctInternal navigation to /profile/developer aligns with the new lazy route.
apps/lfx-one/src/app/modules/profile/profile.routes.ts (1)
19-22: Route addition LGTMLazy loading the Developer component under /profile/developer matches the header link and service usage.
apps/lfx-one/src/server/controllers/profile.controller.ts (1)
624-637: Remove unnecessary cast – global augmentation already declares bearerToken
apps/lfx-one/src/types/express.d.ts augmentsExpress.RequestwithbearerToken?: string, so casting or local type refinement isn’t required.
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html
Outdated
Show resolved
Hide resolved
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html
Outdated
Show resolved
Hide resolved
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
Outdated
Show resolved
Hide resolved
- Add Developer Settings menu item to profile layout navigation with purple icon - Refactor developer component to follow established patterns (toSignal, initialize methods) - Update developer component styling to match password/email settings layout - Replace table layout with card-based design for consistency - Implement Angular CDK Clipboard service for token copying - Improve responsive design and accessibility Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>
- Add comprehensive cache-control headers to prevent caching of bearer tokens - Implement no-store, no-cache, must-revalidate, and private directives - Include legacy Pragma and Expires headers for broader compatibility - Prevent intermediary proxies and browser caches from storing sensitive tokens Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <asithade@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
apps/lfx-one/src/app/layouts/profile-layout/profile-layout.component.ts(1 hunks)apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html(1 hunks)apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.html
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Files:
apps/lfx-one/src/app/layouts/profile-layout/profile-layout.component.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/app/layouts/profile-layout/profile-layout.component.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-one/src/app/layouts/profile-layout/profile-layout.component.tsapps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
🧬 Code graph analysis (1)
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts (1)
apps/lfx-one/src/app/layouts/profile-layout/profile-layout.component.ts (1)
Component(18-235)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: E2E Tests / Playwright E2E Tests
- GitHub Check: build-and-push
apps/lfx-one/src/app/modules/profile/developer/profile-developer.component.ts
Show resolved
Hide resolved
✅ E2E Tests PassedBrowser: chromium All E2E tests passed successfully. Test Configuration
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/lfx-one/src/server/controllers/profile.controller.ts (1)
650-655: Harden cache/cdn semantics: add CDN-Cache-Control and Vary: AuthorizationNice job adding no-store. Add headers below to keep edge caches honest and prevent cache key collisions across different Authorization values.
res.set({ ['Cache-Control']: 'no-store, no-cache, must-revalidate, private', + ['CDN-Cache-Control']: 'no-store', + Vary: 'Authorization', Pragma: 'no-cache', Expires: '0', });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/lfx-one/src/server/controllers/profile.controller.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Files:
apps/lfx-one/src/server/controllers/profile.controller.ts
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/server/controllers/profile.controller.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-one/src/server/controllers/profile.controller.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: E2E Tests / Playwright E2E Tests
🔇 Additional comments (3)
apps/lfx-one/src/server/controllers/profile.controller.ts (3)
602-662: CSRF/CORS posture: ensure cross‑origin reads can’t exfiltrate the tokenIf auth uses cookies, a cross‑origin GET could be credentialed; ensure CORS for this route does not allow credentialed reads from arbitrary origins, or move raw‑token exposure to POST with CSRF as suggested.
Repo check:
#!/bin/bash # Find CORS configuration and this route rg -nP "cors\\(|Access-Control-Allow|allowedOrigins|credentials\\s*:\\s*true" -g "apps/**/src/**/*.ts" -C3 rg -n "/api/profile/developer" -g "apps/**/src/**/*.ts" -C3Expected: credentials not broadly enabled for untrusted origins; route not exposed cross‑origin.
602-604: Reconsider exposing the raw bearer token via a GET endpointEven with no-store, returning the full token to JS expands exfiltration blast radius (XSS, third‑party scripts). Prefer “masked by default” on GET and expose the raw token only behind an explicit user gesture via POST with CSRF/session checks (if cookies are used). This aligns with the UI’s masking goal and least‑privilege.
Example (keep GET masked; add separate POST for copy action):
- * GET /api/profile/developer - Get current user's developer token information + * GET /api/profile/developer - Get masked developer token metadata + * POST /api/profile/developer/token - Return raw token on explicit user action (no-store + CSRF)If keeping GET, at minimum add an option to return only masked token. I can draft the route/middleware if desired.
639-658: Return masked token by default; avoid sending the raw token in JSONSend only a masked form and metadata; reserve raw token for an explicit POST as suggested.
Apply within this handler:
- // Return token information - const tokenInfo = { - token: bearerToken, - type: 'Bearer', - }; + // Return masked token information only + const mask = (t: string) => (t.length <= 10 ? '•••••' : `${t.slice(0, 6)}••••••••${t.slice(-4)}`); + const tokenInfo = { + tokenMasked: mask(bearerToken), + type: 'Bearer', + length: bearerToken.length, + };If the frontend currently expects
token, add a temporary dual field (tokenMaskednow, migrate UI, then removetoken). I can provide a short migration diff for the UI.
Signed-off-by: Asitha de Silva <asithade@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/lfx-one/src/app/modules/project/dashboard/project-dashboard/project.component.html (1)
262-263: Add data-testid attribute for reliable test targeting.The button should include a
data-testidattribute following the convention[section]-[component]-[element].As per coding guidelines.
Apply this diff:
- <lfx-button label="Add Committee" icon="fa-light fa-people-group" severity="secondary" size="small" (onClick)="openCreateDialog()"> + <lfx-button label="Add Committee" icon="fa-light fa-people-group" severity="secondary" size="small" (onClick)="openCreateDialog()" data-testid="committees-empty-add-button"> </lfx-button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/lfx-one/src/app/modules/project/dashboard/project-dashboard/project.component.html(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
apps/lfx-one/src/**/*.html
📄 CodeRabbit inference engine (CLAUDE.md)
apps/lfx-one/src/**/*.html: Always add data-testid attributes when creating new Angular components for reliable test targeting
Use data-testid naming convention [section]-[component]-[element]
Files:
apps/lfx-one/src/app/modules/project/dashboard/project-dashboard/project.component.html
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/app/modules/project/dashboard/project-dashboard/project.component.html
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: E2E Tests / Playwright E2E Tests
🔇 Additional comments (1)
apps/lfx-one/src/app/modules/project/dashboard/project-dashboard/project.component.html (1)
261-264: LGTM! Consistent permission gating.The conditional rendering based on
project()?.writercorrectly restricts the "Add Committee" action to users with write permissions, matching the pattern used for the "Create Meeting" button elsewhere in this template.
🧹 Deployment RemovedThe deployment for PR #105 has been removed. |
Create comprehensive developer settings page accessible via user menu. Features secure API token display with masking, copy functionality, and proper authentication. Includes responsive table design and security guidelines for developers.
Key features:
🤖 Generated with Claude Code