v1.6.0

feat(apps): Add Apps subsystem: App and AppConnection models, managers, typed request handlers, web UI routes and documentation
update paddle view nav
2025-12-01 09:18:48 +00:00 · 2025-12-01 09:18:48 +00:00 · 2025-12-01 04:44:47 +00:00 · 2025-12-01 04:08:17 +00:00 · 2025-12-01 04:08:17 +00:00 · 2025-12-01 00:10:34 +00:00
99 changed files with 10119 additions and 5198 deletions
@@ -1,5 +1,92 @@
 # Changelog
 ## 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
 - Introduce accountDesignTokens and split shared styles into tokens (accountDesignTokens), cardStyles and typographyStyles while keeping a legacy default export for compatibility
 - Apply new design tokens to account components (content, baseview, subscriptions) and switch background to use CSS variable (--background)
 - Small UI tweaks: smoother transition easing on view container, updated icon for organization entries and adjusted spacing
 - Add placeholder sections for Upcoming Billable Items and Past Invoices in subscriptions view
 - Fix login prompt submit handling by disabling the submit button via its #loginSubmitButton selector and improving button text logic
 ## 2025-04-03 - 1.4.3 - fix(website)
 Update packageManager configuration in package.json and refine view container background styling
 - Add 'packageManager' field in package.json to pin pnpm version
 - Adjust background style in ts_web/views/viewcontainer.ts for improved UI consistency
 ## 2024-12-11 - 1.5.0 - feat(UI)
 Added 'Learn more about idp.global' button
 - Added a new button for learning more about idp.global in the welcome component
 ## 2024-12-11 - 1.5.0 - feat(UI)
 Added 'Learn more about idp.global' button
 - Added a new button for learning more about idp.global in the welcome component
 ## 2024-10-12 - 1.4.2 - fix(UI)
 Improve text rendering in account navigation.
 - Fix for text alignment in the commit info section of the account navigation.
 - Adjusted font settings for better readability.
 ## 2024-10-07 - 1.4.1 - fix(core)
 Bug fixes and UI enhancements
 - Updated packages to resolve compatibility issues.
 - Optimized the transition animations for the center container.
 - Improved the initialization logic for navigating between views.
 - Enhanced UI with better organization selection handling.
 ## 2024-10-07 - 1.4.0 - feat(core)
 Refactored plugin and request handling to use 'idpInterfaces'
 - Switched from using 'lointReception' to 'idpInterfaces' in various TypeScript sources.
 - Updated references to request and data interfaces across multiple modules.
 - Improved account handling with new navigation options.
 ## 2024-10-07 - 1.3.1 - fix(account)
 Fix: updated cleanupViews method to correctly iterate over children.
 - Fixed the iteration over view container children by converting it to an array before removing children. This resolves potential errors due to incorrect for-loop execution on HTMLCollection.
 ## 2024-10-06 - 1.3.0 - feat(account)
 Implement account and organization management features
 - Added account management UI with organization selection
 - Introduced organization creation and selection functionalities
 - Implemented subscription view with Paddle setup integration
 ## 2024-10-04 - 1.2.2 - fix(core)
 Update dependencies and refactor registration process
 - Updated @design.estate/dees-catalog, @design.estate/dees-domtools, and @design.estate/dees-element dependencies to their latest versions.
 - Refactored registration process to improve validation flow.
 - Improved user interface for login and registration prompts.
 - Fixed issues with email and token validation during registration.
 ## 2024-10-04 - 1.2.1 - fix(core)
 Added logging for user email login process and fixed client URL parsing
 - Added info logging when loginWithEmail is requested and when a user is found.
 - Ensured reception client parses the URL correctly in IdpClient and IdpRequests classes.
 - Updated login process flow in idp-logincontainer and idp-loginprompt elements.
 - Improved element loading mechanism with updated state management in viewcontainer.
 ## 2024-10-01 - 1.2.0 - feat(web)
 Improve UI styling and add registration prompt
@@ -31,7 +31,11 @@
        "user data",
        "user sessions"
      ]
-    }
+    },
    "services": [
      "mongodb",
      "minio"
    ]
  },
  "npmci": {
    "npmGlobalTools": [],
@@ -1,6 +1,6 @@
 {
  "name": "@idp.global/idp.global",
-  "version": "1.2.0",
+  "version": "1.6.0",
  "description": "An identity provider software managing user authentications, registrations, and sessions.",
  "main": "dist_ts/index.js",
  "typings": "dist_ts/index.d.ts",
@@ -16,45 +16,45 @@
  "author": "Task Venture Capital GmbH",
  "license": "MIT",
  "dependencies": {
-    "@api.global/typedrequest": "^3.0.32",
+    "@api.global/typedrequest": "^3.1.10",
    "@api.global/typedrequest-interfaces": "^3.0.19",
-    "@api.global/typedserver": "^3.0.51",
+    "@api.global/typedserver": "^3.0.80",
    "@api.global/typedsocket": "^3.0.1",
-    "@consentsoftware_private/catalog": "^1.0.73",
+    "@consent.software/catalog": "^2.0.1",
-    "@design.estate/dees-catalog": "^1.1.8",
+    "@design.estate/dees-catalog": "^2.0.2",
-    "@design.estate/dees-domtools": "^2.0.23",
+    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.0.15",
+    "@design.estate/dees-element": "^2.1.3",
-    "@push.rocks/lik": "^6.0.15",
+    "@push.rocks/lik": "^6.2.2",
-    "@push.rocks/qenv": "^6.0.5",
+    "@push.rocks/qenv": "^6.1.3",
-    "@push.rocks/smartdata": "^5.2.10",
+    "@push.rocks/smartdata": "^7.0.14",
    "@push.rocks/smartdelay": "^3.0.5",
-    "@push.rocks/smarthash": "^3.0.4",
+    "@push.rocks/smarthash": "^3.2.6",
-    "@push.rocks/smartjson": "^5.0.20",
+    "@push.rocks/smartjson": "^5.2.0",
    "@push.rocks/smartjwt": "^2.2.1",
-    "@push.rocks/smartlog": "^3.0.7",
+    "@push.rocks/smartlog": "^3.1.10",
-    "@push.rocks/smartmail": "^1.0.24",
+    "@push.rocks/smartmail": "^2.2.0",
-    "@push.rocks/smartpath": "^5.0.5",
+    "@push.rocks/smartpath": "^6.0.0",
-    "@push.rocks/smartpromise": "^4.0.4",
+    "@push.rocks/smartpromise": "^4.2.3",
-    "@push.rocks/smartrx": "^3.0.7",
+    "@push.rocks/smartrx": "^3.0.10",
-    "@push.rocks/smartstate": "^2.0.0",
+    "@push.rocks/smartstate": "^2.0.27",
-    "@push.rocks/smarttime": "^4.0.8",
+    "@push.rocks/smarttime": "^4.1.1",
    "@push.rocks/smartunique": "^3.0.9",
-    "@push.rocks/smarturl": "^3.0.7",
+    "@push.rocks/smarturl": "^3.1.0",
-    "@push.rocks/taskbuffer": "^3.1.7",
+    "@push.rocks/taskbuffer": "^3.4.0",
    "@push.rocks/webjwt": "^1.0.9",
    "@push.rocks/websetup": "^3.0.15",
    "@push.rocks/webstore": "^2.0.20",
-    "@serve.zone/platformclient": "^1.0.6",
+    "@serve.zone/platformclient": "^1.1.2",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^9.3.0",
-    "@uptime.link/webwidget": "^1.1.2"
+    "@uptime.link/webwidget": "^1.2.4"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.17",
+    "@git.zone/tsbuild": "^3.1.2",
-    "@git.zone/tsbundle": "^2.0.3",
+    "@git.zone/tsbundle": "^2.6.2",
-    "@git.zone/tsrun": "^1.2.8",
+    "@git.zone/tsrun": "^2.0.0",
-    "@git.zone/tswatch": "^2.0.1",
+    "@git.zone/tswatch": "^2.2.1",
    "@push.rocks/projectinfo": "^5.0.1",
-    "@types/node": "^22.7.2"
+    "@types/node": "^24.10.1"
  },
  "private": true,
  "repository": {
@@ -101,5 +101,6 @@
    "API",
    "user data",
    "user sessions"
-  ]
+  ],
  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }
