v1.5.0

changelog.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 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'
 

npmextra.json

@@ -31,7 +31,11 @@
         "user data",
         "user sessions"
       ]
-    }
+    },
+    "services": [
+      "mongodb",
+      "minio"
+    ]
   },
   "npmci": {
     "npmGlobalTools": [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/idp.global",
-  "version": "1.4.0",
+  "version": "1.5.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.13",
+    "@design.estate/dees-catalog": "^2.0.2",
-    "@design.estate/dees-domtools": "^2.0.64",
+    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.0.39",
+    "@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.19",
+    "@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.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.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.4"
+    "@types/node": "^24.10.1"
   },
   "private": true,
   "repository": {
@@ -101,5 +101,6 @@
     "API",
     "user data",
     "user sessions"
-  ]
+  ],
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

stories/README.md

@@ -0,0 +1,87 @@
+# 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 (8)
+├── developer/          # Stories for API/SDK consumers (7)
+└── 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 |
+
+### 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 |
+
+### 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 | 10 | EU-001, EU-004, ORG-001, ORG-003, ORG-006, DEV-001, DEV-002, DEV-004, ADM-002, ADM-003 |
+| Medium | 12 | EU-003, EU-005, EU-006, ORG-004, ORG-005, ORG-007, ORG-008, DEV-003, DEV-005, DEV-007, ADM-004, ADM-005, ADM-007 |
+| Low | 5 | EU-007, EU-008, DEV-006, ADM-006 |
+
+## 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`

stories/admin/ADM-001-backend-token-security.md

@@ -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`

stories/admin/ADM-002-user-suspension.md

@@ -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

stories/admin/ADM-003-global-audit-log.md

@@ -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

stories/admin/ADM-004-email-templates.md

@@ -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

stories/admin/ADM-005-security-dashboard.md

@@ -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

stories/admin/ADM-006-user-impersonation.md

@@ -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

stories/admin/ADM-007-blocklist-management.md

@@ -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

stories/developer/DEV-001-api-token-management.md

@@ -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

stories/developer/DEV-002-sdk-documentation.md

@@ -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

stories/developer/DEV-003-webhook-events.md

@@ -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

stories/developer/DEV-004-app-id-setup.md

@@ -0,0 +1,28 @@
+# 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)
+- Need Application model in database
+- App credentials similar to OAuth client credentials
+- Validate redirect URIs to prevent open redirector attacks
+- App ID should be included in JWT claims
+
+## Related TODOs
+- `ts_idpclient/classes.idpclient.ts:30` - `id: '', // TODO`

stories/developer/DEV-005-oauth-client.md

@@ -0,0 +1,28 @@
+# 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 keywords in package.json suggest this is planned
+- Implement OAuth 2.0 authorization server endpoints
+- Scopes: openid, profile, email, organizations
+- Consider OpenID Connect for identity layer
+- PKCE is required for mobile and SPA security
+
+## Related TODOs
+- New feature - OAuth server implementation

stories/developer/DEV-006-rate-limiting.md

@@ -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

stories/developer/DEV-007-jwt-validation.md

@@ -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

stories/end-user/EU-001-multi-device-login.md

@@ -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`

stories/end-user/EU-002-password-reset.md

@@ -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

stories/end-user/EU-003-device-management.md

@@ -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`

stories/end-user/EU-004-two-factor-auth.md

@@ -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

stories/end-user/EU-005-social-login.md

@@ -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

stories/end-user/EU-006-account-deletion.md

@@ -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

stories/end-user/EU-007-session-history.md

@@ -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

stories/end-user/EU-008-profile-avatar.md

@@ -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

stories/organization-owner/ORG-001-billing-sync.md

