Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| cc040e5088 | |||
| af0c24f7ca | |||
| fd089b2cee | |||
| 6b04c529da | |||
| f54588e877 |
@@ -1,5 +1,29 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 2025-12-01 - 1.7.0 - feat(admin)
|
||||||
|
Add global admin functionality: backend admin APIs, model fields and UI integration
|
||||||
|
|
||||||
|
- Backend: Add AppManager admin endpoints (getGlobalAppStats, create/update/delete/global apps, regenerate credentials) and checkGlobalAdmin handler; enforce admin checks via verifyGlobalAdmin
|
||||||
|
- Data models: Add createdAt and createdByUserId to global app data; add optional isGlobalAdmin flag to user data (IUser)
|
||||||
|
- Typed requests: Add new request definitions in loint-reception.admin.ts and export it from request index
|
||||||
|
- UI: Expose Global Admin entry in account navigation (isGlobalAdmin reactive state), add /admin subroute and AdminView export
|
||||||
|
- Account state: Fetch whoIs() on load to populate user information for admin checks
|
||||||
|
- App seeding: Seed global apps with createdAt and createdByUserId metadata
|
||||||
|
- Docs: Story index updated to include ADM-008 Manage Global Apps and adjust priority summary
|
||||||
|
|
||||||
|
## 2025-12-01 - 1.6.0 - feat(apps)
|
||||||
|
Add Apps subsystem: App and AppConnection models, managers, typed request handlers, web UI routes and documentation
|
||||||
|
|
||||||
|
- Introduce App and AppConnection SmartData models (ts/reception/classes.app.ts, ts/reception/classes.appconnection.ts)
|
||||||
|
- Add AppManager and AppConnectionManager with typed handlers for getGlobalApps, getAppConnections and toggleAppConnection (ts/reception/classes.appmanager.ts, ts/reception/classes.appconnectionmanager.ts)
|
||||||
|
- Add request and data interfaces for apps and app connections (ts_interfaces/data/loint-reception.app.ts, ts_interfaces/data/loint-reception.appconnection.ts, ts_interfaces/request/loint-reception.app.ts)
|
||||||
|
- Seed default global apps and support OAuth credential shape (IOAuthCredentials) in app data
|
||||||
|
- Wire App managers into Reception (ts/reception/classes.reception.ts) and Reception startup
|
||||||
|
- Update idp client types to use legacy app shape where required (IAppLegacy) and adapt typed requests (ts_idpclient/*)
|
||||||
|
- Expose web UI routes and navigation for organization Apps view and export the AppsView (ts_web/elements/account/*, ts_web/elements/account/views/index.ts)
|
||||||
|
- Add registration of new stories for Apps feature (stories/*: ORG-009, ORG-010, ORG-011, DEV-008) and update story index
|
||||||
|
- Adjust typed request shapes for login/transfer flows to accept IAppLegacy where transfer/app data is exchanged
|
||||||
|
|
||||||
## 2025-12-01 - 1.5.0 - feat(account)
|
## 2025-12-01 - 1.5.0 - feat(account)
|
||||||
Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
|
Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@idp.global/idp.global",
|
"name": "@idp.global/idp.global",
|
||||||
"version": "1.5.0",
|
"version": "1.7.0",
|
||||||
"description": "An identity provider software managing user authentications, registrations, and sessions.",
|
"description": "An identity provider software managing user authentications, registrations, and sessions.",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
"typings": "dist_ts/index.d.ts",
|
"typings": "dist_ts/index.d.ts",
|
||||||
|
|||||||
+11
-6
@@ -7,9 +7,9 @@ This directory contains user stories for the idp.global Identity Provider platfo
|
|||||||
```
|
```
|
||||||
stories/
|
stories/
|
||||||
├── end-user/ # Stories for regular users (8)
|
├── end-user/ # Stories for regular users (8)
|
||||||
├── organization-owner/ # Stories for organization admins (8)
|
├── organization-owner/ # Stories for organization admins (11)
|
||||||
├── developer/ # Stories for API/SDK consumers (7)
|
├── developer/ # Stories for API/SDK consumers (8)
|
||||||
└── admin/ # Stories for platform administrators (7)
|
└── admin/ # Stories for platform administrators (8)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Story Index
|
## Story Index
|
||||||
@@ -37,6 +37,9 @@ stories/
|
|||||||
| ORG-006 | [Configure SSO for Organization](organization-owner/ORG-006-sso-config.md) | High | New |
|
| ORG-006 | [Configure SSO for Organization](organization-owner/ORG-006-sso-config.md) | High | New |
|
||||||
| ORG-007 | [View Organization Audit Logs](organization-owner/ORG-007-audit-logs.md) | Medium | New |
|
| ORG-007 | [View Organization Audit Logs](organization-owner/ORG-007-audit-logs.md) | Medium | New |
|
||||||
| ORG-008 | [Manage Subscription and Billing](organization-owner/ORG-008-subscription-management.md) | Medium | Enhance |
|
| ORG-008 | [Manage Subscription and Billing](organization-owner/ORG-008-subscription-management.md) | Medium | Enhance |
|
||||||
|
| ORG-009 | [Connect Global Apps](organization-owner/ORG-009-global-apps.md) | High | New |
|
||||||
|
| ORG-010 | [Browse and Install Partner Apps](organization-owner/ORG-010-app-store.md) | Medium | New |
|
||||||
|
| ORG-011 | [Create Custom OIDC Apps](organization-owner/ORG-011-custom-oidc-apps.md) | Medium | New |
|
||||||
|
|
||||||
### Developer (DEV)
|
### Developer (DEV)
|
||||||
| ID | Title | Priority | Source |
|
| ID | Title | Priority | Source |
|
||||||
@@ -48,6 +51,7 @@ stories/
|
|||||||
| DEV-005 | [Register OAuth Client App](developer/DEV-005-oauth-client.md) | Medium | New |
|
| DEV-005 | [Register OAuth Client App](developer/DEV-005-oauth-client.md) | Medium | New |
|
||||||
| DEV-006 | [Understand API Rate Limits](developer/DEV-006-rate-limiting.md) | Low | New |
|
| DEV-006 | [Understand API Rate Limits](developer/DEV-006-rate-limiting.md) | Low | New |
|
||||||
| DEV-007 | [Validate JWTs in My Application](developer/DEV-007-jwt-validation.md) | Medium | Enhance |
|
| DEV-007 | [Validate JWTs in My Application](developer/DEV-007-jwt-validation.md) | Medium | Enhance |
|
||||||
|
| DEV-008 | [Submit App to AppStore](developer/DEV-008-submit-partner-app.md) | Low | New |
|
||||||
|
|
||||||
### Platform Admin (ADM)
|
### Platform Admin (ADM)
|
||||||
| ID | Title | Priority | Source |
|
| ID | Title | Priority | Source |
|
||||||
@@ -59,15 +63,16 @@ stories/
|
|||||||
| ADM-005 | [Security Monitoring Dashboard](admin/ADM-005-security-dashboard.md) | Medium | New |
|
| ADM-005 | [Security Monitoring Dashboard](admin/ADM-005-security-dashboard.md) | Medium | New |
|
||||||
| ADM-006 | [Impersonate Users for Support](admin/ADM-006-user-impersonation.md) | Low | New |
|
| ADM-006 | [Impersonate Users for Support](admin/ADM-006-user-impersonation.md) | Low | New |
|
||||||
| ADM-007 | [Manage JWT Blocklist](admin/ADM-007-blocklist-management.md) | Medium | Enhance |
|
| ADM-007 | [Manage JWT Blocklist](admin/ADM-007-blocklist-management.md) | Medium | Enhance |
|
||||||
|
| ADM-008 | [Manage Global Apps](admin/ADM-008-global-app-management.md) | High | In Development |
|
||||||
|
|
||||||
## Priority Summary
|
## Priority Summary
|
||||||
|
|
||||||
| Priority | Count | Stories |
|
| Priority | Count | Stories |
|
||||||
|----------|-------|---------|
|
|----------|-------|---------|
|
||||||
| Critical | 3 | EU-002, ORG-002, ADM-001 |
|
| Critical | 3 | EU-002, ORG-002, ADM-001 |
|
||||||
| High | 10 | EU-001, EU-004, ORG-001, ORG-003, ORG-006, DEV-001, DEV-002, DEV-004, ADM-002, ADM-003 |
|
| High | 12 | EU-001, EU-004, ORG-001, ORG-003, ORG-006, ORG-009, DEV-001, DEV-002, DEV-004, ADM-002, ADM-003, ADM-008 |
|
||||||
| Medium | 12 | EU-003, EU-005, EU-006, ORG-004, ORG-005, ORG-007, ORG-008, DEV-003, DEV-005, DEV-007, ADM-004, ADM-005, ADM-007 |
|
| Medium | 14 | EU-003, EU-005, EU-006, ORG-004, ORG-005, ORG-007, ORG-008, ORG-010, ORG-011, DEV-003, DEV-005, DEV-007, ADM-004, ADM-005, ADM-007 |
|
||||||
| Low | 5 | EU-007, EU-008, DEV-006, ADM-006 |
|
| Low | 6 | EU-007, EU-008, DEV-006, DEV-008, ADM-006 |
|
||||||
|
|
||||||
## Source Legend
|
## Source Legend
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,130 @@
|
|||||||
|
# Manage Global Apps
|
||||||
|
|
||||||
|
**ID:** ADM-008
|
||||||
|
**Priority:** High
|
||||||
|
**Status:** In Development
|
||||||
|
**Phase:** 1
|
||||||
|
|
||||||
|
## User Story
|
||||||
|
As a global administrator, I want to create, configure, and manage first-party global apps (foss.global, task.vc, etc.) so that organization owners can connect to these integrated services.
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ] Only users with `isGlobalAdmin: true` can access the admin page
|
||||||
|
- [ ] View list of all global apps with their status
|
||||||
|
- [ ] Create new global apps with OAuth credentials
|
||||||
|
- [ ] Edit existing global app details (name, description, logo, URLs)
|
||||||
|
- [ ] Activate/deactivate global apps (inactive apps hidden from org owners)
|
||||||
|
- [ ] View connection statistics per app (how many orgs connected)
|
||||||
|
- [ ] Regenerate OAuth client credentials for an app
|
||||||
|
- [ ] Delete global apps (with confirmation and impact warning)
|
||||||
|
- [ ] Admin page accessible at `/admin` route
|
||||||
|
|
||||||
|
## Technical Notes
|
||||||
|
- Global admin flag stored on user: `isGlobalAdmin: boolean`
|
||||||
|
- Separate from organization roles (platform-level permission)
|
||||||
|
- OAuth credentials generated server-side, secrets never exposed in full
|
||||||
|
- App deletion should warn about existing connections
|
||||||
|
- Audit logging for all admin actions
|
||||||
|
|
||||||
|
## Data Model
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface IUser {
|
||||||
|
id: string;
|
||||||
|
data: {
|
||||||
|
// ... existing fields ...
|
||||||
|
isGlobalAdmin?: boolean; // Platform-level admin flag
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IGlobalApp {
|
||||||
|
id: string;
|
||||||
|
type: 'global';
|
||||||
|
data: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
isActive: boolean;
|
||||||
|
category: string;
|
||||||
|
createdAt: number;
|
||||||
|
createdByUserId: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Request Interfaces
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface IReq_CreateGlobalApp {
|
||||||
|
method: 'createGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
category: string;
|
||||||
|
redirectUris: string[];
|
||||||
|
allowedScopes: string[];
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
app: IGlobalApp;
|
||||||
|
clientSecret: string; // Only shown once on creation
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IReq_UpdateGlobalApp {
|
||||||
|
method: 'updateGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
appId: string;
|
||||||
|
updates: Partial<IGlobalApp['data']>;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
app: IGlobalApp;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IReq_DeleteGlobalApp {
|
||||||
|
method: 'deleteGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
appId: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
success: boolean;
|
||||||
|
disconnectedOrganizations: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IReq_GetGlobalAppStats {
|
||||||
|
method: 'getGlobalAppStats';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
apps: Array<{
|
||||||
|
app: IGlobalApp;
|
||||||
|
connectionCount: number;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
- **GlobalAdminView** (`/admin`) - Main admin dashboard
|
||||||
|
- **Global Apps Tab** - List of global apps with CRUD operations
|
||||||
|
- **Create/Edit App Dialog** - Form for app configuration
|
||||||
|
- Navigation shows "Admin" link only for global admins
|
||||||
|
|
||||||
|
## Security Considerations
|
||||||
|
- Server-side validation of `isGlobalAdmin` flag on all admin endpoints
|
||||||
|
- JWT must be validated and user's admin status checked
|
||||||
|
- Rate limiting on credential regeneration
|
||||||
|
- Audit trail for all changes
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-009: Connect Global Apps (organization perspective)
|
||||||
|
- ADM-003: Platform-wide Audit Logging
|
||||||
@@ -19,10 +19,26 @@ As a developer, I want to properly register my application with a unique App ID
|
|||||||
|
|
||||||
## Technical Notes
|
## Technical Notes
|
||||||
- Current client has `id: ''` placeholder (TODO in code)
|
- Current client has `id: ''` placeholder (TODO in code)
|
||||||
- Need Application model in database
|
- App ID is now part of the unified Apps model (`IApp` discriminated union)
|
||||||
- App credentials similar to OAuth client credentials
|
- Three app types exist: Global Apps, Partner Apps, Custom OIDC Apps
|
||||||
|
- For custom applications, use the Custom OIDC Apps flow (ORG-011)
|
||||||
|
- App credentials stored as `IOAuthCredentials` with hashed client secret
|
||||||
- Validate redirect URIs to prevent open redirector attacks
|
- Validate redirect URIs to prevent open redirector attacks
|
||||||
- App ID should be included in JWT claims
|
- App ID/Client ID is included in JWT claims
|
||||||
|
|
||||||
|
## Apps Architecture
|
||||||
|
|
||||||
|
The Apps system supports three types:
|
||||||
|
1. **Global Apps** (ORG-009) - First-party platform apps (foss.global, task.vc)
|
||||||
|
2. **Partner Apps** (ORG-010, DEV-008) - AppStore model for third-party apps
|
||||||
|
3. **Custom OIDC Apps** (ORG-011) - Organization-created OAuth/OIDC clients
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-009: Connect Global Apps
|
||||||
|
- ORG-010: Browse and Install Partner Apps
|
||||||
|
- ORG-011: Create Custom OIDC Apps
|
||||||
|
- DEV-005: Register OAuth Client App
|
||||||
|
- DEV-008: Submit App to AppStore
|
||||||
|
|
||||||
## Related TODOs
|
## Related TODOs
|
||||||
- `ts_idpclient/classes.idpclient.ts:30` - `id: '', // TODO`
|
- `ts_idpclient/classes.idpclient.ts:30` - `id: '', // TODO`
|
||||||
|
|||||||
@@ -18,11 +18,34 @@ As a developer, I want to register my application as an OAuth client so that use
|
|||||||
- [ ] Client credentials flow for server-to-server
|
- [ ] Client credentials flow for server-to-server
|
||||||
|
|
||||||
## Technical Notes
|
## Technical Notes
|
||||||
- OAuth keywords in package.json suggest this is planned
|
- OAuth/OIDC client registration is now part of the Apps system
|
||||||
- Implement OAuth 2.0 authorization server endpoints
|
- **For organization owners**: Use Custom OIDC Apps (ORG-011) to create OAuth clients
|
||||||
|
- **For third-party developers**: Submit to AppStore (DEV-008) for public apps
|
||||||
|
- Standard OAuth 2.0 / OpenID Connect flows supported
|
||||||
- Scopes: openid, profile, email, organizations
|
- Scopes: openid, profile, email, organizations
|
||||||
- Consider OpenID Connect for identity layer
|
|
||||||
- PKCE is required for mobile and SPA security
|
- PKCE is required for mobile and SPA security
|
||||||
|
|
||||||
|
## Implementation Path
|
||||||
|
|
||||||
|
This story's functionality is now implemented through:
|
||||||
|
1. **Custom OIDC Apps** (ORG-011) - Create org-specific OAuth clients via the Apps UI
|
||||||
|
2. **Partner Apps** (DEV-008) - Submit public apps to the AppStore
|
||||||
|
|
||||||
|
Both use the same underlying `IOAuthCredentials` model:
|
||||||
|
```typescript
|
||||||
|
interface IOAuthCredentials {
|
||||||
|
clientId: string;
|
||||||
|
clientSecretHash: string;
|
||||||
|
redirectUris: string[];
|
||||||
|
allowedScopes: string[];
|
||||||
|
grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-011: Create Custom OIDC Apps (primary implementation)
|
||||||
|
- DEV-004: Proper App ID Initialization
|
||||||
|
- DEV-008: Submit App to AppStore
|
||||||
|
|
||||||
## Related TODOs
|
## Related TODOs
|
||||||
- New feature - OAuth server implementation
|
- New feature - OAuth server implementation
|
||||||
|
|||||||
@@ -0,0 +1,70 @@
|
|||||||
|
# Submit App to AppStore
|
||||||
|
|
||||||
|
**ID:** DEV-008
|
||||||
|
**Priority:** Low
|
||||||
|
**Status:** Planned
|
||||||
|
**Phase:** 4
|
||||||
|
|
||||||
|
## User Story
|
||||||
|
As a developer, I want to submit my application to the AppStore so that other organizations can discover and install my app.
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ] Submit a new app to the AppStore
|
||||||
|
- [ ] Provide app name, description, and logo
|
||||||
|
- [ ] Add screenshots for the store listing
|
||||||
|
- [ ] Select app category and tags
|
||||||
|
- [ ] Set pricing model (free, paid, freemium)
|
||||||
|
- [ ] Configure OAuth credentials (redirect URIs, scopes)
|
||||||
|
- [ ] Submit for review
|
||||||
|
- [ ] View submission status (draft, pending_review, approved, rejected, suspended)
|
||||||
|
- [ ] Receive notification on approval/rejection
|
||||||
|
- [ ] Edit app listing after approval
|
||||||
|
- [ ] View app analytics (install count, usage)
|
||||||
|
|
||||||
|
## Technical Notes
|
||||||
|
- Submitter organization becomes `ownerOrganizationId`
|
||||||
|
- Apps start in `draft` status, move to `pending_review` on submit
|
||||||
|
- Platform admins review and approve/reject apps
|
||||||
|
- Approved apps become visible in the AppStore
|
||||||
|
- App updates may require re-approval
|
||||||
|
|
||||||
|
## Approval Workflow
|
||||||
|
|
||||||
|
```
|
||||||
|
draft → pending_review → approved → published
|
||||||
|
↘ rejected
|
||||||
|
|
||||||
|
approved ↔ suspended (admin action)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Data Model
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface IPartnerApp {
|
||||||
|
id: string;
|
||||||
|
type: 'partner';
|
||||||
|
data: {
|
||||||
|
ownerOrganizationId: string;
|
||||||
|
appStoreMetadata: {
|
||||||
|
shortDescription: string;
|
||||||
|
longDescription: string;
|
||||||
|
screenshots: string[];
|
||||||
|
category: string;
|
||||||
|
tags: string[];
|
||||||
|
pricing: { model: 'free' | 'paid' | 'freemium' };
|
||||||
|
};
|
||||||
|
approvalStatus: 'draft' | 'pending_review' | 'approved' | 'rejected' | 'suspended';
|
||||||
|
isPublished: boolean;
|
||||||
|
installCount: number;
|
||||||
|
// ... other fields
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
- **AppSubmissionView** (`/account/org/:orgName/apps/submit`) - Submit new partner app form
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-010: Browse and Install Partner Apps
|
||||||
|
- ORG-011: Create Custom OIDC Apps
|
||||||
|
- ADM-008: Review Partner App Submissions (new admin story)
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
# Connect Global Apps
|
||||||
|
|
||||||
|
**ID:** ORG-009
|
||||||
|
**Priority:** High
|
||||||
|
**Status:** In Development
|
||||||
|
**Phase:** 1
|
||||||
|
|
||||||
|
## User Story
|
||||||
|
As an organization owner, I want to connect and disconnect first-party apps (foss.global, task.vc, etc.) for my organization so that my team members can use these integrated services.
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ] View list of available global apps (foss.global, task.vc)
|
||||||
|
- [ ] See connection status for each global app
|
||||||
|
- [ ] Connect a global app to the organization
|
||||||
|
- [ ] Disconnect a global app from the organization
|
||||||
|
- [ ] View which user connected the app and when
|
||||||
|
- [ ] See what scopes/permissions each app requires
|
||||||
|
- [ ] Toggle does not require page reload
|
||||||
|
|
||||||
|
## Technical Notes
|
||||||
|
- Global apps are pre-registered by the platform administrators
|
||||||
|
- Uses `IAppConnection` to track org-to-app relationships
|
||||||
|
- Connection creates OAuth authorization for the app
|
||||||
|
- Apps access org data via granted scopes
|
||||||
|
- No credentials shown to org owners (managed by platform)
|
||||||
|
|
||||||
|
## Data Model
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface IGlobalApp {
|
||||||
|
id: string;
|
||||||
|
type: 'global';
|
||||||
|
data: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
isActive: boolean;
|
||||||
|
category: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAppConnection {
|
||||||
|
id: string;
|
||||||
|
data: {
|
||||||
|
organizationId: string;
|
||||||
|
appId: string;
|
||||||
|
appType: 'global' | 'partner' | 'custom_oidc';
|
||||||
|
status: 'active' | 'disconnected';
|
||||||
|
connectedAt: number;
|
||||||
|
connectedByUserId: string;
|
||||||
|
grantedScopes: string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
- **AppsView** (`/account/org/:orgName/apps`) - Main tabbed interface
|
||||||
|
- **Global Apps Tab** - List of global apps with toggle switches
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-010: Browse and Install Partner Apps (AppStore)
|
||||||
|
- ORG-011: Create Custom OIDC Apps
|
||||||
|
- DEV-004: Proper App ID Initialization
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
# Browse and Install Partner Apps
|
||||||
|
|
||||||
|
**ID:** ORG-010
|
||||||
|
**Priority:** Medium
|
||||||
|
**Status:** Planned
|
||||||
|
**Phase:** 3
|
||||||
|
|
||||||
|
## User Story
|
||||||
|
As an organization owner, I want to browse and install partner apps from the AppStore so that my organization can benefit from third-party integrations.
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ] Browse available partner apps in the AppStore
|
||||||
|
- [ ] Search apps by name or description
|
||||||
|
- [ ] Filter apps by category
|
||||||
|
- [ ] View curated sections (Featured, Popular, New)
|
||||||
|
- [ ] View app details (description, screenshots, pricing)
|
||||||
|
- [ ] See app install count and ratings
|
||||||
|
- [ ] Install/connect a partner app to the organization
|
||||||
|
- [ ] Uninstall/disconnect a partner app
|
||||||
|
- [ ] View installed apps list
|
||||||
|
|
||||||
|
## Technical Notes
|
||||||
|
- Partner apps are submitted by other organizations (DEV-008)
|
||||||
|
- Apps must be approved by platform admins before appearing in store
|
||||||
|
- Uses `IPartnerApp` with `appStoreMetadata`
|
||||||
|
- Connection uses same `IAppConnection` as global apps
|
||||||
|
|
||||||
|
## Data Model
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface IPartnerApp {
|
||||||
|
id: string;
|
||||||
|
type: 'partner';
|
||||||
|
data: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
ownerOrganizationId: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
appStoreMetadata: {
|
||||||
|
shortDescription: string;
|
||||||
|
longDescription: string;
|
||||||
|
screenshots: string[];
|
||||||
|
category: string;
|
||||||
|
tags: string[];
|
||||||
|
pricing: { model: 'free' | 'paid' | 'freemium' };
|
||||||
|
};
|
||||||
|
approvalStatus: TAppApprovalStatus;
|
||||||
|
isPublished: boolean;
|
||||||
|
installCount: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
- **AppsView** - App Store tab with search and categories
|
||||||
|
- **AppStoreDetailView** (`/account/org/:orgName/apps/store/:appId`) - Full app details page
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-009: Connect Global Apps
|
||||||
|
- ORG-011: Create Custom OIDC Apps
|
||||||
|
- DEV-008: Submit App to AppStore
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
# Create Custom OIDC Apps
|
||||||
|
|
||||||
|
**ID:** ORG-011
|
||||||
|
**Priority:** Medium
|
||||||
|
**Status:** Planned
|
||||||
|
**Phase:** 2
|
||||||
|
|
||||||
|
## User Story
|
||||||
|
As an organization owner, I want to create custom OAuth/OIDC client applications so that I can integrate my own internal tools and services with the identity provider.
|
||||||
|
|
||||||
|
## Acceptance Criteria
|
||||||
|
- [ ] Create a new custom OIDC application
|
||||||
|
- [ ] Configure application name and description
|
||||||
|
- [ ] Upload application logo
|
||||||
|
- [ ] Set application URL
|
||||||
|
- [ ] Configure redirect URIs
|
||||||
|
- [ ] Select allowed OAuth scopes
|
||||||
|
- [ ] Choose grant types (authorization_code, client_credentials, refresh_token)
|
||||||
|
- [ ] View client ID and client secret
|
||||||
|
- [ ] Regenerate client secret if compromised
|
||||||
|
- [ ] Edit existing applications
|
||||||
|
- [ ] Delete applications
|
||||||
|
- [ ] Configure token lifetimes
|
||||||
|
|
||||||
|
## Technical Notes
|
||||||
|
- Custom OIDC apps are organization-scoped
|
||||||
|
- Client secret is hashed in database, shown only once at creation
|
||||||
|
- Redirect URIs validated to prevent open redirect attacks
|
||||||
|
- Standard OAuth 2.0 / OpenID Connect flows supported
|
||||||
|
- PKCE support for public clients
|
||||||
|
|
||||||
|
## Data Model
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface ICustomOidcApp {
|
||||||
|
id: string;
|
||||||
|
type: 'custom_oidc';
|
||||||
|
data: {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
ownerOrganizationId: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
oidcSettings: {
|
||||||
|
accessTokenLifetime: number; // seconds
|
||||||
|
refreshTokenLifetime: number; // seconds
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IOAuthCredentials {
|
||||||
|
clientId: string;
|
||||||
|
clientSecretHash: string;
|
||||||
|
redirectUris: string[];
|
||||||
|
allowedScopes: string[];
|
||||||
|
grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## UI Components
|
||||||
|
- **AppsView** - Custom OIDC tab with app list
|
||||||
|
- **OidcAppFormView** (`/account/org/:orgName/apps/custom/new`) - Create new app form
|
||||||
|
- **OidcAppFormView** (`/account/org/:orgName/apps/custom/:appId`) - Edit existing app
|
||||||
|
|
||||||
|
## Related Stories
|
||||||
|
- ORG-009: Connect Global Apps
|
||||||
|
- ORG-010: Browse and Install Partner Apps
|
||||||
|
- DEV-004: Proper App ID Initialization
|
||||||
|
- DEV-005: Register OAuth Client App
|
||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@idp.global/idp.global',
|
name: '@idp.global/idp.global',
|
||||||
version: '1.5.0',
|
version: '1.7.0',
|
||||||
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import * as plugins from '../plugins.js';
|
||||||
|
import type { AppManager } from './classes.appmanager.js';
|
||||||
|
|
||||||
|
@plugins.smartdata.Manager()
|
||||||
|
export class App extends plugins.smartdata.SmartDataDbDoc<
|
||||||
|
App,
|
||||||
|
plugins.idpInterfaces.data.IAppDocument,
|
||||||
|
AppManager
|
||||||
|
> {
|
||||||
|
// INSTANCE
|
||||||
|
@plugins.smartdata.unI()
|
||||||
|
id: plugins.idpInterfaces.data.IAppDocument['id'];
|
||||||
|
|
||||||
|
@plugins.smartdata.svDb()
|
||||||
|
type: plugins.idpInterfaces.data.IAppDocument['type'];
|
||||||
|
|
||||||
|
@plugins.smartdata.svDb()
|
||||||
|
data: plugins.idpInterfaces.data.IAppDocument['data'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the app is a global app
|
||||||
|
*/
|
||||||
|
public isGlobalApp(): this is App & { type: 'global' } {
|
||||||
|
return this.type === 'global';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the app is a partner app
|
||||||
|
*/
|
||||||
|
public isPartnerApp(): this is App & { type: 'partner' } {
|
||||||
|
return this.type === 'partner';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the app is a custom OIDC app
|
||||||
|
*/
|
||||||
|
public isCustomOidcApp(): this is App & { type: 'custom_oidc' } {
|
||||||
|
return this.type === 'custom_oidc';
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import * as plugins from '../plugins.js';
|
||||||
|
import type { AppConnectionManager } from './classes.appconnectionmanager.js';
|
||||||
|
|
||||||
|
@plugins.smartdata.Manager()
|
||||||
|
export class AppConnection extends plugins.smartdata.SmartDataDbDoc<
|
||||||
|
AppConnection,
|
||||||
|
plugins.idpInterfaces.data.IAppConnection,
|
||||||
|
AppConnectionManager
|
||||||
|
> {
|
||||||
|
// INSTANCE
|
||||||
|
@plugins.smartdata.unI()
|
||||||
|
id: plugins.idpInterfaces.data.IAppConnection['id'];
|
||||||
|
|
||||||
|
@plugins.smartdata.svDb()
|
||||||
|
data: plugins.idpInterfaces.data.IAppConnection['data'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the connection is active
|
||||||
|
*/
|
||||||
|
public isActive(): boolean {
|
||||||
|
return this.data.status === 'active';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Disconnect the app
|
||||||
|
*/
|
||||||
|
public async disconnect(): Promise<void> {
|
||||||
|
this.data.status = 'disconnected';
|
||||||
|
await this.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reconnect the app
|
||||||
|
*/
|
||||||
|
public async reconnect(userId: string): Promise<void> {
|
||||||
|
this.data.status = 'active';
|
||||||
|
this.data.connectedAt = Date.now();
|
||||||
|
this.data.connectedByUserId = userId;
|
||||||
|
await this.save();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
import * as plugins from '../plugins.js';
|
||||||
|
import type { Reception } from './classes.reception.js';
|
||||||
|
import { AppConnection } from './classes.appconnection.js';
|
||||||
|
|
||||||
|
export class AppConnectionManager {
|
||||||
|
public receptionRef: Reception;
|
||||||
|
public get db() {
|
||||||
|
return this.receptionRef.db.smartdataDb;
|
||||||
|
}
|
||||||
|
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||||
|
|
||||||
|
public CAppConnection = plugins.smartdata.setDefaultManagerForDoc(this, AppConnection);
|
||||||
|
|
||||||
|
constructor(receptionRefArg: Reception) {
|
||||||
|
this.receptionRef = receptionRefArg;
|
||||||
|
this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
|
||||||
|
|
||||||
|
// Handler: Get app connections for an organization
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetAppConnections>(
|
||||||
|
'getAppConnections',
|
||||||
|
async (requestArg) => {
|
||||||
|
// Verify JWT and get user
|
||||||
|
const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
|
||||||
|
const user = await this.receptionRef.userManager.CUser.getInstance({
|
||||||
|
id: jwtData.data.userId,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check user has access to the organization
|
||||||
|
const organization = await this.receptionRef.organizationmanager.COrganization.getInstance({
|
||||||
|
id: requestArg.organizationId,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!organization) {
|
||||||
|
throw new plugins.typedrequest.TypedResponseError('Organization not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
const role = await this.receptionRef.roleManager.CRole.getInstance({
|
||||||
|
data: {
|
||||||
|
organizationId: organization.id,
|
||||||
|
userId: user.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!role) {
|
||||||
|
throw new plugins.typedrequest.TypedResponseError(
|
||||||
|
'User not authorized for this organization'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all connections for this organization
|
||||||
|
const connections = await this.CAppConnection.getInstances({
|
||||||
|
'data.organizationId': requestArg.organizationId,
|
||||||
|
});
|
||||||
|
|
||||||
|
const connectionObjects = await Promise.all(
|
||||||
|
connections.map(async (conn) => await conn.createSavableObject())
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
connections: connectionObjects,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Toggle app connection (connect/disconnect)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_ToggleAppConnection>(
|
||||||
|
'toggleAppConnection',
|
||||||
|
async (requestArg) => {
|
||||||
|
// Verify JWT and get user
|
||||||
|
const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
|
||||||
|
const user = await this.receptionRef.userManager.CUser.getInstance({
|
||||||
|
id: jwtData.data.userId,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check user has admin access to the organization
|
||||||
|
const organization = await this.receptionRef.organizationmanager.COrganization.getInstance({
|
||||||
|
id: requestArg.organizationId,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!organization) {
|
||||||
|
throw new plugins.typedrequest.TypedResponseError('Organization not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
const isAdmin = await organization.checkIfUserIsAdmin(user);
|
||||||
|
if (!isAdmin) {
|
||||||
|
throw new plugins.typedrequest.TypedResponseError(
|
||||||
|
'Only organization admins can manage app connections'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the app
|
||||||
|
const app = await this.receptionRef.appManager.getAppById(requestArg.appId);
|
||||||
|
if (!app) {
|
||||||
|
throw new plugins.typedrequest.TypedResponseError('App not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find existing connection
|
||||||
|
let connection = await this.CAppConnection.getInstance({
|
||||||
|
'data.organizationId': requestArg.organizationId,
|
||||||
|
'data.appId': requestArg.appId,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (requestArg.action === 'connect') {
|
||||||
|
if (connection && connection.isActive()) {
|
||||||
|
// Already connected
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
connection: await connection.createSavableObject(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (connection) {
|
||||||
|
// Reconnect existing connection
|
||||||
|
await connection.reconnect(user.id);
|
||||||
|
} else {
|
||||||
|
// Create new connection
|
||||||
|
connection = new AppConnection();
|
||||||
|
connection.id = plugins.smartunique.shortId();
|
||||||
|
connection.data = {
|
||||||
|
organizationId: requestArg.organizationId,
|
||||||
|
appId: requestArg.appId,
|
||||||
|
appType: app.type,
|
||||||
|
status: 'active',
|
||||||
|
connectedAt: Date.now(),
|
||||||
|
connectedByUserId: user.id,
|
||||||
|
grantedScopes: app.data.oauthCredentials?.allowedScopes || [],
|
||||||
|
};
|
||||||
|
await connection.save();
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
connection: await connection.createSavableObject(),
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Disconnect
|
||||||
|
if (!connection) {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
await connection.disconnect();
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
connection: await connection.createSavableObject(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all connections for an organization
|
||||||
|
*/
|
||||||
|
public async getConnectionsForOrganization(organizationId: string): Promise<AppConnection[]> {
|
||||||
|
return await this.CAppConnection.getInstances({
|
||||||
|
'data.organizationId': organizationId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get connection for a specific app and organization
|
||||||
|
*/
|
||||||
|
public async getConnection(
|
||||||
|
organizationId: string,
|
||||||
|
appId: string
|
||||||
|
): Promise<AppConnection | null> {
|
||||||
|
return await this.CAppConnection.getInstance({
|
||||||
|
'data.organizationId': organizationId,
|
||||||
|
'data.appId': appId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if an app is connected to an organization
|
||||||
|
*/
|
||||||
|
public async isAppConnected(organizationId: string, appId: string): Promise<boolean> {
|
||||||
|
const connection = await this.getConnection(organizationId, appId);
|
||||||
|
return connection?.isActive() || false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,315 @@
|
|||||||
|
import * as plugins from '../plugins.js';
|
||||||
|
import type { Reception } from './classes.reception.js';
|
||||||
|
import { App } from './classes.app.js';
|
||||||
|
|
||||||
|
export class AppManager {
|
||||||
|
public receptionRef: Reception;
|
||||||
|
public get db() {
|
||||||
|
return this.receptionRef.db.smartdataDb;
|
||||||
|
}
|
||||||
|
public typedrouter = new plugins.typedrequest.TypedRouter();
|
||||||
|
|
||||||
|
public CApp = plugins.smartdata.setDefaultManagerForDoc(this, App);
|
||||||
|
|
||||||
|
constructor(receptionRefArg: Reception) {
|
||||||
|
this.receptionRef = receptionRefArg;
|
||||||
|
this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
|
||||||
|
|
||||||
|
// Handler: Get all global apps (for org owners)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetGlobalApps>(
|
||||||
|
'getGlobalApps',
|
||||||
|
async (requestArg) => {
|
||||||
|
// Verify JWT
|
||||||
|
await this.receptionRef.jwtManager.verifyJWTAndGetData(requestArg.jwt);
|
||||||
|
|
||||||
|
// Get all active global apps
|
||||||
|
const globalApps = await this.CApp.getInstances({
|
||||||
|
type: 'global',
|
||||||
|
'data.isActive': true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const appObjects = await Promise.all(
|
||||||
|
globalApps.map(async (app) => await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp)
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
apps: appObjects,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Check if user is global admin
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CheckGlobalAdmin>(
|
||||||
|
'checkGlobalAdmin',
|
||||||
|
async (requestArg) => {
|
||||||
|
const user = await this.receptionRef.userManager.getUserByJwt(requestArg.jwt);
|
||||||
|
return {
|
||||||
|
isGlobalAdmin: user?.data?.isGlobalAdmin ?? false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Get global apps with stats (admin only)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetGlobalAppStats>(
|
||||||
|
'getGlobalAppStats',
|
||||||
|
async (requestArg) => {
|
||||||
|
await this.verifyGlobalAdmin(requestArg.jwt);
|
||||||
|
|
||||||
|
// Get all global apps (including inactive)
|
||||||
|
const globalApps = await this.CApp.getInstances({
|
||||||
|
type: 'global',
|
||||||
|
});
|
||||||
|
|
||||||
|
const appsWithStats = await Promise.all(
|
||||||
|
globalApps.map(async (app) => {
|
||||||
|
const connections = await this.receptionRef.appConnectionManager.CAppConnection.getInstances({
|
||||||
|
'data.appId': app.id,
|
||||||
|
'data.status': 'active',
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
|
||||||
|
connectionCount: connections.length,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return { apps: appsWithStats };
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Create global app (admin only)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CreateGlobalApp>(
|
||||||
|
'createGlobalApp',
|
||||||
|
async (requestArg) => {
|
||||||
|
const jwtData = await this.verifyGlobalAdmin(requestArg.jwt);
|
||||||
|
|
||||||
|
// Generate OAuth credentials
|
||||||
|
const clientId = `app-${plugins.smartunique.shortId(12)}`;
|
||||||
|
const clientSecret = plugins.smartunique.shortId(32);
|
||||||
|
const clientSecretHash = await plugins.smarthash.sha256FromString(clientSecret);
|
||||||
|
|
||||||
|
const app = new App();
|
||||||
|
app.id = `app-${plugins.smartunique.shortId(8)}`;
|
||||||
|
app.type = 'global';
|
||||||
|
app.data = {
|
||||||
|
name: requestArg.name,
|
||||||
|
description: requestArg.description,
|
||||||
|
logoUrl: requestArg.logoUrl,
|
||||||
|
appUrl: requestArg.appUrl,
|
||||||
|
category: requestArg.category,
|
||||||
|
isActive: true,
|
||||||
|
createdAt: Date.now(),
|
||||||
|
createdByUserId: jwtData.data.userId,
|
||||||
|
oauthCredentials: {
|
||||||
|
clientId,
|
||||||
|
clientSecretHash,
|
||||||
|
redirectUris: requestArg.redirectUris,
|
||||||
|
allowedScopes: requestArg.allowedScopes,
|
||||||
|
grantTypes: ['authorization_code', 'refresh_token'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
await app.save();
|
||||||
|
|
||||||
|
return {
|
||||||
|
app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
|
||||||
|
clientSecret, // Only shown once
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Update global app (admin only)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_UpdateGlobalApp>(
|
||||||
|
'updateGlobalApp',
|
||||||
|
async (requestArg) => {
|
||||||
|
await this.verifyGlobalAdmin(requestArg.jwt);
|
||||||
|
|
||||||
|
const app = await this.CApp.getInstance({ id: requestArg.appId });
|
||||||
|
if (!app) {
|
||||||
|
throw new Error('App not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!app.isGlobalApp()) {
|
||||||
|
throw new Error('Can only update global apps');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update allowed fields - cast data to global app type after type guard
|
||||||
|
const appData = app.data as plugins.idpInterfaces.data.IGlobalApp['data'];
|
||||||
|
if (requestArg.updates.name !== undefined) appData.name = requestArg.updates.name;
|
||||||
|
if (requestArg.updates.description !== undefined) appData.description = requestArg.updates.description;
|
||||||
|
if (requestArg.updates.logoUrl !== undefined) appData.logoUrl = requestArg.updates.logoUrl;
|
||||||
|
if (requestArg.updates.appUrl !== undefined) appData.appUrl = requestArg.updates.appUrl;
|
||||||
|
if (requestArg.updates.category !== undefined) appData.category = requestArg.updates.category;
|
||||||
|
if (requestArg.updates.isActive !== undefined) appData.isActive = requestArg.updates.isActive;
|
||||||
|
if (requestArg.updates.redirectUris !== undefined) appData.oauthCredentials.redirectUris = requestArg.updates.redirectUris;
|
||||||
|
if (requestArg.updates.allowedScopes !== undefined) appData.oauthCredentials.allowedScopes = requestArg.updates.allowedScopes;
|
||||||
|
|
||||||
|
await app.save();
|
||||||
|
|
||||||
|
return {
|
||||||
|
app: await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Delete global app (admin only)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_DeleteGlobalApp>(
|
||||||
|
'deleteGlobalApp',
|
||||||
|
async (requestArg) => {
|
||||||
|
await this.verifyGlobalAdmin(requestArg.jwt);
|
||||||
|
|
||||||
|
const app = await this.CApp.getInstance({ id: requestArg.appId });
|
||||||
|
if (!app) {
|
||||||
|
throw new Error('App not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get and disconnect all connections
|
||||||
|
const connections = await this.receptionRef.appConnectionManager.CAppConnection.getInstances({
|
||||||
|
'data.appId': requestArg.appId,
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const connection of connections) {
|
||||||
|
await connection.delete();
|
||||||
|
}
|
||||||
|
|
||||||
|
await app.delete();
|
||||||
|
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
disconnectedOrganizations: connections.length,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handler: Regenerate OAuth credentials (admin only)
|
||||||
|
this.typedrouter.addTypedHandler(
|
||||||
|
new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_RegenerateAppCredentials>(
|
||||||
|
'regenerateAppCredentials',
|
||||||
|
async (requestArg) => {
|
||||||
|
await this.verifyGlobalAdmin(requestArg.jwt);
|
||||||
|
|
||||||
|
const app = await this.CApp.getInstance({ id: requestArg.appId });
|
||||||
|
if (!app) {
|
||||||
|
throw new Error('App not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate new credentials
|
||||||
|
const clientId = `app-${plugins.smartunique.shortId(12)}`;
|
||||||
|
const clientSecret = plugins.smartunique.shortId(32);
|
||||||
|
const clientSecretHash = await plugins.smarthash.sha256FromString(clientSecret);
|
||||||
|
|
||||||
|
app.data.oauthCredentials.clientId = clientId;
|
||||||
|
app.data.oauthCredentials.clientSecretHash = clientSecretHash;
|
||||||
|
await app.save();
|
||||||
|
|
||||||
|
return {
|
||||||
|
clientId,
|
||||||
|
clientSecret, // Only shown once
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verify that the user is a global admin
|
||||||
|
*/
|
||||||
|
private async verifyGlobalAdmin(jwt: string) {
|
||||||
|
const jwtData = await this.receptionRef.jwtManager.verifyJWTAndGetData(jwt);
|
||||||
|
const user = await this.receptionRef.userManager.getUserByJwt(jwt);
|
||||||
|
if (!user?.data?.isGlobalAdmin) {
|
||||||
|
throw new Error('Access denied: Global admin privileges required');
|
||||||
|
}
|
||||||
|
return jwtData;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all global apps
|
||||||
|
*/
|
||||||
|
public async getGlobalApps(): Promise<App[]> {
|
||||||
|
return await this.CApp.getInstances({
|
||||||
|
type: 'global',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get app by ID
|
||||||
|
*/
|
||||||
|
public async getAppById(appId: string): Promise<App | null> {
|
||||||
|
return await this.CApp.getInstance({
|
||||||
|
id: appId,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Seed initial global apps (for development/testing)
|
||||||
|
*/
|
||||||
|
public async seedGlobalApps() {
|
||||||
|
const defaultGlobalApps: Partial<plugins.idpInterfaces.data.IGlobalApp>[] = [
|
||||||
|
{
|
||||||
|
id: 'app-foss-global',
|
||||||
|
type: 'global',
|
||||||
|
data: {
|
||||||
|
name: 'foss.global',
|
||||||
|
description: 'Open Source Package Registry and Collaboration Platform',
|
||||||
|
logoUrl: 'https://foss.global/assets/logo.png',
|
||||||
|
appUrl: 'https://foss.global',
|
||||||
|
oauthCredentials: {
|
||||||
|
clientId: 'foss-global-client',
|
||||||
|
clientSecretHash: '', // Will be set when OAuth is configured
|
||||||
|
redirectUris: ['https://foss.global/auth/callback'],
|
||||||
|
allowedScopes: ['openid', 'profile', 'email', 'organizations'],
|
||||||
|
grantTypes: ['authorization_code', 'refresh_token'],
|
||||||
|
},
|
||||||
|
isActive: true,
|
||||||
|
category: 'Development',
|
||||||
|
createdAt: Date.now(),
|
||||||
|
createdByUserId: 'system',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'app-task-vc',
|
||||||
|
type: 'global',
|
||||||
|
data: {
|
||||||
|
name: 'task.vc',
|
||||||
|
description: 'Task Management and Project Collaboration',
|
||||||
|
logoUrl: 'https://task.vc/assets/logo.png',
|
||||||
|
appUrl: 'https://task.vc',
|
||||||
|
oauthCredentials: {
|
||||||
|
clientId: 'task-vc-client',
|
||||||
|
clientSecretHash: '',
|
||||||
|
redirectUris: ['https://task.vc/auth/callback'],
|
||||||
|
allowedScopes: ['openid', 'profile', 'email', 'organizations'],
|
||||||
|
grantTypes: ['authorization_code', 'refresh_token'],
|
||||||
|
},
|
||||||
|
isActive: true,
|
||||||
|
category: 'Productivity',
|
||||||
|
createdAt: Date.now(),
|
||||||
|
createdByUserId: 'system',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const appData of defaultGlobalApps) {
|
||||||
|
const existing = await this.CApp.getInstance({ id: appData.id });
|
||||||
|
if (!existing) {
|
||||||
|
const app = new App();
|
||||||
|
app.id = appData.id!;
|
||||||
|
app.type = appData.type!;
|
||||||
|
app.data = appData.data as any;
|
||||||
|
await app.save();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -13,6 +13,8 @@ import { ReceptionHousekeeping } from './classes.housekeeping.js';
|
|||||||
import { OrganizationManager } from './classes.organizationmanager.js';
|
import { OrganizationManager } from './classes.organizationmanager.js';
|
||||||
import { RoleManager } from './classes.rolemanager.js';
|
import { RoleManager } from './classes.rolemanager.js';
|
||||||
import { BillingPlanManager } from './classes.billingplanmanager.js';
|
import { BillingPlanManager } from './classes.billingplanmanager.js';
|
||||||
|
import { AppManager } from './classes.appmanager.js';
|
||||||
|
import { AppConnectionManager } from './classes.appconnectionmanager.js';
|
||||||
|
|
||||||
export interface IReceptionOptions {
|
export interface IReceptionOptions {
|
||||||
/**
|
/**
|
||||||
@@ -41,6 +43,8 @@ export class Reception {
|
|||||||
public organizationmanager = new OrganizationManager(this);
|
public organizationmanager = new OrganizationManager(this);
|
||||||
public roleManager = new RoleManager(this);
|
public roleManager = new RoleManager(this);
|
||||||
public billingPlanManager = new BillingPlanManager(this);
|
public billingPlanManager = new BillingPlanManager(this);
|
||||||
|
public appManager = new AppManager(this);
|
||||||
|
public appConnectionManager = new AppConnectionManager(this);
|
||||||
housekeeping = new ReceptionHousekeeping(this);
|
housekeeping = new ReceptionHousekeeping(this);
|
||||||
|
|
||||||
constructor(public options: IReceptionOptions) {
|
constructor(public options: IReceptionOptions) {
|
||||||
|
|||||||
@@ -51,6 +51,7 @@ export class UserManager {
|
|||||||
connectedOrgs: user.data.connectedOrgs,
|
connectedOrgs: user.data.connectedOrgs,
|
||||||
status: null,
|
status: null,
|
||||||
password: null,
|
password: null,
|
||||||
|
isGlobalAdmin: user.data.isGlobalAdmin,
|
||||||
} as plugins.idpInterfaces.data.IUser['data']
|
} as plugins.idpInterfaces.data.IUser['data']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,12 +11,12 @@ export class IdpClient {
|
|||||||
|
|
||||||
// INSTANCE PUBLIC
|
// INSTANCE PUBLIC
|
||||||
|
|
||||||
public appData: plugins.idpInterfaces.data.IApp;
|
public appData: plugins.idpInterfaces.data.IAppLegacy;
|
||||||
public rolesReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
|
public rolesReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
|
||||||
public organizationsReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
|
public organizationsReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
|
||||||
|
|
||||||
public parsedReceptionUrl: plugins.smarturl.Smarturl;
|
public parsedReceptionUrl: plugins.smarturl.Smarturl;
|
||||||
constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IApp) {
|
constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IAppLegacy) {
|
||||||
if (receptionBaseUrlArg.endsWith('/')) {
|
if (receptionBaseUrlArg.endsWith('/')) {
|
||||||
receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
|
receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
|
||||||
}
|
}
|
||||||
@@ -146,7 +146,7 @@ export class IdpClient {
|
|||||||
/**
|
/**
|
||||||
* can be used to switch between pages
|
* can be used to switch between pages
|
||||||
*/
|
*/
|
||||||
public async getTransferToken(appDataArg?: plugins.idpInterfaces.data.IApp): Promise<string> {
|
public async getTransferToken(appDataArg?: plugins.idpInterfaces.data.IAppLegacy): Promise<string> {
|
||||||
const jwt = await this.performJwtHousekeeping();
|
const jwt = await this.performJwtHousekeeping();
|
||||||
const extractedJwt = await this.helpers.extractDataFromJwtString(jwt);
|
const extractedJwt = await this.helpers.extractDataFromJwtString(jwt);
|
||||||
const getTransferToken =
|
const getTransferToken =
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
export * from './loint-reception.app.js';
|
export * from './loint-reception.app.js';
|
||||||
|
export * from './loint-reception.appconnection.js';
|
||||||
export * from './loint-reception.billingplan.js';
|
export * from './loint-reception.billingplan.js';
|
||||||
export * from './loint-reception.device.js';
|
export * from './loint-reception.device.js';
|
||||||
export * from './loint-reception.jwt.js';
|
export * from './loint-reception.jwt.js';
|
||||||
|
|||||||
@@ -1,4 +1,80 @@
|
|||||||
export interface IApp {
|
// App Types
|
||||||
|
export type TAppType = 'global' | 'partner' | 'custom_oidc';
|
||||||
|
export type TAppApprovalStatus = 'draft' | 'pending_review' | 'approved' | 'rejected' | 'suspended';
|
||||||
|
|
||||||
|
// OAuth Credentials
|
||||||
|
export interface IOAuthCredentials {
|
||||||
|
clientId: string;
|
||||||
|
clientSecretHash: string;
|
||||||
|
redirectUris: string[];
|
||||||
|
allowedScopes: string[];
|
||||||
|
grantTypes: ('authorization_code' | 'client_credentials' | 'refresh_token')[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Base app data shared by all app types
|
||||||
|
export interface IAppBaseData {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global App - First-party apps managed by platform (foss.global, task.vc, etc.)
|
||||||
|
export interface IGlobalApp {
|
||||||
|
id: string;
|
||||||
|
type: 'global';
|
||||||
|
data: IAppBaseData & {
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
isActive: boolean;
|
||||||
|
category: string;
|
||||||
|
createdAt: number;
|
||||||
|
createdByUserId: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Partner App - Third-party apps submitted to AppStore
|
||||||
|
export interface IPartnerApp {
|
||||||
|
id: string;
|
||||||
|
type: 'partner';
|
||||||
|
data: IAppBaseData & {
|
||||||
|
ownerOrganizationId: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
appStoreMetadata: {
|
||||||
|
shortDescription: string;
|
||||||
|
longDescription: string;
|
||||||
|
screenshots: string[];
|
||||||
|
category: string;
|
||||||
|
tags: string[];
|
||||||
|
pricing: { model: 'free' | 'paid' | 'freemium' };
|
||||||
|
};
|
||||||
|
approvalStatus: TAppApprovalStatus;
|
||||||
|
isPublished: boolean;
|
||||||
|
installCount: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom OIDC App - Organization-created OAuth clients
|
||||||
|
export interface ICustomOidcApp {
|
||||||
|
id: string;
|
||||||
|
type: 'custom_oidc';
|
||||||
|
data: IAppBaseData & {
|
||||||
|
ownerOrganizationId: string;
|
||||||
|
oauthCredentials: IOAuthCredentials;
|
||||||
|
oidcSettings: {
|
||||||
|
accessTokenLifetime: number; // seconds
|
||||||
|
refreshTokenLifetime: number; // seconds
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Union type for all app types
|
||||||
|
export type IApp = IGlobalApp | IPartnerApp | ICustomOidcApp;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Legacy interface for backwards compatibility with existing code
|
||||||
|
* that expects a flat app structure (e.g., idpclient, transfermanager)
|
||||||
|
*/
|
||||||
|
export interface IAppLegacy {
|
||||||
/**
|
/**
|
||||||
* must be unique
|
* must be unique
|
||||||
*/
|
*/
|
||||||
@@ -11,3 +87,13 @@ export interface IApp {
|
|||||||
logoUrl: string;
|
logoUrl: string;
|
||||||
appUrl: string;
|
appUrl: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Storage interface for SmartData documents
|
||||||
|
* Uses the discriminated union approach with a 'type' field
|
||||||
|
*/
|
||||||
|
export interface IAppDocument {
|
||||||
|
id: string;
|
||||||
|
type: TAppType;
|
||||||
|
data: IGlobalApp['data'] | IPartnerApp['data'] | ICustomOidcApp['data'];
|
||||||
|
}
|
||||||
|
|||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { TAppType } from './loint-reception.app.js';
|
||||||
|
|
||||||
|
export type TAppConnectionStatus = 'active' | 'disconnected';
|
||||||
|
|
||||||
|
export interface IAppConnection {
|
||||||
|
id: string;
|
||||||
|
data: {
|
||||||
|
organizationId: string;
|
||||||
|
appId: string;
|
||||||
|
appType: TAppType;
|
||||||
|
status: TAppConnectionStatus;
|
||||||
|
connectedAt: number;
|
||||||
|
connectedByUserId: string;
|
||||||
|
grantedScopes: string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -26,5 +26,11 @@ export interface IUser {
|
|||||||
* speeds up lookup
|
* speeds up lookup
|
||||||
*/
|
*/
|
||||||
connectedOrgs: string[];
|
connectedOrgs: string[];
|
||||||
|
/**
|
||||||
|
* Platform-level admin flag
|
||||||
|
* Users with this flag can access the global admin panel
|
||||||
|
* to manage global apps, view platform stats, etc.
|
||||||
|
*/
|
||||||
|
isGlobalAdmin?: boolean;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
export * from './loint-reception.admin.js';
|
||||||
export * from './loint-reception.apitoken.js';
|
export * from './loint-reception.apitoken.js';
|
||||||
|
export * from './loint-reception.app.js';
|
||||||
export * from './loint-reception.authorization.js';
|
export * from './loint-reception.authorization.js';
|
||||||
export * from './loint-reception.billingplan.js';
|
export * from './loint-reception.billingplan.js';
|
||||||
export * from './loint-reception.jwt.js';
|
export * from './loint-reception.jwt.js';
|
||||||
|
|||||||
@@ -0,0 +1,130 @@
|
|||||||
|
import * as plugins from '../loint-reception.plugins.js';
|
||||||
|
import * as data from '../data/index.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the current user is a global admin
|
||||||
|
*/
|
||||||
|
export interface IReq_CheckGlobalAdmin
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_CheckGlobalAdmin
|
||||||
|
> {
|
||||||
|
method: 'checkGlobalAdmin';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
isGlobalAdmin: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all global apps with statistics (admin only)
|
||||||
|
*/
|
||||||
|
export interface IReq_GetGlobalAppStats
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_GetGlobalAppStats
|
||||||
|
> {
|
||||||
|
method: 'getGlobalAppStats';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
apps: Array<{
|
||||||
|
app: data.IGlobalApp;
|
||||||
|
connectionCount: number;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new global app (admin only)
|
||||||
|
*/
|
||||||
|
export interface IReq_CreateGlobalApp
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_CreateGlobalApp
|
||||||
|
> {
|
||||||
|
method: 'createGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
category: string;
|
||||||
|
redirectUris: string[];
|
||||||
|
allowedScopes: string[];
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
app: data.IGlobalApp;
|
||||||
|
clientSecret: string; // Only shown once on creation
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update an existing global app (admin only)
|
||||||
|
*/
|
||||||
|
export interface IReq_UpdateGlobalApp
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_UpdateGlobalApp
|
||||||
|
> {
|
||||||
|
method: 'updateGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
appId: string;
|
||||||
|
updates: {
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
logoUrl?: string;
|
||||||
|
appUrl?: string;
|
||||||
|
category?: string;
|
||||||
|
isActive?: boolean;
|
||||||
|
redirectUris?: string[];
|
||||||
|
allowedScopes?: string[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
app: data.IGlobalApp;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete a global app (admin only)
|
||||||
|
*/
|
||||||
|
export interface IReq_DeleteGlobalApp
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_DeleteGlobalApp
|
||||||
|
> {
|
||||||
|
method: 'deleteGlobalApp';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
appId: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
success: boolean;
|
||||||
|
disconnectedOrganizations: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Regenerate OAuth credentials for a global app (admin only)
|
||||||
|
*/
|
||||||
|
export interface IReq_RegenerateAppCredentials
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_RegenerateAppCredentials
|
||||||
|
> {
|
||||||
|
method: 'regenerateAppCredentials';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
appId: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
clientId: string;
|
||||||
|
clientSecret: string; // Only shown once
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import * as data from '../data/index.js';
|
||||||
|
import * as plugins from '../loint-reception.plugins.js';
|
||||||
|
|
||||||
|
// Get all global apps
|
||||||
|
export interface IReq_GetGlobalApps
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_GetGlobalApps
|
||||||
|
> {
|
||||||
|
method: 'getGlobalApps';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
apps: data.IGlobalApp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get app connections for an organization
|
||||||
|
export interface IReq_GetAppConnections
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_GetAppConnections
|
||||||
|
> {
|
||||||
|
method: 'getAppConnections';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
organizationId: string;
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
connections: data.IAppConnection[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Connect/disconnect an app for an organization
|
||||||
|
export interface IReq_ToggleAppConnection
|
||||||
|
extends plugins.typedRequestInterfaces.implementsTR<
|
||||||
|
plugins.typedRequestInterfaces.ITypedRequest,
|
||||||
|
IReq_ToggleAppConnection
|
||||||
|
> {
|
||||||
|
method: 'toggleAppConnection';
|
||||||
|
request: {
|
||||||
|
jwt: string;
|
||||||
|
organizationId: string;
|
||||||
|
appId: string;
|
||||||
|
action: 'connect' | 'disconnect';
|
||||||
|
};
|
||||||
|
response: {
|
||||||
|
success: boolean;
|
||||||
|
connection?: data.IAppConnection;
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -103,7 +103,7 @@ export interface IReq_ExchangeRefreshTokenAndTransferToken
|
|||||||
request: {
|
request: {
|
||||||
transferToken?: string;
|
transferToken?: string;
|
||||||
refreshToken?: string;
|
refreshToken?: string;
|
||||||
appData: data.IApp;
|
appData: data.IAppLegacy;
|
||||||
};
|
};
|
||||||
response: {
|
response: {
|
||||||
refreshToken?: string;
|
refreshToken?: string;
|
||||||
|
|||||||
@@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@idp.global/idp.global',
|
name: '@idp.global/idp.global',
|
||||||
version: '1.5.0',
|
version: '1.7.0',
|
||||||
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -129,6 +129,36 @@ export class IdpAccountContent extends DeesElement {
|
|||||||
await this.domtools.convenience.smartdelay.delayFor(300);
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.subrouter.on('/org/:orgName/paddlesetup', async () => {
|
||||||
|
viewcontainer.classList.add('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
console.log('We are viewing the paddle setup page');
|
||||||
|
await cleanupViews();
|
||||||
|
viewcontainer.append(new views.PaddleSetupView());
|
||||||
|
viewcontainer.classList.remove('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.subrouter.on('/org/:orgName/apps', async () => {
|
||||||
|
viewcontainer.classList.add('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
console.log('We are viewing the apps page');
|
||||||
|
await cleanupViews();
|
||||||
|
viewcontainer.append(new views.AppsView());
|
||||||
|
viewcontainer.classList.remove('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.subrouter.on('/admin', async () => {
|
||||||
|
viewcontainer.classList.add('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
console.log('We are viewing the admin page');
|
||||||
|
await cleanupViews();
|
||||||
|
viewcontainer.append(new views.AdminView());
|
||||||
|
viewcontainer.classList.remove('changing');
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(300);
|
||||||
|
});
|
||||||
|
|
||||||
this.subrouter._handleRouteState();
|
this.subrouter._handleRouteState();
|
||||||
|
|
||||||
this.registerGarbageFunction(async () => {
|
this.registerGarbageFunction(async () => {
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import {
|
|||||||
cssManager,
|
cssManager,
|
||||||
unsafeCSS,
|
unsafeCSS,
|
||||||
css,
|
css,
|
||||||
|
state,
|
||||||
type TemplateResult,
|
type TemplateResult,
|
||||||
} from '@design.estate/dees-element';
|
} from '@design.estate/dees-element';
|
||||||
|
|
||||||
@@ -24,6 +25,9 @@ declare global {
|
|||||||
|
|
||||||
@customElement('lele-accountnavigation')
|
@customElement('lele-accountnavigation')
|
||||||
export class LeleAccountNavigation extends DeesElement {
|
export class LeleAccountNavigation extends DeesElement {
|
||||||
|
@state()
|
||||||
|
accessor isGlobalAdmin: boolean = false;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
@@ -214,7 +218,13 @@ export class LeleAccountNavigation extends DeesElement {
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
class="navigationOption"
|
class="navigationOption"
|
||||||
@click=${async () => {}}
|
@click=${async () => {
|
||||||
|
const currentState = states.accountState.getState();
|
||||||
|
if (currentState.selectedOrg) {
|
||||||
|
const subrouter = await this.getAccountRouter();
|
||||||
|
subrouter.pushUrl(`/org/${currentState.selectedOrg.data.slug}/apps`);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
||||||
Apps
|
Apps
|
||||||
@@ -235,17 +245,45 @@ export class LeleAccountNavigation extends DeesElement {
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="navigationOption"
|
class="navigationOption"
|
||||||
@click=${async () => {}}
|
@click=${async () => {
|
||||||
|
const currentState = states.accountState.getState();
|
||||||
|
if (currentState.selectedOrg) {
|
||||||
|
const subrouter = await this.getAccountRouter();
|
||||||
|
subrouter.pushUrl(`/org/${currentState.selectedOrg.data.slug}/billing`);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<dees-icon .icon=${'lucide:wallet'}></dees-icon>
|
<dees-icon .icon=${'lucide:wallet'}></dees-icon>
|
||||||
Billing
|
Billing
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
${this.renderAdminLink()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="commitinfo">v${commitinfo.version}</div>
|
<div class="commitinfo">v${commitinfo.version}</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private renderAdminLink(): TemplateResult | null {
|
||||||
|
if (!this.isGlobalAdmin) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return html`
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="navigationGroupLabel">Platform</div>
|
||||||
|
<div
|
||||||
|
class="navigationOption"
|
||||||
|
@click=${async () => {
|
||||||
|
const subrouter = await this.getAccountRouter();
|
||||||
|
subrouter.pushUrl('/admin');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<dees-icon .icon=${'lucide:shield'}></dees-icon>
|
||||||
|
Global Admin
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
public firstUpdated() {
|
public firstUpdated() {
|
||||||
const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
|
const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
|
||||||
const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
|
const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
|
||||||
@@ -274,5 +312,12 @@ export class LeleAccountNavigation extends DeesElement {
|
|||||||
.subscribe((selectedOrgArg) => {
|
.subscribe((selectedOrgArg) => {
|
||||||
deesInputDropdown.selectedOption = selectedOrgArg;
|
deesInputDropdown.selectedOption = selectedOrgArg;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Check if user is global admin
|
||||||
|
states.accountState
|
||||||
|
.select((stateArg) => stateArg.user)
|
||||||
|
.subscribe((user) => {
|
||||||
|
this.isGlobalAdmin = user?.data?.isGlobalAdmin ?? false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,759 @@
|
|||||||
|
import * as plugins from '../../../plugins.js';
|
||||||
|
import {
|
||||||
|
customElement,
|
||||||
|
DeesElement,
|
||||||
|
property,
|
||||||
|
html,
|
||||||
|
cssManager,
|
||||||
|
css,
|
||||||
|
state,
|
||||||
|
type TemplateResult,
|
||||||
|
} from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
import { IdpState } from '../../../states/idp.state.js';
|
||||||
|
import { accountDesignTokens } from '../sharedstyles.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'lele-accountview-admin': AdminView;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAppWithStats {
|
||||||
|
app: plugins.idpInterfaces.data.IGlobalApp;
|
||||||
|
connectionCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('lele-accountview-admin')
|
||||||
|
export class AdminView extends DeesElement {
|
||||||
|
@state()
|
||||||
|
accessor apps: IAppWithStats[] = [];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor loading: boolean = true;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor showCreateDialog: boolean = false;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor editingApp: plugins.idpInterfaces.data.IGlobalApp | null = null;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor newClientSecret: string | null = null;
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
accountDesignTokens,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
min-height: 100%;
|
||||||
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
color: #71717a;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #71717a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apps-section {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-list {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #27272a;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo dees-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-details {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #71717a;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-status {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-status.active {
|
||||||
|
background: rgba(34, 197, 94, 0.1);
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-status.inactive {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
background: transparent;
|
||||||
|
color: #fafafa;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn:hover {
|
||||||
|
background: #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn.danger:hover {
|
||||||
|
background: rgba(239, 68, 68, 0.1);
|
||||||
|
border-color: #ef4444;
|
||||||
|
color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px;
|
||||||
|
color: #71717a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state dees-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 48px;
|
||||||
|
color: #71717a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dialog styles */
|
||||||
|
.dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog {
|
||||||
|
background: #18181b;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 16px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 520px;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-header {
|
||||||
|
padding: 20px 24px;
|
||||||
|
border-bottom: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-body {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-top: 1px solid #27272a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #a1a1aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #fafafa;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-textarea {
|
||||||
|
min-height: 80px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-display {
|
||||||
|
background: #0a0a0a;
|
||||||
|
border: 1px solid #27272a;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #71717a;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-value {
|
||||||
|
font-family: 'Geist Mono', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
word-break: break-all;
|
||||||
|
color: #22c55e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secret-warning {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #f59e0b;
|
||||||
|
margin-top: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h1>Global Admin</h1>
|
||||||
|
<p class="subtitle">Manage platform-wide settings and global apps</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-row">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${this.apps.length}</div>
|
||||||
|
<div class="stat-label">Total Global Apps</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${this.apps.filter(a => a.app.data.isActive).length}</div>
|
||||||
|
<div class="stat-label">Active Apps</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-value">${this.apps.reduce((sum, a) => sum + a.connectionCount, 0)}</div>
|
||||||
|
<div class="stat-label">Total Connections</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="apps-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<span class="section-title">Global Apps</span>
|
||||||
|
<dees-button
|
||||||
|
@clicked=${() => this.showCreateDialog = true}
|
||||||
|
>
|
||||||
|
<dees-icon .icon=${'lucide:plus'} slot="iconLeft"></dees-icon>
|
||||||
|
Create App
|
||||||
|
</dees-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${this.loading ? this.renderLoading() : this.renderAppList()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${this.showCreateDialog ? this.renderCreateDialog() : null}
|
||||||
|
${this.editingApp ? this.renderEditDialog() : null}
|
||||||
|
${this.newClientSecret ? this.renderSecretDialog() : null}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderLoading(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="loading">
|
||||||
|
<span>Loading apps...</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderAppList(): TemplateResult {
|
||||||
|
if (this.apps.length === 0) {
|
||||||
|
return html`
|
||||||
|
<div class="empty-state">
|
||||||
|
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
||||||
|
<h3>No Global Apps</h3>
|
||||||
|
<p>Create your first global app to get started.</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="app-list">
|
||||||
|
${this.apps.map(({ app, connectionCount }) => html`
|
||||||
|
<div class="app-item">
|
||||||
|
<div class="app-logo">
|
||||||
|
${app.data.logoUrl
|
||||||
|
? html`<img src="${app.data.logoUrl}" alt="${app.data.name}" />`
|
||||||
|
: html`<dees-icon .icon=${'lucide:box'}></dees-icon>`
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="app-info">
|
||||||
|
<div class="app-name">${app.data.name}</div>
|
||||||
|
<div class="app-details">
|
||||||
|
<span>${app.data.category}</span>
|
||||||
|
<span>${connectionCount} connections</span>
|
||||||
|
<span>${app.data.appUrl}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="app-status ${app.data.isActive ? 'active' : 'inactive'}">
|
||||||
|
${app.data.isActive ? 'Active' : 'Inactive'}
|
||||||
|
</span>
|
||||||
|
<div class="app-actions">
|
||||||
|
<button class="action-btn" @click=${() => this.editingApp = app}>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
<button class="action-btn" @click=${() => this.regenerateCredentials(app.id)}>
|
||||||
|
Regenerate
|
||||||
|
</button>
|
||||||
|
<button class="action-btn danger" @click=${() => this.deleteApp(app.id)}>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderCreateDialog(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="dialog-overlay" @click=${(e: Event) => {
|
||||||
|
if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
|
||||||
|
this.showCreateDialog = false;
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dialog-header">
|
||||||
|
<h2 class="dialog-title">Create Global App</h2>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">App Name</label>
|
||||||
|
<input type="text" class="form-input" id="app-name" placeholder="e.g., foss.global" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Description</label>
|
||||||
|
<textarea class="form-input form-textarea" id="app-description" placeholder="Describe what this app does..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">App URL</label>
|
||||||
|
<input type="url" class="form-input" id="app-url" placeholder="https://app.example.com" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Logo URL</label>
|
||||||
|
<input type="url" class="form-input" id="app-logo" placeholder="https://example.com/logo.png" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Category</label>
|
||||||
|
<input type="text" class="form-input" id="app-category" placeholder="e.g., Productivity" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Redirect URIs (comma-separated)</label>
|
||||||
|
<input type="text" class="form-input" id="app-redirects" placeholder="https://app.example.com/callback" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Allowed Scopes (comma-separated)</label>
|
||||||
|
<input type="text" class="form-input" id="app-scopes" placeholder="openid, profile, email" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<dees-button type="secondary" @clicked=${() => this.showCreateDialog = false}>
|
||||||
|
Cancel
|
||||||
|
</dees-button>
|
||||||
|
<dees-button @clicked=${this.createApp}>
|
||||||
|
Create App
|
||||||
|
</dees-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderEditDialog(): TemplateResult {
|
||||||
|
const app = this.editingApp!;
|
||||||
|
return html`
|
||||||
|
<div class="dialog-overlay" @click=${(e: Event) => {
|
||||||
|
if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
|
||||||
|
this.editingApp = null;
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dialog-header">
|
||||||
|
<h2 class="dialog-title">Edit ${app.data.name}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">App Name</label>
|
||||||
|
<input type="text" class="form-input" id="edit-name" .value=${app.data.name} />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Description</label>
|
||||||
|
<textarea class="form-input form-textarea" id="edit-description">${app.data.description}</textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">App URL</label>
|
||||||
|
<input type="url" class="form-input" id="edit-url" .value=${app.data.appUrl} />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Logo URL</label>
|
||||||
|
<input type="url" class="form-input" id="edit-logo" .value=${app.data.logoUrl} />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Category</label>
|
||||||
|
<input type="text" class="form-input" id="edit-category" .value=${app.data.category} />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Status</label>
|
||||||
|
<dees-input-checkbox
|
||||||
|
.label=${'App is active'}
|
||||||
|
.value=${app.data.isActive}
|
||||||
|
id="edit-active"
|
||||||
|
></dees-input-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<dees-button type="secondary" @clicked=${() => this.editingApp = null}>
|
||||||
|
Cancel
|
||||||
|
</dees-button>
|
||||||
|
<dees-button @clicked=${this.updateApp}>
|
||||||
|
Save Changes
|
||||||
|
</dees-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderSecretDialog(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="dialog-overlay" @click=${(e: Event) => {
|
||||||
|
if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
|
||||||
|
this.newClientSecret = null;
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<div class="dialog">
|
||||||
|
<div class="dialog-header">
|
||||||
|
<h2 class="dialog-title">Client Secret Generated</h2>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-body">
|
||||||
|
<p>Your new client secret has been generated. Copy it now - you won't be able to see it again.</p>
|
||||||
|
<div class="secret-display">
|
||||||
|
<div class="secret-label">Client Secret</div>
|
||||||
|
<div class="secret-value">${this.newClientSecret}</div>
|
||||||
|
</div>
|
||||||
|
<div class="secret-warning">
|
||||||
|
<dees-icon .icon=${'lucide:alert-triangle'}></dees-icon>
|
||||||
|
This secret will only be shown once. Store it securely.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<dees-button @clicked=${() => {
|
||||||
|
navigator.clipboard.writeText(this.newClientSecret!);
|
||||||
|
}}>
|
||||||
|
Copy to Clipboard
|
||||||
|
</dees-button>
|
||||||
|
<dees-button type="secondary" @clicked=${() => this.newClientSecret = null}>
|
||||||
|
Close
|
||||||
|
</dees-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async firstUpdated() {
|
||||||
|
await this.loadApps();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadApps() {
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_GetGlobalAppStats>(
|
||||||
|
'/typedrequest',
|
||||||
|
'getGlobalAppStats'
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = await typedRequest.fire({ jwt });
|
||||||
|
this.apps = response?.apps ?? [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading apps:', error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async createApp() {
|
||||||
|
const nameInput = this.shadowRoot!.querySelector('#app-name') as HTMLInputElement;
|
||||||
|
const descInput = this.shadowRoot!.querySelector('#app-description') as HTMLTextAreaElement;
|
||||||
|
const urlInput = this.shadowRoot!.querySelector('#app-url') as HTMLInputElement;
|
||||||
|
const logoInput = this.shadowRoot!.querySelector('#app-logo') as HTMLInputElement;
|
||||||
|
const categoryInput = this.shadowRoot!.querySelector('#app-category') as HTMLInputElement;
|
||||||
|
const redirectsInput = this.shadowRoot!.querySelector('#app-redirects') as HTMLInputElement;
|
||||||
|
const scopesInput = this.shadowRoot!.querySelector('#app-scopes') as HTMLInputElement;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_CreateGlobalApp>(
|
||||||
|
'/typedrequest',
|
||||||
|
'createGlobalApp'
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = await typedRequest.fire({
|
||||||
|
jwt,
|
||||||
|
name: nameInput.value,
|
||||||
|
description: descInput.value,
|
||||||
|
appUrl: urlInput.value,
|
||||||
|
logoUrl: logoInput.value,
|
||||||
|
category: categoryInput.value,
|
||||||
|
redirectUris: redirectsInput.value.split(',').map(s => s.trim()).filter(Boolean),
|
||||||
|
allowedScopes: scopesInput.value.split(',').map(s => s.trim()).filter(Boolean),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.showCreateDialog = false;
|
||||||
|
this.newClientSecret = response.clientSecret;
|
||||||
|
await this.loadApps();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating app:', error);
|
||||||
|
alert('Failed to create app');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async updateApp() {
|
||||||
|
const app = this.editingApp!;
|
||||||
|
const nameInput = this.shadowRoot!.querySelector('#edit-name') as HTMLInputElement;
|
||||||
|
const descInput = this.shadowRoot!.querySelector('#edit-description') as HTMLTextAreaElement;
|
||||||
|
const urlInput = this.shadowRoot!.querySelector('#edit-url') as HTMLInputElement;
|
||||||
|
const logoInput = this.shadowRoot!.querySelector('#edit-logo') as HTMLInputElement;
|
||||||
|
const categoryInput = this.shadowRoot!.querySelector('#edit-category') as HTMLInputElement;
|
||||||
|
const activeCheckbox = this.shadowRoot!.querySelector('#edit-active') as any;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_UpdateGlobalApp>(
|
||||||
|
'/typedrequest',
|
||||||
|
'updateGlobalApp'
|
||||||
|
);
|
||||||
|
|
||||||
|
await typedRequest.fire({
|
||||||
|
jwt,
|
||||||
|
appId: app.id,
|
||||||
|
updates: {
|
||||||
|
name: nameInput.value,
|
||||||
|
description: descInput.value,
|
||||||
|
appUrl: urlInput.value,
|
||||||
|
logoUrl: logoInput.value,
|
||||||
|
category: categoryInput.value,
|
||||||
|
isActive: activeCheckbox.value,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
this.editingApp = null;
|
||||||
|
await this.loadApps();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error updating app:', error);
|
||||||
|
alert('Failed to update app');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async regenerateCredentials(appId: string) {
|
||||||
|
if (!confirm('Are you sure you want to regenerate credentials? The current credentials will stop working.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_RegenerateAppCredentials>(
|
||||||
|
'/typedrequest',
|
||||||
|
'regenerateAppCredentials'
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = await typedRequest.fire({ jwt, appId });
|
||||||
|
this.newClientSecret = response.clientSecret;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error regenerating credentials:', error);
|
||||||
|
alert('Failed to regenerate credentials');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async deleteApp(appId: string) {
|
||||||
|
if (!confirm('Are you sure you want to delete this app? All organizations will be disconnected.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_DeleteGlobalApp>(
|
||||||
|
'/typedrequest',
|
||||||
|
'deleteGlobalApp'
|
||||||
|
);
|
||||||
|
|
||||||
|
const response = await typedRequest.fire({ jwt, appId });
|
||||||
|
|
||||||
|
if (response.disconnectedOrganizations > 0) {
|
||||||
|
alert(`App deleted. ${response.disconnectedOrganizations} organizations were disconnected.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.loadApps();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error deleting app:', error);
|
||||||
|
alert('Failed to delete app');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,450 @@
|
|||||||
|
import * as plugins from '../../../plugins.js';
|
||||||
|
import {
|
||||||
|
customElement,
|
||||||
|
DeesElement,
|
||||||
|
property,
|
||||||
|
html,
|
||||||
|
cssManager,
|
||||||
|
css,
|
||||||
|
state,
|
||||||
|
} from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
|
||||||
|
import * as accountState from '../../../states/accountstate.js';
|
||||||
|
import { IdpState } from '../../../states/idp.state.js';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'lele-accountview-apps': AppsView;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IAppDisplay {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
logoUrl: string;
|
||||||
|
appUrl: string;
|
||||||
|
category: string;
|
||||||
|
isConnected: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@customElement('lele-accountview-apps')
|
||||||
|
export class AppsView extends DeesElement {
|
||||||
|
@state()
|
||||||
|
accessor globalApps: IAppDisplay[] = [];
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor loading: boolean = true;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor activeTab: 'global' | 'store' | 'custom' = 'global';
|
||||||
|
|
||||||
|
@state()
|
||||||
|
accessor organizationId: string = '';
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
accountDesignTokens,
|
||||||
|
cardStyles,
|
||||||
|
typographyStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
padding: 48px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
transition: all 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card:hover {
|
||||||
|
border-color: var(--muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-logo dees-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-name {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--foreground);
|
||||||
|
margin: 0 0 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-category {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-description {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-link {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
text-decoration: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-link:hover {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-link dees-icon {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-label {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state dees-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 48px;
|
||||||
|
color: var(--muted-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon {
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coming-soon dees-icon {
|
||||||
|
font-size: 48px;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
return html`
|
||||||
|
<h1>Apps</h1>
|
||||||
|
<p>Manage apps connected to your organization. Connect global apps, browse the AppStore, or create custom OAuth clients.</p>
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<button
|
||||||
|
class="tab ${this.activeTab === 'global' ? 'active' : ''}"
|
||||||
|
@click=${() => this.activeTab = 'global'}
|
||||||
|
>
|
||||||
|
Global Apps
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab ${this.activeTab === 'store' ? 'active' : ''}"
|
||||||
|
@click=${() => this.activeTab = 'store'}
|
||||||
|
>
|
||||||
|
App Store
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="tab ${this.activeTab === 'custom' ? 'active' : ''}"
|
||||||
|
@click=${() => this.activeTab = 'custom'}
|
||||||
|
>
|
||||||
|
Custom OIDC
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${this.renderTabContent()}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderTabContent() {
|
||||||
|
switch (this.activeTab) {
|
||||||
|
case 'global':
|
||||||
|
return this.renderGlobalApps();
|
||||||
|
case 'store':
|
||||||
|
return this.renderAppStore();
|
||||||
|
case 'custom':
|
||||||
|
return this.renderCustomOidc();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderGlobalApps() {
|
||||||
|
if (this.loading) {
|
||||||
|
return html`
|
||||||
|
<div class="loading">
|
||||||
|
<span>Loading apps...</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.globalApps.length === 0) {
|
||||||
|
return html`
|
||||||
|
<div class="empty-state">
|
||||||
|
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
||||||
|
<h2>No Global Apps Available</h2>
|
||||||
|
<p>There are no global apps configured yet.</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="app-grid">
|
||||||
|
${this.globalApps.map(app => html`
|
||||||
|
<div class="app-card">
|
||||||
|
<div class="app-header">
|
||||||
|
<div class="app-logo">
|
||||||
|
${app.logoUrl ? html`<img src="${app.logoUrl}" alt="${app.name}" />` : html`<dees-icon .icon=${'lucide:box'}></dees-icon>`}
|
||||||
|
</div>
|
||||||
|
<div class="app-info">
|
||||||
|
<h3 class="app-name">${app.name}</h3>
|
||||||
|
<span class="app-category">${app.category}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="app-description">${app.description}</p>
|
||||||
|
<div class="app-actions">
|
||||||
|
<a class="app-link" href="${app.appUrl}" target="_blank">
|
||||||
|
<dees-icon .icon=${'lucide:external-link'}></dees-icon>
|
||||||
|
Visit App
|
||||||
|
</a>
|
||||||
|
<div class="toggle-container">
|
||||||
|
<span class="toggle-label">${app.isConnected ? 'Connected' : 'Disconnected'}</span>
|
||||||
|
<dees-input-checkbox
|
||||||
|
.value=${app.isConnected}
|
||||||
|
@change=${(e: CustomEvent) => this.toggleAppConnection(app.id, e.detail)}
|
||||||
|
></dees-input-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderAppStore() {
|
||||||
|
return html`
|
||||||
|
<div class="coming-soon">
|
||||||
|
<dees-icon .icon=${'lucide:store'}></dees-icon>
|
||||||
|
<h2>App Store</h2>
|
||||||
|
<p>Browse and install partner apps from other organizations.</p>
|
||||||
|
<p><em>Coming soon in Phase 3</em></p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderCustomOidc() {
|
||||||
|
return html`
|
||||||
|
<div class="coming-soon">
|
||||||
|
<dees-icon .icon=${'lucide:key'}></dees-icon>
|
||||||
|
<h2>Custom OIDC Apps</h2>
|
||||||
|
<p>Create and manage your own OAuth/OIDC client applications.</p>
|
||||||
|
<p><em>Coming soon in Phase 2</em></p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async firstUpdated() {
|
||||||
|
await this.loadApps();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadApps() {
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get the organization ID from the URL
|
||||||
|
const pathParts = window.location.pathname.split('/');
|
||||||
|
const orgSlug = pathParts[3];
|
||||||
|
|
||||||
|
const currentState = accountState.accountState.getState();
|
||||||
|
const selectedOrg = currentState.organizations.find(org => org.data.slug === orgSlug);
|
||||||
|
|
||||||
|
if (!selectedOrg) {
|
||||||
|
console.error('Organization not found');
|
||||||
|
this.loading = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.organizationId = selectedOrg.id;
|
||||||
|
|
||||||
|
// Get JWT from IdpState
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
// Fetch global apps
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_GetGlobalApps>(
|
||||||
|
'/typedrequest',
|
||||||
|
'getGlobalApps'
|
||||||
|
);
|
||||||
|
|
||||||
|
const appsResponse = await typedRequest.fire({
|
||||||
|
jwt,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch connections for this organization
|
||||||
|
const connectionsRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_GetAppConnections>(
|
||||||
|
'/typedrequest',
|
||||||
|
'getAppConnections'
|
||||||
|
);
|
||||||
|
|
||||||
|
const connectionsResponse = await connectionsRequest.fire({
|
||||||
|
jwt,
|
||||||
|
organizationId: this.organizationId,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Map apps with connection status
|
||||||
|
const connectionMap = new Map(
|
||||||
|
connectionsResponse.connections
|
||||||
|
.filter(c => c.data.status === 'active')
|
||||||
|
.map(c => [c.data.appId, true])
|
||||||
|
);
|
||||||
|
|
||||||
|
this.globalApps = appsResponse.apps.map(app => ({
|
||||||
|
id: app.id,
|
||||||
|
name: app.data.name,
|
||||||
|
description: app.data.description,
|
||||||
|
logoUrl: app.data.logoUrl,
|
||||||
|
appUrl: app.data.appUrl,
|
||||||
|
category: app.data.category,
|
||||||
|
isConnected: connectionMap.has(app.id),
|
||||||
|
}));
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading apps:', error);
|
||||||
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async toggleAppConnection(appId: string, isConnected: boolean) {
|
||||||
|
try {
|
||||||
|
// Get JWT from IdpState
|
||||||
|
const idpState = await IdpState.getSingletonInstance();
|
||||||
|
const jwt = await idpState.idpClient.getJwt();
|
||||||
|
|
||||||
|
const typedRequest = new plugins.deesDomtools.plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ToggleAppConnection>(
|
||||||
|
'/typedrequest',
|
||||||
|
'toggleAppConnection'
|
||||||
|
);
|
||||||
|
|
||||||
|
await typedRequest.fire({
|
||||||
|
jwt,
|
||||||
|
organizationId: this.organizationId,
|
||||||
|
appId: appId,
|
||||||
|
action: isConnected ? 'connect' : 'disconnect',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update local state
|
||||||
|
this.globalApps = this.globalApps.map(app =>
|
||||||
|
app.id === appId ? { ...app, isConnected } : app
|
||||||
|
);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error toggling app connection:', error);
|
||||||
|
// Revert the checkbox on error
|
||||||
|
await this.loadApps();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
export * from './adminview.js';
|
||||||
|
export * from './appsview.js';
|
||||||
export * from './baseview.js';
|
export * from './baseview.js';
|
||||||
export * from './orgsetup.js';
|
export * from './orgsetup.js';
|
||||||
export * from './paddlesetup.js';
|
export * from './paddlesetup.js';
|
||||||
|
|||||||
@@ -54,26 +54,24 @@ export class PaddleSetupView extends DeesElement {
|
|||||||
Paddle takes care of tax compliance for us. This allows us to sell our products world wide
|
Paddle takes care of tax compliance for us. This allows us to sell our products world wide
|
||||||
while Paddle makes sure any sales are in compliance with local laws.
|
while Paddle makes sure any sales are in compliance with local laws.
|
||||||
</p>
|
</p>
|
||||||
<dees-button>Let's do it!</dees-button>
|
<dees-button @clicked=${() => this.openPaddle()}>Let's do it!</dees-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
public async openPaddle() {
|
||||||
*
|
|
||||||
*/
|
|
||||||
public async firstUpdated() {
|
|
||||||
await this.domtoolsPromise;
|
await this.domtoolsPromise;
|
||||||
const paddleButton = this.shadowRoot.querySelector('dees-button');
|
const paddleButton = this.shadowRoot.querySelector('dees-button');
|
||||||
const openPaddle = async () => {
|
|
||||||
await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
|
await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
|
||||||
globalThis.Paddle.Setup({
|
globalThis.Paddle.Setup({
|
||||||
vendor: 30954,
|
vendor: 30954,
|
||||||
eventCallback: async (dataArg) => {
|
eventCallback: async (dataArg: any) => {
|
||||||
// The data.event will specify the event type
|
// The data.event will specify the event type
|
||||||
if (dataArg.event === 'Checkout.Complete') {
|
if (dataArg.event === 'Checkout.Complete') {
|
||||||
const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
|
const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
|
||||||
const paddleIframe = document.body.querySelector('iframe');
|
const paddleIframe = document.body.querySelector('iframe');
|
||||||
|
if (paddleIframe) {
|
||||||
document.body.removeChild(paddleIframe);
|
document.body.removeChild(paddleIframe);
|
||||||
|
}
|
||||||
paddleButton.status = 'pending';
|
paddleButton.status = 'pending';
|
||||||
paddleButton.text = 'Processing...';
|
paddleButton.text = 'Processing...';
|
||||||
await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
|
await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
|
||||||
@@ -86,9 +84,5 @@ export class PaddleSetupView extends DeesElement {
|
|||||||
product: 561076,
|
product: 561076,
|
||||||
email: 'phil@kunz.io',
|
email: 'phil@kunz.io',
|
||||||
});
|
});
|
||||||
};
|
|
||||||
paddleButton.addEventListener('clicked', async () => {
|
|
||||||
openPaddle();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -100,8 +100,12 @@ export class SubscriptionView extends DeesElement {
|
|||||||
|
|
||||||
<h3>Paddle</h3>
|
<h3>Paddle</h3>
|
||||||
<dees-button @click=${async () => {
|
<dees-button @click=${async () => {
|
||||||
await this.domtoolsPromise;
|
// Extract org slug from current URL: /account/org/{orgSlug}/billing
|
||||||
this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
|
const pathParts = window.location.pathname.split('/');
|
||||||
|
const orgSlug = pathParts[3];
|
||||||
|
// Use parent's subrouter for proper navigation within account section
|
||||||
|
const parentElement = (this.getRootNode() as any).host;
|
||||||
|
parentElement.subrouter.pushUrl(`/org/${orgSlug}/paddlesetup`);
|
||||||
}}>Set up Paddle.com</dees-button>
|
}}>Set up Paddle.com</dees-button>
|
||||||
|
|
||||||
<h3>Enterprise Billing</h3>
|
<h3>Enterprise Billing</h3>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ declare global {
|
|||||||
@customElement('idp-transfermanager')
|
@customElement('idp-transfermanager')
|
||||||
export class IdpTransfermanager extends DeesElement {
|
export class IdpTransfermanager extends DeesElement {
|
||||||
|
|
||||||
public appData: plugins.idpInterfaces.data.IApp;
|
public appData: plugins.idpInterfaces.data.IAppLegacy;
|
||||||
|
|
||||||
public static styles = [
|
public static styles = [
|
||||||
cssManager.defaultStyles,
|
cssManager.defaultStyles,
|
||||||
|
|||||||
@@ -46,6 +46,11 @@ export const getOrganizationsAction = accountState.createAction<void>(
|
|||||||
const response = await idpState.idpClient.getRolesAndOrganizations();
|
const response = await idpState.idpClient.getRolesAndOrganizations();
|
||||||
currentState.organizations = response.organizations;
|
currentState.organizations = response.organizations;
|
||||||
currentState.roles = response.roles;
|
currentState.roles = response.roles;
|
||||||
|
// Also fetch user data for admin checks
|
||||||
|
const whoIsResponse = await idpState.idpClient.whoIs().catch(() => null);
|
||||||
|
if (whoIsResponse?.user) {
|
||||||
|
currentState.user = whoIsResponse.user;
|
||||||
|
}
|
||||||
return currentState;
|
return currentState;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user