@@ -0,0 +1,91 @@
 # idp.global User Stories
 This directory contains user stories for the idp.global Identity Provider platform, organized by persona.
 ## Directory Structure
 ```
 stories/
 ├── end-user/           # Stories for regular users (8)
 ├── organization-owner/ # Stories for organization admins (11)
 ├── developer/          # Stories for API/SDK consumers (8)
 └── admin/              # Stories for platform administrators (7)
 ```
 ## Story Index
 ### End User (EU)
 | ID | Title | Priority | Source |
 |----|-------|----------|--------|
 | EU-001 | [Multi-Device Login Sessions](end-user/EU-001-multi-device-login.md) | High | TODO |
 | EU-002 | [Complete Password Reset Flow](end-user/EU-002-password-reset.md) | Critical | Incomplete |
 | EU-003 | [View and Manage Logged-in Devices](end-user/EU-003-device-management.md) | Medium | TODO |
 | EU-004 | [Enable Two-Factor Authentication](end-user/EU-004-two-factor-auth.md) | High | New |
 | EU-005 | [Login with Social Providers](end-user/EU-005-social-login.md) | Medium | New |
 | EU-006 | [Delete My Account](end-user/EU-006-account-deletion.md) | Medium | New |
 | EU-007 | [View Login History](end-user/EU-007-session-history.md) | Low | New |
 | EU-008 | [Upload Profile Avatar](end-user/EU-008-profile-avatar.md) | Low | New |
 ### Organization Owner (ORG)
 | ID | Title | Priority | Source |
 |----|-------|----------|--------|
 | ORG-001 | [Sync Billing Plans with Users](organization-owner/ORG-001-billing-sync.md) | High | TODO |
 | ORG-002 | [Invite and Manage Team Members](organization-owner/ORG-002-member-management.md) | Critical | New |
 | ORG-003 | [Assign Roles to Members](organization-owner/ORG-003-role-assignment.md) | High | Partial |
 | ORG-004 | [Customize Organization Branding](organization-owner/ORG-004-org-branding.md) | Medium | New |
 | ORG-005 | [View Organization Usage Analytics](organization-owner/ORG-005-usage-analytics.md) | Medium | 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-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 |
 |----|-------|----------|--------|
 | DEV-001 | [Create and Manage API Tokens](developer/DEV-001-api-token-management.md) | High | Partial |
 | DEV-002 | [Comprehensive SDK Documentation](developer/DEV-002-sdk-documentation.md) | High | New |
 | DEV-003 | [Configure Webhook Notifications](developer/DEV-003-webhook-events.md) | Medium | New |
 | DEV-004 | [Proper App ID Initialization](developer/DEV-004-app-id-setup.md) | High | TODO |
 | 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 |
 |----|-------|----------|--------|
 | ADM-001 | [Secure JWT Endpoints with Backend Token](admin/ADM-001-backend-token-security.md) | Critical | TODO |
 | ADM-002 | [Suspend and Delete Users](admin/ADM-002-user-suspension.md) | High | Partial |
 | ADM-003 | [Platform-wide Audit Logging](admin/ADM-003-global-audit-log.md) | High | New |
 | ADM-004 | [Customize Email Templates](admin/ADM-004-email-templates.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-007 | [Manage JWT Blocklist](admin/ADM-007-blocklist-management.md) | Medium | Enhance |
 ## Priority Summary
 | Priority | Count | Stories |
 |----------|-------|---------|
 | Critical | 3 | EU-002, ORG-002, ADM-001 |
 | High | 11 | EU-001, EU-004, ORG-001, ORG-003, ORG-006, ORG-009, DEV-001, DEV-002, DEV-004, ADM-002, ADM-003 |
 | 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
 - **TODO**: Derived from TODO comments in codebase
 - **Incomplete**: Feature exists but implementation is incomplete
 - **Partial**: Infrastructure exists, needs completion
 - **Enhance**: Feature works, could be improved
 - **New**: New feature not currently in codebase
 ## Related Code References
 Stories derived from code TODOs reference these files:
 - `ts/reception/classes.jwt.ts:39`
 - `ts/reception/classes.jwtmanager.ts:40,52`
 - `ts/reception/classes.loginsessionmanager.ts:229-238,256`
 - `ts/reception/classes.billingplan.ts:16`
 - `ts_idpclient/classes.idpclient.ts:30`
@@ -0,0 +1,28 @@
 # Secure JWT Endpoints with Backend Token
 **ID:** ADM-001
 **Priority:** Critical
 **Status:** Planned
 ## User Story
 As a platform administrator, I want JWT-related endpoints to be secured with backend token validation so that only authorized services can access sensitive security operations.
 ## Acceptance Criteria
 - [ ] Public key endpoint requires valid backend token
 - [ ] JWT blocklist endpoint requires valid backend token
 - [ ] Backend tokens are securely generated and distributed
 - [ ] Token validation is performed on every request
 - [ ] Invalid/missing token returns 401 Unauthorized
 - [ ] Tokens can be rotated without service interruption
 - [ ] Audit log for all backend token usage
 ## Technical Notes
 - Two TODOs exist for backend token validation in JwtManager
 - `getPublicKeyForValidation` and `pushOrGetJwtIdBlocklist` need protection
 - Backend token should be separate from user JWT
 - Consider service-to-service authentication pattern
 - Environment variable for backend token configuration
 ## Related TODOs
 - `ts/reception/classes.jwtmanager.ts:40` - `// TODO control backend token`
 - `ts/reception/classes.jwtmanager.ts:52` - `// TODO control backend token`
@@ -0,0 +1,28 @@
 # Suspend and Delete Users
 **ID:** ADM-002
 **Priority:** High
 **Status:** Planned
 ## User Story
 As a platform administrator, I want to suspend and delete user accounts so that I can handle policy violations, security incidents, and account removal requests.
 ## Acceptance Criteria
 - [ ] Admin can search for users by email, name, or ID
 - [ ] Admin can suspend a user account with reason
 - [ ] Suspended users cannot log in
 - [ ] Suspended users' active sessions are invalidated
 - [ ] Admin can unsuspend accounts
 - [ ] Admin can permanently delete suspended accounts
 - [ ] Deletion removes all user data (GDPR compliance)
 - [ ] Audit log for all suspension/deletion actions
 ## Technical Notes
 - `suspendUser` and `deleteSuspendedUser` endpoints exist
 - Need admin UI for user management
 - Consider soft delete with retention period
 - Handle organization ownership before deletion
 - Email notification to user on suspension
 ## Related TODOs
 - Partial implementation in UserManager
@@ -0,0 +1,28 @@
 # Platform-wide Audit Logging
 **ID:** ADM-003
 **Priority:** High
 **Status:** Planned
 ## User Story
 As a platform administrator, I want to view platform-wide audit logs so that I can monitor security events, investigate incidents, and demonstrate compliance.
 ## Acceptance Criteria
 - [ ] Log all authentication events (login, logout, failed attempts)
 - [ ] Log all administrative actions (user changes, config changes)
 - [ ] Log all security events (password changes, 2FA changes, token revocations)
 - [ ] Searchable log interface with filters
 - [ ] Real-time log streaming for monitoring
 - [ ] Export logs in standard formats (JSON, CSV, CEF)
 - [ ] Log retention configuration
 - [ ] Integration with external SIEM systems
 ## Technical Notes
 - Separate from organization audit logs (ORG-007)
 - Platform-wide view across all organizations
 - Consider ELK stack or similar for log aggregation
 - Structured logging format for parsing
 - Compliance: SOC 2, ISO 27001, GDPR audit requirements
 ## Related TODOs
 - New feature - platform security requirement
@@ -0,0 +1,28 @@
 # Customize Email Templates
 **ID:** ADM-004
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a platform administrator, I want to customize email templates so that all system emails match our branding and communication style.
 ## Acceptance Criteria
 - [ ] Edit templates for: registration, password reset, login verification, welcome
 - [ ] Rich text editor for template content
 - [ ] Variable placeholders ({{userName}}, {{resetLink}}, etc.)
 - [ ] Preview emails before saving
 - [ ] Send test emails to verify
 - [ ] Localization support for multiple languages
 - [ ] Reset to default template option
 - [ ] Version history for templates
 ## Technical Notes
 - ReceptionMailer handles email sending
 - Currently uses hardcoded or simple templates
 - Consider template engine (Handlebars, Mjml for responsive)
 - Store templates in database for dynamic updates
 - Support HTML and plain text versions
 ## Related TODOs
 - New feature - enhance ReceptionMailer
@@ -0,0 +1,28 @@
 # Security Monitoring Dashboard
 **ID:** ADM-005
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a platform administrator, I want a security monitoring dashboard so that I can quickly identify and respond to potential security threats.
 ## Acceptance Criteria
 - [ ] Real-time metrics: active sessions, login rate, failure rate
 - [ ] Anomaly detection alerts (unusual login patterns)
 - [ ] Geographic map of login locations
 - [ ] Failed login attempt heatmap
 - [ ] Blocked JWT/token statistics
 - [ ] Suspicious activity indicators
 - [ ] Configurable alert thresholds
 - [ ] Integration with alerting systems (PagerDuty, Slack)
 ## Technical Notes
 - Aggregate metrics from login events
 - Real-time updates via WebSocket
 - Consider time-series database for metrics
 - Machine learning for anomaly detection (future)
 - Alert rules engine for custom notifications
 ## Related TODOs
 - New feature - security operations
@@ -0,0 +1,28 @@
 # Impersonate Users for Support
 **ID:** ADM-006
 **Priority:** Low
 **Status:** Planned
 ## User Story
 As a platform administrator, I want to temporarily impersonate a user so that I can troubleshoot issues they're experiencing without asking for their credentials.
 ## Acceptance Criteria
 - [ ] Admin can initiate impersonation session for any user
 - [ ] Impersonation requires confirmation and reason
 - [ ] Clear visual indicator when in impersonation mode
 - [ ] Admin can end impersonation and return to their session
 - [ ] All actions during impersonation are logged
 - [ ] User is optionally notified of impersonation
 - [ ] Impersonation sessions have time limit
 - [ ] Cannot impersonate other admins without super-admin
 ## Technical Notes
 - Special JWT claim to indicate impersonation
 - Original admin identity preserved in token
 - Audit log must capture both admin and impersonated user
 - Consider "read-only" impersonation mode
 - Security review required before implementation
 ## Related TODOs
 - New feature - support tooling
@@ -0,0 +1,28 @@
 # Manage JWT Blocklist
 **ID:** ADM-007
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a platform administrator, I want to view and manage the JWT blocklist so that I can revoke tokens during security incidents and verify that revocations are working.
 ## Acceptance Criteria
 - [ ] View all blocked JWT IDs with metadata
 - [ ] Search blocklist by JWT ID or user
 - [ ] Manually add JWTs to blocklist
 - [ ] View reason for each blocklist entry
 - [ ] Blocklist entries show expiration (when they can be removed)
 - [ ] Bulk revoke all tokens for a user
 - [ ] Bulk revoke all tokens for an organization
 - [ ] Automatic cleanup of expired blocklist entries
 ## Technical Notes
 - JwtManager has `blockedJwtIdList` infrastructure
 - `pushOrGetJwtIdBlocklist` endpoint exists
 - Need admin UI for blocklist management
 - ReceptionHousekeeping could handle cleanup
 - Consider Redis for high-performance blocklist checks
 ## Related TODOs
 - Enhancement to existing blocklist infrastructure
@@ -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
@@ -0,0 +1,28 @@
 # Create and Manage API Tokens
 **ID:** DEV-001
 **Priority:** High
 **Status:** Planned
 ## User Story
 As a developer, I want to create and manage API tokens so that I can integrate my applications with the identity provider programmatically.
 ## Acceptance Criteria
 - [ ] Developer can create new API tokens with custom names
 - [ ] Token is shown once at creation (cannot be retrieved later)
 - [ ] Developer can set token expiration (or no expiration)
 - [ ] Developer can set token scopes/permissions
 - [ ] List all tokens with creation date and last used
 - [ ] Revoke individual tokens
 - [ ] Revoke all tokens at once
 - [ ] Rate limiting information shown per token
 ## Technical Notes
 - ApiTokenManager exists with basic infrastructure
 - `loginWithApiToken` endpoint available
 - Need UI for token management (currently backend only)
 - Tokens should be hashed before storage (show once)
 - Consider token prefixes for easy identification (idp_...)
 ## Related TODOs
 - Partial implementation in ApiTokenManager
@@ -0,0 +1,28 @@
 # Comprehensive SDK Documentation
 **ID:** DEV-002
 **Priority:** High
 **Status:** Planned
 ## User Story
 As a developer, I want comprehensive documentation for the IDP client SDK so that I can integrate authentication into my applications quickly and correctly.
 ## Acceptance Criteria
 - [ ] Getting started guide with installation and setup
 - [ ] Authentication flow explanations with diagrams
 - [ ] API reference for all client methods
 - [ ] Code examples for common use cases
 - [ ] TypeScript type definitions documented
 - [ ] Error handling guide with error codes
 - [ ] Migration guides for version upgrades
 - [ ] Interactive API playground/sandbox
 ## Technical Notes
 - `ts_idpclient/` contains the client SDK
 - README.md has basic usage but needs expansion
 - Generate API docs from TypeScript using TypeDoc
 - Host documentation on dedicated site or GitHub pages
 - Consider OpenAPI/Swagger spec for REST endpoints
 ## Related TODOs
 - New feature - documentation enhancement
@@ -0,0 +1,28 @@
 # Configure Webhook Notifications
 **ID:** DEV-003
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a developer, I want to configure webhooks so that my application is notified in real-time when authentication events occur.
 ## Acceptance Criteria
 - [ ] Register webhook endpoints with URL and secret
 - [ ] Select which events to subscribe to
 - [ ] Events include: user.created, user.login, user.logout, org.member.added, etc.
 - [ ] Webhook payloads include event type, timestamp, and relevant data
 - [ ] Signature verification using shared secret (HMAC)
 - [ ] Retry logic for failed deliveries (exponential backoff)
 - [ ] Webhook delivery logs with success/failure status
 - [ ] Test webhook button to send sample event
 ## Technical Notes
 - Create Webhook model with URL, secret, events, and status
 - Queue webhook deliveries for reliability (consider bull/bullmq)
 - Sign payloads with HMAC-SHA256
 - Timeout for webhook delivery (10 seconds)
 - Dashboard for delivery monitoring and debugging
 ## Related TODOs
 - New feature - event-driven integration
@@ -0,0 +1,44 @@
 # Proper App ID Initialization
 **ID:** DEV-004
 **Priority:** High
 **Status:** Planned
 ## User Story
 As a developer, I want to properly register my application with a unique App ID so that the identity provider can identify and configure my app correctly.
 ## Acceptance Criteria
 - [ ] Developer can register new applications
 - [ ] Each app gets unique App ID and App Secret
 - [ ] Configure allowed redirect URIs per app
 - [ ] Configure allowed origins (CORS) per app
 - [ ] App-specific settings (token expiry, etc.)
 - [ ] View app analytics (logins per app)
 - [ ] Regenerate app secret if compromised
 - [ ] Delete/deactivate applications
 ## Technical Notes
 - Current client has `id: ''` placeholder (TODO in code)
 - 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/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`
@@ -0,0 +1,51 @@
 # Register OAuth Client App
 **ID:** DEV-005
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a developer, I want to register my application as an OAuth client so that users can authorize my app to access their data using standard OAuth 2.0 flows.
 ## Acceptance Criteria
 - [ ] Register OAuth 2.0 client application
 - [ ] Support Authorization Code flow
 - [ ] Support PKCE for public clients (mobile/SPA)
 - [ ] Configure allowed scopes per client
 - [ ] Consent screen customization
 - [ ] Token endpoint for code exchange
 - [ ] Refresh token support
 - [ ] Client credentials flow for server-to-server
 ## Technical Notes
 - 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
 - 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,27 @@
 # Understand API Rate Limits
 **ID:** DEV-006
 **Priority:** Low
 **Status:** Planned
 ## User Story
 As a developer, I want to understand and monitor API rate limits so that I can build applications that respect limits and handle throttling gracefully.
 ## Acceptance Criteria
 - [ ] Clear documentation of rate limits per endpoint
 - [ ] Rate limit headers in API responses (X-RateLimit-*)
 - [ ] Different limits for different API token tiers
 - [ ] Dashboard showing current usage vs limits
 - [ ] Alerts when approaching rate limits
 - [ ] Retry-After header when rate limited
 - [ ] Ability to request limit increase
 ## Technical Notes
 - Implement rate limiting middleware (consider express-rate-limit)
 - Store rate limit counters in Redis for distributed systems
 - Different limits: login attempts, API calls, token operations
 - Consider sliding window algorithm for smooth limits
 - 429 Too Many Requests response with helpful error message
 ## Related TODOs
 - New feature - API management
@@ -0,0 +1,27 @@
 # Validate JWTs in My Application
 **ID:** DEV-007
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As a developer, I want clear guidance and tools to validate JWTs issued by the identity provider so that I can securely authenticate users in my backend services.
 ## Acceptance Criteria
 - [ ] Public key endpoint for JWT validation (JWKS format)
 - [ ] Documentation explaining JWT structure and claims
 - [ ] Example code for validation in multiple languages
 - [ ] Key rotation with multiple valid keys during transition
 - [ ] Token introspection endpoint for server-side validation
 - [ ] Clear error messages for invalid tokens
 - [ ] Guidance on caching public keys
 ## Technical Notes
 - `getPublicKeyForValidation` endpoint exists
 - Consider standard JWKS endpoint (/.well-known/jwks.json)
 - OpenID Connect discovery endpoint would help
 - JWTs contain: sub, email, roles, orgId, exp, iat
 - Document all custom claims in JWT
 ## Related TODOs
 - Enhancement to existing JWT infrastructure
@@ -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,24 @@
 # Multi-Device Login Sessions
 **ID:** EU-001
 **Priority:** High
 **Status:** Planned
 ## User Story
 As an end user, I want to stay logged in on multiple devices simultaneously so that I can access my account from my phone, tablet, and computer without being logged out elsewhere.
 ## Acceptance Criteria
 - [ ] User can have active sessions on multiple devices at the same time
 - [ ] Each device gets its own refresh token
 - [ ] Logging out on one device does not affect sessions on other devices
 - [ ] User can see all active sessions in account settings
 - [ ] User can revoke individual sessions remotely
 ## Technical Notes
 - Currently only one refresh token per login session is supported
 - Need to refactor `LoginSession` to support multiple refresh tokens
 - Consider storing device metadata (browser, OS, last active time) with each token
 - JWT blocklist needs to handle individual token revocation
 ## Related TODOs
 - `ts/reception/classes.jwt.ts:39` - `// TODO: handle multiple refresh tokens`
@@ -0,0 +1,26 @@
 # Complete Password Reset Flow
 **ID:** EU-002
 **Priority:** Critical
 **Status:** Planned
 ## User Story
 As an end user, I want to reset my password when I forget it so that I can regain access to my account securely.
 ## Acceptance Criteria
 - [ ] User can request a password reset via email
 - [ ] Reset email contains a secure, time-limited token link
 - [ ] Clicking the link opens a form to set a new password
 - [ ] Password must meet security requirements (length, complexity)
 - [ ] Old password is invalidated after successful reset
 - [ ] User receives confirmation email after password change
 - [ ] All existing sessions are invalidated after password reset
 ## Technical Notes
 - `resetPassword` handler exists but `setNewPassword` is a stub (returns `{ status: 'ok' }` without implementation)
 - Need to implement actual password update logic
 - Should use `ReceptionMailer` for email sending
 - Consider rate limiting reset requests to prevent abuse
 ## Related TODOs
 - `ts/reception/classes.loginsessionmanager.ts:229-238` - `setNewPassword` handler is incomplete
@@ -0,0 +1,25 @@
 # View and Manage Logged-in Devices
 **ID:** EU-003
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an end user, I want to view all devices where I'm logged in and remotely log out of specific devices so that I can maintain control over my account security.
 ## Acceptance Criteria
 - [ ] User can view a list of all active sessions/devices
 - [ ] Each device entry shows: device type, browser, location (approximate), last activity
 - [ ] User can name/label devices for easy identification
 - [ ] User can log out of any individual device remotely
 - [ ] User can log out of all devices except the current one
 - [ ] User receives notification when a new device logs in
 ## Technical Notes
 - Device ID tracking infrastructure exists but is blocked by JWT handling issues
 - Need to complete `attachDeviceId` handler (currently returns `ok: false`)
 - Store device fingerprint, user agent, IP-based geolocation
 - Integrate with multi-refresh-token system (EU-001)
 ## Related TODOs
 - `ts/reception/classes.loginsessionmanager.ts:256` - `// TODO: Blocked by proper JWT handling`
@@ -0,0 +1,27 @@
 # Enable Two-Factor Authentication
 **ID:** EU-004
 **Priority:** High
 **Status:** Planned
 ## User Story
 As an end user, I want to enable two-factor authentication on my account so that my account is protected even if my password is compromised.
 ## Acceptance Criteria
 - [ ] User can enable 2FA from account settings
 - [ ] Support for TOTP apps (Google Authenticator, Authy, etc.)
 - [ ] Backup codes are generated and shown once during setup
 - [ ] User must verify 2FA code during setup to confirm it works
 - [ ] Login flow prompts for 2FA code when enabled
 - [ ] User can disable 2FA (requires current 2FA code)
 - [ ] Account recovery option if 2FA device is lost
 ## Technical Notes
 - Mobile verification infrastructure exists (SMS OTP in registration)
 - Can leverage existing `smarttwilio` integration for SMS-based 2FA
 - TOTP implementation needs `otplib` or similar library
 - Store encrypted TOTP secret in User model
 - Consider supporting multiple 2FA methods (TOTP, SMS, security keys)
 ## Related TODOs
 - New feature - no existing TODO
@@ -0,0 +1,28 @@
 # Login with Social Providers
 **ID:** EU-005
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an end user, I want to log in using my existing Google, GitHub, or Microsoft account so that I don't have to remember another password.
 ## Acceptance Criteria
 - [ ] User can sign in with Google
 - [ ] User can sign in with GitHub
 - [ ] User can sign in with Microsoft
 - [ ] First-time social login creates a new account automatically
 - [ ] Social login can be linked to existing account
 - [ ] User can unlink social providers from settings
 - [ ] Profile data (name, email, avatar) is imported from provider
 - [ ] User can still set a password for email/password login
 ## Technical Notes
 - Package.json keywords mention OAuth - infrastructure may be partially planned
 - Implement OAuth 2.0 / OpenID Connect flows
 - Store provider tokens securely for API access if needed
 - Handle email conflicts (social email matches existing account)
 - Consider using passport.js or similar for provider abstraction
 ## Related TODOs
 - New feature - OAuth mentioned in package.json keywords but not implemented
@@ -0,0 +1,28 @@
 # Delete My Account
 **ID:** EU-006
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an end user, I want to permanently delete my account and all associated data so that I can exercise my right to be forgotten (GDPR compliance).
 ## Acceptance Criteria
 - [ ] User can request account deletion from settings
 - [ ] Deletion requires password confirmation or 2FA
 - [ ] User sees summary of what will be deleted
 - [ ] Grace period (e.g., 30 days) before permanent deletion
 - [ ] User receives email confirmation of deletion request
 - [ ] User can cancel deletion during grace period
 - [ ] All personal data is removed after grace period
 - [ ] User is removed from all organizations they belong to
 ## Technical Notes
 - `suspendUser` and `deleteSuspendedUser` endpoints exist in admin context
 - Need user-facing self-service deletion flow
 - Consider soft delete with scheduled hard delete
 - Must handle organization ownership transfer if user owns orgs
 - Audit log should retain anonymized record for compliance
 ## Related TODOs
 - New feature - builds on existing suspension infrastructure
@@ -0,0 +1,26 @@
 # View Login History
 **ID:** EU-007
 **Priority:** Low
 **Status:** Planned
 ## User Story
 As an end user, I want to view my login history so that I can detect any unauthorized access to my account.
 ## Acceptance Criteria
 - [ ] User can view list of recent logins (last 30 days)
 - [ ] Each entry shows: date/time, IP address, location, device/browser
 - [ ] Failed login attempts are also shown
 - [ ] Suspicious logins are highlighted (new location, unusual time)
 - [ ] User can export login history
 - [ ] User receives alert for logins from new locations/devices
 ## Technical Notes
 - Login events need to be logged with metadata
 - Create new LoginHistory collection in MongoDB
 - IP geolocation service needed (consider MaxMind or ipinfo.io)
 - Privacy considerations: IP retention policy, GDPR compliance
 - Could integrate with EU-003 (device management) for unified view
 ## Related TODOs
 - New feature - no existing infrastructure
@@ -0,0 +1,28 @@
 # Upload Profile Avatar
 **ID:** EU-008
 **Priority:** Low
 **Status:** Planned
 ## User Story
 As an end user, I want to upload a profile picture so that my identity is visually recognizable across applications that use this identity provider.
 ## Acceptance Criteria
 - [ ] User can upload an image from their device
 - [ ] Supported formats: JPEG, PNG, GIF
 - [ ] Maximum file size: 5MB
 - [ ] Image is automatically resized/cropped to standard dimensions
 - [ ] User can crop/adjust image before saving
 - [ ] Avatar is served via CDN for fast loading
 - [ ] Default avatar (initials or Gravatar) when no upload
 - [ ] Avatar is available to connected applications via API
 ## Technical Notes
 - User model needs avatar URL field
 - Consider using cloud storage (S3, Cloudflare R2) for images
 - Implement image processing for resize/crop (sharp library)
 - Gravatar integration as fallback using email hash
 - Expose avatar in JWT claims or user info endpoint
 ## Related TODOs
 - New feature - no existing infrastructure
@@ -0,0 +1,27 @@
 # Sync Billing Plans with Users
 **ID:** ORG-001
 **Priority:** High
 **Status:** Planned
 ## User Story
 As an organization owner, I want billing plans to automatically sync with user seats so that I'm only charged for active users and can easily manage costs.
 ## Acceptance Criteria
 - [ ] Adding a user to org automatically updates billing (for per-seat plans)
 - [ ] Removing a user adjusts billing accordingly
 - [ ] Prorated charges/credits for mid-cycle changes
 - [ ] Organization dashboard shows current seat count vs plan limit
 - [ ] Warning notification when approaching seat limit
 - [ ] Automatic upgrade prompt when exceeding limit
 - [ ] Billing history shows seat changes over time
 ## Technical Notes
 - `BillingPlan.syncForUser()` method exists but is not implemented
 - Paddle integration exists for payment processing
 - Need to track user-to-organization seat assignments
 - Consider grace period for temporary overages
 - Webhook from Paddle for payment confirmations
 ## Related TODOs
 - `ts/reception/classes.billingplan.ts:16` - `// TODO sync this for user`
@@ -0,0 +1,28 @@
 # Invite and Manage Team Members
 **ID:** ORG-002
 **Priority:** Critical
 **Status:** Planned
 ## User Story
 As an organization owner, I want to invite team members to my organization and manage their access so that my team can collaborate securely.
 ## Acceptance Criteria
 - [ ] Owner can invite users via email address
 - [ ] Invited user receives email with invitation link
 - [ ] Invitation can be accepted by existing users or during registration
 - [ ] Owner can view pending invitations and resend/cancel them
 - [ ] Owner can see all current members with their roles
 - [ ] Owner can remove members from organization
 - [ ] Owner can transfer ownership to another member
 - [ ] Bulk invite via CSV upload
 ## Technical Notes
 - Organization and User models exist with association
 - Need new Invitation model with token and expiry
 - Use `ReceptionMailer` for invitation emails
 - RoleManager can be leveraged for role assignment
 - Consider invitation expiry (7 days default)
 ## Related TODOs
 - New feature - core organizational functionality
@@ -0,0 +1,28 @@
 # Assign Roles to Members
 **ID:** ORG-003
 **Priority:** High
 **Status:** Planned
 ## User Story
 As an organization owner, I want to assign different roles to team members so that I can control what each person can access and do within the organization.
 ## Acceptance Criteria
 - [ ] Owner can create custom roles for the organization
 - [ ] Default roles: Owner, Admin, Member, Viewer
 - [ ] Each role has configurable permissions
 - [ ] Owner can assign/change roles for any member
 - [ ] Role changes take effect immediately
 - [ ] Members can view their own role and permissions
 - [ ] Audit log for role changes
 - [ ] At least one Owner must exist at all times
 ## Technical Notes
 - RoleManager exists with basic role infrastructure
 - `getRolesAndOrganizationsForUserId` endpoint available
 - Need to expand Role model with permissions array
 - Consider permission inheritance (Admin inherits Member permissions)
 - JWT claims should include role for authorization
 ## Related TODOs
 - Partial implementation exists in RoleManager
@@ -0,0 +1,27 @@
 # Customize Organization Branding
 **ID:** ORG-004
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an organization owner, I want to customize the branding of my organization's login and account pages so that my team sees our company identity when authenticating.
 ## Acceptance Criteria
 - [ ] Upload organization logo
 - [ ] Set primary and secondary brand colors
 - [ ] Custom login page welcome message
 - [ ] Organization name displayed on login/register
 - [ ] Preview branding changes before saving
 - [ ] Reset to default branding option
 - [ ] Branding applies to email templates (org-specific emails)
 ## Technical Notes
 - Organization model needs branding fields (logo URL, colors, message)
 - Frontend components need to accept branding props
 - Email templates should support organization branding
 - Consider white-label subdomain support (org.idp.global)
 - Image storage similar to user avatars (EU-008)
 ## Related TODOs
 - New feature - no existing infrastructure
@@ -0,0 +1,27 @@
 # View Organization Usage Analytics
 **ID:** ORG-005
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an organization owner, I want to view analytics about how my organization uses the identity platform so that I can understand adoption and identify potential issues.
 ## Acceptance Criteria
 - [ ] Dashboard showing key metrics (active users, logins, registrations)
 - [ ] Time-series charts for login activity
 - [ ] Most active users ranking
 - [ ] Failed login attempts summary
 - [ ] Authentication method breakdown (password, email link, 2FA)
 - [ ] Date range selector for historical data
 - [ ] Export analytics data (CSV, PDF)
 ## Technical Notes
 - Need to aggregate login events per organization
 - Consider time-series database or aggregation pipeline in MongoDB
 - Privacy: show aggregates, not individual user activity details
 - Cache analytics for performance
 - Real-time updates via WebSocket for dashboard
 ## Related TODOs
 - New feature - requires event logging infrastructure
@@ -0,0 +1,28 @@
 # Configure SSO for Organization
 **ID:** ORG-006
 **Priority:** High
 **Status:** Planned
 ## User Story
 As an organization owner, I want to configure Single Sign-On with my company's identity provider so that employees can use their corporate credentials.
 ## Acceptance Criteria
 - [ ] Support SAML 2.0 SSO configuration
 - [ ] Support OIDC/OAuth SSO configuration
 - [ ] Test connection before enabling
 - [ ] Auto-provision users on first SSO login (JIT provisioning)
 - [ ] Map SSO attributes to user profile fields
 - [ ] Option to require SSO for all org members
 - [ ] Bypass SSO for emergency admin access
 - [ ] Support multiple SSO providers per organization
 ## Technical Notes
 - Implement SAML assertion consumer service
 - Store SSO configuration securely (encrypted secrets)
 - Certificate management for SAML
 - Consider using passport-saml and passport-openidconnect
 - Metadata endpoint for easy IdP configuration
 ## Related TODOs
 - New feature - enterprise SSO capability
@@ -0,0 +1,28 @@
 # View Organization Audit Logs
 **ID:** ORG-007
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an organization owner, I want to view audit logs for my organization so that I can track security-relevant events and meet compliance requirements.
 ## Acceptance Criteria
 - [ ] Log all security-relevant events (logins, role changes, member changes)
 - [ ] Searchable audit log interface
 - [ ] Filter by event type, user, date range
 - [ ] Each entry shows: timestamp, actor, action, target, IP address
 - [ ] Immutable logs (cannot be deleted or modified)
 - [ ] Export logs for compliance (CSV, JSON)
 - [ ] Retention policy configuration (90 days default)
 - [ ] Real-time event streaming option
 ## Technical Notes
 - Create AuditLog collection with write-only access pattern
 - Index for efficient querying
 - Consider separate database/collection for audit data
 - Comply with SOC 2 / ISO 27001 logging requirements
 - Webhook option for SIEM integration
 ## Related TODOs
 - New feature - compliance and security requirement
@@ -0,0 +1,28 @@
 # Manage Subscription and Billing
 **ID:** ORG-008
 **Priority:** Medium
 **Status:** Planned
 ## User Story
 As an organization owner, I want to manage my subscription plan and billing details so that I can upgrade, downgrade, or update payment methods as needed.
 ## Acceptance Criteria
 - [ ] View current subscription plan and features
 - [ ] Compare available plans with feature matrix
 - [ ] Upgrade to higher plan with immediate effect
 - [ ] Downgrade with effect at end of billing period
 - [ ] Update payment method (credit card via Paddle)
 - [ ] View billing history and download invoices
 - [ ] Cancel subscription with confirmation
 - [ ] Apply coupon/discount codes
 ## Technical Notes
 - Paddle integration exists (`paddlesetup` view, `BillingPlanManager`)
 - Enhance existing subscription view with more functionality
 - Paddle handles PCI compliance for payment data
 - Webhook handlers for subscription status changes
 - VAT handling for EU customers (Paddle manages this)
 ## Related TODOs
 - Enhancement to existing Paddle integration
@@ -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 = {
  name: '@idp.global/idp.global',
-  version: '1.2.0',
+  version: '1.6.0',
  description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }
@@ -14,12 +14,10 @@ export const runCli = async () => {
  const reception = new Reception({
    name: (await serviceQenv.getEnvVarOnDemand('INSTANCE_NAME')) || 'idp.global',
    mongoDescriptor: {
-      mongoDbUser: await serviceQenv.getEnvVarOnDemand('MONGO_DB_USER'),
+      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGODB_URL'),
      mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
      mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
      mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
    },
    websiteServer: websiteServer,
    baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'),
  });
  await reception.start();
@@ -3,8 +3,8 @@ import * as path from 'path';
 export { path };
 // Project scope
-import * as lointReception from '../dist_ts_interfaces/index.js';
+import * as idpInterfaces from '../dist_ts_interfaces/index.js';
-export { lointReception };
+export { idpInterfaces };
 // @api.global scope
 import * as typedserver from '@api.global/typedserver';
@@ -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,117 @@
 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
    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',
          });
          const appObjects = await Promise.all(
            globalApps.map(async (app) => await app.createSavableObject() as plugins.idpInterfaces.data.IGlobalApp)
          );
          return {
            apps: appObjects,
          };
        }
      )
    );
  }
  /**
   * 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',
        },
      },
      {
        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',
        },
      },
    ];
    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();
      }
    }
  }
 }
@@ -8,7 +8,7 @@ import { User } from './classes.user.js';
@plugins.smartdata.Manager()
 export class BillingPlan extends plugins.smartdata.SmartDataDbDoc<
  BillingPlan,
-  plugins.lointReception.data.IBillingPlan,
+  plugins.idpInterfaces.data.IBillingPlan,
  BillingPlanManager
 > {
  // STATIC
@@ -20,7 +20,7 @@ export class BillingPlan extends plugins.smartdata.SmartDataDbDoc<
  public id: string;
  @plugins.smartdata.svDb()
-  public data: plugins.lointReception.data.IBillingPlan['data'] = {
+  public data: plugins.idpInterfaces.data.IBillingPlan['data'] = {
    type: null,
    organizationId: null,
    lastProcessed: null,
@@ -14,7 +14,7 @@ export class BillingPlanManager {
  constructor(receptionRefArg: Reception) {
    this.receptionRef = receptionRefArg;
    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
-    this.typedrouter.addTypedHandler(new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_UpdatePaymentMethod>('updatePaymentMethod', async reqDataArg => {
+    this.typedrouter.addTypedHandler(new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_UpdatePaymentMethod>('updatePaymentMethod', async reqDataArg => {
      const user = await this.receptionRef.userManager.getUserByJwt(reqDataArg.jwtString);
      const organization = await this.receptionRef.organizationmanager.COrganization.getInstance({
        id: reqDataArg.orgId,
@@ -6,7 +6,7 @@ import { JwtManager } from './classes.jwtmanager.js';
 * Both need to be unique and both can be changed.
 */