@@ -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`

stories/organization-owner/ORG-002-member-management.md

@@ -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

stories/organization-owner/ORG-003-role-assignment.md

@@ -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

stories/organization-owner/ORG-004-org-branding.md

@@ -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

stories/organization-owner/ORG-005-usage-analytics.md

@@ -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

stories/organization-owner/ORG-006-sso-config.md

@@ -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

stories/organization-owner/ORG-007-audit-logs.md

@@ -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

stories/organization-owner/ORG-008-subscription-management.md

@@ -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

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.4.0',
+  version: '1.5.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts/index.ts

@@ -14,10 +14,7 @@ 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'),

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/idp.global',
-  version: '1.4.0',
+  version: '1.5.0',
   description: 'An identity provider software managing user authentications, registrations, and sessions.'
 }

ts_web/elements/account/content.ts

@@ -12,6 +12,7 @@ import {
 } 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';
@@ -36,15 +37,13 @@ export class IdpAccountContent extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
+    accountDesignTokens,
     css`
       :host {
         display: block;
-        color: #fff;
-        padding-top: 10px;
-        padding-bottom: 10px;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000000')}
+        background: var(--background);
       }
       :host([hidden]) {
         display: none;
@@ -72,7 +71,7 @@ export class IdpAccountContent extends DeesElement {
         height: 100vh;
         overflow-y: scroll;
         overscroll-behavior: contain;
-        transition: all 0.3s;
+        transition: all 0.3s ease;
         opacity: 1;
       }
 
@@ -110,6 +109,16 @@ export class IdpAccountContent extends DeesElement {
     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);
@@ -121,5 +130,11 @@ export class IdpAccountContent extends DeesElement {
     });
 
     this.subrouter._handleRouteState();
+
+    this.registerGarbageFunction(async () => {
+      this.subrouter.destroy();
+    })
   }
+
+  
 }

ts_web/elements/account/navigation.ts

@@ -7,12 +7,12 @@ import {
   unsafeCSS,
   css,
   type TemplateResult,
-  subscribe,
 } 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';
 
