v1.5.0

changelog.md

@@ -1,5 +1,14 @@
 # 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
 

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.3",
+  "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.2.0",
+    "@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": {

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.3',
+  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.3',
+  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;
       }
 

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,108 +24,122 @@ declare global {
 
 @customElement('lele-accountnavigation')
 export class LeleAccountNavigation extends DeesElement {
-  @property()
-  public options: { text: string; id: string }[] = [
-    {
-      id: '1',
-      text: 'Apps',
-    },
-    {
-      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', '#000')};
+        height: 100%;
-        border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
       }
       :host([hidden]) {
         display: none;
       }
 
+      .logoArea {
+        padding: 20px 16px;
+        border-bottom: 1px solid var(--border);
+        flex-shrink: 0;
+      }
+
       .logo {
-        font-family: 'Cal Sans';
+        font-family: 'Cal Sans', 'Geist Sans', sans-serif;
-        letter-spacing: 0.0125em;
+        letter-spacing: -0.02em;
-        font-size: 16px;
+        font-size: 20px;
-        text-align: center;
+        font-weight: 600;
-        padding: 16px 0px 16px 0px;
+        color: var(--foreground);
-        margin: -8px -8px -16px 0px;
+        cursor: pointer;
-        border-bottom: 1px solid #111111;
+        transition: opacity 0.15s ease;
-        cursor: default;
+        display: flex;
-        position: relative;
+        align-items: center;
-        z-index: 10;
+        gap: 8px;
       }
 
       .logo:hover {
-        background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
+        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;
-        font-family: 'Intel One Mono';
+        border-top: 1px solid var(--border);
-        width: 100%;
+        color: var(--muted-foreground);
-        font-size: 12px;
+        opacity: 0.6;
-        padding: 8px;
+        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 solid;
+        padding: 20px 16px 8px;
-        border-image: linear-gradient(to right, orange, #44444400) 1;
+        opacity: 0.7;
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
-        margin-bottom: 5px;
+
-        padding-top: 32px;
+      .navigationGroupLabel:first-of-type {
-        padding-left: 10px;
+        padding-top: 16px;
-        padding-bottom: 5px;
       }
 
       .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;
-        font-size: 14px;
       }
 
       .navigationOption:hover {
-        cursor: default;
+        background: var(--muted);
-        background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
+        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;
       }
     `,
   ];
@@ -137,10 +151,15 @@ export class LeleAccountNavigation extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <style></style>
+      <div class="logoArea">
-      <div class="commitinfo">idp.global v${commitinfo.version}</div>
+        <div class="logo">
-      <div class="logo">idp.global</div>
+          <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
-      <div class="navigationGroupLabel">Account Settings</div>
+          idp.global
+        </div>
+      </div>
+
+      <div class="navContent">
+        <div class="navigationGroupLabel">Account</div>
         <div
           class="navigationOption"
           @click=${async () => {
@@ -148,7 +167,25 @@ export class LeleAccountNavigation extends DeesElement {
             subrouter.pushUrl('');
           }}
         >
-        overview
+          <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"
@@ -157,26 +194,15 @@ export class LeleAccountNavigation extends DeesElement {
             idpState.domtools.router.pushUrl('/logout');
           }}
         >
-        logout
+          <dees-icon .icon=${'lucide:power'}></dees-icon>
+          Log Out
         </div>
-      <div
-        class="navigationOption"
-        @click=${async () => {
 
-        }}
+        <div class="divider"></div>
-      >
+
-        manage roles
+        <div class="navigationGroupLabel">Organization</div>
-      </div>
-      <div
-        class="navigationOption"
-        @click=${async () => {
-        }}
-      >
-        create an org
-      </div>
-      <div class="navigationGroupLabel">Organization Settings</div>
         <dees-input-dropdown
-        .label=${'choose org:'}
+          .label=${'Select organization'}
           @selectedOption=${(eventArg: CustomEvent) => {
             const currentState = states.accountState.getState();
             states.accountState.dispatchAction(
@@ -185,9 +211,38 @@ export class LeleAccountNavigation extends DeesElement {
             );
           }}
         ></dees-input-dropdown>
-      ${this.options.map((option) => {
+
-        return html` <div class="navigationOption">${option.text}</div> `;
+        <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="commitinfo">v${commitinfo.version}</div>
     `;
   }
 

ts_web/elements/account/sharedstyles.ts

@@ -1,29 +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;
+    font-weight: 600;
-    border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
+    color: var(--foreground);
-    padding-bottom: 10px;
+    margin: 0 0 8px 0;
-    font-weight: 500;
+    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,34 +52,75 @@ 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(2, 16)};
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        margin-top: 24px;
       }
 
       .org {
-        padding: 16px;
+        padding: 20px;
-        border-top: 1px solid #444;
+        background: var(--card);
-        background: ${cssManager.bdTheme('#ccc', '#222')};
+        border: 1px solid var(--border);
-        border-radius: 16px;
+        border-radius: 12px;
+        color: var(--foreground);
+        transition: all 0.15s ease;
+        cursor: pointer;
       }
 
       .org:hover {
-        cursor: default;
+        background: var(--muted);
-        background: ${cssManager.bdTheme('#CCC', '#333')};
+        border-color: var(--muted-foreground);
+      }
+
+      .org dees-icon {
+        opacity: 0.7;
       }
     `,
   ];
@@ -100,6 +141,7 @@ export class BaseView extends DeesElement {
     if (state.accountState.getState().organizations.length === 0) {
       render(
         html`
+          <div class="card">
             <h1>Setup Your Account</h1>
             <p>
               There are no organizations for your account. Please create one now. Alternatively you
@@ -109,15 +151,16 @@ export class BaseView extends DeesElement {
               <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
             </dees-form>
             <p>
-            The organization slug corresponds to the organization name:<br />
+              The organization slug will be:<br />
               <span class="slug"
-              >${subscribe(
+                >${directives.subscribe(
                   state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
                 )}</span
               >
             </p>
             <span class="hint"></span>
             <dees-button .disabled=${true}>Create the Organization</dees-button>
+          </div>
         `,
         viewHost
       );
@@ -169,6 +212,7 @@ export class BaseView extends DeesElement {
       render(
         html`
           <h1>Select An Organization</h1>
+          <p>Choose an organization to manage its settings and billing.</p>
           <div class="orgGrid">
             ${state.accountState.getState().organizations.map((orgArg) => {
               return html`
@@ -180,7 +224,7 @@ export class BaseView extends DeesElement {
                     parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
                   }}
                 >
-                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
+                  <dees-icon .icon=${'lucide:building2'} style="display: inline-block; transform: translateY(3px); padding-right: 8px;"></dees-icon> ${orgArg.data.name}
                 </div>
               `;
             })}

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>
+
+      <div class="section">
+        <h2>Payment Method</h2>
+        <div class="card">
           <p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
           and we will bill any occurring charges as an extra on the monthly date of your choosing.
           Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
+
           <h3>Paddle</h3>
           <dees-button @click=${async () => {
             await this.domtoolsPromise;
             this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
-      }}>set up paddle.com</dees-button>
+          }}>Set up Paddle.com</dees-button>
-      <h3>Enterprise billing</h3>
+
-      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.
+          <h3>Enterprise Billing</h3>
+          <p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
+          <p><em>Note: You are currently not eligible.</em></p>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Subscriptions</h2>
+        <div class="card">
           <p>
             The total price of a subscription already includes all taxes. If you are a VAT registered business,
             the actual price might be cheaper in case you can claim VAT exemption from the purchase.
           </p>
           <p>
-        Note: Subscriptions are tied to prganizations. You are only seeing subcriptions regarding ${'org1'} right now.
+            <em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
-        To see other organization, select the respective organization at the top left of this page.
           </p>
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+          <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
-      <dees-button>Add subscription</dees-button>
+          <dees-button>Add Subscription</dees-button>
+        </div>
+      </div>
+
+      <div class="section">
         <h2>Accrued IaaS Usage</h2>
-      <p>Note: The accrued IaaS Usage will be charged by adjusting the workspsace.gobal IaaS Postpaid Access price prior the renewal date.</p>
+        <div class="card">
-      <dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
+          <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.2s;
-        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(250);
+      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(250);
+      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,7 +109,10 @@ export class IdpLoginPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
+          <h2>Sign in to your account</h2>
+          <p>Enter your credentials to continue</p>
+        </div>
         <dees-form
           id="loginForm"
           @formData="${(eventArg) => {
@@ -84,7 +126,7 @@ export class IdpLoginPrompt extends DeesElement {
             id="loginEmailInput"
             .required=${true}
             key="emailAddress"
-              label="Email-Address or Username"
+            label="Email or Username"
           ></dees-input-text>
           <dees-input-text
             .id=${'loginPasswordInput'}
@@ -94,10 +136,11 @@ export class IdpLoginPrompt extends DeesElement {
           ></dees-input-text>
           <dees-form-submit id="loginSubmitButton"></dees-form-submit>
         </dees-form>
-          <dees-button type="discreet" class="registerButton" @clicked=${async () => {
+        <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,7 +109,10 @@ export class IdpRegistrationPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
+        <div class="form-header">
+          <h2>Create your account</h2>
+          <p>Get started with your permanent identity</p>
+        </div>
         <dees-form
           id="registrationForm"
           @formData="${(eventArg) => {
@@ -94,17 +124,19 @@ export class IdpRegistrationPrompt extends DeesElement {
           <dees-input-text
             .required=${true}
             key="emailAddress"
-              label="Email-Address"
+            label="Email Address"
           ></dees-input-text>
           <dees-input-checkbox
-              .label="${'Agree to the Terms and Conditions'}"
+            .label="${'I agree to the Terms and Conditions'}"
+            .required=${true}
           ></dees-input-checkbox>
           <dees-form-submit>Send Verification Email</dees-form-submit>
         </dees-form>
-          <dees-button type="discreet" class="loginButton" @click=${async () => {
+        <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>
     `;

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 -->
+        <div class="brand-panel">
+          <div class="brand-content">
+            <h1 class="logo">idp.global</h1>
+            <p class="tagline">Your permanent identity on the web</p>
+
+            <div class="features">
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:code'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Open Source</h3>
+                  <p>Fully transparent, community-driven, no vendor lock-in</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:heart'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Always Free</h3>
+                  <p>Free for individuals and organizations. Paid support available for SLAs</p>
+                </div>
+              </div>
+
+              <div class="feature">
+                <div class="feature-icon">
+                  <dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
+                </div>
+                <div class="feature-text">
+                  <h3>Permanent Identity</h3>
+                  <p>One identity across all your applications</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="learn-more">
+              <dees-button
+                type="secondary"
+                @click=${() => window.open('https://about.idp.global', '_blank')}
+              >Learn more</dees-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: Stepper Panel -->
+        <div class="stepper-panel">
+          <div class="stepper-content">
             ${this.usedSubTemplate
               ? this.usedSubTemplate
-          : html`<dees-spinner size="60"></dees-spinner>`}
+              : html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
+          </div>
+        </div>
       </div>
     `;
   }
@@ -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,7 +477,6 @@ export class IdpRegistrationStepper extends DeesElement {
                   password: eventArg.detail.data.password,
                 },
               });
-              const finishRegistrationResponse =
               await idpState.idpClient.requests.finishRegistration.fire({
                 token: this.storedData.validationTokenUrlParam,
               });
@@ -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,86 +28,125 @@ 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;
       }
 
-      .maincontainer {
+      .form-header {
-        padding: 0px 16px;
+        margin-bottom: 32px;
+        text-align: center;
+      }
+
+      .form-header h2 {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 8px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .form-header p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+      }
+
+      .button-group {
+        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;
-        font-size: 16px;
+        margin-bottom: 8px;
-        font-weight: 600;
-        margin: 24px auto;
       }
 
-      dees-button {
+      .greeting strong {
-        margin-top: 16px;
+        color: var(--foreground);
-        margin-bottom: 16px;
+        font-weight: 600;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
       <idp-centercontainer>
-        <div class="maincontainer">
+        ${directives.resolveExec(async () => {
-        ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              <div class="greeting">Hello ${data.user.data.name}!</div>
+              <div class="form-header">
+                <h2>Welcome back</h2>
+                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
+              </div>
+              <div class="button-group">
                 <dees-button
                   @click=${async () => {
                     const idpState = await IdpState.getSingletonInstance();
                     idpState.domtools.router.pushUrl('/account');
                   }}
-                >Manage your account</dees-button
+                >Manage your account</dees-button>
-              >
                 <dees-button
+                  type="secondary"
                   @click=${async () => {
                     const idpState = await IdpState.getSingletonInstance();
                     idpState.domtools.router.pushUrl('/logout');
                   }}
-                >Logout</dees-button
+                >Sign out</dees-button>
-              >
+              </div>
             `;
           }
           return html`
-            Do you want to sign in or register?
+            <div class="form-header">
+              <h2>Welcome</h2>
+              <p>Sign in to your account or create a new one</p>
+            </div>
+            <div class="button-group">
               <dees-button
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
                   idpState.domtools.router.pushUrl('/login');
                 }}
-              >Sign In</dees-button
+              >Sign In</dees-button>
-            >
               <dees-button
+                type="secondary"
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
                   idpState.domtools.router.pushUrl('/register');
                 }}
-              >Register</dees-button
+              >Create Account</dees-button>
-            >
+            </div>
           `;
         })}
-        <dees-button @click=${() => {}}>Learn more about idp.global</dees-button>
+        <div class="secondary-actions">
-        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
           <dees-button
+            type="discreet"
             @click=${() => {
               window.open('https://code.foss.global/idp.global/idp.global', '_blank');
             }}
-          >Get the Source Code</dees-button
+          >View Source Code</dees-button>
-        >
         </div>
       </idp-centercontainer>
     `;

tsconfig.json

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