5 Commits

Author SHA1 Message Date
jkunz cc040e5088 v1.7.0
Docker (tags) / security (push) Failing after 0s
Docker (tags) / test (push) Has been skipped
Docker (tags) / release (push) Has been skipped
Docker (tags) / metadata (push) Has been skipped
2025-12-01 09:44:37 +00:00
jkunz af0c24f7ca feat(admin): Add global admin functionality: backend admin APIs, model fields and UI integration 2025-12-01 09:44:37 +00:00
jkunz fd089b2cee v1.6.0
Docker (tags) / security (push) Failing after 0s
Docker (tags) / test (push) Has been skipped
Docker (tags) / release (push) Has been skipped
Docker (tags) / metadata (push) Has been skipped
2025-12-01 09:18:48 +00:00
jkunz 6b04c529da feat(apps): Add Apps subsystem: App and AppConnection models, managers, typed request handlers, web UI routes and documentation 2025-12-01 09:18:48 +00:00
jkunz f54588e877 update paddle view nav 2025-12-01 04:44:47 +00:00
36 changed files with 2689 additions and 53 deletions
+24
View File
@@ -1,5 +1,29 @@
# 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)
Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@idp.global/idp.global",
"version": "1.5.0",
"version": "1.7.0",
"description": "An identity provider software managing user authentications, registrations, and sessions.",
"main": "dist_ts/index.js",
"typings": "dist_ts/index.d.ts",
+11 -6
View File
@@ -7,9 +7,9 @@ This directory contains user stories for the idp.global Identity Provider platfo
```
stories/
├── end-user/ # Stories for regular users (8)
├── organization-owner/ # Stories for organization admins (8)
├── developer/ # Stories for API/SDK consumers (7)
└── admin/ # Stories for platform administrators (7)
├── organization-owner/ # Stories for organization admins (11)
├── developer/ # Stories for API/SDK consumers (8)
└── admin/ # Stories for platform administrators (8)
```
## Story Index
@@ -37,6 +37,9 @@ stories/
| 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-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)
| ID | Title | Priority | Source |
@@ -48,6 +51,7 @@ stories/
| 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-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)
| ID | Title | Priority | Source |
@@ -59,15 +63,16 @@ stories/
| 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-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 | Count | Stories |
|----------|-------|---------|
| 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 |
| 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 |
| Low | 5 | EU-007, EU-008, DEV-006, ADM-006 |
| 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 | 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 | 6 | EU-007, EU-008, DEV-006, DEV-008, ADM-006 |
## 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 -3
View File
@@ -19,10 +19,26 @@ As a developer, I want to properly register my application with a unique App ID
## Technical Notes
- Current client has `id: ''` placeholder (TODO in code)
- Need Application model in database
- App credentials similar to OAuth client credentials
- App ID is now part of the unified Apps model (`IApp` discriminated union)
- 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
- 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
- `ts_idpclient/classes.idpclient.ts:30` - `id: '', // TODO`
+26 -3
View File
@@ -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
## Technical Notes
- OAuth keywords in package.json suggest this is planned
- Implement OAuth 2.0 authorization server endpoints
- OAuth/OIDC client registration is now part of the Apps system
- **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
- Consider OpenID Connect for identity layer
- 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
- 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
+1 -1
View File
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@idp.global/idp.global',
version: '1.5.0',
version: '1.7.0',
description: 'An identity provider software managing user authentications, registrations, and sessions.'
}
+40
View File
@@ -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';
}
}
+41
View File
@@ -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;
}
}
+315
View File
@@ -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();
}
}
}
}
+4
View File
@@ -13,6 +13,8 @@ import { ReceptionHousekeeping } from './classes.housekeeping.js';
import { OrganizationManager } from './classes.organizationmanager.js';
import { RoleManager } from './classes.rolemanager.js';
import { BillingPlanManager } from './classes.billingplanmanager.js';
import { AppManager } from './classes.appmanager.js';
import { AppConnectionManager } from './classes.appconnectionmanager.js';
export interface IReceptionOptions {
/**
@@ -41,6 +43,8 @@ export class Reception {
public organizationmanager = new OrganizationManager(this);
public roleManager = new RoleManager(this);
public billingPlanManager = new BillingPlanManager(this);
public appManager = new AppManager(this);
public appConnectionManager = new AppConnectionManager(this);
housekeeping = new ReceptionHousekeeping(this);
constructor(public options: IReceptionOptions) {
+1
View File
@@ -51,6 +51,7 @@ export class UserManager {
connectedOrgs: user.data.connectedOrgs,
status: null,
password: null,
isGlobalAdmin: user.data.isGlobalAdmin,
} as plugins.idpInterfaces.data.IUser['data']
}
}
+3 -3
View File
@@ -11,12 +11,12 @@ export class IdpClient {
// INSTANCE PUBLIC
public appData: plugins.idpInterfaces.data.IApp;
public appData: plugins.idpInterfaces.data.IAppLegacy;
public rolesReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
public organizationsReplaySubject = new plugins.smartrx.rxjs.ReplaySubject(1);
public parsedReceptionUrl: plugins.smarturl.Smarturl;
constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IApp) {
constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IAppLegacy) {
if (receptionBaseUrlArg.endsWith('/')) {
receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
}
@@ -146,7 +146,7 @@ export class IdpClient {
/**
* 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 extractedJwt = await this.helpers.extractDataFromJwtString(jwt);
const getTransferToken =
+1
View File
@@ -1,4 +1,5 @@
export * from './loint-reception.app.js';
export * from './loint-reception.appconnection.js';
export * from './loint-reception.billingplan.js';
export * from './loint-reception.device.js';
export * from './loint-reception.jwt.js';
+87 -1
View File
@@ -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
*/
@@ -11,3 +87,13 @@ export interface IApp {
logoUrl: 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
*/
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;
};
}
+2
View File
@@ -1,4 +1,6 @@
export * from './loint-reception.admin.js';
export * from './loint-reception.apitoken.js';
export * from './loint-reception.app.js';
export * from './loint-reception.authorization.js';
export * from './loint-reception.billingplan.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: {
transferToken?: string;
refreshToken?: string;
appData: data.IApp;
appData: data.IAppLegacy;
};
response: {
refreshToken?: string;
+1 -1
View File
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@idp.global/idp.global',
version: '1.5.0',
version: '1.7.0',
description: 'An identity provider software managing user authentications, registrations, and sessions.'
}
+30
View File
@@ -129,6 +129,36 @@ export class IdpAccountContent extends DeesElement {
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.registerGarbageFunction(async () => {
+47 -2
View File
@@ -6,6 +6,7 @@ import {
cssManager,
unsafeCSS,
css,
state,
type TemplateResult,
} from '@design.estate/dees-element';
@@ -24,6 +25,9 @@ declare global {
@customElement('lele-accountnavigation')
export class LeleAccountNavigation extends DeesElement {
@state()
accessor isGlobalAdmin: boolean = false;
constructor() {
super();
}
@@ -214,7 +218,13 @@ export class LeleAccountNavigation extends DeesElement {
<div
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>
Apps
@@ -235,17 +245,45 @@ export class LeleAccountNavigation extends DeesElement {
</div>
<div
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>
Billing
</div>
${this.renderAdminLink()}
</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() {
const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
@@ -274,5 +312,12 @@ export class LeleAccountNavigation extends DeesElement {
.subscribe((selectedOrgArg) => {
deesInputDropdown.selectedOption = selectedOrgArg;
});
// Check if user is global admin
states.accountState
.select((stateArg) => stateArg.user)
.subscribe((user) => {
this.isGlobalAdmin = user?.data?.isGlobalAdmin ?? false;
});
}
}
+759
View File
@@ -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');
}
}
}
+450
View File
@@ -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();
}
}
}
+2
View File
@@ -1,3 +1,5 @@
export * from './adminview.js';
export * from './appsview.js';
export * from './baseview.js';
export * from './orgsetup.js';
export * from './paddlesetup.js';
+5 -11
View File
@@ -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
while Paddle makes sure any sales are in compliance with local laws.
</p>
<dees-button>Let's do it!</dees-button>
<dees-button @clicked=${() => this.openPaddle()}>Let's do it!</dees-button>
`;
}
/**
*
*/
public async firstUpdated() {
public async openPaddle() {
await this.domtoolsPromise;
const paddleButton = this.shadowRoot.querySelector('dees-button');
const openPaddle = async () => {
await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
globalThis.Paddle.Setup({
vendor: 30954,
eventCallback: async (dataArg) => {
eventCallback: async (dataArg: any) => {
// The data.event will specify the event type
if (dataArg.event === 'Checkout.Complete') {
const data: plugins.idpInterfaces.data.IPaddleCheckoutData = dataArg.eventData;
const paddleIframe = document.body.querySelector('iframe');
if (paddleIframe) {
document.body.removeChild(paddleIframe);
}
paddleButton.status = 'pending';
paddleButton.text = 'Processing...';
await state.accountState.dispatchAction(state.updatePaddleCheckoutId, data.checkout.id);
@@ -86,9 +84,5 @@ export class PaddleSetupView extends DeesElement {
product: 561076,
email: 'phil@kunz.io',
});
};
paddleButton.addEventListener('clicked', async () => {
openPaddle();
});
}
}
@@ -100,8 +100,12 @@ export class SubscriptionView extends DeesElement {
<h3>Paddle</h3>
<dees-button @click=${async () => {
await this.domtoolsPromise;
this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
// Extract org slug from current URL: /account/org/{orgSlug}/billing
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>
<h3>Enterprise Billing</h3>
+1 -1
View File
@@ -21,7 +21,7 @@ declare global {
@customElement('idp-transfermanager')
export class IdpTransfermanager extends DeesElement {
public appData: plugins.idpInterfaces.data.IApp;
public appData: plugins.idpInterfaces.data.IAppLegacy;
public static styles = [
cssManager.defaultStyles,
+5
View File
@@ -46,6 +46,11 @@ export const getOrganizationsAction = accountState.createAction<void>(
const response = await idpState.idpClient.getRolesAndOrganizations();
currentState.organizations = response.organizations;
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;
}
);