@@ -24,135 +24,225 @@ declare global {
 
 @customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
-  @property()
-  public options: { text: string; id: string }[] = [
-    {
-      id: '1',
-      text: 'Properties',
-    },
-    {
-      id: '2',
-      text: 'Users',
-    },
-    {
-      id: '3',
-      text: 'Activity',
-    },
-    {
-      id: '4',
-      text: 'Billing & Subscription',
-    },
-  ];
-
   constructor() {
     super();
   }
 
   public static styles = [
     cssManager.defaultStyles,
+    accountDesignTokens,
     css`
       :host {
-        display: block;
+        display: flex;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        flex-direction: column;
-        padding: 10px;
+        background: var(--card);
-        padding-left: 0px;
+        border-right: 1px solid var(--border);
-        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        height: 100%;
-        border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
       }
       :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;
-        position: absolute;
+        font-family: 'Geist Mono', monospace;
-        bottom: 0px;
+        font-size: 10px;
-        left: 0px;
+        padding: 12px 16px;
-        width: 100%;
+        border-top: 1px solid var(--border);
-        font-size: 12px;
+        color: var(--muted-foreground);
-        padding: 8px;
+        opacity: 0.6;
-        background: ${cssManager.bdTheme('#eeeeeb', '#181818')};
+        background: var(--card);
-        border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
-        color: ${cssManager.bdTheme('#666', '#ccc')};
       }
 
       .navigationGroupLabel {
-        width: min-content;
+        font-size: 10px;
-        white-space: nowrap;
+        font-weight: 600;
         text-transform: uppercase;
-        font-size: 12px;
+        letter-spacing: 0.08em;
-        font-weight: 300;
+        color: var(--muted-foreground);
-        border-bottom: 1px dotted #666;
+        padding: 20px 16px 8px;
-        margin-bottom: 5px;
+        opacity: 0.7;
-        padding-top: 32px;
+      }
-        padding-left: 10px;
+
-        padding-bottom: 5px;
+      .navigationGroupLabel:first-of-type {
+        padding-top: 16px;
       }
 
       .navigationOption {
-        border-top-right-radius: 30px;
+        display: flex;
-        border-bottom-right-radius: 30px;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        margin: 2px 8px;
+        border-radius: 8px;
+        font-size: 13px;
         font-weight: 500;
-        padding: 8px;
+        color: var(--muted-foreground);
-        padding-left: 10px;
+        transition: all 0.15s ease;
-        margin-bottom: 5px;
+        cursor: pointer;
       }
 
       .navigationOption:hover {
-        cursor: pointer;
+        background: var(--muted);
-        background: ${cssManager.bdTheme('#bbb', '#333')};
+        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-top: 16px;
+        margin: 8px;
-        margin-bottom: 16px;
-        margin-left: 8px;
       }
     `,
   ];
 
+  public async getAccountRouter() {
+    const host = (this.getRootNode() as any).host;
+    return (host as any).subrouter;
+  }
+
   public render(): TemplateResult {
     return html`
-      <style></style>
+      <div class="logoArea">
-      <div class="commitinfo">idp.global v${commitinfo.version}</div>
+        <div class="logo">
-      <div class="navigationGroupLabel">Account Settings</div>
+          <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
-      <div
+          idp.global
-        class="navigationOption"
+        </div>
-        @click=${async () => {
-          const idpState = await IdpState.getSingletonInstance();
-          idpState.domtools.router.pushUrl('/logout');
-        }}
-      >
-        logout
       </div>
-      <div
-        class="navigationOption"
-        @click=${async () => {
 
-        }}
+      <div class="navContent">
-      >
+        <div class="navigationGroupLabel">Account</div>
-        manage roles
+        <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 () => {}}
+        >
+          <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 () => {}}
+        >
+          <dees-icon .icon=${'lucide:wallet'}></dees-icon>
+          Billing
+        </div>
       </div>
-      <div
+
-        class="navigationOption"
+      <div class="commitinfo">v${commitinfo.version}</div>
-        @click=${async () => {
-        }}
-      >
-        create an org
-      </div>
-      <div class="navigationGroupLabel">Organization Settings</div>
-      <dees-input-dropdown
-        .label=${'choose org:'}
-        @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>
-      ${this.options.map((option) => {
-        return html` <div class="navigationOption">${option.text}</div> `;
-      })}
     `;
   }
 

ts_web/elements/account/sharedstyles.ts

@@ -1,28 +1,117 @@
 import { css } from '@design.estate/dees-element';
 
-export default css`
+/**
+ * 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 {
-    margin-top: 50px;
+    font-size: 24px;
-    border-bottom: 1px solid #666;
+    font-weight: 600;
-    padding-bottom: 10px;
+    color: var(--foreground);
-    font-weight: 500;
+    margin: 0 0 8px 0;
+    letter-spacing: -0.02em;
   }
 
   h2 {
-    border-top: 1px dotted #666;
+    font-size: 18px;
-    padding-top: 16px;
+    font-weight: 600;
+    color: var(--foreground);
+    margin: 24px 0 8px 0;
+    letter-spacing: -0.01em;
   }
 
   p {
-    line-height: 1.5em;
+    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;
-    width: 200px;
   }
 
   dees-input-text {
-    max-width: 400px;
+    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}
+`;

ts_web/elements/account/views/baseview.ts

@@ -8,10 +8,10 @@ import {
   unsafeCSS,
   css,
   render,
-  subscribe,
+  directives,
 } from '@design.estate/dees-element';
 
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -26,7 +26,7 @@ export class BaseView extends DeesElement {
   @property({
     type: Array,
   })
-  subscriptions: any[] = [
+  accessor subscriptions: any[] = [
     {
       organization: 'org1',
       'subscription type': 'workspace.global SaaS',
@@ -52,39 +52,84 @@ export class BaseView extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-    sharedStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
     css`
       :host {
         display: block;
-        max-width: 900px;
+        padding: 48px;
-        margin: auto;
-        color: ${cssManager.bdTheme('#333', '#fff')};
       }
+
+      .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: orange;
+        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: ${cssManager.cssGridColumns(4, 16)}
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        margin-top: 24px;
       }
 
       .org {
-        padding: 16px;
+        padding: 20px;
-        border: 1px dotted #666;
+        background: var(--card);
-        border-radius: 3px;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        color: var(--foreground);
+        transition: all 0.15s ease;
+        cursor: pointer;
       }
 
       .org:hover {
-        cursor: pointer;
+        background: var(--muted);
-        background: ${cssManager.bdTheme('#CCC', '#333')};
+        border-color: var(--muted-foreground);
+      }
+
+      .org dees-icon {
+        opacity: 0.7;
       }
     `,
   ];
 
   public render() {
-    return html` <div class="viewHost"></div> `;
+    return html`
+    <div class="viewHost">
+
+    </div> `;
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
@@ -96,24 +141,26 @@ export class BaseView extends DeesElement {
     if (state.accountState.getState().organizations.length === 0) {
       render(
         html`
-          <h1>Setup Your Account</h1>
+          <div class="card">
-          <p>
+            <h1>Setup Your Account</h1>
-            There are no organizations for your account. Please create one now. Alternatively you
+            <p>
-            can ask an admin of an existing organization to invite you.
+              There are no organizations for your account. Please create one now. Alternatively you
-          </p>
+              can ask an admin of an existing organization to invite you.
-          <dees-form>
+            </p>
-            <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
+            <dees-form>
-          </dees-form>
+              <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
-          <p>
+            </dees-form>
-            The organization slug corresponds to the organization name:<br />
+            <p>
-            <span class="slug"
+              The organization slug will be:<br />
-              >${subscribe(
+              <span class="slug"
-                state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
+                >${directives.subscribe(
-              )}</span
+                  state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
-            >
+                )}</span
-          </p>
+              >
-          <span class="hint"></span>
+            </p>
-          <dees-button .disabled=${true}>Create the Organization</dees-button>
+            <span class="hint"></span>
+            <dees-button .disabled=${true}>Create the Organization</dees-button>
+          </div>
         `,
         viewHost
       );
@@ -147,33 +194,44 @@ export class BaseView extends DeesElement {
       subscriptions.push(formSubscription);
       button.addEventListener('clicked', async () => {
         orgInput.disabled = true;
-        button.text = 'creating org...'
+        button.text = 'creating org...';
         button.status = 'pending';
-        hint.innerHTML = 'Waiting for creation of the organization...'
+        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!`
+        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`);
+        parentElement.subrouter.pushUrl(
+          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
+        );
       });
     } else {
-      render(html`
+      render(
-        <h1>Select An Organization</h1>
+        html`
-        <div class="orgGrid">
+          <h1>Select An Organization</h1>
-          ${state.accountState.getState().organizations.map(orgArg => {
+          <p>Choose an organization to manage its settings and billing.</p>
-            return html`
+          <div class="orgGrid">
-              <div class="org" @click=${() => {
+            ${state.accountState.getState().organizations.map((orgArg) => {
-                state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
+              return html`
-                const parentElement = (this.getRootNode() as any).host;
+                <div
-                parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
+                  class="org"
-              }}>
+                  @click=${() => {
-                ${orgArg.data.name}
+                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
-              </div>
+                    const parentElement = (this.getRootNode() as any).host;
-            `
+                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
-          })}
+                  }}
-        </div>
+                >
-      `, viewHost)
+                  <dees-icon .icon=${'lucide:building2'} style="display: inline-block; transform: translateY(3px); padding-right: 8px;"></dees-icon> ${orgArg.data.name}
+                </div>
+              `;
+            })}
+          </div>
+        `,
+        viewHost
+      );
     }
   }
 }

ts_web/elements/account/views/subscriptions.ts

@@ -8,7 +8,7 @@ import {
   css,
 } from '@design.estate/dees-element';
 
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 
 import * as state from '../../../states/accountstate.js';
 
@@ -24,7 +24,7 @@ export class SubscriptionView extends DeesElement {
   @property({
     type: Array,
   })
-  subscriptions: any[] = [{
+  accessor subscriptions: any[] = [{
     organization: 'org1',
     'subscription type': 'workspace.global SaaS',
     price: '4€',
@@ -46,48 +46,106 @@ export class SubscriptionView extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-    sharedStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
     css`
       :host {
         display: block;
+        padding: 48px;
         max-width: 900px;
-        margin: auto;
+        margin: 0 auto;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .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>
+      <h1>Billing & Subscription</h1>
-      This page allows you to setup how you are billed for any workspace.global charges.
+      <p>Manage your billing settings and subscriptions for your organization.</p>
-      <h2>PaymentMethod</h2>
+
-      <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
+      <div class="section">
-      and we will bill any occurring charges as an extra on the monthly date of your choosing.
+        <h2>Payment Method</h2>
-      Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
+        <div class="card">
-      <h3>Paddle</h3>
+          <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
-      <dees-button @click=${async () => {
+          and we will bill any occurring charges as an extra on the monthly date of your choosing.
-        await this.domtoolsPromise;
+          Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
-        this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
+
-      }}>set up paddle.com</dees-button>
+          <h3>Paddle</h3>
-      <h3>Enterprise billing</h3>
+          <dees-button @click=${async () => {
-      Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here. Note: You are currently not eligible.
+            await this.domtoolsPromise;
-      <h2>Subscriptions</h2>
+            this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
-      <p>
+          }}>Set up Paddle.com</dees-button>
-        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.
+          <h3>Enterprise Billing</h3>
-      </p>
+          <p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
-      <p>
+          <p><em>Note: You are currently not eligible.</em></p>
-        Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
+        </div>
-        To see other organization, select the respective organization at the top left of this page.
+      </div>
-      </p>
+
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+      <div class="section">
-      <dees-button>Add subscription</dees-button>
+        <h2>Subscriptions</h2>
-      <h2>Accrued IaaS Usage</h2>
+        <div class="card">
-      <p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
+          <p>
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+            The total price of a subscription already includes all taxes. If you are a VAT registered business,
-      <h2>Upcoming Billable Items</h2>
+            the actual price might be cheaper in case you can claim VAT exemption from the purchase.
-      <h2>Past Invoices</h2>
+          </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>
     `;
   }
 }

ts_web/elements/idp-centercontainer.ts

@@ -32,89 +32,288 @@ export class IdpCenterContainer extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans';
+        --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);
       }
 
-      .mainContainer {
+      .split-container {
         position: absolute;
-        top: 0px;
+        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;
-        align-items: center;
+        padding: 48px;
-        opacity: 0;
+        position: relative;
-        transition: all 0.1s;
-        transition-delay: 0.05s;
-        transform: translate3d(0px, 8px, 0px);
-        pointer-events: none;
-      }
-
-      .mainContainer.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 {
+      .brand-panel::before {
-        font-size: 24px;
+        content: '';
-        font-family: 'Cal Sans';
+        position: absolute;
-        text-align: center;
+        top: 0;
-        letter-spacing:0.0125em;
+        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;
       }
 
-      .contentSpacer {
+      .brand-content {
-        padding: 0px 0px 16px 0px;
+        position: relative;
+        z-index: 1;
+        max-width: 400px;
       }
 
-      .legalinfo {
+      .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;
-        margin: auto;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
         font-size: 12px;
-        line-height: 100%;
+        color: var(--muted-foreground);
-        padding: 8px;
-        background: ${cssManager.bdTheme('#f5f5f5', '#111')};
-        border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
-        color: ${cssManager.bdTheme('#666', '#888')};
       }
 
-      .legalinfo a {
+      .form-footer a {
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        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="mainContainer">
+      <div class="split-container">
-        <div class="loginblock">
+        <!-- Left: Branding Panel -->
-          <h1>idp.global</h1>
+        <div class="brand-panel">
-          <div class="contentSpacer">
+          <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>
-          <div class="legalinfo">
+          <footer class="form-footer">
-            <a href="https://legal.task.vc/" target="_blank">Legal Info</a>
+            <a href="https://legal.task.vc/" target="_blank">Legal</a>
-            | <a href="https://task.vc/" target="_blank">Company Website</a>
+            <span class="separator">·</span>
-            | <a href="https://support.task.vc/" target="_blank">Support</a>
+            <a href="https://task.vc/" target="_blank">Company</a>
-            | idp.global v${commitinfo.version}
+            <span class="separator">·</span>
-          </div>
+            <a href="https://support.task.vc/" target="_blank">Support</a>
+            <div class="version">v${commitinfo.version}</div>
+          </footer>
         </div>
       </div>
     `;
@@ -125,8 +324,8 @@ export class IdpCenterContainer extends DeesElement {
     const domtoolsInstance = await this.domtoolsPromise;
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
-      this.shadowRoot.querySelector('.mainContainer').classList.add('show');
+      this.shadowRoot.querySelector('.form-content').classList.add('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      await domtoolsInstance.convenience.smartdelay.delayFor(350);
       done.resolve();
     });
     return done.promise;
@@ -137,8 +336,8 @@ export class IdpCenterContainer extends DeesElement {
     const domtoolsInstance = await this.domtoolsPromise;
     const done = plugins.smartpromise.defer();
     requestAnimationFrame(async () => {
-      this.shadowRoot.querySelector('.mainContainer').classList.remove('show');
+      this.shadowRoot.querySelector('.form-content').classList.remove('show');
-      await domtoolsInstance.convenience.smartdelay.delayFor(200);
+      await domtoolsInstance.convenience.smartdelay.delayFor(350);
       done.resolve();
     });
     return done.promise;

ts_web/elements/idp-loginprompt.ts

@@ -30,16 +30,16 @@ export class IdpLoginPrompt extends DeesElement {
   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>();
 
@@ -52,17 +52,56 @@ export class IdpLoginPrompt 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;
       }
     `,
   ];
@@ -70,34 +109,38 @@ export class IdpLoginPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
-          <dees-form
+          <h2>Sign in to your account</h2>
-            id="loginForm"
+          <p>Enter your credentials to continue</p>
-            @formData="${(eventArg) => {
+        </div>
-              this.login({
+        <dees-form
-                emailAddress: eventArg.detail.data.emailAddress,
+          id="loginForm"
-                passwordArg: eventArg.detail.data.password,
+          @formData="${(eventArg) => {
-              });
+            this.login({
-            }}"
+              emailAddress: eventArg.detail.data.emailAddress,
-          >
+              passwordArg: eventArg.detail.data.password,
-            <dees-input-text
+            });
-              id="loginEmailInput"
+          }}"
-              .required=${true}
+        >
-              key="emailAddress"
+          <dees-input-text
-              label="Email-Address or Username"
+            id="loginEmailInput"
-            ></dees-input-text>
+            .required=${true}
-            <dees-input-text
+            key="emailAddress"
-              .id=${'loginPasswordInput'}
+            label="Email or Username"
-              .key=${'password'}
+          ></dees-input-text>
-              .label=${'Password'}
+          <dees-input-text
-              .isPasswordBool=${true}
+            .id=${'loginPasswordInput'}
-            ></dees-input-text>
+            .key=${'password'}
-            <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+            .label=${'Password'}
-          </dees-form>
+            .isPasswordBool=${true}
-          <dees-button type="discreet" class="registerButton" @clicked=${async () => {
+          ></dees-input-text>
+          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+        </dees-form>
+        <div class="form-footer">
+          Don't have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
             idpState.domtools.router.pushUrl('/register');
-          }}>Register instead</dees-button>
+          }}>Create one</a>
         </div>
       </idp-centercontainer>
     `;
@@ -124,9 +167,9 @@ export class IdpLoginPrompt extends DeesElement {
   }
 
   private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
-    // lets disable the register button
+    // lets disable the submit button
-    const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
+    const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
-    registerButton.disabled = true;
+    loginSubmitButton.disabled = true;
     // lets define the needed requests
     const idpState = await IdpState.getSingletonInstance();
     const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');

ts_web/elements/idp-registerprompt.ts

@@ -30,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>();
 
@@ -52,29 +52,56 @@ 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);
       }
 
-      .boxcontent {
+      .form-header {
-        margin: 0px 20px;
+        margin-bottom: 32px;
+        text-align: center;
       }
 
-      .registerButton {
+      .form-header h2 {
-        display: block;
+        font-size: 24px;
-        transition: all 0.2s ease;
+        font-weight: 600;
-        will-change: transform;
+        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;
       }
 
-      .registerButton:hover {
+      .form-footer a:hover {
-        color: #fff;
+        opacity: 0.8;
-        transform: scale(1.02);
-      }
-
-      .loginButton {
-        margin-top: 16px;
       }
     `,
   ];
@@ -82,36 +109,46 @@ export class IdpRegistrationPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
-          <dees-form
+          <h2>Create your account</h2>
-            id="registrationForm"
+          <p>Get started with your permanent identity</p>
-            @formData="${(eventArg) => {
+        </div>
-              this.register({
+        <dees-form
-                emailAddress: eventArg.detail.data.emailAddress,
+          id="registrationForm"
-              });
+          @formData="${(eventArg) => {
-            }}"
+            this.register({
-          >
+              emailAddress: eventArg.detail.data.emailAddress,
-            <dees-input-text
+            });
-              .required=${true}
+          }}"
-              key="emailAddress"
+        >
-              label="Email-Address"
+          <dees-input-text
-            ></dees-input-text>
+            .required=${true}
-            <dees-input-checkbox
+            key="emailAddress"
-              .label="${'Agree to the Terms and Conditions'}"
+            label="Email Address"
-            ></dees-input-checkbox>
+          ></dees-input-text>
-            <dees-form-submit>Send Verification Email</dees-form-submit>
+          <dees-input-checkbox
-          </dees-form>
+            .label="${'I agree to the Terms and Conditions'}"
-          <dees-button type="discreet" class="loginButton" @click=${async () => {
+            .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');
-          }}>Login instead</dees-button>
+          }}>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');