@plugins.smartdata.Manager()
-export class Jwt extends plugins.smartdata.SmartDataDbDoc<Jwt, plugins.lointReception.data.IJwt, JwtManager> {
+export class Jwt extends plugins.smartdata.SmartDataDbDoc<Jwt, plugins.idpInterfaces.data.IJwt, JwtManager> {
  // STATIC
  public static async createJwtForRefreshToken(
    jwtManagerInstance: JwtManager,
@@ -48,7 +48,7 @@ export class Jwt extends plugins.smartdata.SmartDataDbDoc<Jwt, plugins.lointRece
      id: jwt.id,
      blocked: null,
      data: jwt.data,
-    } as plugins.lointReception.data.IJwt);
+    } as plugins.idpInterfaces.data.IJwt);
    return jwtString;
  }
@@ -60,7 +60,7 @@ export class Jwt extends plugins.smartdata.SmartDataDbDoc<Jwt, plugins.lointRece
  public blocked: boolean = false;
  @plugins.smartdata.svDb()
-  public data: plugins.lointReception.data.IJwt['data'];
+  public data: plugins.idpInterfaces.data.IJwt['data'];
  public async block() {
    this.blocked = true;
@@ -21,7 +21,7 @@ export class JwtManager {
  constructor(receptionRefArg: Reception) {
    this.receptionRef = receptionRefArg;
    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
-    this.typedrouter.addTypedHandler<plugins.lointReception.request.IReq_RefreshJwt>(
+    this.typedrouter.addTypedHandler<plugins.idpInterfaces.request.IReq_RefreshJwt>(
      new plugins.typedrequest.TypedHandler(
        'refreshJwt',
        async (requestArg) => {
@@ -34,7 +34,7 @@ export class JwtManager {
      )
    );
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_GetPublicKeyForValidation>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetPublicKeyForValidation>(
        'getPublicKeyForValidation',
        async (requestArg) => {
          // TODO control backend token
@@ -46,7 +46,7 @@ export class JwtManager {
    );
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_PushOrGetJwtIdBlocklist>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_PushOrGetJwtIdBlocklist>(
        'pushOrGetJwtIdBlocklist',
        async (requestArg) => {
          // TODO control backend token
@@ -60,7 +60,7 @@ export class JwtManager {
  public async pushPublicKeyToClients() {
    const targetConnections =
-      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
+      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.idpInterfaces.tags.ITag_LolePubapi>(
        'lole-reception',
        {
          backendToken: '',
@@ -68,7 +68,7 @@ export class JwtManager {
      );
    for (const targetConnection of targetConnections) {
      const pushPublicKeyTr =
-        this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushPublicKeyForValidation>(
+        this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_PushPublicKeyForValidation>(
          'pushPublicKeyForValidation',
          targetConnection
        );
@@ -80,7 +80,7 @@ export class JwtManager {
  public async pushBlockedJwtIdListToClients() {
    const targetConnections =
-      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.lointReception.tags.ITag_LolePubapi>(
+      await this.receptionRef.options.websiteServer.typedserver.typedsocket.findAllTargetConnectionsByTag<plugins.idpInterfaces.tags.ITag_LolePubapi>(
        'lole-reception',
        {
          backendToken: '',
@@ -88,7 +88,7 @@ export class JwtManager {
      );
      for (const targetConnection of targetConnections) {
        const pushPublicKeyTr =
-          this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_PushOrGetJwtIdBlocklist>(
+          this.receptionRef.options.websiteServer.typedserver.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_PushOrGetJwtIdBlocklist>(
            'pushOrGetJwtIdBlocklist',
            targetConnection
          );
@@ -121,7 +121,7 @@ export class JwtManager {
  }
  public async verifyJWTAndGetData(jwtArg: string): Promise<Jwt> {
-    const jwtData: plugins.lointReception.data.IJwt = await this.smartjwtInstance.verifyJWTAndGetData(jwtArg);
+    const jwtData: plugins.idpInterfaces.data.IJwt = await this.smartjwtInstance.verifyJWTAndGetData(jwtArg);
    const jwt = await Jwt.getInstance({
      id: jwtData.id,
    });
@@ -8,7 +8,7 @@ import { User } from './classes.user.js';
@plugins.smartdata.Manager()
 export class LoginSession extends plugins.smartdata.SmartDataDbDoc<
  LoginSession,
-  plugins.lointReception.data.ILoginSession,
+  plugins.idpInterfaces.data.ILoginSession,
  LoginSessionManager
 > {
  // ======
@@ -55,7 +55,7 @@ export class LoginSession extends plugins.smartdata.SmartDataDbDoc<
  public id: string;
  @plugins.smartdata.svDb()
-  public data: plugins.lointReception.data.ILoginSession['data'] = {
+  public data: plugins.idpInterfaces.data.ILoginSession['data'] = {
    userId: null,
    validUntil: Date.now() + plugins.smarttime.getMilliSecondsFromUnits({ weeks: 1 }),
    invalidated: false,
@@ -1,6 +1,7 @@
 import * as plugins from '../plugins.js';
 import { LoginSession } from './classes.loginsession.js';
 import { Reception } from './classes.reception.js';
 import { logger } from './logging.js';
 export class LoginSessionManager {
  // refs
@@ -25,7 +26,7 @@ export class LoginSessionManager {
    this.receptionRef = receptionRefArg;
    this.receptionRef.typedrouter.addTypedRouter(this.typedRouter);
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_LoginWithEmailOrUsernameAndPassword>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
        'loginWithEmailOrUsernameAndPassword',
        async (requestData) => {
          let user = await this.receptionRef.userManager.CUser.getInstance({
@@ -78,15 +79,17 @@ export class LoginSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_LoginWithEmail>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
        'loginWithEmail',
        async (requestDataArg) => {
          logger.log('info', `loginWithEmail requested for: ${requestDataArg.email}`);
          const existingUser = await this.receptionRef.userManager.CUser.getInstance({
            data: {
              email: requestDataArg.email,
            },
          });
          if (existingUser) {
            logger.log('info', `loginWithEmail found user: ${existingUser.data.email}`);
            this.emailTokenMap.findOneAndRemoveSync(
              (itemArg) => itemArg.email === existingUser.data.email
            );
@@ -103,6 +106,8 @@ export class LoginSessionManager {
              );
            });
            this.receptionRef.receptionMailer.sendLoginWithEMailMail(existingUser, loginEmailToken);
          } else {
            logger.log('info', `loginWithEmail did not find user: ${requestDataArg.email}`);
          }
          return {
            status: 'ok',
@@ -116,7 +121,7 @@ export class LoginSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_LoginWithEmailAfterEmailTokenAquired>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_LoginWithEmailAfterEmailTokenAquired>(
        'loginWithEmailAfterEmailTokenAquired',
        async (requestArg) => {
          const tokenObject = this.emailTokenMap.findSync((itemArg) => {
@@ -140,7 +145,7 @@ export class LoginSessionManager {
      )
    );
-    this.typedRouter.addTypedHandler<plugins.lointReception.request.ILogoutRequest>(
+    this.typedRouter.addTypedHandler<plugins.idpInterfaces.request.ILogoutRequest>(
      new plugins.typedrequest.TypedHandler('logout', async (requestDataArg) => {
        const loginSession = await this.CLoginSession.getLoginSessionByRefreshToken(requestDataArg.refreshToken);
        await loginSession.invalidate();
@@ -148,7 +153,7 @@ export class LoginSessionManager {
      })
    );
-    this.typedRouter.addTypedHandler<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+    this.typedRouter.addTypedHandler<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
      new plugins.typedrequest.TypedHandler(
        'exchangeRefreshTokenAndTransferToken',
        async (requestDataArg) => {
@@ -184,7 +189,7 @@ export class LoginSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_ResetPassword>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_ResetPassword>(
        'resetPassword',
        async (requestDataArg) => {
          const emailOfPasswordToReset = requestDataArg.email;
@@ -222,7 +227,7 @@ export class LoginSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_SetNewPassword>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_SetNewPassword>(
        'setNewPassword',
        async (requestData) => {
          return {
@@ -236,7 +241,7 @@ export class LoginSessionManager {
     * returns a device id by simply returning a uuid4
     */
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_ObtainDeviceId>('obtainDeviceId', async (reqData) => {
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_ObtainDeviceId>('obtainDeviceId', async (reqData) => {
        reqData;
        return {
          deviceId: {
@@ -247,7 +252,7 @@ export class LoginSessionManager {
    )
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_AttachDeviceId>('attachDeviceId', async (reqData) => {
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_AttachDeviceId>('attachDeviceId', async (reqData) => {
        // TODO: Blocked by proper JWT handling
        reqData.jwt;
        return {
@@ -5,7 +5,7 @@ import { User } from './classes.user.js';
@plugins.smartdata.Manager()
 export class Organization extends plugins.smartdata.SmartDataDbDoc<
  Organization,
-  plugins.lointReception.data.IOrganization,
+  plugins.idpInterfaces.data.IOrganization,
  OrganizationManager
 > {
  public static async createNewOrganizationForUser(
@@ -28,10 +28,10 @@ export class Organization extends plugins.smartdata.SmartDataDbDoc<
  // INSTANCE
  @plugins.smartdata.unI()
-  id: plugins.lointReception.data.IOrganization['id'];
+  id: plugins.idpInterfaces.data.IOrganization['id'];
  @plugins.smartdata.svDb()
-  data: plugins.lointReception.data.IOrganization['data'];
+  data: plugins.idpInterfaces.data.IOrganization['data'];
  public async checkIfUserIsAdmin(userArg: User) {
    const role = await this.manager.receptionRef.roleManager.getRoleForUserAndOrg(userArg, this);
@@ -17,7 +17,7 @@ export class OrganizationManager {
    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_CreateOrganization>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_CreateOrganization>(
        'createOrganization',
        async (requestArg) => {
          const nameIsAvailable = async () => {
@@ -64,7 +64,7 @@ export class OrganizationManager {
      )
    );
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_GetOrganizationById>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_GetOrganizationById>(
        'getOrganizationById',
        async (requestArg) => {
          const verifiedJwt = await this.receptionRef.jwtManager.verifyJWTAndGetData(
@@ -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 {
  /**
@@ -21,6 +23,7 @@ export interface IReceptionOptions {
  name: string;
  mongoDescriptor: plugins.smartdata.IMongoDescriptor;
  websiteServer: plugins.typedserver.utilityservers.UtilityWebsiteServer;
  baseUrl: string;
 }
 export class Reception {
@@ -40,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) {
@@ -55,6 +60,7 @@ export class Reception {
   * starts the reception instance
   */
  public async start() {
    await this.szPlatformClient.init(await this.serviceQenv.getEnvVarOnDemand('SERVEZONE_PLATFROM_AUTHORIZATION'));
    logger.log('info', 'starting reception');
    logger.log('info', 'adding typedrouter to website server');
    this.options.websiteServer.typedrouter.addTypedRouter(this.typedrouter);
@@ -152,9 +152,9 @@ export class ReceptionMailer {
 </html>
 `;
-  public sendRegistrationEmail(signupSessionArg: RegistrationSession, validationTokenArg: string) {
+  public async sendRegistrationEmail(signupSessionArg: RegistrationSession, validationTokenArg: string) {
    this.receptionRef.szPlatformClient.emailConnector.sendEmail({
-      from: 'workspace.global <noreply@mail.workspace.global>',
+      from: `idp.global@${this.receptionRef.options.baseUrl} <noreply@mail.workspace.global>`,
      title: 'Verify your Email Address!',
      to: signupSessionArg.emailAddress,
      body: this.createBodyString(`
@@ -163,7 +163,7 @@ export class ReceptionMailer {
        }">${signupSessionArg.emailAddress}</a></h1>
        <p>It looks like you requested to register an account with us. We just want to make sure it really was you.</p>
        <p>In case it was you, <b>please continue with the registration process by clicking the button below</b>. Otherwise, please ignore this email.</p>
-        <a href="https://registration.workspace.global/finishregistration?validationtoken=${encodeURI(
+        <a href="${this.receptionRef.options.baseUrl}/finishregistration?validationtoken=${encodeURI(
          validationTokenArg
        )}"><div class="button">
          continue with registration
@@ -229,6 +229,7 @@ export class ReceptionMailer {
  }
  public sendLoginWithEMailMail(userArg: User, validationTokenArg: string) {
    console.log(`sending login email to ${userArg.data.email}`);
    this.receptionRef.szPlatformClient.emailConnector.sendEmail({
      from: 'workspace.global <noreply@mail.workspace.global>',
      title: 'Click to login!',
@@ -68,7 +68,7 @@ export class RegistrationSession {
    'announced';
  public collectedData: {
-    userData: plugins.lointReception.data.IUser['data'];
+    userData: plugins.idpInterfaces.data.IUser['data'];
  } = {
    userData: {
      username: null,
@@ -14,7 +14,7 @@ export class RegistrationSessionManager {
    this.receptionRef.typedrouter.addTypedRouter(this.typedRouter);
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_FirstRegistration>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_FirstRegistration>(
        'firstRegistrationRequest',
        async (requestData) => {
          // check for exiting User
@@ -60,9 +60,10 @@ export class RegistrationSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_AfterRegistrationEmailClicked>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_AfterRegistrationEmailClicked>(
        'afterRegistrationEmailClicked',
        async (requestData) => {
          console.log(requestData);
          const signupSession = await this.registrationSessions.find(async (itemArg) =>
            itemArg.validateEmailToken(requestData.token)
          );
@@ -82,7 +83,7 @@ export class RegistrationSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_SetDataForRegistration>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_SetDataForRegistration>(
        'setDataForRegistration',
        async (requestData) => {
          const registrationSession = await this.registrationSessions.find(async (itemArg) =>
@@ -110,7 +111,7 @@ export class RegistrationSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_MobileVerificationForRegistration>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_MobileVerificationForRegistration>(
        'mobileVerificationForRegistration',
        async (requestData) => {
          const registrationSession = await this.registrationSessions.find(async (itemArg) =>
@@ -156,7 +157,7 @@ export class RegistrationSessionManager {
    );
    this.typedRouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<plugins.lointReception.request.IReq_FinishRegistration>(
+      new plugins.typedrequest.TypedHandler<plugins.idpInterfaces.request.IReq_FinishRegistration>(
        'finishRegistration',
        async (requestData) => {
          const registrationSession = await this.registrationSessions.find(async (itemArg) =>
@@ -3,12 +3,12 @@ import * as plugins from '../plugins.js';
@plugins.smartdata.Manager()
 export class Role extends plugins.smartdata.SmartDataDbDoc<
  Role,
-  plugins.lointReception.data.IRole
+  plugins.idpInterfaces.data.IRole
 > {
  @plugins.smartdata.unI()
  id: string;
  @plugins.smartdata.svDb()
-  data: plugins.lointReception.data.IRole['data'];
+  data: plugins.idpInterfaces.data.IRole['data'];
 }
@@ -19,7 +19,7 @@ export class RoleManager {
    action: 'create' | 'change' | 'delete';
    userId: string;
    organizationId: string;
-    role: plugins.lointReception.data.IRole['data']['role'];
+    role: plugins.idpInterfaces.data.IRole['data']['role'];
  }) {
    let returnRole: Role;
    switch (optionsArg.action) {
@@ -8,11 +8,11 @@ import { UserManager } from './classes.usermanager.js';
@plugins.smartdata.Manager()
 export class User extends plugins.smartdata.SmartDataDbDoc<
  User,
-  plugins.lointReception.data.IUser
+  plugins.idpInterfaces.data.IUser
 > {
  // STATIC
  public static async createNewUserForUserData(
-    userDataArg: plugins.lointReception.data.IUser['data']
+    userDataArg: plugins.idpInterfaces.data.IUser['data']
  ): Promise<User> {
    const newUser = new User();
    newUser.id = plugins.smartunique.shortId();
@@ -40,7 +40,7 @@ export class User extends plugins.smartdata.SmartDataDbDoc<
  id: string;
  @plugins.smartdata.svDb()
-  public data: plugins.lointReception.data.IUser['data'];
+  public data: plugins.idpInterfaces.data.IUser['data'];
  constructor() {
    super();
@@ -19,8 +19,9 @@ export class UserManager {
  constructor(receptionRefArg: Reception) {
    this.receptionRef = receptionRefArg;
    this.receptionRef.typedrouter.addTypedRouter(this.typedrouter);
-    this.typedrouter.addTypedHandler<plugins.lointReception.request.IReq_GetRolesAndOrganizationsForUserId>(
+    this.typedrouter.addTypedHandler<plugins.idpInterfaces.request.IReq_GetRolesAndOrganizationsForUserId>(
      new plugins.typedrequest.TypedHandler('getRolesAndOrganizationsForUserId', async reqArg => {
        console.log('user manager: getting roles and orgs');
        const user = await this.getUserByJwtValidation(reqArg.jwt);
        const organizations = await this.receptionRef.organizationmanager.getAllOrganizationsForUser(
          user
@@ -32,6 +33,29 @@ export class UserManager {
        }
      })
    )
    this.typedrouter.addTypedHandler<plugins.idpInterfaces.request.IReq_WhoIs>(
      new plugins.typedrequest.TypedHandler('whoIs', async reqArg => {
        const user = await this.getUserByJwtValidation(reqArg.jwt);
        if (!user) {
          throw new plugins.typedrequest.TypedResponseError('User not found');
        }
        return {
          user: {
            id: user.id,
            data: {
              name: user.data.name,
              username: user.data.username,
              email: user.data.email,
              mobileNumber: user.data.mobileNumber,
              connectedOrgs: user.data.connectedOrgs,
              status: null,
              password: null,
            } as plugins.idpInterfaces.data.IUser['data']
          }
        }
      })
    )
  }
  /**
@@ -50,7 +74,7 @@ export class UserManager {
   * faster than the "getUserByJwt"
   */
  public async getUserByJwtValidation(jwtStringArg: string) {
-    const jwtDataArg: plugins.lointReception.data.IJwt = await this.receptionRef.jwtManager.smartjwtInstance.verifyJWTAndGetData(jwtStringArg);
+    const jwtDataArg: plugins.idpInterfaces.data.IJwt = await this.receptionRef.jwtManager.smartjwtInstance.verifyJWTAndGetData(jwtStringArg);
    const resultingUser = await this.CUser.getInstance({
      id: jwtDataArg.data.userId
    });
@@ -4,27 +4,27 @@ import * as plugins from './plugins.js';
 export class IdpClient {
  // INSTANCE PRIVATE
  private helpers = {
-    async extractDataFromJwtString(jwtString: string): Promise<plugins.lointReception.data.IJwt> {
+    async extractDataFromJwtString(jwtString: string): Promise<plugins.idpInterfaces.data.IJwt> {
      return plugins.webjwt.getDataFromJwtString(jwtString);
    },
  };
  // INSTANCE PUBLIC
-  public appData: plugins.lointReception.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 receptionTrUrl: string;
+  public parsedReceptionUrl: plugins.smarturl.Smarturl;
-  constructor(receptionBaseUrlArg: string, appDataArg?: plugins.lointReception.data.IApp) {
+  constructor(receptionBaseUrlArg: string, appDataArg?: plugins.idpInterfaces.data.IAppLegacy) {
-    this.receptionTrUrl = receptionBaseUrlArg
+    if (receptionBaseUrlArg.endsWith('/')) {
-    if (this.receptionTrUrl.endsWith('/')) {
+      receptionBaseUrlArg = receptionBaseUrlArg.slice(0, -1);
      this.receptionTrUrl = this.receptionTrUrl.slice(0, -1);
    }
-    if (!this.receptionTrUrl.endsWith('/typedrequest')) {
+    if (!receptionBaseUrlArg.endsWith('/typedrequest')) {
-      this.receptionTrUrl = `${this.receptionTrUrl}/typedrequest`;
+      receptionBaseUrlArg = `${receptionBaseUrlArg}/typedrequest`;
    }
-    console.log(`reception client connecting to ${this.receptionTrUrl}`);
+    this.parsedReceptionUrl = plugins.smarturl.Smarturl.createFromUrl(receptionBaseUrlArg);
    console.log(`reception client connecting to ${this.parsedReceptionUrl.toString()}`);
    if (!appDataArg) {
      appDataArg = {
        id: '', // TODO
@@ -39,6 +39,11 @@ export class IdpClient {
  public requests = new IdpRequests(this);
  public checkWetherOnReceptionDomain() {
    return plugins.smarturl.Smarturl.createFromUrl(window.location.href).hostname ===
      this.parsedReceptionUrl.hostname;
  }
  /**
   * app data can be transferred when redirecting to the sso domain using query params
   * this message retrieves the app data when on the sso domain
@@ -73,26 +78,26 @@ export class IdpClient {
  public typedrouter = new plugins.typedrequest.TypedRouter();
  public statusObservable =
-    new plugins.smartrx.rxjs.Subject<plugins.lointReception.data.TLoginStatus>();
+    new plugins.smartrx.rxjs.Subject<plugins.idpInterfaces.data.TLoginStatus>();
  public ssoStore = new plugins.webstore.WebStore({
-    storeName: 'wgsso',
+    storeName: 'idpglobalStore',
-    dbName: 'wgsso',
+    dbName: 'main',
  });
  public async storeJwt(jwtString: string) {
-    await this.ssoStore.set('wgJwt', jwtString);
+    await this.ssoStore.set('idpJwt', jwtString);
  }
  public async getJwt(): Promise<string> {
-    return await this.ssoStore.get('wgJwt');
+    return await this.ssoStore.get('idpJwt');
  }
-  public async getJwtData(): Promise<plugins.lointReception.data.IJwt> {
+  public async getJwtData(): Promise<plugins.idpInterfaces.data.IJwt> {
    return this.helpers.extractDataFromJwtString(await this.getJwt());
  }
  public async deleteJwt() {
-    await this.ssoStore.delete('wgJwt');
+    await this.ssoStore.delete('idpJwt');
    console.log('removed jwt');
  }
@@ -116,14 +121,14 @@ export class IdpClient {
  }
  public async refreshJwt(refreshTokenArg?: string): Promise<string> {
-    let extractedJwt: plugins.lointReception.data.IJwt;
+    let extractedJwt: plugins.idpInterfaces.data.IJwt;
    if (!refreshTokenArg) {
      extractedJwt = await this.helpers.extractDataFromJwtString(await this.getJwt());
    }
    const refreshJwtReq =
-      new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_RefreshJwt>(
+      new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
-        `${this.receptionTrUrl}/typedrequest`,
+        this.parsedReceptionUrl.toString(),
        'refreshJwt'
      );
    const response = await refreshJwtReq.fire({
@@ -141,12 +146,12 @@ export class IdpClient {
  /**
   * can be used to switch between pages
   */
-  public async getTransferToken(appDataArg?: plugins.lointReception.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 =
-      new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+      new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-        `${this.receptionTrUrl}/typedrequest`,
+        this.parsedReceptionUrl.toString(),
        'exchangeRefreshTokenAndTransferToken'
      );
    const response = await getTransferToken.fire({
@@ -183,8 +188,8 @@ export class IdpClient {
    const transferToken = url.searchParams['transfertoken'];
    if (transferToken) {
      const getTransferToken =
-        new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+        new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-          `${this.receptionTrUrl}/typedrequest`,
+          this.parsedReceptionUrl.toString(),
          'exchangeRefreshTokenAndTransferToken'
        );
      const response = await getTransferToken.fire({
@@ -214,7 +219,8 @@ export class IdpClient {
  }
  /**
-   * forces the current user to login
+   * determines if the user is logged in
   * accepts boolean to optionally require login
   * @param requireLoginArg
   * @returns
   */
@@ -231,15 +237,14 @@ export class IdpClient {
      } else {
        if (requireLoginArg) {
          const urlInstance = plugins.smarturl.Smarturl.createFromUrl(
-            'https://sso.workspace.global/',
+            this.parsedReceptionUrl.clone().set('path', '/login').toString(),
            {
              searchParams: {
                appdata: plugins.smartjson.stringifyBase64(this.appData),
                action: 'login',
              },
            }
          );
-          if (!globalThis.location.href.startsWith('https://sso.workspace.global/')) {
+          if (!globalThis.location.href.startsWith(this.parsedReceptionUrl.toString())) {
            globalThis.location.href = urlInstance.toString();
          }
        }
@@ -252,22 +257,17 @@ export class IdpClient {
   * logs out the current user
   */
  public async logout() {
-    const urlInstance = plugins.smarturl.Smarturl.createFromUrl('https://sso.workspace.global/', {
+    const idpLogoutUrl = this.parsedReceptionUrl.clone().set('path', '/logout');
-      searchParams: {
+    if (!globalThis.location.href.startsWith(idpLogoutUrl.origin)) {
        appdata: plugins.smartjson.stringifyBase64(this.appData),
        action: 'logout',
      },
    });
    if (!globalThis.location.href.startsWith('https://sso.workspace.global/')) {
      // we are somewhere in an app
      await this.deleteJwt();
-      globalThis.location.href = urlInstance.toString();
+      globalThis.location.href = idpLogoutUrl.toString();
    } else {
      // we are in the sso page
      await this.enableTypedSocket();
-      console.log(`logging out against ${this.receptionTrUrl}`)
+      console.log(`logging out against ${this.parsedReceptionUrl.toString()}`);
      const logoutTr =
-        this.typedsocket.createTypedRequest<plugins.lointReception.request.ILogoutRequest>(
+        this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.ILogoutRequest>(
          'logout'
        );
      await logoutTr.fire({
@@ -281,6 +281,9 @@ export class IdpClient {
      } else {
        console.error('no appData provided. Not redirecting after logout.');
      }
      if (window.location.href.startsWith(idpLogoutUrl.origin)) {
        window.location.href = this.parsedReceptionUrl.origin;
      }
    }
  }
@@ -292,7 +295,7 @@ export class IdpClient {
    this.typedsocketDeferred.claim();
    this.typedsocket = await plugins.typedsocket.TypedSocket.createClient(
      this.typedrouter,
-      `${this.receptionTrUrl}/`
+      this.parsedReceptionUrl.toString()
    );
    this.typedsocketDeferred.resolve(this.typedsocket);
    return this.typedsocketDeferred.promise;
@@ -312,7 +315,7 @@ export class IdpClient {
  ) {
    await this.typedsocketDeferred.promise;
    const validateOrg =
-      this.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_CreateOrganization>(
+      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_CreateOrganization>(
        'createOrganization'
      );
    const response = await validateOrg.fire({
@@ -329,9 +332,10 @@ export class IdpClient {
   * gets the current OrganizationRoles
   */
  public async getRolesAndOrganizations() {
    console.log('idpclient: getting roles and orgs...');
    await this.typedsocketDeferred.promise;
    const rolesAndOrganizationsForUserId =
-      this.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_GetRolesAndOrganizationsForUserId>(
+      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_GetRolesAndOrganizationsForUserId>(
        'getRolesAndOrganizationsForUserId'
      );
    const response = await rolesAndOrganizationsForUserId.fire({
@@ -347,7 +351,7 @@ export class IdpClient {
  public async updatePaddleCheckoutId(orgIdArg: string, checkoutIdArg: string) {
    await this.typedsocketDeferred.promise;
    const updateBillingPlan =
-      this.typedsocket.createTypedRequest<plugins.lointReception.request.IReq_UpdatePaymentMethod>(
+      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_UpdatePaymentMethod>(
        'updatePaymentMethod'
      );
    const response = await updateBillingPlan.fire({
@@ -359,4 +363,16 @@ export class IdpClient {
    });
    return response;
  }
  public async whoIs() {
    await this.typedsocketDeferred.promise;
    const whoIs =
      this.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_WhoIs>(
        'whoIs'
      );
    const response = await whoIs.fire({
      jwt: await this.getJwt(),
    });
    return response;
  }
 }
@@ -11,51 +11,51 @@ export class IdpRequests {
  }
  public get afterRegistrationEmailClicked () {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_AfterRegistrationEmailClicked>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_AfterRegistrationEmailClicked>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'afterRegistrationEmailClicked'
    );
  }
  public get setData() {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_SetDataForRegistration>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_SetDataForRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'setDataForRegistration'
    );
  }
  public get mobileNumberVerification () {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_MobileVerificationForRegistration>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_MobileVerificationForRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'mobileVerificationForRegistration'
    );
  }
  public get finishRegistration() {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_FinishRegistration>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_FinishRegistration>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'finishRegistration'
    );
  }
  public get loginWithUserNameAndPassword () {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_LoginWithEmailOrUsernameAndPassword>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'loginWithEmailOrUsernameAndPassword'
    );
  } 
  public get obtainJwt () {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_RefreshJwt>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'refreshJwt'
    );
  }
  public get obtainOneTimeToken () {
-    return new plugins.typedrequest.TypedRequest<plugins.lointReception.request.IReq_ExchangeRefreshTokenAndTransferToken>(
+    return new plugins.typedrequest.TypedRequest<plugins.idpInterfaces.request.IReq_ExchangeRefreshTokenAndTransferToken>(
-      this.idpClientArg.receptionTrUrl,
+      this.idpClientArg.parsedReceptionUrl.toString(),
      'exchangeRefreshTokenAndTransferToken'
    );
  }
@@ -1,7 +1,7 @@
 // losslessone_private scope
-import * as lointReception from '../dist_ts_interfaces/index.js';
+import * as idpInterfaces from '../dist_ts_interfaces/index.js';
-export { lointReception };
+export { idpInterfaces };
 // apiglobal scope
 import * as typedrequest from '@api.global/typedrequest';
@@ -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';
@@ -1,4 +1,78 @@
-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;
  };
 }
 // 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 +85,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[];
  };
 }
@@ -1,4 +1,5 @@
 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,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;
@@ -74,3 +74,13 @@ export interface IReq_GetRolesAndOrganizationsForUserId
    organizations: data.IOrganization[];
  };
 }
 export interface IReq_WhoIs {
  method: 'whoIs';
  request: {
    jwt: string;
  };
  response: {
    user: data.IUser;
  };
 }
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@idp.global/idp.global',
-  version: '1.2.0',
+  version: '1.6.0',
  description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }
@@ -0,0 +1,160 @@
 import * as plugins from '../../plugins.js';
 import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult
 } from '@design.estate/dees-element';
 import { LeleAccountNavigation } from './navigation.js';
 import { accountDesignTokens } from './sharedstyles.js';
 import * as views from './views/index.js';
 import * as accountstate from '../../states/accountstate.js';
 import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
 declare global {
  interface HTMLElementTagNameMap {
    'idp-accountcontent': IdpAccountContent;
  }
 }
@customElement('idp-accountcontent')
 export class IdpAccountContent extends DeesElement {
  public subrouter: plugins.deesDomtools.plugins.smartrouter.SmartRouter;
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    css`
      :host {
        display: block;
        height: 100%;
        width: 100%;
        background: var(--background);
      }
      :host([hidden]) {
        display: none;
      }
      .main {
        position: absolute;
        height: 100%;
        width: 100%;
        bottom: 0px;
      }
      lele-accountnavigation {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 100vh;
        width: 200px;
      }
      .viewcontainer {
        will-change: transform;
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: calc(100vw - 200px);
        height: 100vh;
        overflow-y: scroll;
        overscroll-behavior: contain;
        transition: all 0.3s ease;
        opacity: 1;
      }
      .viewcontainer.changing {
        opacity: 0;
        transform: translateY(20px);
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="main">
        <lele-accountnavigation></lele-accountnavigation>
        <div class="viewcontainer">
          <!--<lele-accountview-subscription></lele-accountview-subscription>-->
        </div>
      </div>
    `;
  }
  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.firstUpdated(_changedProperties);
    await this.domtoolsPromise;
    this.subrouter = this.domtools.router.createSubRouter('/account');
    const viewcontainer: HTMLDivElement = this.shadowRoot.querySelector('.viewcontainer');
    const cleanupViews = async () => {
      for (const child of Array.from(viewcontainer.children)) {
        viewcontainer.removeChild(child);
      }
    };
    viewcontainer.append(new views.BaseView());
    console.log(`loaded base view`);
    this.subrouter.on('', async () => {
      viewcontainer.classList.add('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
      console.log('We are viewing the account overview');
      await cleanupViews();
      viewcontainer.append(new views.BaseView());
      viewcontainer.classList.remove('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
    });
    this.subrouter.on('/org/:orgName/billing', async () => {
      viewcontainer.classList.add('changing');
      await this.domtools.convenience.smartdelay.delayFor(300);
      console.log('We are viewing the billing page');
      await cleanupViews();
      viewcontainer.append(new views.SubscriptionView());
      viewcontainer.classList.remove('changing');
      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._handleRouteState();
    this.registerGarbageFunction(async () => {
      this.subrouter.destroy();
    })
  }
 }
@@ -0,0 +1,2 @@
 export * from './content.js';
 export * from './navigation.js';
@@ -0,0 +1,290 @@
 import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  type TemplateResult,
 } from '@design.estate/dees-element';
 import * as plugins from '../../plugins.js';
 import * as states from '../../states/accountstate.js';
 import { IdpState } from '../../states/idp.state.js';
 import { accountDesignTokens } from './sharedstyles.js';
 import { commitinfo } from '../../../dist_ts/00_commitinfo_data.js';
 declare global {
  interface HTMLElementTagNameMap {
    'lele-accountnavigation': LeleAccountNavigation;
  }
 }
@customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    css`
      :host {
        display: flex;
        flex-direction: column;
        background: var(--card);
        border-right: 1px solid var(--border);
        height: 100%;
      }
      :host([hidden]) {
        display: none;
      }
      .logoArea {
        padding: 20px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        letter-spacing: -0.02em;
        font-size: 20px;
        font-weight: 600;
        color: var(--foreground);
        cursor: pointer;
        transition: opacity 0.15s ease;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .logo:hover {
        opacity: 0.8;
      }
      .logo dees-icon {
        font-size: 24px;
        opacity: 0.9;
      }
      .navContent {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 16px;
      }
      .commitinfo {
        flex-shrink: 0;
        text-align: center;
        font-family: 'Geist Mono', monospace;
        font-size: 10px;
        padding: 12px 16px;
        border-top: 1px solid var(--border);
        color: var(--muted-foreground);
        opacity: 0.6;
        background: var(--card);
      }
      .navigationGroupLabel {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted-foreground);
        padding: 20px 16px 8px;
        opacity: 0.7;
      }
      .navigationGroupLabel:first-of-type {
        padding-top: 16px;
      }
      .navigationOption {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        margin: 2px 8px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: var(--muted-foreground);
        transition: all 0.15s ease;
        cursor: pointer;
      }
      .navigationOption:hover {
        background: var(--muted);
        color: var(--foreground);
      }
      .navigationOption dees-icon {
        font-size: 16px;
        opacity: 0.7;
        flex-shrink: 0;
      }
      .navigationOption:hover dees-icon {
        opacity: 1;
      }
      .divider {
        height: 1px;
        background: var(--border);
        margin: 8px 16px;
      }
      dees-input-dropdown {
        margin: 8px;
      }
    `,
  ];
  public async getAccountRouter() {
    const host = (this.getRootNode() as any).host;
    return (host as any).subrouter;
  }
  public render(): TemplateResult {
    return html`
      <div class="logoArea">
        <div class="logo">
          <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
          idp.global
        </div>
      </div>
      <div class="navContent">
        <div class="navigationGroupLabel">Account</div>
        <div
          class="navigationOption"
          @click=${async () => {
            const subrouter = await this.getAccountRouter();
            subrouter.pushUrl('');
          }}
        >
          <dees-icon .icon=${'lucide:home'}></dees-icon>
          Overview
        </div>
        <div
          class="navigationOption"
          @click=${async () => {
          }}
        >
          <dees-icon .icon=${'lucide:shield'}></dees-icon>
          Manage Roles
        </div>
        <div
          class="navigationOption"
          @click=${async () => {
          }}
        >
          <dees-icon .icon=${'lucide:plus'}></dees-icon>
          Create Organization
        </div>
        <div
          class="navigationOption"
          @click=${async () => {
            const idpState = await IdpState.getSingletonInstance();
            idpState.domtools.router.pushUrl('/logout');
          }}
        >
          <dees-icon .icon=${'lucide:power'}></dees-icon>
          Log Out
        </div>
        <div class="divider"></div>
        <div class="navigationGroupLabel">Organization</div>
        <dees-input-dropdown
          .label=${'Select organization'}
          @selectedOption=${(eventArg: CustomEvent) => {
            const currentState = states.accountState.getState();
            states.accountState.dispatchAction(
              states.setSelectedOrg,
              currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
            );
          }}
        ></dees-input-dropdown>
        <div
          class="navigationOption"
          @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
        </div>
        <div
          class="navigationOption"
          @click=${async () => {}}
        >
          <dees-icon .icon=${'lucide:users'}></dees-icon>
          Users
        </div>
        <div
          class="navigationOption"
          @click=${async () => {}}
        >
          <dees-icon .icon=${'lucide:activity'}></dees-icon>
          Activity
        </div>
        <div
          class="navigationOption"
          @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>
      </div>
      <div class="commitinfo">v${commitinfo.version}</div>
    `;
  }
  public firstUpdated() {
    const deesInputDropdown = this.shadowRoot.querySelector('dees-input-dropdown');
    const orgToMenuEntry = (orgArg?: plugins.idpInterfaces.data.IOrganization) => {
      if (!orgArg) {
        return null;
      }
      return {
        option: orgArg.data.name,
        key: orgArg.data.slug,
        payload: orgArg.data.slug,
      };
    };
    states.accountState
      .select((stateArg) => stateArg.organizations)
      .pipe(
        plugins.deesDomtools.plugins.smartrx.rxjs.ops.map((orgArrayArg) => {
          return orgArrayArg.map(orgToMenuEntry);
        })
      )
      .subscribe((menuEntries) => {
        deesInputDropdown.options = menuEntries;
      });
    states.accountState
      .select((stateArg) => stateArg.selectedOrg)
      .pipe(plugins.deesDomtools.plugins.smartrx.rxjs.ops.map(orgToMenuEntry))
      .subscribe((selectedOrgArg) => {
        deesInputDropdown.selectedOption = selectedOrgArg;
      });
  }
 }
@@ -0,0 +1,117 @@
 import { css } from '@design.estate/dees-element';
 /**
 * Design tokens matching the login page aesthetic (idp-centercontainer.ts)
 */
 export const accountDesignTokens = css`
  :host {
    --background: hsl(240 10% 3.9%);
    --foreground: hsl(0 0% 98%);
    --muted: hsl(240 3.7% 15.9%);
    --muted-foreground: hsl(240 5% 64.9%);
    --border: hsl(240 3.7% 15.9%);
    --card: hsl(240 6% 6%);
    font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--foreground);
  }
 `;
 /**
 * Card container styles
 */
 export const cardStyles = css`
  .card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  }
 `;
 /**
 * Typography styles for consistent text hierarchy
 */
 export const typographyStyles = css`
  h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
  }
  h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--foreground);
    margin: 24px 0 8px 0;
    letter-spacing: -0.01em;
  }
  p {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0 0 16px 0;
    line-height: 1.5;
  }
  .description {
    font-size: 14px;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.5;
  }
  dees-button {
    margin-top: 16px;
  }
  dees-input-text {
    max-width: 100%;
  }
 `;
 /**
 * Navigation styles for the sidebar
 */
 export const navigationStyles = css`
  .nav-item {
    padding: 10px 16px;
    margin: 2px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted-foreground);
    transition: all 0.15s ease;
    cursor: pointer;
  }
  .nav-item:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .nav-item.active {
    background: var(--muted);
    color: var(--foreground);
  }
  .nav-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    padding: 24px 16px 8px;
  }
 `;
 /**
 * Legacy export for backwards compatibility
 */
 export default css`
  ${accountDesignTokens}
  ${typographyStyles}
 `;
@@ -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();
    }
  }
 }
@@ -0,0 +1,237 @@
 import * as plugins from '../../../plugins.js';
 import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
  render,
  directives,
 } from '@design.estate/dees-element';
 import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-baseview': BaseView;
  }
 }
 import * as state from '../../../states/accountstate.js';
@customElement('lele-accountview-baseview')
 export class BaseView extends DeesElement {
  @property({
    type: Array,
  })
  accessor subscriptions: any[] = [
    {
      organization: 'org1',
      'subscription type': 'workspace.global SaaS',
      price: '4€',
      userFactor: 4,
      total: '16.00€',
    },
    {
      organization: 'org1',
      'subscription type': 'workspace.global IaaS Base Access',
      price: '0€',
      userFactor: 4,
      total: '0€',
    },
    {
      organization: 'org1',
      'subscription type': 'workspace.global SLA Senior',
      price: '2000€',
      userFactor: 'none',
      total: '2000.00€',
    },
  ];
  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    cardStyles,
    typographyStyles,
    css`
      :host {
        display: block;
        padding: 48px;
      }
      .viewHost {
        max-width: 600px;
        margin: 0 auto;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
      }
      .slug {
        color: var(--foreground);
        font-weight: 600;
        font-family: 'Geist Mono', monospace;
      }
      .hint {
        display: block;
        font-size: 13px;
        color: var(--muted-foreground);
        margin: 16px 0;
        padding: 12px 16px;
        background: var(--muted);
        border-radius: 8px;
      }
      dees-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
      }
      .orgGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        margin-top: 24px;
      }
      .org {
        padding: 20px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        color: var(--foreground);
        transition: all 0.15s ease;
        cursor: pointer;
      }
      .org:hover {
        background: var(--muted);
        border-color: var(--muted-foreground);
      }
      .org dees-icon {
        opacity: 0.7;
      }
    `,
  ];
  public render() {
    return html`
    <div class="viewHost">
    </div> `;
  }
  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    const viewHost: HTMLDivElement = this.shadowRoot.querySelector('.viewHost');
    await state.accountState.dispatchAction(state.getOrganizationsAction, null);
    console.log('got orgs');
    if (state.accountState.getState().organizations.length === 0) {
      render(
        html`
          <div class="card">
            <h1>Setup Your Account</h1>
            <p>
              There are no organizations for your account. Please create one now. Alternatively you
              can ask an admin of an existing organization to invite you.
            </p>
            <dees-form>
              <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
            </dees-form>
            <p>
              The organization slug will be:<br />
              <span class="slug"
                >${directives.subscribe(
                  state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
                )}</span
              >
            </p>
            <span class="hint"></span>
            <dees-button .disabled=${true}>Create the Organization</dees-button>
          </div>
        `,
        viewHost
      );
      const subscriptions: plugins.deesDomtools.plugins.smartrx.rxjs.Subscription[] = [];
      const form = this.shadowRoot.querySelector('dees-form');
      const orgInput = this.shadowRoot.querySelector('dees-input-text');
      const hint = this.shadowRoot.querySelector('.hint');
      const button = this.shadowRoot.querySelector('dees-button');
      const newOrgSubscription = state.accountState
        .select((stateArg) => stateArg.newOrg)
        .subscribe((data) => {
          if (data.chosenSlug) {
            hint.innerHTML = 'Waiting: Validating...';
          } else {
            hint.innerHTML = 'Hint: Enter a valid organization name.';
          }
          if (data.validated && data.validationOk) {
            hint.innerHTML =
              'Success: Name is available. Please click the button to create the organization.';
            button.disabled = false;
          } else if (!data.validated || !data.validationOk) {
            hint.innerHTML = `Info: Name not available. Please choose another one.`;
            button.disabled = true;
          }
        });
      subscriptions.push(newOrgSubscription);
      const formSubscription = form.changeSubject.subscribe(async (dataArg: any) => {
        await state.accountState.dispatchAction(state.setNewOrgName, dataArg.orgName);
      });
      subscriptions.push(formSubscription);
      button.addEventListener('clicked', async () => {
        orgInput.disabled = true;
        button.text = 'creating org...';
        button.status = 'pending';
        hint.innerHTML = 'Waiting for creation of the organization...';
        await state.accountState.dispatchAction(state.manifestNewOrgName, null);
        hint.innerHTML = `The Organization with name ${
          state.accountState.getState().organizations[0].data.name
        } has been created!`;
        button.text = 'created!';
        button.status = 'success';
        const parentElement = (this.getRootNode() as any).host;
        parentElement.subrouter.pushUrl(
          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
        );
      });
    } else {
      render(
        html`
          <h1>Select An Organization</h1>
          <p>Choose an organization to manage its settings and billing.</p>
          <div class="orgGrid">
            ${state.accountState.getState().organizations.map((orgArg) => {
              return html`
                <div
                  class="org"
                  @click=${() => {
                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
                    const parentElement = (this.getRootNode() as any).host;
                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
                  }}
                >
                  <dees-icon .icon=${'lucide:building2'} style="display: inline-block; transform: translateY(3px); padding-right: 8px;"></dees-icon> ${orgArg.data.name}
                </div>
              `;
            })}
          </div>
        `,
        viewHost
      );
    }
  }
 }
@@ -0,0 +1,5 @@
 export * from './appsview.js';
 export * from './baseview.js';
 export * from './orgsetup.js';
 export * from './paddlesetup.js';
 export * from './subscriptions.js';
@@ -0,0 +1,88 @@
 import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
 } from '@design.estate/dees-element';
 import * as plugins from '../../../plugins.js';
 import sharedStyles from '../sharedstyles.js';
 import * as state from '../../../states/accountstate.js';
 declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-paddlesetup': PaddleSetupView;
  }
 }
@customElement('lele-accountview-paddlesetup')
 export class PaddleSetupView extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    sharedStyles,
    css`
      :host {
        display: block;
        max-width: 900px;
        margin: auto;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }
    `,
  ];
  public render() {
    return html`
      <h1>-> Paddle Setup</h1>
      <p>
        In order to use workspace.global <b>with paid features</b>, you need to setup a Paddle
        subscription. A Paddle connection is bound to an organization.
      </p>
      <p>
        The base price of a Paddle Subscription is always 0€. Any charges that occur will be billed
        as an extra charge on top of your free base subscription
        <b>on a monthly date of your choosing</b>.
      </p>
      <p>
        Since Paddle acts as merchant of record, your invoices will read Paddle as Creditor, and you
        as Debitor.
      </p>
      <h2>Why are we using Paddle?</h2>
      <p>
        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 @clicked=${() => this.openPaddle()}>Let's do it!</dees-button>
    `;
  }
  public async openPaddle() {
    await this.domtoolsPromise;
    const paddleButton = this.shadowRoot.querySelector('dees-button');
    await this.domtools.setExternalScript('https://cdn.paddle.com/paddle/paddle.js');
    globalThis.Paddle.Setup({
      vendor: 30954,
      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);
          paddleButton.status = 'success';
          paddleButton.text = 'Paddle connected!'
        }
      },
    });
    globalThis.Paddle.Checkout.open({
      product: 561076,
      email: 'phil@kunz.io',
    });
  }
 }
@@ -0,0 +1,155 @@
 import {
  customElement,
  DeesElement,
  property,
  html,
  cssManager,
  unsafeCSS,
  css,
 } from '@design.estate/dees-element';
 import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 import * as state from '../../../states/accountstate.js';
 declare global {
  interface HTMLElementTagNameMap {
    'lele-accountview-subscription': SubscriptionView;
  }
 }
@customElement('lele-accountview-subscription')
 export class SubscriptionView extends DeesElement {
  @property({
    type: Array,
  })
  accessor subscriptions: any[] = [{
    organization: 'org1',
    'subscription type': 'workspace.global SaaS',
    price: '4€',
    userFactor: 4,
    total: '16.00€'
  }, {
    organization: 'org1',
    'subscription type': 'workspace.global IaaS Base Access',
    price: '0€',
    userFactor: 4,
    total: '0€'
  }, {
    organization: 'org1',
    'subscription type': 'workspace.global SLA Senior',
    price: '2000€',
    userFactor: 'none',
    total: '2000.00€'
  }];
  public static styles = [
    cssManager.defaultStyles,
    accountDesignTokens,
    cardStyles,
    typographyStyles,
    css`
      :host {
        display: block;
        padding: 48px;
        max-width: 900px;
        margin: 0 auto;
      }
      .section {
        margin-bottom: 48px;
      }
      .card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 24px;
        margin-top: 16px;
      }
      h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--foreground);
        margin: 24px 0 8px 0;
      }
      dees-table {
        margin-top: 16px;
      }
      dees-button {
        margin-top: 16px;
      }
    `
  ]
  public render() {
    return html`
      <h1>Billing & Subscription</h1>
      <p>Manage your billing settings and subscriptions for your organization.</p>
      <div class="section">
        <h2>Payment Method</h2>
        <div class="card">
          <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
          and we will bill any occurring charges as an extra on the monthly date of your choosing.
          Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
          <h3>Paddle</h3>
          <dees-button @click=${async () => {
            // 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>
          <p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
          <p><em>Note: You are currently not eligible.</em></p>
        </div>
      </div>
      <div class="section">
        <h2>Subscriptions</h2>
        <div class="card">
          <p>
            The total price of a subscription already includes all taxes. If you are a VAT registered business,
            the actual price might be cheaper in case you can claim VAT exemption from the purchase.
          </p>
          <p>
            <em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
          </p>
          <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
          <dees-button>Add Subscription</dees-button>
        </div>
      </div>
      <div class="section">
        <h2>Accrued IaaS Usage</h2>
        <div class="card">
          <p>The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.</p>
          <dees-table .heading1=${'Usage'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
        </div>
      </div>
      <div class="section">
        <h2>Upcoming Billable Items</h2>
        <div class="card">
          <p>No upcoming billable items.</p>
        </div>
      </div>
      <div class="section">
        <h2>Past Invoices</h2>
        <div class="card">
          <p>No past invoices available.</p>
        </div>
      </div>
    `;
  }
 }
@@ -0,0 +1,345 @@
 import * as plugins from '../plugins.js';
 import {
  customElement,
  DeesElement,
  property,
  html,
  type TemplateResult,
  css,
  cssManager,
  query,
 } from '@design.estate/dees-element';
 import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
 import { IdpState } from '../states/idp.state.js';
 declare global {
  interface HTMLElementTagNameMap {
    'idp-centercontainer': IdpCenterContainer;
  }
 }
@customElement('idp-centercontainer')
 export class IdpCenterContainer extends DeesElement {
  public static demo = () => html`<idp-centercontainer></idp-centercontainer>`;
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        --background: hsl(240 10% 3.9%);
        --foreground: hsl(0 0% 98%);
        --muted: hsl(240 3.7% 15.9%);
        --muted-foreground: hsl(240 5% 64.9%);
        --border: hsl(240 3.7% 15.9%);
        --card: hsl(240 6% 6%);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--background);
      }
      .split-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
      }
      /* Left Panel - Branding */
      .brand-panel {
        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px;
        position: relative;
        overflow: hidden;
      }
      .brand-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
        pointer-events: none;
      }
      .brand-content {
        position: relative;
        z-index: 1;
        max-width: 400px;
      }
      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        font-size: 42px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
      }
      .tagline {
        font-size: 18px;
        color: var(--muted-foreground);
        margin: 0 0 48px 0;
        line-height: 1.5;
      }
      .features {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .feature {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }
      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: hsla(240 10% 20% / 0.5);
        border: 1px solid hsla(240 10% 30% / 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .feature-icon dees-icon {
        color: var(--muted-foreground);
        font-size: 18px;
      }
      .feature-text h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 4px 0;
      }
      .feature-text p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
        line-height: 1.4;
      }
      .learn-more {
        margin-top: 48px;
      }
      /* Right Panel - Form */
      .form-panel {
        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 48px;
        position: relative;
        overflow: hidden;
      }
      .form-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 400px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        transform: translateY(8px);
        opacity: 0;
        transition: all 0.3s ease;
      }
      .form-content.show {
        transform: translateY(0);
        opacity: 1;
      }
      .form-footer {
        position: absolute;
        bottom: 24px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: var(--muted-foreground);
      }
      .form-footer a {
        color: var(--muted-foreground);
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .form-footer a:hover {
        color: var(--foreground);
      }
      .form-footer .separator {
        margin: 0 8px;
        opacity: 0.5;
      }
      .version {
        margin-top: 8px;
        font-size: 11px;
        opacity: 0.6;
      }
      /* Mobile Responsive */
      @media (max-width: 900px) {
        .split-container {
          grid-template-columns: 1fr;
          grid-template-rows: auto 1fr;
        }
        .brand-panel {
          padding: 32px 24px;
          min-height: auto;
        }
        .brand-content {
          max-width: 100%;
        }
        .logo {
          font-size: 32px;
        }
        .tagline {
          font-size: 16px;
          margin-bottom: 24px;
        }
        .features {
          display: none;
        }
        .form-panel {
          padding: 32px 24px;
        }
        .form-content {
          padding: 24px;
        }
      }
    `,
  ];
  render() {
    return html`
      <div class="split-container">
        <!-- Left: Branding Panel -->
        <div class="brand-panel">
          <div class="brand-content">
            <h1 class="logo">idp.global</h1>
            <p class="tagline">Your permanent identity on the web</p>
            <div class="features">
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:code'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Open Source</h3>
                  <p>Fully transparent, community-driven, no vendor lock-in</p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Always Free</h3>
                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Permanent Identity</h3>
                  <p>One identity across all your applications</p>
                </div>
              </div>
            </div>
            <div class="learn-more">
              <dees-button
                type="secondary"
                @click=${() => window.open('https://about.idp.global', '_blank')}
              >Learn more</dees-button>
            </div>
          </div>
        </div>
        <!-- Right: Form Panel -->
        <div class="form-panel">
          <div class="form-content">
            <slot></slot>
          </div>
          <footer class="form-footer">
            <a href="https://legal.task.vc/" target="_blank">Legal</a>
            <span class="separator">·</span>
            <a href="https://task.vc/" target="_blank">Company</a>
            <span class="separator">·</span>
            <a href="https://support.task.vc/" target="_blank">Support</a>
            <div class="version">v${commitinfo.version}</div>
          </footer>
        </div>
      </div>
    `;
  }
  public async show() {
    await this.updateComplete;
    const domtoolsInstance = await this.domtoolsPromise;
    const done = plugins.smartpromise.defer();
    requestAnimationFrame(async () => {
      this.shadowRoot.querySelector('.form-content').classList.add('show');
      await domtoolsInstance.convenience.smartdelay.delayFor(350);
      done.resolve();
    });
    return done.promise;
  }
  public async hide() {
    await this.updateComplete;
    const domtoolsInstance = await this.domtoolsPromise;
    const done = plugins.smartpromise.defer();
    requestAnimationFrame(async () => {
      this.shadowRoot.querySelector('.form-content').classList.remove('show');
      await domtoolsInstance.convenience.smartdelay.delayFor(350);
      done.resolve();
    });
    return done.promise;
  }
 }
@@ -1,264 +0,0 @@
 import * as plugins from '../plugins.js';
 import {
  customElement,
  DeesElement,
  property,
  html,
  type TemplateResult,
  css,
  cssManager,
  query,
 } from '@design.estate/dees-element';
 import { commitinfo } from '../../dist_ts/00_commitinfo_data.js';
 declare global {
  interface HTMLElementTagNameMap {
    'idp-logincontainer': IdpLogincontainer;
  }
 }
@customElement('idp-logincontainer')
 export class IdpLogincontainer extends DeesElement {
  public static demo = () => html`<idp-logincontainer></idp-logincontainer>`;
  @query('.loginPromptContainer')
  loginPromptContainer: HTMLDivElement;
  @query('.loginManagerContainer')
  loginManagerContainer: HTMLDivElement
  @query('.transferManagerContainer')
  transferManagerContainer: HTMLDivElement
  public receptionClient = new plugins.idpClient.IdpClient('https://reception.lossless.one:443', {
    appUrl: 'https://sso.workspace.global/',
    description: 'the central sso app for workspace.global',
    logoUrl: 'https://assetbroker.lossless.one/some',
    name: 'sso.workspace.global',
    id: null,
  });
  constructor() {
    super();
  }
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        font-family: 'Geist Sans';
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .mainContainer {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: all 0.2s;
        transition-delay: 0.2s;
        transform: translate3d(0px, 20px, 0px);
        pointer-events: none;
      }
      .loginPromptContainer.show {
        opacity: 1;
        pointer-events: all;
        transform: translate3d(0px, 0px, 0px);
      }
      .loginManagerContainer.show {
        opacity: 1;
        pointer-events: all;
        transform: translate3d(0px, 0px, 0px);
      }
      .transferManagerContainer.show {
        opacity: 1;
        pointer-events: all;
        transform: translate3d(0px, 0px, 0px);
      }
      .loginblock {
        max-width: 500px;
        flex-grow: 1;
        transform: translate3d(0px, 0px, 0px);
        transition: all 0.2s;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        background: ${cssManager.bdTheme('#ffffff', '#111111')};
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
        border-radius: 16px;
        overflow: hidden;
      }
      h1 {
        font-size: 24px;
        font-family: 'Cal Sans';
        text-align: center;
        letter-spacing:0.0125em;
      }
      .contentSpacer {
        padding: 0px 0px 16px 0px;
      }
      .legalinfo {
        text-align: center;
        margin: auto;
        color: ${cssManager.bdTheme('#666', '#ccc')};
        font-size: 12px;
        line-height: 100%;
        padding: 8px;
        background: ${cssManager.bdTheme('#f5f5f5', '#111')};
        border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
        color: ${cssManager.bdTheme('#666', '#888')};
      }
      .legalinfo a {
        color: ${cssManager.bdTheme('#666', '#ccc')};
        text-decoration: none;
      }
    `,
  ];
  render() {
    return html`
      <div class="mainContainer loginPromptContainer">
        <div class="loginblock">
          <h1>idp.global</h1>
          <div class="contentSpacer">
            <idp-login></idp-login>
          </div>
          <div class="legalinfo">
            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
            | <a href="https://task.vc/" target="_blank">Company Website</a>
            | <a href="https://support.task.vc/" target="_blank">Support</a>
            | SSO v${commitinfo.version}
          </div>
        </div>
      </div>
      <div class="mainContainer loginManagerContainer">
        <div class="loginblock">
          <img
            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
          />
          <div class="legalinfo">
            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
            | <a href="https://task.vc/" target="_blank">Company Website</a>
            | <a href="https://support.task.vc/" target="_blank">Support</a>
            | SSO v${commitinfo.version}
          </div>
        </div>
      </div>
      <div class="mainContainer transferManagerContainer">
        <div class="loginblock">
          <img
            src="https://assetbroker.lossless.one/brandfiles/00general/plain_workspaceglobal.svg"
          />
          <idp-transfermanager></idp-transfermanager>
          <div class="legalinfo">
            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
            | <a href="https://task.vc/" target="_blank">Company Website</a>
            | <a href="https://support.task.vc/" target="_blank">Support</a>
            | SSO v${commitinfo.version}
          </div>
        </div>
      </div>
    `;
  }
  public async showComponent(componentNameArg: 'loginPrompt' | 'loginManager' | 'transferManager') {
    const domtoolsInstance = await this.domtoolsPromise;
    const containerItems: HTMLDivElement[] = [
      this.loginPromptContainer,
      this.loginManagerContainer,
      this.transferManagerContainer,
    ];
    const show = async (itemArg: HTMLDivElement) => {
      for (const containerItem of containerItems) {
        if (containerItem !== itemArg) {
          containerItem.classList.remove('show');
        }
      }
      await domtoolsInstance.convenience.smartdelay.delayFor(200);
      itemArg.classList.add('show');
      await domtoolsInstance.convenience.smartdelay.delayFor(200);
    };
    switch (componentNameArg) {
      case 'loginPrompt':
        await show(this.loginPromptContainer);
        break;
      case 'loginManager':
        await show(this.loginManagerContainer);
        break;
      case 'transferManager':
        await show(this.transferManagerContainer);
        break;
    }
  }
  public async determineNextAction() {
    const domtoolsInstance = await this.domtoolsPromise;
    let action: plugins.idpInterfaces.data.TLoginAction;
    if (domtoolsInstance.router.queryParams.getQueryParam('action')) {
      action = domtoolsInstance.router.queryParams.getQueryParam('action');
    }
    if (window.location.pathname === '/afterregistration') {
      await this.domtools.convenience.smartdelay.delayFor(1000);
      await this.receptionClient.determineLoginStatus();
      await this.receptionClient.getTransferTokenAndSwitchToLocation('https://account.workspace.global')
    } else if (!(await this.receptionClient.determineLoginStatus()) && action === 'login') {
      this.showComponent('loginPrompt');
    } else if ((await this.receptionClient.determineLoginStatus()) && action === 'login') {
      await this.showComponent('transferManager');
      const wgTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
      await wgTransferManager.handleTransfer();
    } else if ((await this.receptionClient.determineLoginStatus()) && action === 'manage') {
      this.showComponent('loginManager');
    } else if (action === 'logout') {
      console.log('logging out, since requested action is "logout"');
      await this.receptionClient.logout();
    } else {
      this.showComponent('loginPrompt');
    }
  }
  public async firstUpdated() {
    const domtoolsInstance = await this.domtoolsPromise;
    await domtoolsInstance.convenience.smartdelay.delayFor(0);
    console.log(`your are loggedin: ${await await this.receptionClient.determineLoginStatus()}`);
    let appData: plugins.idpInterfaces.data.IApp;
    if (domtoolsInstance.router.queryParams.getQueryParam('appdata')) {
      appData = domtoolsInstance.convenience.smartjson.parseBase64(
        domtoolsInstance.router.queryParams.getQueryParam('appdata')
      );
    }
    const idpLogin = this.shadowRoot.querySelector('idp-login');
    const idpTransferManager = this.shadowRoot.querySelector('idp-transfermanager');
    idpLogin.appData = appData;
    idpTransferManager.appData = appData;
    await this.determineNextAction();
    idpLogin.jwtObserable.subscribe({
      next: async (jwtArg) => {
        console.log('loggedIn');
        await this.receptionClient.storeJwt(jwtArg);
        await this.determineNextAction();
      },
    });
    idpLogin.dispatchJwt();
  }
 }
@@ -17,28 +17,29 @@ import '@uptime.link/webwidget';
 import '@design.estate/dees-catalog';
 import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
 import { IdpState } from '../states/idp.state.js';
 declare global {
  interface HTMLElementTagNameMap {
-    'idp-login': IdpLogin;
+    'idp-loginprompt': IdpLoginPrompt;
  }
 }
-@customElement('idp-login')
+@customElement('idp-loginprompt')
-export class IdpLogin extends DeesElement {
+export class IdpLoginPrompt extends DeesElement {
-  public static demo = () => html`<idp-login></idp-login>`;
+  public static demo = () => html`<idp-loginprompt></idp-loginprompt>`;
  @property()
-  public productOfInterest: string;
+  accessor productOfInterest: string;
  @property()
-  jwt: string;
+  accessor jwt: string;
  @property({
    reflect: true,
    type: Object,
  })
-  appData: plugins.idpInterfaces.data.IApp;
+  accessor appData: plugins.idpInterfaces.data.IApp;
  public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
@@ -51,24 +52,67 @@ export class IdpLogin extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        font-family: 'Geist Sans';
+        --foreground: hsl(0 0% 98%);
        --muted-foreground: hsl(240 5% 64.9%);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        display: block;
-        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        color: var(--foreground);
      }
-      .boxcontent {
+      .form-header {
-        margin: 0px 20px;
+        margin-bottom: 32px;
        text-align: center;
      }
-      .registerButton {
+      .form-header h2 {
-        margin-top: 16px;
+        font-size: 24px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 8px 0;
        letter-spacing: -0.02em;
      }
      .form-header p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
      }
      dees-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .form-footer {
        margin-top: 24px;
        text-align: center;
        font-size: 14px;
        color: var(--muted-foreground);
      }
      .form-footer a {
        color: var(--foreground);
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.15s ease;
      }
      .form-footer a:hover {
        opacity: 0.8;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
-      <div class="boxcontent">
+      <idp-centercontainer>
        <div class="form-header">
          <h2>Sign in to your account</h2>
          <p>Enter your credentials to continue</p>
        </div>
        <dees-form
          id="loginForm"
          @formData="${(eventArg) => {
@@ -82,7 +126,7 @@ export class IdpLogin extends DeesElement {
            id="loginEmailInput"
            .required=${true}
            key="emailAddress"
-            label="Email-Address or Username"
+            label="Email or Username"
          ></dees-input-text>
          <dees-input-text
            .id=${'loginPasswordInput'}
@@ -92,8 +136,13 @@ export class IdpLogin extends DeesElement {
          ></dees-input-text>
          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
        </dees-form>
-        <dees-button type="discreet" class="registerButton">Register instead</dees-button>
+        <div class="form-footer">
          Don't have an account? <a @click=${async () => {
            const idpState = await IdpState.getSingletonInstance();
            idpState.domtools.router.pushUrl('/register');
          }}>Create one</a>
        </div>
      </idp-centercontainer>
    `;
  }
@@ -118,16 +167,20 @@ export class IdpLogin extends DeesElement {
  }
  private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
    // lets disable the submit button
    const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
    loginSubmitButton.disabled = true;
    // lets define the needed requests
    const idpState = await IdpState.getSingletonInstance();
    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
    const loginRequestWithUsernameAndPassword =
      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
-        IdpLogin.receptionUrl,
+        '/typedrequest',
        'loginWithEmailOrUsernameAndPassword'
      );
    const loginRequestWithEmail =
      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmail>(
-        IdpLogin.receptionUrl,
+        '/typedrequest',
        'loginWithEmail'
      );
@@ -148,9 +201,10 @@ export class IdpLogin extends DeesElement {
      }
      if (response.refreshToken) {
        loginForm.setStatus('pending', 'obtained refreshToken...');
-        const jwt = await this.handleRefreshToken(response.refreshToken, 0);
+        const jwt = await idpState.idpClient.refreshJwt(response.refreshToken);
        if (jwt) {
          loginForm.setStatus('success', 'obtained jwt.');
          idpState.domtools.router.pushUrl('/account');
        } else {
          loginForm.setStatus('error', 'something went wrong');
        }
@@ -168,29 +222,6 @@ export class IdpLogin extends DeesElement {
    }
  };
  private register = async (valueArg: { emailAddress: string }) => {
    const registrationForm: DeesForm = this.shadowRoot.querySelector('#registrationForm');
    registrationForm.setStatus('pending', 'registering...');
    const firstSignupRequest =
      new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_FirstRegistration>(
        IdpLogin.receptionUrl,
        'firstRegistrationRequest'
      );
    const response = await firstSignupRequest
      .fire({
        email: valueArg.emailAddress,
        productSlugOfInterest: this.productOfInterest,
      })
      .catch((err) => {
        registrationForm.setStatus('error', err.message);
        return null;
      });
    if (response.status === 'ok') {
      registrationForm.setStatus('success', 'Please check your email!');
    }
    console.log(response);
  };
  public async dispatchJwt(jwtArg?: string) {
    if (jwtArg !== undefined) {
      console.log(`dispatching jwt from loginprompt.`);
@@ -207,24 +238,21 @@ export class IdpLogin extends DeesElement {
    }
  }
-  public async handleRefreshToken(refreshTokenArg: string, delayDispatchMillisArg = 0) {
+  public async focus() {
-    // a refreshToken binds dierctly to a session.
+    (
-    // the refresh token is used on a continuous basis to get fresh and short-lived jwts
+      this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
-    const refreshJwt = new domtools.TypedRequest<plugins.idpInterfaces.request.IReq_RefreshJwt>(
+    ).focus();
-      IdpLogin.receptionUrl,
+  }
      'refreshJwt'
    );
    const responseJwt = await refreshJwt.fire({
      refreshToken: refreshTokenArg,
    });
-    if (responseJwt.jwt) {
+  public async show() {
-      this.domtools.convenience.smartdelay.delayFor(delayDispatchMillisArg).then(() => {
+    await this.updateComplete;
-        this.dispatchJwt(responseJwt.jwt);
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
-      });
+    await centerContainer.show();
-      return responseJwt.jwt;
+  }
-    } else {
+
-      return null;
+  public async hide() {
-    }
+    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.hide();
  }
 }
@@ -17,6 +17,7 @@ import '@uptime.link/webwidget';
 import '@design.estate/dees-catalog';
 import { DeesForm, DeesFormSubmit, DeesInputText } from '@design.estate/dees-catalog';
 import { IdpState } from '../states/idp.state.js';
 declare global {
  interface HTMLElementTagNameMap {
@@ -29,16 +30,16 @@ export class IdpRegistrationPrompt extends DeesElement {
  public static demo = () => html`<idp-login></idp-login>`;
  @property()
-  public productOfInterest: string;
+  accessor productOfInterest: string;
  @property()
-  jwt: string;
+  accessor jwt: string;
  @property({
    reflect: true,
    type: Object,
  })
-  appData: plugins.idpInterfaces.data.IApp;
+  accessor appData: plugins.idpInterfaces.data.IApp;
  public jwtObserable = new domtools.plugins.smartrx.rxjs.Subject<string>();
@@ -51,40 +52,67 @@ export class IdpRegistrationPrompt extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        font-family: 'Geist Sans';
+        --foreground: hsl(0 0% 98%);
        --muted-foreground: hsl(240 5% 64.9%);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        display: block;
-        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        color: var(--foreground);
      }
-      .box {
+      .form-header {
-        opacity: 0;
+        margin-bottom: 32px;
        text-align: center;
      }
      .form-header h2 {
        font-size: 24px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 8px 0;
        letter-spacing: -0.02em;
      }
      .form-header p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
      }
      dees-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .form-footer {
        margin-top: 24px;
        text-align: center;
        font-size: 14px;
        color: var(--muted-foreground);
      }
      .form-footer a {
        color: var(--foreground);
        text-decoration: none;
        font-weight: 500;
        cursor: pointer;
-        overflow: hidden;
+        transition: opacity 0.15s ease;
        transition: all 0.2s ease;
        height: 0px;
      }
-      .boxcontent {
+      .form-footer a:hover {
-        margin: 0px 20px;
+        opacity: 0.8;
      }
      .registerButton {
        display: block;
        transition: all 0.2s ease;
        will-change: transform;
        cursor: pointer;
      }
      .registerButton:hover {
        color: #fff;
        transform: scale(1.02);
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
-      <div class="boxcontent">
+      <idp-centercontainer>
        <div class="form-header">
          <h2>Create your account</h2>
          <p>Get started with your permanent identity</p>
        </div>
        <dees-form
          id="registrationForm"
          @formData="${(eventArg) => {
@@ -96,19 +124,31 @@ export class IdpRegistrationPrompt extends DeesElement {
          <dees-input-text
            .required=${true}
            key="emailAddress"
-            label="Email-Address"
+            label="Email Address"
          ></dees-input-text>
          <dees-input-checkbox
-            .label="${'Agree to the Terms and Conditions'}"
+            .label="${'I agree to the Terms and Conditions'}"
            .required=${true}
          ></dees-input-checkbox>
          <dees-form-submit>Send Verification Email</dees-form-submit>
        </dees-form>
        <div class="form-footer">
          Already have an account? <a @click=${async () => {
            const idpState = await IdpState.getSingletonInstance();
            idpState.domtools.router.pushUrl('/login');
          }}>Sign in</a>
        </div>
      </idp-centercontainer>
    `;
  }
  public async firstUpdated() {
-    const domtoolsInstance = await this.domtoolsPromise;
+    await this.domtoolsPromise;
    const idpState = await IdpState.getSingletonInstance();
    const loggedIn = await idpState.idpClient.determineLoginStatus();
    if (loggedIn) {
      idpState.domtools.router.pushUrl('/');
    }
    const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
    const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
    const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
@@ -186,4 +226,16 @@ export class IdpRegistrationPrompt extends DeesElement {
      return null;
    }
  }
  public async show() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.show();
  }
  public async hide() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.hide();
  }
 }
@@ -1,4 +1,4 @@
-import { IdpState } from '../idp.state.js';
+import { IdpState } from '../states/idp.state.js';
 import * as plugins from '../plugins.js';
 import {
  customElement,
@@ -14,13 +14,11 @@ import {
@customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
-  public idpState = IdpState.getSingletonInstance();
+  @state()
  accessor usedSubTemplate: TemplateResult;
  @state()
-  private usedSubTemplate: TemplateResult;
+  accessor storedData = {
  @state()
  private storedData = {
    validationTokenUrlParam: 'string',
    email: '',
    refreshToken: '',
@@ -36,74 +34,298 @@ export class IdpRegistrationStepper extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        display: block;
+        --background: hsl(240 10% 3.9%);
-        height: 100px;
+        --foreground: hsl(0 0% 98%);
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        --muted: hsl(240 3.7% 15.9%);
        --muted-foreground: hsl(240 5% 64.9%);
        --border: hsl(240 3.7% 15.9%);
        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--background);
        color: var(--foreground);
      }
-      .main {
+      .split-container {
        position: absolute;
-        top: 0px;
+        top: 0;
-        right: 0px;
+        left: 0;
-        left: 0px;
+        width: 100%;
-        bottom: 0px;
+        height: 100%;
        display: grid;
        grid-template-columns: 45% 55%;
      }
      /* Left Panel - Branding */
      .brand-panel {
        background: linear-gradient(135deg, hsl(240 10% 8%) 0%, hsl(240 10% 4%) 50%, hsl(240 12% 6%) 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px;
        position: relative;
        overflow: hidden;
      }
      .brand-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at 30% 20%, hsla(240 20% 20% / 0.3) 0%, transparent 50%),
                    radial-gradient(ellipse at 70% 80%, hsla(240 20% 15% / 0.2) 0%, transparent 50%);
        pointer-events: none;
      }
      .brand-content {
        position: relative;
        z-index: 1;
        max-width: 400px;
      }
      .logo {
        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
        font-size: 42px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 12px 0;
        letter-spacing: -0.02em;
      }
      .tagline {
        font-size: 18px;
        color: var(--muted-foreground);
        margin: 0 0 48px 0;
        line-height: 1.5;
      }
      .features {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .feature {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }
      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: hsla(240 10% 20% / 0.5);
        border: 1px solid hsla(240 10% 30% / 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .feature-icon dees-icon {
        color: var(--muted-foreground);
        font-size: 18px;
      }
      .feature-text h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--foreground);
        margin: 0 0 4px 0;
      }
      .feature-text p {
        font-size: 14px;
        color: var(--muted-foreground);
        margin: 0;
        line-height: 1.4;
      }
      .learn-more {
        margin-top: 48px;
      }
      /* Right Panel - Stepper */
      .stepper-panel {
        background: linear-gradient(-255deg, #06152280 -3.35%, #939eff38 32.79%, #22578480 67.41%, #06152280 97.48%), #212121;
        position: relative;
        overflow: hidden;
      }
      .stepper-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
      }
      .error-message {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        color: var(--muted-foreground);
        font-size: 14px;
        line-height: 1.6;
      }
      .spinner-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      dees-stepper {
        --dees-stepper-background: transparent;
        height: 100%;
      }
      /* Mobile Responsive */
      @media (max-width: 900px) {
        .split-container {
          grid-template-columns: 1fr;
          grid-template-rows: auto 1fr;
        }
        .brand-panel {
          padding: 32px 24px;
          min-height: auto;
        }
        .brand-content {
          max-width: 100%;
        }
        .logo {
          font-size: 32px;
        }
        .tagline {
          font-size: 16px;
          margin-bottom: 24px;
        }
        .features {
          display: none;
        }
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
-      <style></style>
+      <div class="split-container">
-      <div class="main">
+        <!-- Left: Branding Panel -->
        <div class="brand-panel">
          <div class="brand-content">
            <h1 class="logo">idp.global</h1>
            <p class="tagline">Your permanent identity on the web</p>
            <div class="features">
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:code'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Open Source</h3>
                  <p>Fully transparent, community-driven, no vendor lock-in</p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Always Free</h3>
                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
                </div>
              </div>
              <div class="feature">
                <div class="feature-icon">
                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
                </div>
                <div class="feature-text">
                  <h3>Permanent Identity</h3>
                  <p>One identity across all your applications</p>
                </div>
              </div>
            </div>
            <div class="learn-more">
              <dees-button
                type="secondary"
                @click=${() => window.open('https://about.idp.global', '_blank')}
              >Learn more</dees-button>
            </div>
          </div>
        </div>
        <!-- Right: Stepper Panel -->
        <div class="stepper-panel">
          <div class="stepper-content">
            ${this.usedSubTemplate
              ? this.usedSubTemplate
-          : html`<dees-spinner size="60"></dees-spinner>`}
+              : html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
          </div>
        </div>
      </div>
    `;
  }
  public async firstUpdated() {
    const idpState = await IdpState.getSingletonInstance();
    await this.domtoolsPromise;
-    this.domtools.router.on(`/finishregistration`, async (routeArg) => {
+    const parsedUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
-      this.storedData.validationTokenUrlParam = routeArg.queryParams.validationtoken;
+    this.storedData.validationTokenUrlParam = parsedUrl.searchParams['validationtoken'];
    console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
    if (!this.storedData.validationTokenUrlParam) {
      this.usedSubTemplate = html`
-          You need a validation token, but we couldn't find one. Please contact workspace.global support.
+        <div class="error-message">
          You need a validation token, but we couldn't find one.<br/>
          Please contact support for assistance.
        </div>
      `;
      await this.domtools.convenience.smartdelay.delayFor(5000);
-        this.usedSubTemplate = html` Redirecting you to workspace.global support... `;
+      window.location.href = '/';
        await this.domtools.convenience.smartdelay.delayFor(2000);
        window.location.href = 'https://support.workspace.global';
      return;
    }
    // lets verify the info;
    let tokenErrorMessage: string;
-      const resAfterRegEmailClicked =
+    const resAfterRegEmailClicked = await idpState.idpClient.requests.afterRegistrationEmailClicked
        await this.idpState.idpClient.requests.afterRegistrationEmailClicked
      .fire({
        token: this.storedData.validationTokenUrlParam,
      })
      .catch(
        (
-              err: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+          err: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
        ) => {
          tokenErrorMessage = err.errorText;
          return;
        }
      );
    console.log(resAfterRegEmailClicked);
    if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
      this.usedSubTemplate = html`
-          the supplied validation token does not match any registration sessions.<br />
+        <div class="error-message">
-          ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
+          The supplied validation token does not match any registration sessions.<br/>
          ${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
        </div>
      `;
      await this.domtools.convenience.smartdelay.delayFor(5000);
-        this.usedSubTemplate = html`redirecting you for further support... `;
+      idpState.domtools.router.pushUrl('/');
        await this.domtools.convenience.smartdelay.delayFor(1000);
        window.location.href = 'https://support.workspace.global';
      return;
    } else {
      this.storedData.email = resAfterRegEmailClicked.email;
@@ -127,10 +349,10 @@ export class IdpRegistrationStepper extends DeesElement {
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
-            validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.setData
+              await idpState.idpClient.requests.setData
                .fire({
                  token: this.storedData.validationTokenUrlParam,
                  userData: {
@@ -143,14 +365,14 @@ export class IdpRegistrationStepper extends DeesElement {
                })
                .catch(
                  (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                  ) => {
                    deesForm.setStatus('error', errArg.errorText);
                  }
                );
              deesForm.setStatus('success', 'ok!');
              stepperArg.goNext();
-              });
+            }, { signal });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            const deesForm = stepElementArg.querySelector('dees-form');
@@ -169,24 +391,24 @@ export class IdpRegistrationStepper extends DeesElement {
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
-            validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.mobileNumberVerification
+              await idpState.idpClient.requests.mobileNumberVerification
                .fire({
                  token: this.storedData.validationTokenUrlParam,
                  mobileNumber: eventArg.detail.data.mobileNumber,
                })
                .catch(
                  (
-                      errArg: typeof DeesElement['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
+                    errArg: (typeof DeesElement)['prototype']['domtools']['convenience']['typedrequest']['TypedResponseError']['prototype']
                  ) => {
                    deesForm.setStatus('error', errArg.errorText);
                  }
                );
              deesForm.setStatus('success', 'ok!');
              stepperArg.goNext();
-              });
+            }, { signal });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            const deesForm = stepElementArg.querySelector('dees-form');
@@ -205,10 +427,10 @@ export class IdpRegistrationStepper extends DeesElement {
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
-            validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.mobileNumberVerification.fire({
+              const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
                token: this.storedData.validationTokenUrlParam,
                verificationCode: eventArg.detail.data.verificationCode,
              });
@@ -221,7 +443,7 @@ export class IdpRegistrationStepper extends DeesElement {
                await this.domtools.convenience.smartdelay.delayFor(3000);
                deesForm.setStatus('normal', 'Retry And Next!');
              }
-              });
+            }, { signal });
          },
          onReturnToStepFunc: async (stepperArg, stepElementArg) => {
            stepperArg.goBack();
@@ -241,10 +463,10 @@ export class IdpRegistrationStepper extends DeesElement {
              <dees-form-submit>Next</dees-form-submit>
            </dees-form>
          `,
-            validationFunc: async (stepperArg, elementArg) => {
+          validationFunc: async (stepperArg, elementArg, signal) => {
            const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
            deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
-                const response = await this.idpState.idpClient.requests.setData.fire({
+              await idpState.idpClient.requests.setData.fire({
                token: this.storedData.validationTokenUrlParam,
                userData: {
                  username: null,
@@ -255,42 +477,40 @@ export class IdpRegistrationStepper extends DeesElement {
                  password: eventArg.detail.data.password,
                },
              });
-                const finishRegistrationResponse =
+              await idpState.idpClient.requests.finishRegistration.fire({
                  await this.idpState.idpClient.requests.finishRegistration.fire({
                token: this.storedData.validationTokenUrlParam,
              });
              deesForm.setStatus('pending', 'User created!');
              await this.domtools.convenience.smartdelay.delayFor(500);
              deesForm.setStatus('pending', 'Obtaining Refresh Token...');
-                const loginResponse = await this.idpState.idpClient.requests.loginWithUserNameAndPassword.fire(
+              const loginResponse =
-                  {
+                await idpState.idpClient.requests.loginWithUserNameAndPassword.fire({
                  username: this.storedData.email,
                  password: eventArg.detail.data.password,
-                  }
+                });
                );
              this.storedData.refreshToken = loginResponse.refreshToken;
              deesForm.setStatus('pending', 'Obtaining JWT...');
-                const jwtResponse = await this.idpState.idpClient.requests.obtainJwt.fire({
+              const jwtResponse = await idpState.idpClient.requests.obtainJwt.fire({
                refreshToken: this.storedData.refreshToken,
              });
-                deesForm.setStatus('pending', 'Obtaining Transfer Token...');
+              deesForm.setStatus('success', 'Ok! Lets Go!');
-                await this.idpState.idpClient.setJwt(jwtResponse.jwt);
+              await idpState.idpClient.setJwt(jwtResponse.jwt);
-                await this.idpState.idpClient.getTransferTokenAndSwitchToLocation('https://sso.workspace.global/afterregistration');
+              idpState.domtools.router.pushUrl('/account');
-              });
+            }, { signal });
          },
        },
      ] as plugins.deesCatalog.IStep[]}
    ></dees-stepper>`;
    await this.domtools.convenience.smartdelay.delayFor(100);
-    });
+  }
-    this.domtools.router.on('/', async () => {
+
-      this.usedSubTemplate = html`Hm, this is app is not meant for what you are trying to do :) `;
+  public async show() {
-      await this.domtools.convenience.smartdelay.delayFor(2000);
+    await this.updateComplete;
-      this.usedSubTemplate = html`Redirecting you now...`;
+  }
-      window.location.href = `https://workspace.global`;
+
-    });
+  public async hide() {
-    this.domtools.router._handleRouteState();
+    await this.updateComplete;
  }
 }
@@ -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,
@@ -10,8 +10,11 @@ import {
  unsafeCSS,
  css,
  type TemplateResult,
  directives
 } from '@design.estate/dees-element';
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
 import { IdpState } from '../states/idp.state.js';
@customElement('idp-welcome')
 export class IdpWelcome extends DeesElement {
@@ -25,63 +28,139 @@ export class IdpWelcome extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
        --foreground: hsl(0 0% 98%);
        --muted-foreground: hsl(240 5% 64.9%);
        display: block;
-        color: #fff;
+        color: var(--foreground);
-        font-family: 'Geist Sans';
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      }
      :host([hidden]) {
        display: none;
      }
-      h1 {
+      .form-header {
-        font-family: 'Cal Sans';
+        margin-bottom: 32px;
        text-align: center;
      }
      .form-header h2 {
        font-size: 24px;
-        margin: 24px auto;
+        font-weight: 600;
-        padding: 0px 24px;
+        color: var(--foreground);
-        width: 500px;
+        margin: 0 0 8px 0;
-        letter-spacing:0.0125em;
+        letter-spacing: -0.02em;
      }
-      .textbox {
+      .form-header p {
-        margin: 24px auto;
+        font-size: 14px;
-        width: 500px;
+        color: var(--muted-foreground);
-        background: #111111;
+        margin: 0;
        border-radius: 16px;
        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
        padding: 24px;
      }
-      .textbox dees-button {
+      .button-group {
-        margin-top: 16px;
+        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .secondary-actions {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid hsla(240 3.7% 15.9% / 0.5);
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .greeting {
        font-size: 14px;
        color: var(--muted-foreground);
        text-align: center;
        margin-bottom: 8px;
      }
      .greeting strong {
        color: var(--foreground);
        font-weight: 600;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
-      <style></style>
+      <idp-centercontainer>
-      <h1>idp.global</h1>
+        ${directives.resolveExec(async () => {
-      
+          const idpState = await IdpState.getSingletonInstance();
-      <div class="textbox">
+          await idpState.idpClient.determineLoginStatus();
-        Do you want to sign in or register?
+          const data = await idpState.idpClient.whoIs().catch();
-        <dees-button @click=${() => {
+          if (data?.user) {
-          this.viewContainer.loadElement(elements.IdpLogincontainer);
+            return html`
-        }}>Sign In</dees-button>
+              <div class="form-header">
-        <dees-button @click=${() => {}}>Register</dees-button>
+                <h2>Welcome back</h2>
                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
              </div>
-
+              <div class="button-group">
-      <div class="textbox">
+                <dees-button
-        Do you want to use idp.global for your app?
+                  @click=${async () => {
-        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
+                    const idpState = await IdpState.getSingletonInstance();
-      </div>
+                    idpState.domtools.router.pushUrl('/account');
-
+                  }}
-      <div class="textbox">
+                >Manage your account</dees-button>
-        idp.global is a Open Source identity provider for the world wide web. You can get the code if you want to improve it.
+                <dees-button
-        <dees-button @click=${() => {
+                  type="secondary"
-          window.open('https://code.foss.global/idp.global/idp.global', '_blank');
+                  @click=${async () => {
-        }}>Get the code</dees-button>
+                    const idpState = await IdpState.getSingletonInstance();
                    idpState.domtools.router.pushUrl('/logout');
                  }}
                >Sign out</dees-button>
              </div>
            `;
          }
          return html`
            <div class="form-header">
              <h2>Welcome</h2>
              <p>Sign in to your account or create a new one</p>
            </div>
            <div class="button-group">
              <dees-button
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/login');
                }}
              >Sign In</dees-button>
              <dees-button
                type="secondary"
                @click=${async () => {
                  const idpState = await IdpState.getSingletonInstance();
                  idpState.domtools.router.pushUrl('/register');
                }}
              >Create Account</dees-button>
            </div>
          `;
        })}
        <div class="secondary-actions">
          <dees-button
            type="discreet"
            @click=${() => {
              window.open('https://code.foss.global/idp.global/idp.global', '_blank');
            }}
          >View Source Code</dees-button>
        </div>
      </idp-centercontainer>
    `;
  }
  public async show() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.show();
  }
  public async hide() {
    await this.updateComplete;
    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
    await centerContainer.hide();
  }
 }
@@ -1,5 +1,10 @@
 export * from './idp-registration-stepper.js';
-export * from './idp-logincontainer.js';
+export * from './idp-centercontainer.js';
 export * from './idp-loginprompt.js';
 export * from './idp-registerprompt.js';
 export * from './idp-transfermanager.js';
 export * from './idp-welcome.js';
 import { IdpAccountContent } from './account/index.js';
 export { IdpAccountContent };
@@ -1,17 +0,0 @@
 import * as plugins from './plugins.js';
 export class IdpState {
  // STATIC
  public static getSingletonInstance() {
    if (!this.instance) {
      this.instance = new IdpState();
    }
    return this.instance;
  }
  private static instance: IdpState;
  // INSTANCE
  public receptionUrl = 'https://reception.lossless.one/typedrequest';
  public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
 }
@@ -44,7 +44,7 @@ const run = async () => {
    },
  });
-  const serviceWorker = await serviceworker.getServiceworkerClient();
+  // const serviceWorker = await serviceworker.getServiceworkerClient();
  const mainTemplate = html`
    <style>
@@ -58,8 +58,6 @@ const run = async () => {
  render(mainTemplate, document.body);
  const viewContainer: IdpViewcontainer = document.querySelector('idp-viewcontainer');
  viewContainer.loadElement(IdpWelcome);
 };
@@ -13,6 +13,18 @@ export { typedrequest };
 // @design.estate scope
 import * as deesCatalog from '@design.estate/dees-catalog';
 import * as deesDomtools from '@design.estate/dees-domtools';
 import * as deesElement from '@design.estate/dees-element';
-export { deesCatalog, deesElement };
+export { deesCatalog, deesDomtools, deesElement };
 // @push.rocks scope
 import * as smartpromise from '@push.rocks/smartpromise';
 import * as smarturl from '@push.rocks/smarturl';
 export { smartpromise, smarturl };
 // @tsclass scope
 import * as tsclass from '@tsclass/tsclass';
 export { tsclass };
@@ -0,0 +1,101 @@
 import * as plugins from '../plugins.js';
 import { IdpState } from './idp.state.js';
 export type TStateTypes = 'IAccountState';
 export interface IAccountState {
  user: plugins.idpInterfaces.data.IUser;
  /**
   * the available orgs
   */
  organizations: Array<plugins.idpInterfaces.data.IOrganization>;
  roles: Array<plugins.idpInterfaces.data.IRole>
  selectedOrg: plugins.idpInterfaces.data.IOrganization;
  selectedOrgBillingPlan: plugins.tsclass.typeFest.PartialDeep<plugins.idpInterfaces.data.IBillingPlan>;
  /**
   * used for keeping the state when creating a new org
   */
  newOrg: {
    chosenName: string;
    chosenSlug: string;
    validated: boolean;
    validationOk: boolean;
  };
 }
 const smartStateInstance = new plugins.deesDomtools.plugins.smartstate.Smartstate<TStateTypes>();
 export const accountState = await smartStateInstance.getStatePart<IAccountState>('IAccountState', {
  user: null,
  organizations: [],
  roles: [],
  selectedOrg: null,
  selectedOrgBillingPlan: null,
  newOrg: {
    chosenName: null,
    chosenSlug: null,
    validated: null,
    validationOk: null,
  },
 });
 export const getOrganizationsAction = accountState.createAction<void>(
  async (statePartArg, payloadArg) => {
    const idpState = await IdpState.getSingletonInstance();
    const currentState = statePartArg.getState();
    const response = await idpState.idpClient.getRolesAndOrganizations();
    currentState.organizations = response.organizations;
    currentState.roles = response.roles;
    return currentState;
  }
 );
 export const setNewOrgName = accountState.createAction<string>(async (statePartArg, payloadArg) => {
  const idpState = await IdpState.getSingletonInstance();
  const currentState = statePartArg.getState();
  currentState.newOrg.chosenName = payloadArg;
  currentState.newOrg.chosenSlug = payloadArg
    .replace(/[^a-zA-Z0-9]/g, '-')
    .replace(/\s/g, '-')
    .toLowerCase();
  const result = await idpState.idpClient.createOrganization(
    currentState.newOrg.chosenName,
    currentState.newOrg.chosenSlug,
    'checkAvailability'
  );
  console.log(result);
  currentState.newOrg.validated = true;
  currentState.newOrg.validationOk = result.nameAvailable;
  if (payloadArg === '') {
    currentState.newOrg.validated = false;
    currentState.newOrg.validationOk = false;
  }
  return currentState;
 });
 export const manifestNewOrgName = accountState.createAction(async (statePartArg, payloadArg) => {
  const idpState = await IdpState.getSingletonInstance();
  const currentState: IAccountState = statePartArg.getState();
  const result = await idpState.idpClient.createOrganization(
    currentState.newOrg.chosenName,
    currentState.newOrg.chosenSlug,
    'manifest'
  );
  currentState.organizations.push(result.resultingOrganization);
  currentState.selectedOrg = result.resultingOrganization;
  return currentState;
 });
 export const setSelectedOrg = accountState.createAction<plugins.idpInterfaces.data.IOrganization>(async (statePartArg, payloadArg) => {
  const currentState = statePartArg.getState();
  currentState.selectedOrg = payloadArg;
  return currentState;
 })
 export const updatePaddleCheckoutId = accountState.createAction<string>(async (statePartArg, checkoutIdArg) => {
  const idpState = await IdpState.getSingletonInstance();
  const currentState: IAccountState = statePartArg.getState();
  const response = await idpState.idpClient.updatePaddleCheckoutId(currentState.selectedOrg.id, checkoutIdArg);
  currentState.selectedOrgBillingPlan = response.billingPlan;
  return currentState;
 });
@@ -0,0 +1,78 @@
 import * as plugins from '../plugins.js';
 import { domtools } from '@design.estate/dees-element'
 export class IdpState {
  // STATIC
  private static idpStateDeferred = plugins.smartpromise.defer<IdpState>();
  public static async getSingletonInstance() {
    if (!this.idpStateDeferred.claimed) {
      this.idpStateDeferred.claim();
      const newIdpState = new IdpState();
      await newIdpState.init();
      this.idpStateDeferred.resolve(newIdpState);
    }
    return this.idpStateDeferred.promise;
  }
  // INSTANCE
  public receptionUrl = window.location.origin;
  public idpClient = new plugins.idpClient.IdpClient(this.receptionUrl);
  public domtools: domtools.DomTools;
  public mainStatePart: plugins.deesDomtools.plugins.smartstate.StatePart<'main', {
    view: 'welcome' | 'login' | 'register' | 'finishregistration' | 'account' | 'logout';
  }>
  public async init() {
    this.idpClient.enableTypedSocket();
    const domtoolsInstance = await domtools.DomTools.setupDomTools();
    this.domtools = domtoolsInstance;
    const state = new plugins.deesDomtools.plugins.smartstate.Smartstate<'main'>();
    this.mainStatePart = await state.getStatePart('main', {
      view: 'welcome',
    }, 'soft');
    this.domtools.router.on('/', async () => {
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'welcome',
      })
    });
    this.domtools.router.on('/login', async () => {
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'login',
      })
    });
    this.domtools.router.on('/logout', async () => {
      await this.idpClient.logout();
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'logout',
      })
    });
    this.domtools.router.on('/register', async () => {
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'register',
      })
    });
    this.domtools.router.on('/finishregistration', async () => {
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'finishregistration',
      })
    });
    this.domtools.router.on('/account{/*path}', async () => {
      await this.mainStatePart.setState({
        ...this.mainStatePart.getState(),
        view: 'account',
      })
    });
    this.domtools.router._handleRouteState();
  }
 }
@@ -1,4 +1,6 @@
 import { IdpState } from '../states/idp.state.js';
 import * as plugins from '../plugins.js';
 import * as elements from '../elements/index.js';
 import {
  customElement,
@@ -31,22 +33,22 @@ export class IdpViewcontainer extends DeesElement {
      .viewContainer {
        min-width: 100vh;
        min-height: 100vh;
        background: linear-gradient(-255deg,#06152280 -3.35%,#939eff38 32.79%,#22578480 67.41%,#06152280 97.48%),#212121;
      }
    `,
  ];
  public render(): TemplateResult {
    return html`
      <style></style>
-      <div class="viewContainer">
+      <div class="viewContainer"></div>
      </div>
    `;
  }
  public currentElement: plugins.deesElement.DeesElement;
  public async loadElement(viewElement: typeof plugins.deesElement.DeesElement) {
    const idpState = await IdpState.getSingletonInstance();
    // Wait until the viewContainer itself is rendered
    await this.updateComplete;
@@ -58,20 +60,65 @@ export class IdpViewcontainer extends DeesElement {
      throw new Error('View container not found in the rendered DOM.');
    }
    if (!this.currentElement) {
      this.currentElement = viewContainer.children[0] as any;
    }
    // check if current element already is instance of viewElement
    if (this.currentElement instanceof viewElement) {
      return;
    }
    // Remove the current element if it exists
    if (this.currentElement) {
      const currentElement = this.currentElement as any;
      if (currentElement.hide) {
        await currentElement.hide();
      }
      viewContainer.removeChild(this.currentElement);
    }
    // Create a new instance of the viewElement
-    const newElement = new viewElement();
+    const newElement = new viewElement() as any;
    (newElement as any).viewContainer = this;
    viewContainer.appendChild(newElement);
    if (newElement.show) {
      await newElement.show();
    }
    // Wait until the new element is fully rendered
    await newElement.updateComplete;
    // Set the new element as the current element
    this.currentElement = newElement;
  }
  public async firstUpdated() {
    const idpState = await IdpState.getSingletonInstance();
    idpState.mainStatePart
      .select((stateArg) => stateArg.view)
      .subscribe(async (viewArg) => {
        switch (viewArg) {
          case 'welcome':
            await this.loadElement(elements.IdpWelcome);
            break;
          case 'login':
            console.log('now on /login');
            await this.loadElement(elements.IdpLoginPrompt);
            break;
          case 'register':
            await this.loadElement(elements.IdpRegistrationPrompt);
            break;
          case 'finishregistration':
            await this.loadElement(elements.IdpRegistrationStepper);
            break;
          case 'account':
            console.log('now on /account');
            await this.loadElement(elements.IdpAccountContent);
            break;
        }
      });
  }
 }
@@ -1,8 +1,6 @@
 {
  "compilerOptions": {
-    "experimentalDecorators": true,
+    "target": "es2022",
    "useDefineForClassFields": false,
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
Author	SHA1	Message	Date
jkunz	fd089b2cee	v1.6.0 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	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
jkunz	ff1387df9f	v1.5.0 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2025-12-01 04:08:17 +00:00
jkunz	401d35186f	feat(account): Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior	2025-12-01 04:08:17 +00:00
jkunz	9d012cd59f	Update dependencies and improve validation function handling in registration stepper	2025-12-01 00:10:34 +00:00
jkunz	b541340ca5	update	2025-11-30 23:09:40 +00:00
jkunz	531909e88c	Refactor code structure for improved readability and maintainability	2025-11-30 22:41:59 +00:00
jkunz	e92bdeaa2b	update design	2025-11-30 22:35:24 +00:00
jkunz	19f016a476	update	2025-11-30 22:13:45 +00:00
jkunz	014fb3080a	add stories	2025-11-30 15:01:28 +00:00
philkunz	c8b8013200	1.4.3 Docker (tags) / security (push) Failing after 1s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2025-04-03 18:35:38 +00:00
philkunz	0b8639b033	fix(website): Update packageManager configuration in package.json and refine view container background styling	2025-04-03 18:35:38 +00:00
philkunz	08828d6771	update	2024-12-11 01:19:54 +01:00
philkunz	aa5cc9ff81	1.4.2 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-12 23:41:24 +02:00
philkunz	944f689165	fix(UI): Improve text rendering in account navigation.	2024-10-12 23:41:23 +02:00
philkunz	0d613fd634	1.4.1 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-07 15:14:45 +02:00
philkunz	a94d1875bd	fix(core): Bug fixes and UI enhancements	2024-10-07 15:14:44 +02:00
philkunz	46844fed58	1.4.0 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-07 10:26:21 +02:00
philkunz	03a8536297	feat(core): Refactored plugin and request handling to use idpInterfaces	2024-10-07 10:26:21 +02:00
philkunz	1bfdc67a0e	1.3.1 Docker (tags) / security (push) Failing after 1s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-07 00:08:53 +02:00
philkunz	3cb79c8dbe	fix(account): Fix: updated cleanupViews method to correctly iterate over children.	2024-10-07 00:08:52 +02:00
philkunz	c547105ab6	1.3.0 Docker (tags) / security (push) Failing after 1s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-06 23:56:04 +02:00
philkunz	f7600ca83f	feat(account): Implement account and organization management features	2024-10-06 23:56:03 +02:00
philkunz	2c0e771da2	1.2.2 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-04 15:43:37 +02:00
philkunz	4deaafc3a2	fix(core): Update dependencies and refactor registration process	2024-10-04 15:43:36 +02:00
philkunz	629bf19845	1.2.1 Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2024-10-04 02:18:48 +02:00
philkunz	9e2d45123f	fix(core): Added logging for user email login process and fixed client URL parsing	2024-10-04 02:18:47 +02:00
		`@@ -0,0 +1,2 @@`
							`export * from './content.js';`
							`export * from './navigation.js';`