ts_web/elements/idp-registration-stepper.ts

@@ -15,10 +15,10 @@ import {
 @customElement('idp-registration-stepper')
 export class IdpRegistrationStepper extends DeesElement {
   @state()
-  private usedSubTemplate: TemplateResult;
+  accessor usedSubTemplate: TemplateResult;
 
   @state()
-  private storedData = {
+  accessor storedData = {
     validationTokenUrlParam: 'string',
     email: '',
     refreshToken: '',
@@ -34,31 +34,251 @@ 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 -->
-        ${this.usedSubTemplate
+        <div class="brand-panel">
-          ? this.usedSubTemplate
+          <div class="brand-content">
-          : html`<dees-spinner size="60"></dees-spinner>`}
+            <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`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
+          </div>
+        </div>
       </div>
     `;
   }
@@ -71,8 +291,10 @@ export class IdpRegistrationStepper extends DeesElement {
     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
+        <div class="error-message">
-        support.
+          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);
       window.location.href = '/';
@@ -97,8 +319,10 @@ export class IdpRegistrationStepper extends DeesElement {
 
     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);
       idpState.domtools.router.pushUrl('/');
@@ -125,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 idpState.idpClient.requests.setData
+              await idpState.idpClient.requests.setData
                 .fire({
                   token: this.storedData.validationTokenUrlParam,
                   userData: {
@@ -148,7 +372,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 );
               deesForm.setStatus('success', 'ok!');
               stepperArg.goNext();
-            });
+            }, { signal });
           },
           onReturnToStepFunc: async (stepperArg, stepElementArg) => {
             const deesForm = stepElementArg.querySelector('dees-form');
@@ -167,10 +391,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 idpState.idpClient.requests.mobileNumberVerification
+              await idpState.idpClient.requests.mobileNumberVerification
                 .fire({
                   token: this.storedData.validationTokenUrlParam,
                   mobileNumber: eventArg.detail.data.mobileNumber,
@@ -184,7 +408,7 @@ export class IdpRegistrationStepper extends DeesElement {
                 );
               deesForm.setStatus('success', 'ok!');
               stepperArg.goNext();
-            });
+            }, { signal });
           },
           onReturnToStepFunc: async (stepperArg, stepElementArg) => {
             const deesForm = stepElementArg.querySelector('dees-form');
@@ -203,7 +427,7 @@ 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 idpState.idpClient.requests.mobileNumberVerification.fire({
@@ -219,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();
@@ -239,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 idpState.idpClient.requests.setData.fire({
+              await idpState.idpClient.requests.setData.fire({
                 token: this.storedData.validationTokenUrlParam,
                 userData: {
                   username: null,
@@ -253,10 +477,9 @@ export class IdpRegistrationStepper extends DeesElement {
                   password: eventArg.detail.data.password,
                 },
               });
-              const finishRegistrationResponse =
+              await idpState.idpClient.requests.finishRegistration.fire({
-                await idpState.idpClient.requests.finishRegistration.fire({
+                token: this.storedData.validationTokenUrlParam,
-                  token: this.storedData.validationTokenUrlParam,
+              });
-                });
               deesForm.setStatus('pending', 'User created!');
               await this.domtools.convenience.smartdelay.delayFor(500);
               deesForm.setStatus('pending', 'Obtaining Refresh Token...');
@@ -275,11 +498,19 @@ export class IdpRegistrationStepper extends DeesElement {
               deesForm.setStatus('success', 'Ok! Lets Go!');
               await idpState.idpClient.setJwt(jwtResponse.jwt);
               idpState.domtools.router.pushUrl('/account');
-            });
+            }, { signal });
           },
         },
       ] as plugins.deesCatalog.IStep[]}
     ></dees-stepper>`;
     await this.domtools.convenience.smartdelay.delayFor(100);
   }
+
+  public async show() {
+    await this.updateComplete;
+  }
+
+  public async hide() {
+    await this.updateComplete;
+  }
 }

ts_web/elements/idp-welcome.ts

@@ -9,9 +9,10 @@ import {
   cssManager,
   unsafeCSS,
   css,
-  resolveExec,
   type TemplateResult,
+  directives
 } from '@design.estate/dees-element';
+
 import type { IdpViewcontainer } from '../views/viewcontainer.js';
 import { IdpState } from '../states/idp.state.js';
 
@@ -27,103 +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: 0px auto;
+        font-weight: 600;
-        padding: 24px 24px 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 () => {
-
-      <div class="textbox">
-        ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              Hello ${data.user.data.name}!
+              <div class="form-header">
-              <dees-button
+                <h2>Welcome back</h2>
-                @click=${async () => {
+                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
-                  const idpState = await IdpState.getSingletonInstance();
+              </div>
-                  idpState.domtools.router.pushUrl('/account');
+              <div class="button-group">
-                }}
+                <dees-button
-                >Manage your account</dees-button
+                  @click=${async () => {
-              >
+                    const idpState = await IdpState.getSingletonInstance();
-              <dees-button
+                    idpState.domtools.router.pushUrl('/account');
-                @click=${async () => {
+                  }}
-                  const idpState = await IdpState.getSingletonInstance();
+                >Manage your account</dees-button>
-                  idpState.domtools.router.pushUrl('/logout');
+                <dees-button
-                }}
+                  type="secondary"
-                >Logout</dees-button
+                  @click=${async () => {
-              >
+                    const idpState = await IdpState.getSingletonInstance();
-            `
+                    idpState.domtools.router.pushUrl('/logout');
+                  }}
+                >Sign out</dees-button>
+              </div>
+            `;
           }
           return html`
-            Do you want to sign in or register?
+            <div class="form-header">
-            <dees-button
+              <h2>Welcome</h2>
-              @click=${async () => {
+              <p>Sign in to your account or create a new one</p>
-                const idpState = await IdpState.getSingletonInstance();
+            </div>
-                idpState.domtools.router.pushUrl('/login');
+            <div class="button-group">
-              }}
+              <dees-button
-              >Sign In</dees-button
+                @click=${async () => {
-            >
+                  const idpState = await IdpState.getSingletonInstance();
-            <dees-button
+                  idpState.domtools.router.pushUrl('/login');
-              @click=${async () => {
+                }}
-                const idpState = await IdpState.getSingletonInstance();
+              >Sign In</dees-button>
-                idpState.domtools.router.pushUrl('/register');
+              <dees-button
-              }}
+                type="secondary"
-              >Register</dees-button
+                @click=${async () => {
-            >
+                  const idpState = await IdpState.getSingletonInstance();
+                  idpState.domtools.router.pushUrl('/register');
+                }}
+              >Create Account</dees-button>
+            </div>
           `;
         })}
-      </div>
+        <div class="secondary-actions">
-
+          <dees-button
-      <div class="textbox">
+            type="discreet"
-        Do you want to use idp.global for your app?
+            @click=${() => {
-        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
+              window.open('https://code.foss.global/idp.global/idp.global', '_blank');
-      </div>
+            }}
-
+          >View Source Code</dees-button>
-      <div class="textbox">
+        </div>
-        idp.global is a Open Source identity provider for the world wide web. You can get the code
+      </idp-centercontainer>
-        if you want to improve it.
-        <dees-button
-          @click=${() => {
-            window.open('https://code.foss.global/idp.global/idp.global', '_blank');
-          }}
-          >Get the code</dees-button
-        >
-      </div>
     `;
   }
+
+  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();
+  }
 }

ts_web/views/viewcontainer.ts

@@ -33,6 +33,7 @@ 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;
       }
     `,
   ];
@@ -59,6 +60,10 @@ 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;

tsconfig.json

@@ -1,8 +1,6 @@
 {
   "compilerOptions": {
-    "experimentalDecorators": true,
+    "target": "es2022",
-    "useDefineForClassFields": false,
-    "target": "ES2022",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,