Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jkunz
|
ff1387df9f | ||
|
jkunz
|
401d35186f | ||
|
jkunz
|
9d012cd59f | ||
|
jkunz
|
b541340ca5 | ||
|
jkunz
|
531909e88c | ||
|
jkunz
|
e92bdeaa2b | ||
|
jkunz
|
19f016a476 | ||
|
jkunz
|
014fb3080a | ||
 philkunz
|
c8b8013200 | ||
|
philkunz
|
0b8639b033 | ||
|
philkunz
|
08828d6771 | ||
|
philkunz
|
aa5cc9ff81 | ||
|
philkunz
|
944f689165 |
@@ -1,5 +1,36 @@
|
||||
# Changelog
|
||||
|
||||
## 2025-12-01 - 1.5.0 - feat(account)
|
||||
Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior
|
||||
|
||||
- Introduce accountDesignTokens and split shared styles into tokens (accountDesignTokens), cardStyles and typographyStyles while keeping a legacy default export for compatibility
|
||||
- Apply new design tokens to account components (content, baseview, subscriptions) and switch background to use CSS variable (--background)
|
||||
- Small UI tweaks: smoother transition easing on view container, updated icon for organization entries and adjusted spacing
|
||||
- Add placeholder sections for Upcoming Billable Items and Past Invoices in subscriptions view
|
||||
- Fix login prompt submit handling by disabling the submit button via its #loginSubmitButton selector and improving button text logic
|
||||
|
||||
## 2025-04-03 - 1.4.3 - fix(website)
|
||||
Update packageManager configuration in package.json and refine view container background styling
|
||||
|
||||
- Add 'packageManager' field in package.json to pin pnpm version
|
||||
- Adjust background style in ts_web/views/viewcontainer.ts for improved UI consistency
|
||||
|
||||
## 2024-12-11 - 1.5.0 - feat(UI)
|
||||
Added 'Learn more about idp.global' button
|
||||
|
||||
- Added a new button for learning more about idp.global in the welcome component
|
||||
|
||||
## 2024-12-11 - 1.5.0 - feat(UI)
|
||||
Added 'Learn more about idp.global' button
|
||||
|
||||
- Added a new button for learning more about idp.global in the welcome component
|
||||
|
||||
## 2024-10-12 - 1.4.2 - fix(UI)
|
||||
Improve text rendering in account navigation.
|
||||
|
||||
- Fix for text alignment in the commit info section of the account navigation.
|
||||
- Adjusted font settings for better readability.
|
||||
|
||||
## 2024-10-07 - 1.4.1 - fix(core)
|
||||
Bug fixes and UI enhancements
|
||||
|
||||
|
||||
+5
-1
@@ -31,7 +31,11 @@
|
||||
"user data",
|
||||
"user sessions"
|
||||
]
|
||||
}
|
||||
},
|
||||
"services": [
|
||||
"mongodb",
|
||||
"minio"
|
||||
]
|
||||
},
|
||||
"npmci": {
|
||||
"npmGlobalTools": [],
|
||||
|
||||
+29
-28
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@idp.global/idp.global",
|
||||
"version": "1.4.1",
|
||||
"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",
|
||||
"@design.estate/dees-catalog": "^1.2.0",
|
||||
"@design.estate/dees-domtools": "^2.0.64",
|
||||
"@design.estate/dees-element": "^2.0.39",
|
||||
"@push.rocks/lik": "^6.0.15",
|
||||
"@push.rocks/qenv": "^6.0.5",
|
||||
"@push.rocks/smartdata": "^5.2.10",
|
||||
"@consent.software/catalog": "^2.0.1",
|
||||
"@design.estate/dees-catalog": "^2.0.2",
|
||||
"@design.estate/dees-domtools": "^2.3.6",
|
||||
"@design.estate/dees-element": "^2.1.3",
|
||||
"@push.rocks/lik": "^6.2.2",
|
||||
"@push.rocks/qenv": "^6.1.3",
|
||||
"@push.rocks/smartdata": "^7.0.14",
|
||||
"@push.rocks/smartdelay": "^3.0.5",
|
||||
"@push.rocks/smarthash": "^3.0.4",
|
||||
"@push.rocks/smartjson": "^5.0.20",
|
||||
"@push.rocks/smarthash": "^3.2.6",
|
||||
"@push.rocks/smartjson": "^5.2.0",
|
||||
"@push.rocks/smartjwt": "^2.2.1",
|
||||
"@push.rocks/smartlog": "^3.0.7",
|
||||
"@push.rocks/smartmail": "^1.0.24",
|
||||
"@push.rocks/smartpath": "^5.0.5",
|
||||
"@push.rocks/smartpromise": "^4.0.4",
|
||||
"@push.rocks/smartrx": "^3.0.7",
|
||||
"@push.rocks/smartstate": "^2.0.19",
|
||||
"@push.rocks/smarttime": "^4.0.8",
|
||||
"@push.rocks/smartlog": "^3.1.10",
|
||||
"@push.rocks/smartmail": "^2.2.0",
|
||||
"@push.rocks/smartpath": "^6.0.0",
|
||||
"@push.rocks/smartpromise": "^4.2.3",
|
||||
"@push.rocks/smartrx": "^3.0.10",
|
||||
"@push.rocks/smartstate": "^2.0.27",
|
||||
"@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",
|
||||
"@uptime.link/webwidget": "^1.1.2"
|
||||
"@tsclass/tsclass": "^9.3.0",
|
||||
"@uptime.link/webwidget": "^1.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^2.1.17",
|
||||
"@git.zone/tsbundle": "^2.0.3",
|
||||
"@git.zone/tsrun": "^1.2.8",
|
||||
"@git.zone/tswatch": "^2.0.1",
|
||||
"@git.zone/tsbuild": "^3.1.2",
|
||||
"@git.zone/tsbundle": "^2.6.2",
|
||||
"@git.zone/tsrun": "^2.0.0",
|
||||
"@git.zone/tswatch": "^2.2.1",
|
||||
"@push.rocks/projectinfo": "^5.0.1",
|
||||
"@types/node": "^22.7.4"
|
||||
"@types/node": "^24.10.1"
|
||||
},
|
||||
"private": true,
|
||||
"repository": {
|
||||
@@ -101,5 +101,6 @@
|
||||
"API",
|
||||
"user data",
|
||||
"user sessions"
|
||||
]
|
||||
],
|
||||
"packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
|
||||
}
|
||||
|
||||
Generated
+5036
-5448
File diff suppressed because it is too large
Load Diff
@@ -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`
|
||||
@@ -0,0 +1,28 @@
|
||||
# Secure JWT Endpoints with Backend Token
|
||||
|
||||
**ID:** ADM-001
|
||||
**Priority:** Critical
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want JWT-related endpoints to be secured with backend token validation so that only authorized services can access sensitive security operations.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Public key endpoint requires valid backend token
|
||||
- [ ] JWT blocklist endpoint requires valid backend token
|
||||
- [ ] Backend tokens are securely generated and distributed
|
||||
- [ ] Token validation is performed on every request
|
||||
- [ ] Invalid/missing token returns 401 Unauthorized
|
||||
- [ ] Tokens can be rotated without service interruption
|
||||
- [ ] Audit log for all backend token usage
|
||||
|
||||
## Technical Notes
|
||||
- Two TODOs exist for backend token validation in JwtManager
|
||||
- `getPublicKeyForValidation` and `pushOrGetJwtIdBlocklist` need protection
|
||||
- Backend token should be separate from user JWT
|
||||
- Consider service-to-service authentication pattern
|
||||
- Environment variable for backend token configuration
|
||||
|
||||
## Related TODOs
|
||||
- `ts/reception/classes.jwtmanager.ts:40` - `// TODO control backend token`
|
||||
- `ts/reception/classes.jwtmanager.ts:52` - `// TODO control backend token`
|
||||
@@ -0,0 +1,28 @@
|
||||
# Suspend and Delete Users
|
||||
|
||||
**ID:** ADM-002
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want to suspend and delete user accounts so that I can handle policy violations, security incidents, and account removal requests.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Admin can search for users by email, name, or ID
|
||||
- [ ] Admin can suspend a user account with reason
|
||||
- [ ] Suspended users cannot log in
|
||||
- [ ] Suspended users' active sessions are invalidated
|
||||
- [ ] Admin can unsuspend accounts
|
||||
- [ ] Admin can permanently delete suspended accounts
|
||||
- [ ] Deletion removes all user data (GDPR compliance)
|
||||
- [ ] Audit log for all suspension/deletion actions
|
||||
|
||||
## Technical Notes
|
||||
- `suspendUser` and `deleteSuspendedUser` endpoints exist
|
||||
- Need admin UI for user management
|
||||
- Consider soft delete with retention period
|
||||
- Handle organization ownership before deletion
|
||||
- Email notification to user on suspension
|
||||
|
||||
## Related TODOs
|
||||
- Partial implementation in UserManager
|
||||
@@ -0,0 +1,28 @@
|
||||
# Platform-wide Audit Logging
|
||||
|
||||
**ID:** ADM-003
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want to view platform-wide audit logs so that I can monitor security events, investigate incidents, and demonstrate compliance.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Log all authentication events (login, logout, failed attempts)
|
||||
- [ ] Log all administrative actions (user changes, config changes)
|
||||
- [ ] Log all security events (password changes, 2FA changes, token revocations)
|
||||
- [ ] Searchable log interface with filters
|
||||
- [ ] Real-time log streaming for monitoring
|
||||
- [ ] Export logs in standard formats (JSON, CSV, CEF)
|
||||
- [ ] Log retention configuration
|
||||
- [ ] Integration with external SIEM systems
|
||||
|
||||
## Technical Notes
|
||||
- Separate from organization audit logs (ORG-007)
|
||||
- Platform-wide view across all organizations
|
||||
- Consider ELK stack or similar for log aggregation
|
||||
- Structured logging format for parsing
|
||||
- Compliance: SOC 2, ISO 27001, GDPR audit requirements
|
||||
|
||||
## Related TODOs
|
||||
- New feature - platform security requirement
|
||||
@@ -0,0 +1,28 @@
|
||||
# Customize Email Templates
|
||||
|
||||
**ID:** ADM-004
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want to customize email templates so that all system emails match our branding and communication style.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Edit templates for: registration, password reset, login verification, welcome
|
||||
- [ ] Rich text editor for template content
|
||||
- [ ] Variable placeholders ({{userName}}, {{resetLink}}, etc.)
|
||||
- [ ] Preview emails before saving
|
||||
- [ ] Send test emails to verify
|
||||
- [ ] Localization support for multiple languages
|
||||
- [ ] Reset to default template option
|
||||
- [ ] Version history for templates
|
||||
|
||||
## Technical Notes
|
||||
- ReceptionMailer handles email sending
|
||||
- Currently uses hardcoded or simple templates
|
||||
- Consider template engine (Handlebars, Mjml for responsive)
|
||||
- Store templates in database for dynamic updates
|
||||
- Support HTML and plain text versions
|
||||
|
||||
## Related TODOs
|
||||
- New feature - enhance ReceptionMailer
|
||||
@@ -0,0 +1,28 @@
|
||||
# Security Monitoring Dashboard
|
||||
|
||||
**ID:** ADM-005
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want a security monitoring dashboard so that I can quickly identify and respond to potential security threats.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Real-time metrics: active sessions, login rate, failure rate
|
||||
- [ ] Anomaly detection alerts (unusual login patterns)
|
||||
- [ ] Geographic map of login locations
|
||||
- [ ] Failed login attempt heatmap
|
||||
- [ ] Blocked JWT/token statistics
|
||||
- [ ] Suspicious activity indicators
|
||||
- [ ] Configurable alert thresholds
|
||||
- [ ] Integration with alerting systems (PagerDuty, Slack)
|
||||
|
||||
## Technical Notes
|
||||
- Aggregate metrics from login events
|
||||
- Real-time updates via WebSocket
|
||||
- Consider time-series database for metrics
|
||||
- Machine learning for anomaly detection (future)
|
||||
- Alert rules engine for custom notifications
|
||||
|
||||
## Related TODOs
|
||||
- New feature - security operations
|
||||
@@ -0,0 +1,28 @@
|
||||
# Impersonate Users for Support
|
||||
|
||||
**ID:** ADM-006
|
||||
**Priority:** Low
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want to temporarily impersonate a user so that I can troubleshoot issues they're experiencing without asking for their credentials.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Admin can initiate impersonation session for any user
|
||||
- [ ] Impersonation requires confirmation and reason
|
||||
- [ ] Clear visual indicator when in impersonation mode
|
||||
- [ ] Admin can end impersonation and return to their session
|
||||
- [ ] All actions during impersonation are logged
|
||||
- [ ] User is optionally notified of impersonation
|
||||
- [ ] Impersonation sessions have time limit
|
||||
- [ ] Cannot impersonate other admins without super-admin
|
||||
|
||||
## Technical Notes
|
||||
- Special JWT claim to indicate impersonation
|
||||
- Original admin identity preserved in token
|
||||
- Audit log must capture both admin and impersonated user
|
||||
- Consider "read-only" impersonation mode
|
||||
- Security review required before implementation
|
||||
|
||||
## Related TODOs
|
||||
- New feature - support tooling
|
||||
@@ -0,0 +1,28 @@
|
||||
# Manage JWT Blocklist
|
||||
|
||||
**ID:** ADM-007
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a platform administrator, I want to view and manage the JWT blocklist so that I can revoke tokens during security incidents and verify that revocations are working.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] View all blocked JWT IDs with metadata
|
||||
- [ ] Search blocklist by JWT ID or user
|
||||
- [ ] Manually add JWTs to blocklist
|
||||
- [ ] View reason for each blocklist entry
|
||||
- [ ] Blocklist entries show expiration (when they can be removed)
|
||||
- [ ] Bulk revoke all tokens for a user
|
||||
- [ ] Bulk revoke all tokens for an organization
|
||||
- [ ] Automatic cleanup of expired blocklist entries
|
||||
|
||||
## Technical Notes
|
||||
- JwtManager has `blockedJwtIdList` infrastructure
|
||||
- `pushOrGetJwtIdBlocklist` endpoint exists
|
||||
- Need admin UI for blocklist management
|
||||
- ReceptionHousekeeping could handle cleanup
|
||||
- Consider Redis for high-performance blocklist checks
|
||||
|
||||
## Related TODOs
|
||||
- Enhancement to existing blocklist infrastructure
|
||||
@@ -0,0 +1,28 @@
|
||||
# Create and Manage API Tokens
|
||||
|
||||
**ID:** DEV-001
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a developer, I want to create and manage API tokens so that I can integrate my applications with the identity provider programmatically.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Developer can create new API tokens with custom names
|
||||
- [ ] Token is shown once at creation (cannot be retrieved later)
|
||||
- [ ] Developer can set token expiration (or no expiration)
|
||||
- [ ] Developer can set token scopes/permissions
|
||||
- [ ] List all tokens with creation date and last used
|
||||
- [ ] Revoke individual tokens
|
||||
- [ ] Revoke all tokens at once
|
||||
- [ ] Rate limiting information shown per token
|
||||
|
||||
## Technical Notes
|
||||
- ApiTokenManager exists with basic infrastructure
|
||||
- `loginWithApiToken` endpoint available
|
||||
- Need UI for token management (currently backend only)
|
||||
- Tokens should be hashed before storage (show once)
|
||||
- Consider token prefixes for easy identification (idp_...)
|
||||
|
||||
## Related TODOs
|
||||
- Partial implementation in ApiTokenManager
|
||||
@@ -0,0 +1,28 @@
|
||||
# Comprehensive SDK Documentation
|
||||
|
||||
**ID:** DEV-002
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a developer, I want comprehensive documentation for the IDP client SDK so that I can integrate authentication into my applications quickly and correctly.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Getting started guide with installation and setup
|
||||
- [ ] Authentication flow explanations with diagrams
|
||||
- [ ] API reference for all client methods
|
||||
- [ ] Code examples for common use cases
|
||||
- [ ] TypeScript type definitions documented
|
||||
- [ ] Error handling guide with error codes
|
||||
- [ ] Migration guides for version upgrades
|
||||
- [ ] Interactive API playground/sandbox
|
||||
|
||||
## Technical Notes
|
||||
- `ts_idpclient/` contains the client SDK
|
||||
- README.md has basic usage but needs expansion
|
||||
- Generate API docs from TypeScript using TypeDoc
|
||||
- Host documentation on dedicated site or GitHub pages
|
||||
- Consider OpenAPI/Swagger spec for REST endpoints
|
||||
|
||||
## Related TODOs
|
||||
- New feature - documentation enhancement
|
||||
@@ -0,0 +1,28 @@
|
||||
# Configure Webhook Notifications
|
||||
|
||||
**ID:** DEV-003
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a developer, I want to configure webhooks so that my application is notified in real-time when authentication events occur.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Register webhook endpoints with URL and secret
|
||||
- [ ] Select which events to subscribe to
|
||||
- [ ] Events include: user.created, user.login, user.logout, org.member.added, etc.
|
||||
- [ ] Webhook payloads include event type, timestamp, and relevant data
|
||||
- [ ] Signature verification using shared secret (HMAC)
|
||||
- [ ] Retry logic for failed deliveries (exponential backoff)
|
||||
- [ ] Webhook delivery logs with success/failure status
|
||||
- [ ] Test webhook button to send sample event
|
||||
|
||||
## Technical Notes
|
||||
- Create Webhook model with URL, secret, events, and status
|
||||
- Queue webhook deliveries for reliability (consider bull/bullmq)
|
||||
- Sign payloads with HMAC-SHA256
|
||||
- Timeout for webhook delivery (10 seconds)
|
||||
- Dashboard for delivery monitoring and debugging
|
||||
|
||||
## Related TODOs
|
||||
- New feature - event-driven integration
|
||||
@@ -0,0 +1,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`
|
||||
@@ -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
|
||||
@@ -0,0 +1,27 @@
|
||||
# Understand API Rate Limits
|
||||
|
||||
**ID:** DEV-006
|
||||
**Priority:** Low
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a developer, I want to understand and monitor API rate limits so that I can build applications that respect limits and handle throttling gracefully.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Clear documentation of rate limits per endpoint
|
||||
- [ ] Rate limit headers in API responses (X-RateLimit-*)
|
||||
- [ ] Different limits for different API token tiers
|
||||
- [ ] Dashboard showing current usage vs limits
|
||||
- [ ] Alerts when approaching rate limits
|
||||
- [ ] Retry-After header when rate limited
|
||||
- [ ] Ability to request limit increase
|
||||
|
||||
## Technical Notes
|
||||
- Implement rate limiting middleware (consider express-rate-limit)
|
||||
- Store rate limit counters in Redis for distributed systems
|
||||
- Different limits: login attempts, API calls, token operations
|
||||
- Consider sliding window algorithm for smooth limits
|
||||
- 429 Too Many Requests response with helpful error message
|
||||
|
||||
## Related TODOs
|
||||
- New feature - API management
|
||||
@@ -0,0 +1,27 @@
|
||||
# Validate JWTs in My Application
|
||||
|
||||
**ID:** DEV-007
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As a developer, I want clear guidance and tools to validate JWTs issued by the identity provider so that I can securely authenticate users in my backend services.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Public key endpoint for JWT validation (JWKS format)
|
||||
- [ ] Documentation explaining JWT structure and claims
|
||||
- [ ] Example code for validation in multiple languages
|
||||
- [ ] Key rotation with multiple valid keys during transition
|
||||
- [ ] Token introspection endpoint for server-side validation
|
||||
- [ ] Clear error messages for invalid tokens
|
||||
- [ ] Guidance on caching public keys
|
||||
|
||||
## Technical Notes
|
||||
- `getPublicKeyForValidation` endpoint exists
|
||||
- Consider standard JWKS endpoint (/.well-known/jwks.json)
|
||||
- OpenID Connect discovery endpoint would help
|
||||
- JWTs contain: sub, email, roles, orgId, exp, iat
|
||||
- Document all custom claims in JWT
|
||||
|
||||
## Related TODOs
|
||||
- Enhancement to existing JWT infrastructure
|
||||
@@ -0,0 +1,24 @@
|
||||
# Multi-Device Login Sessions
|
||||
|
||||
**ID:** EU-001
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to stay logged in on multiple devices simultaneously so that I can access my account from my phone, tablet, and computer without being logged out elsewhere.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can have active sessions on multiple devices at the same time
|
||||
- [ ] Each device gets its own refresh token
|
||||
- [ ] Logging out on one device does not affect sessions on other devices
|
||||
- [ ] User can see all active sessions in account settings
|
||||
- [ ] User can revoke individual sessions remotely
|
||||
|
||||
## Technical Notes
|
||||
- Currently only one refresh token per login session is supported
|
||||
- Need to refactor `LoginSession` to support multiple refresh tokens
|
||||
- Consider storing device metadata (browser, OS, last active time) with each token
|
||||
- JWT blocklist needs to handle individual token revocation
|
||||
|
||||
## Related TODOs
|
||||
- `ts/reception/classes.jwt.ts:39` - `// TODO: handle multiple refresh tokens`
|
||||
@@ -0,0 +1,26 @@
|
||||
# Complete Password Reset Flow
|
||||
|
||||
**ID:** EU-002
|
||||
**Priority:** Critical
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to reset my password when I forget it so that I can regain access to my account securely.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can request a password reset via email
|
||||
- [ ] Reset email contains a secure, time-limited token link
|
||||
- [ ] Clicking the link opens a form to set a new password
|
||||
- [ ] Password must meet security requirements (length, complexity)
|
||||
- [ ] Old password is invalidated after successful reset
|
||||
- [ ] User receives confirmation email after password change
|
||||
- [ ] All existing sessions are invalidated after password reset
|
||||
|
||||
## Technical Notes
|
||||
- `resetPassword` handler exists but `setNewPassword` is a stub (returns `{ status: 'ok' }` without implementation)
|
||||
- Need to implement actual password update logic
|
||||
- Should use `ReceptionMailer` for email sending
|
||||
- Consider rate limiting reset requests to prevent abuse
|
||||
|
||||
## Related TODOs
|
||||
- `ts/reception/classes.loginsessionmanager.ts:229-238` - `setNewPassword` handler is incomplete
|
||||
@@ -0,0 +1,25 @@
|
||||
# View and Manage Logged-in Devices
|
||||
|
||||
**ID:** EU-003
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to view all devices where I'm logged in and remotely log out of specific devices so that I can maintain control over my account security.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can view a list of all active sessions/devices
|
||||
- [ ] Each device entry shows: device type, browser, location (approximate), last activity
|
||||
- [ ] User can name/label devices for easy identification
|
||||
- [ ] User can log out of any individual device remotely
|
||||
- [ ] User can log out of all devices except the current one
|
||||
- [ ] User receives notification when a new device logs in
|
||||
|
||||
## Technical Notes
|
||||
- Device ID tracking infrastructure exists but is blocked by JWT handling issues
|
||||
- Need to complete `attachDeviceId` handler (currently returns `ok: false`)
|
||||
- Store device fingerprint, user agent, IP-based geolocation
|
||||
- Integrate with multi-refresh-token system (EU-001)
|
||||
|
||||
## Related TODOs
|
||||
- `ts/reception/classes.loginsessionmanager.ts:256` - `// TODO: Blocked by proper JWT handling`
|
||||
@@ -0,0 +1,27 @@
|
||||
# Enable Two-Factor Authentication
|
||||
|
||||
**ID:** EU-004
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to enable two-factor authentication on my account so that my account is protected even if my password is compromised.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can enable 2FA from account settings
|
||||
- [ ] Support for TOTP apps (Google Authenticator, Authy, etc.)
|
||||
- [ ] Backup codes are generated and shown once during setup
|
||||
- [ ] User must verify 2FA code during setup to confirm it works
|
||||
- [ ] Login flow prompts for 2FA code when enabled
|
||||
- [ ] User can disable 2FA (requires current 2FA code)
|
||||
- [ ] Account recovery option if 2FA device is lost
|
||||
|
||||
## Technical Notes
|
||||
- Mobile verification infrastructure exists (SMS OTP in registration)
|
||||
- Can leverage existing `smarttwilio` integration for SMS-based 2FA
|
||||
- TOTP implementation needs `otplib` or similar library
|
||||
- Store encrypted TOTP secret in User model
|
||||
- Consider supporting multiple 2FA methods (TOTP, SMS, security keys)
|
||||
|
||||
## Related TODOs
|
||||
- New feature - no existing TODO
|
||||
@@ -0,0 +1,28 @@
|
||||
# Login with Social Providers
|
||||
|
||||
**ID:** EU-005
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to log in using my existing Google, GitHub, or Microsoft account so that I don't have to remember another password.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can sign in with Google
|
||||
- [ ] User can sign in with GitHub
|
||||
- [ ] User can sign in with Microsoft
|
||||
- [ ] First-time social login creates a new account automatically
|
||||
- [ ] Social login can be linked to existing account
|
||||
- [ ] User can unlink social providers from settings
|
||||
- [ ] Profile data (name, email, avatar) is imported from provider
|
||||
- [ ] User can still set a password for email/password login
|
||||
|
||||
## Technical Notes
|
||||
- Package.json keywords mention OAuth - infrastructure may be partially planned
|
||||
- Implement OAuth 2.0 / OpenID Connect flows
|
||||
- Store provider tokens securely for API access if needed
|
||||
- Handle email conflicts (social email matches existing account)
|
||||
- Consider using passport.js or similar for provider abstraction
|
||||
|
||||
## Related TODOs
|
||||
- New feature - OAuth mentioned in package.json keywords but not implemented
|
||||
@@ -0,0 +1,28 @@
|
||||
# Delete My Account
|
||||
|
||||
**ID:** EU-006
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to permanently delete my account and all associated data so that I can exercise my right to be forgotten (GDPR compliance).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can request account deletion from settings
|
||||
- [ ] Deletion requires password confirmation or 2FA
|
||||
- [ ] User sees summary of what will be deleted
|
||||
- [ ] Grace period (e.g., 30 days) before permanent deletion
|
||||
- [ ] User receives email confirmation of deletion request
|
||||
- [ ] User can cancel deletion during grace period
|
||||
- [ ] All personal data is removed after grace period
|
||||
- [ ] User is removed from all organizations they belong to
|
||||
|
||||
## Technical Notes
|
||||
- `suspendUser` and `deleteSuspendedUser` endpoints exist in admin context
|
||||
- Need user-facing self-service deletion flow
|
||||
- Consider soft delete with scheduled hard delete
|
||||
- Must handle organization ownership transfer if user owns orgs
|
||||
- Audit log should retain anonymized record for compliance
|
||||
|
||||
## Related TODOs
|
||||
- New feature - builds on existing suspension infrastructure
|
||||
@@ -0,0 +1,26 @@
|
||||
# View Login History
|
||||
|
||||
**ID:** EU-007
|
||||
**Priority:** Low
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to view my login history so that I can detect any unauthorized access to my account.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can view list of recent logins (last 30 days)
|
||||
- [ ] Each entry shows: date/time, IP address, location, device/browser
|
||||
- [ ] Failed login attempts are also shown
|
||||
- [ ] Suspicious logins are highlighted (new location, unusual time)
|
||||
- [ ] User can export login history
|
||||
- [ ] User receives alert for logins from new locations/devices
|
||||
|
||||
## Technical Notes
|
||||
- Login events need to be logged with metadata
|
||||
- Create new LoginHistory collection in MongoDB
|
||||
- IP geolocation service needed (consider MaxMind or ipinfo.io)
|
||||
- Privacy considerations: IP retention policy, GDPR compliance
|
||||
- Could integrate with EU-003 (device management) for unified view
|
||||
|
||||
## Related TODOs
|
||||
- New feature - no existing infrastructure
|
||||
@@ -0,0 +1,28 @@
|
||||
# Upload Profile Avatar
|
||||
|
||||
**ID:** EU-008
|
||||
**Priority:** Low
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an end user, I want to upload a profile picture so that my identity is visually recognizable across applications that use this identity provider.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] User can upload an image from their device
|
||||
- [ ] Supported formats: JPEG, PNG, GIF
|
||||
- [ ] Maximum file size: 5MB
|
||||
- [ ] Image is automatically resized/cropped to standard dimensions
|
||||
- [ ] User can crop/adjust image before saving
|
||||
- [ ] Avatar is served via CDN for fast loading
|
||||
- [ ] Default avatar (initials or Gravatar) when no upload
|
||||
- [ ] Avatar is available to connected applications via API
|
||||
|
||||
## Technical Notes
|
||||
- User model needs avatar URL field
|
||||
- Consider using cloud storage (S3, Cloudflare R2) for images
|
||||
- Implement image processing for resize/crop (sharp library)
|
||||
- Gravatar integration as fallback using email hash
|
||||
- Expose avatar in JWT claims or user info endpoint
|
||||
|
||||
## Related TODOs
|
||||
- New feature - no existing infrastructure
|
||||
@@ -0,0 +1,27 @@
|
||||
# Sync Billing Plans with Users
|
||||
|
||||
**ID:** ORG-001
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want billing plans to automatically sync with user seats so that I'm only charged for active users and can easily manage costs.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Adding a user to org automatically updates billing (for per-seat plans)
|
||||
- [ ] Removing a user adjusts billing accordingly
|
||||
- [ ] Prorated charges/credits for mid-cycle changes
|
||||
- [ ] Organization dashboard shows current seat count vs plan limit
|
||||
- [ ] Warning notification when approaching seat limit
|
||||
- [ ] Automatic upgrade prompt when exceeding limit
|
||||
- [ ] Billing history shows seat changes over time
|
||||
|
||||
## Technical Notes
|
||||
- `BillingPlan.syncForUser()` method exists but is not implemented
|
||||
- Paddle integration exists for payment processing
|
||||
- Need to track user-to-organization seat assignments
|
||||
- Consider grace period for temporary overages
|
||||
- Webhook from Paddle for payment confirmations
|
||||
|
||||
## Related TODOs
|
||||
- `ts/reception/classes.billingplan.ts:16` - `// TODO sync this for user`
|
||||
@@ -0,0 +1,28 @@
|
||||
# Invite and Manage Team Members
|
||||
|
||||
**ID:** ORG-002
|
||||
**Priority:** Critical
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to invite team members to my organization and manage their access so that my team can collaborate securely.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Owner can invite users via email address
|
||||
- [ ] Invited user receives email with invitation link
|
||||
- [ ] Invitation can be accepted by existing users or during registration
|
||||
- [ ] Owner can view pending invitations and resend/cancel them
|
||||
- [ ] Owner can see all current members with their roles
|
||||
- [ ] Owner can remove members from organization
|
||||
- [ ] Owner can transfer ownership to another member
|
||||
- [ ] Bulk invite via CSV upload
|
||||
|
||||
## Technical Notes
|
||||
- Organization and User models exist with association
|
||||
- Need new Invitation model with token and expiry
|
||||
- Use `ReceptionMailer` for invitation emails
|
||||
- RoleManager can be leveraged for role assignment
|
||||
- Consider invitation expiry (7 days default)
|
||||
|
||||
## Related TODOs
|
||||
- New feature - core organizational functionality
|
||||
@@ -0,0 +1,28 @@
|
||||
# Assign Roles to Members
|
||||
|
||||
**ID:** ORG-003
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to assign different roles to team members so that I can control what each person can access and do within the organization.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Owner can create custom roles for the organization
|
||||
- [ ] Default roles: Owner, Admin, Member, Viewer
|
||||
- [ ] Each role has configurable permissions
|
||||
- [ ] Owner can assign/change roles for any member
|
||||
- [ ] Role changes take effect immediately
|
||||
- [ ] Members can view their own role and permissions
|
||||
- [ ] Audit log for role changes
|
||||
- [ ] At least one Owner must exist at all times
|
||||
|
||||
## Technical Notes
|
||||
- RoleManager exists with basic role infrastructure
|
||||
- `getRolesAndOrganizationsForUserId` endpoint available
|
||||
- Need to expand Role model with permissions array
|
||||
- Consider permission inheritance (Admin inherits Member permissions)
|
||||
- JWT claims should include role for authorization
|
||||
|
||||
## Related TODOs
|
||||
- Partial implementation exists in RoleManager
|
||||
@@ -0,0 +1,27 @@
|
||||
# Customize Organization Branding
|
||||
|
||||
**ID:** ORG-004
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to customize the branding of my organization's login and account pages so that my team sees our company identity when authenticating.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Upload organization logo
|
||||
- [ ] Set primary and secondary brand colors
|
||||
- [ ] Custom login page welcome message
|
||||
- [ ] Organization name displayed on login/register
|
||||
- [ ] Preview branding changes before saving
|
||||
- [ ] Reset to default branding option
|
||||
- [ ] Branding applies to email templates (org-specific emails)
|
||||
|
||||
## Technical Notes
|
||||
- Organization model needs branding fields (logo URL, colors, message)
|
||||
- Frontend components need to accept branding props
|
||||
- Email templates should support organization branding
|
||||
- Consider white-label subdomain support (org.idp.global)
|
||||
- Image storage similar to user avatars (EU-008)
|
||||
|
||||
## Related TODOs
|
||||
- New feature - no existing infrastructure
|
||||
@@ -0,0 +1,27 @@
|
||||
# View Organization Usage Analytics
|
||||
|
||||
**ID:** ORG-005
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to view analytics about how my organization uses the identity platform so that I can understand adoption and identify potential issues.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Dashboard showing key metrics (active users, logins, registrations)
|
||||
- [ ] Time-series charts for login activity
|
||||
- [ ] Most active users ranking
|
||||
- [ ] Failed login attempts summary
|
||||
- [ ] Authentication method breakdown (password, email link, 2FA)
|
||||
- [ ] Date range selector for historical data
|
||||
- [ ] Export analytics data (CSV, PDF)
|
||||
|
||||
## Technical Notes
|
||||
- Need to aggregate login events per organization
|
||||
- Consider time-series database or aggregation pipeline in MongoDB
|
||||
- Privacy: show aggregates, not individual user activity details
|
||||
- Cache analytics for performance
|
||||
- Real-time updates via WebSocket for dashboard
|
||||
|
||||
## Related TODOs
|
||||
- New feature - requires event logging infrastructure
|
||||
@@ -0,0 +1,28 @@
|
||||
# Configure SSO for Organization
|
||||
|
||||
**ID:** ORG-006
|
||||
**Priority:** High
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to configure Single Sign-On with my company's identity provider so that employees can use their corporate credentials.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Support SAML 2.0 SSO configuration
|
||||
- [ ] Support OIDC/OAuth SSO configuration
|
||||
- [ ] Test connection before enabling
|
||||
- [ ] Auto-provision users on first SSO login (JIT provisioning)
|
||||
- [ ] Map SSO attributes to user profile fields
|
||||
- [ ] Option to require SSO for all org members
|
||||
- [ ] Bypass SSO for emergency admin access
|
||||
- [ ] Support multiple SSO providers per organization
|
||||
|
||||
## Technical Notes
|
||||
- Implement SAML assertion consumer service
|
||||
- Store SSO configuration securely (encrypted secrets)
|
||||
- Certificate management for SAML
|
||||
- Consider using passport-saml and passport-openidconnect
|
||||
- Metadata endpoint for easy IdP configuration
|
||||
|
||||
## Related TODOs
|
||||
- New feature - enterprise SSO capability
|
||||
@@ -0,0 +1,28 @@
|
||||
# View Organization Audit Logs
|
||||
|
||||
**ID:** ORG-007
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to view audit logs for my organization so that I can track security-relevant events and meet compliance requirements.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] Log all security-relevant events (logins, role changes, member changes)
|
||||
- [ ] Searchable audit log interface
|
||||
- [ ] Filter by event type, user, date range
|
||||
- [ ] Each entry shows: timestamp, actor, action, target, IP address
|
||||
- [ ] Immutable logs (cannot be deleted or modified)
|
||||
- [ ] Export logs for compliance (CSV, JSON)
|
||||
- [ ] Retention policy configuration (90 days default)
|
||||
- [ ] Real-time event streaming option
|
||||
|
||||
## Technical Notes
|
||||
- Create AuditLog collection with write-only access pattern
|
||||
- Index for efficient querying
|
||||
- Consider separate database/collection for audit data
|
||||
- Comply with SOC 2 / ISO 27001 logging requirements
|
||||
- Webhook option for SIEM integration
|
||||
|
||||
## Related TODOs
|
||||
- New feature - compliance and security requirement
|
||||
@@ -0,0 +1,28 @@
|
||||
# Manage Subscription and Billing
|
||||
|
||||
**ID:** ORG-008
|
||||
**Priority:** Medium
|
||||
**Status:** Planned
|
||||
|
||||
## User Story
|
||||
As an organization owner, I want to manage my subscription plan and billing details so that I can upgrade, downgrade, or update payment methods as needed.
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] View current subscription plan and features
|
||||
- [ ] Compare available plans with feature matrix
|
||||
- [ ] Upgrade to higher plan with immediate effect
|
||||
- [ ] Downgrade with effect at end of billing period
|
||||
- [ ] Update payment method (credit card via Paddle)
|
||||
- [ ] View billing history and download invoices
|
||||
- [ ] Cancel subscription with confirmation
|
||||
- [ ] Apply coupon/discount codes
|
||||
|
||||
## Technical Notes
|
||||
- Paddle integration exists (`paddlesetup` view, `BillingPlanManager`)
|
||||
- Enhance existing subscription view with more functionality
|
||||
- Paddle handles PCI compliance for payment data
|
||||
- Webhook handlers for subscription status changes
|
||||
- VAT handling for EU customers (Paddle manages this)
|
||||
|
||||
## Related TODOs
|
||||
- Enhancement to existing Paddle integration
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@idp.global/idp.global',
|
||||
version: '1.4.1',
|
||||
version: '1.5.0',
|
||||
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
||||
}
|
||||
|
||||
+1
-4
@@ -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'),
|
||||
mongoDbName: await serviceQenv.getEnvVarOnDemand('MONGO_DB_NAME'),
|
||||
mongoDbPass: await serviceQenv.getEnvVarOnDemand('MONGO_DB_PASS'),
|
||||
mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGO_DB_URL'),
|
||||
mongoDbUrl: await serviceQenv.getEnvVarOnDemand('MONGODB_URL'),
|
||||
},
|
||||
websiteServer: websiteServer,
|
||||
baseUrl: await serviceQenv.getEnvVarOnDemand('IDP_BASEURL'),
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@idp.global/idp.global',
|
||||
version: '1.4.1',
|
||||
version: '1.5.0',
|
||||
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,106 +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;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 10px;
|
||||
padding-left: 0px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--card);
|
||||
border-right: 1px solid var(--border);
|
||||
height: 100%;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logoArea {
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Cal Sans';
|
||||
letter-spacing: 0.0125em;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 16px 0px 16px 0px;
|
||||
margin: -8px -8px -16px 0px;
|
||||
border-bottom: 1px solid #111111;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-family: 'Cal Sans', 'Geist Sans', sans-serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
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;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: 10px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted-foreground);
|
||||
opacity: 0.6;
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
.navigationGroupLabel {
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px solid;
|
||||
border-image: linear-gradient(to right, orange, #44444400) 1;
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
margin-bottom: 5px;
|
||||
padding-top: 32px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 20px 16px 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.navigationGroupLabel:first-of-type {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.navigationOption {
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 8px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 5px;
|
||||
color: var(--muted-foreground);
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigationOption:hover {
|
||||
cursor: default;
|
||||
background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.navigationOption dees-icon {
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navigationOption:hover dees-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
||||
dees-input-dropdown {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-left: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -135,57 +151,98 @@ export class LeleAccountNavigation extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="commitinfo">idp.global v${commitinfo.version}</div>
|
||||
<div class="logo">idp.global</div>
|
||||
<div class="navigationGroupLabel">Account Settings</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const subrouter = await this.getAccountRouter();
|
||||
subrouter.pushUrl('');
|
||||
}}
|
||||
>
|
||||
overview
|
||||
<div class="logoArea">
|
||||
<div class="logo">
|
||||
<dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
|
||||
idp.global
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>
|
||||
logout
|
||||
|
||||
<div class="navContent">
|
||||
<div class="navigationGroupLabel">Account</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const subrouter = await this.getAccountRouter();
|
||||
subrouter.pushUrl('');
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:home'}></dees-icon>
|
||||
Overview
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:shield'}></dees-icon>
|
||||
Manage Roles
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:plus'}></dees-icon>
|
||||
Create Organization
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:power'}></dees-icon>
|
||||
Log Out
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="navigationGroupLabel">Organization</div>
|
||||
<dees-input-dropdown
|
||||
.label=${'Select organization'}
|
||||
@selectedOption=${(eventArg: CustomEvent) => {
|
||||
const currentState = states.accountState.getState();
|
||||
states.accountState.dispatchAction(
|
||||
states.setSelectedOrg,
|
||||
currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
|
||||
);
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:box'}></dees-icon>
|
||||
Apps
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:users'}></dees-icon>
|
||||
Users
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:activity'}></dees-icon>
|
||||
Activity
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {}}
|
||||
>
|
||||
<dees-icon .icon=${'lucide:wallet'}></dees-icon>
|
||||
Billing
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
|
||||
}}
|
||||
>
|
||||
manage roles
|
||||
</div>
|
||||
<div
|
||||
class="navigationOption"
|
||||
@click=${async () => {
|
||||
}}
|
||||
>
|
||||
create an org
|
||||
</div>
|
||||
<div class="navigationGroupLabel">Organization Settings</div>
|
||||
<dees-input-dropdown
|
||||
.label=${'choose org:'}
|
||||
@selectedOption=${(eventArg: CustomEvent) => {
|
||||
const currentState = states.accountState.getState();
|
||||
states.accountState.dispatchAction(
|
||||
states.setSelectedOrg,
|
||||
currentState.organizations.find((org) => org.data.slug === eventArg.detail.payload)
|
||||
);
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
${this.options.map((option) => {
|
||||
return html` <div class="navigationOption">${option.text}</div> `;
|
||||
})}
|
||||
|
||||
<div class="commitinfo">v${commitinfo.version}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
border-bottom: 1px solid;
|
||||
border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
|
||||
padding-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-top: 1px dotted #666;
|
||||
padding-top: 16px;
|
||||
font-size: 18px;
|
||||
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}
|
||||
`;
|
||||
|
||||
@@ -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;
|
||||
margin: auto;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.viewHost {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.slug {
|
||||
color: 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;
|
||||
border-top: 1px solid #444;
|
||||
background: ${cssManager.bdTheme('#ccc', '#222')};
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
color: var(--foreground);
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.org:hover {
|
||||
cursor: default;
|
||||
background: ${cssManager.bdTheme('#CCC', '#333')};
|
||||
background: var(--muted);
|
||||
border-color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.org dees-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -100,24 +141,26 @@ export class BaseView extends DeesElement {
|
||||
if (state.accountState.getState().organizations.length === 0) {
|
||||
render(
|
||||
html`
|
||||
<h1>Setup Your Account</h1>
|
||||
<p>
|
||||
There are no organizations for your account. Please create one now. Alternatively you
|
||||
can ask an admin of an existing organization to invite you.
|
||||
</p>
|
||||
<dees-form>
|
||||
<dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
|
||||
</dees-form>
|
||||
<p>
|
||||
The organization slug corresponds to the organization name:<br />
|
||||
<span class="slug"
|
||||
>${subscribe(
|
||||
state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
|
||||
)}</span
|
||||
>
|
||||
</p>
|
||||
<span class="hint"></span>
|
||||
<dees-button .disabled=${true}>Create the Organization</dees-button>
|
||||
<div class="card">
|
||||
<h1>Setup Your Account</h1>
|
||||
<p>
|
||||
There are no organizations for your account. Please create one now. Alternatively you
|
||||
can ask an admin of an existing organization to invite you.
|
||||
</p>
|
||||
<dees-form>
|
||||
<dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
|
||||
</dees-form>
|
||||
<p>
|
||||
The organization slug will be:<br />
|
||||
<span class="slug"
|
||||
>${directives.subscribe(
|
||||
state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
|
||||
)}</span
|
||||
>
|
||||
</p>
|
||||
<span class="hint"></span>
|
||||
<dees-button .disabled=${true}>Create the Organization</dees-button>
|
||||
</div>
|
||||
`,
|
||||
viewHost
|
||||
);
|
||||
@@ -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>
|
||||
`;
|
||||
})}
|
||||
|
||||
@@ -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;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 24px 0 8px 0;
|
||||
}
|
||||
|
||||
dees-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
dees-button {
|
||||
margin-top: 16px;
|
||||
}
|
||||
`
|
||||
]
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<h1>-> Billing & Subscription</h1>
|
||||
This page allows you to setup how you are billed for any workspace.global charges.
|
||||
<h2>PaymentMethod</h2>
|
||||
<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>
|
||||
<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.
|
||||
<h2>Subscriptions</h2>
|
||||
<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.
|
||||
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-button>Add subscription</dees-button>
|
||||
<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>
|
||||
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization ${'org1'}`} .data=${this.subscriptions}></dees-table>
|
||||
<h2>Upcoming Billable Items</h2>
|
||||
<h2>Past Invoices</h2>
|
||||
<h1>Billing & Subscription</h1>
|
||||
<p>Manage your billing settings and subscriptions for your organization.</p>
|
||||
|
||||
<div class="section">
|
||||
<h2>Payment Method</h2>
|
||||
<div class="card">
|
||||
<p>Our customer-side billing is handled by paddle.com. You subscribe to a free plan there,
|
||||
and we will bill any occurring charges as an extra on the monthly date of your choosing.
|
||||
Paddle.com will take care of proper VAT invoices that will allow for VAT reduction according to the law.</p>
|
||||
|
||||
<h3>Paddle</h3>
|
||||
<dees-button @click=${async () => {
|
||||
await this.domtoolsPromise;
|
||||
this.domtools.router.pushUrl(`/org/${state.accountState.getState().selectedOrg.data.slug}/paddlesetup`)
|
||||
}}>Set up Paddle.com</dees-button>
|
||||
|
||||
<h3>Enterprise Billing</h3>
|
||||
<p>Once you have 100 or more Pro Plan users, you can request custom Enterprise billing for your organization here.</p>
|
||||
<p><em>Note: You are currently not eligible.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Subscriptions</h2>
|
||||
<div class="card">
|
||||
<p>
|
||||
The total price of a subscription already includes all taxes. If you are a VAT registered business,
|
||||
the actual price might be cheaper in case you can claim VAT exemption from the purchase.
|
||||
</p>
|
||||
<p>
|
||||
<em>Note: Subscriptions are tied to organizations. Select the respective organization from the sidebar to view its subscriptions.</em>
|
||||
</p>
|
||||
<dees-table .heading1=${'Subscriptions'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
|
||||
<dees-button>Add Subscription</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Accrued IaaS Usage</h2>
|
||||
<div class="card">
|
||||
<p>The accrued IaaS Usage will be charged by adjusting the workspace.global IaaS Postpaid Access price prior to the renewal date.</p>
|
||||
<dees-table .heading1=${'Usage'} .heading2=${`for organization`} .data=${this.subscriptions}></dees-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Upcoming Billable Items</h2>
|
||||
<div class="card">
|
||||
<p>No upcoming billable items.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Past Invoices</h2>
|
||||
<div class="card">
|
||||
<p>No past invoices available.</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
opacity: 0;
|
||||
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;
|
||||
padding: 48px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-family: 'Cal Sans';
|
||||
text-align: center;
|
||||
letter-spacing:0.0125em;
|
||||
.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;
|
||||
}
|
||||
|
||||
.contentSpacer {
|
||||
padding: 0px 0px 16px 0px;
|
||||
.brand-content {
|
||||
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%;
|
||||
padding: 8px;
|
||||
background: ${cssManager.bdTheme('#f5f5f5', '#111')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ccc', '#222222')};
|
||||
color: ${cssManager.bdTheme('#666', '#888')};
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.legalinfo a {
|
||||
color: ${cssManager.bdTheme('#666', '#ccc')};
|
||||
.form-footer a {
|
||||
color: var(--muted-foreground);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.form-footer a:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.form-footer .separator {
|
||||
margin: 0 8px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.version {
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Mobile Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.split-container {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
padding: 32px 24px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.brand-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.features {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="mainContainer">
|
||||
<div class="loginblock">
|
||||
<h1>idp.global</h1>
|
||||
<div class="contentSpacer">
|
||||
<div class="split-container">
|
||||
<!-- Left: Branding Panel -->
|
||||
<div class="brand-panel">
|
||||
<div class="brand-content">
|
||||
<h1 class="logo">idp.global</h1>
|
||||
<p class="tagline">Your permanent identity on the web</p>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:code'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Open Source</h3>
|
||||
<p>Fully transparent, community-driven, no vendor lock-in</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:heart'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Always Free</h3>
|
||||
<p>Free for individuals and organizations. Paid support available for SLAs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Permanent Identity</h3>
|
||||
<p>One identity across all your applications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learn-more">
|
||||
<dees-button
|
||||
type="secondary"
|
||||
@click=${() => window.open('https://about.idp.global', '_blank')}
|
||||
>Learn more</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Form Panel -->
|
||||
<div class="form-panel">
|
||||
<div class="form-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="legalinfo">
|
||||
<a href="https://legal.task.vc/" target="_blank">Legal Info</a>
|
||||
| <a href="https://task.vc/" target="_blank">Company Website</a>
|
||||
| <a href="https://support.task.vc/" target="_blank">Support</a>
|
||||
| idp.global v${commitinfo.version}
|
||||
</div>
|
||||
<footer class="form-footer">
|
||||
<a href="https://legal.task.vc/" target="_blank">Legal</a>
|
||||
<span class="separator">·</span>
|
||||
<a href="https://task.vc/" target="_blank">Company</a>
|
||||
<span class="separator">·</span>
|
||||
<a href="https://support.task.vc/" target="_blank">Support</a>
|
||||
<div class="version">v${commitinfo.version}</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -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');
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(250);
|
||||
this.shadowRoot.querySelector('.form-content').classList.add('show');
|
||||
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');
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(250);
|
||||
this.shadowRoot.querySelector('.form-content').classList.remove('show');
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(350);
|
||||
done.resolve();
|
||||
});
|
||||
return done.promise;
|
||||
|
||||
@@ -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 {
|
||||
margin: 0px 20px;
|
||||
.form-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
margin-top: 16px;
|
||||
.form-header h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.form-header p {
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dees-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.form-footer a {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.form-footer a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -70,34 +109,38 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<idp-centercontainer>
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="loginForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.login({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
passwordArg: eventArg.detail.data.password,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
id="loginEmailInput"
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address or Username"
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.id=${'loginPasswordInput'}
|
||||
.key=${'password'}
|
||||
.label=${'Password'}
|
||||
.isPasswordBool=${true}
|
||||
></dees-input-text>
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
</dees-form>
|
||||
<dees-button type="discreet" class="registerButton" @clicked=${async () => {
|
||||
<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) => {
|
||||
this.login({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
passwordArg: eventArg.detail.data.password,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
id="loginEmailInput"
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email or Username"
|
||||
></dees-input-text>
|
||||
<dees-input-text
|
||||
.id=${'loginPasswordInput'}
|
||||
.key=${'password'}
|
||||
.label=${'Password'}
|
||||
.isPasswordBool=${true}
|
||||
></dees-input-text>
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
</dees-form>
|
||||
<div class="form-footer">
|
||||
Don't have an account? <a @click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/register');
|
||||
}}>Register instead</dees-button>
|
||||
}}>Create one</a>
|
||||
</div>
|
||||
</idp-centercontainer>
|
||||
`;
|
||||
@@ -124,9 +167,9 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
|
||||
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
|
||||
// lets disable the register button
|
||||
const registerButton: plugins.deesCatalog.DeesButton = this.shadowRoot.querySelector('.registerButton');
|
||||
registerButton.disabled = true;
|
||||
// lets disable the submit button
|
||||
const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
|
||||
loginSubmitButton.disabled = true;
|
||||
// lets define the needed requests
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
|
||||
@@ -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 {
|
||||
margin: 0px 20px;
|
||||
.form-header {
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.registerButton {
|
||||
display: block;
|
||||
transition: all 0.2s ease;
|
||||
will-change: transform;
|
||||
.form-header h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.form-header p {
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dees-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.form-footer a {
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.registerButton:hover {
|
||||
color: #fff;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
margin-top: 16px;
|
||||
.form-footer a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@@ -82,29 +109,34 @@ export class IdpRegistrationPrompt extends DeesElement {
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<idp-centercontainer>
|
||||
<div class="boxcontent">
|
||||
<dees-form
|
||||
id="registrationForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.register({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email-Address"
|
||||
></dees-input-text>
|
||||
<dees-input-checkbox
|
||||
.label="${'Agree to the Terms and Conditions'}"
|
||||
></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-header">
|
||||
<h2>Create your account</h2>
|
||||
<p>Get started with your permanent identity</p>
|
||||
</div>
|
||||
<dees-form
|
||||
id="registrationForm"
|
||||
@formData="${(eventArg) => {
|
||||
this.register({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
});
|
||||
}}"
|
||||
>
|
||||
<dees-input-text
|
||||
.required=${true}
|
||||
key="emailAddress"
|
||||
label="Email Address"
|
||||
></dees-input-text>
|
||||
<dees-input-checkbox
|
||||
.label="${'I agree to the Terms and Conditions'}"
|
||||
.required=${true}
|
||||
></dees-input-checkbox>
|
||||
<dees-form-submit>Send Verification Email</dees-form-submit>
|
||||
</dees-form>
|
||||
<div class="form-footer">
|
||||
Already have an account? <a @click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/login');
|
||||
}}>Login instead</dees-button>
|
||||
}}>Sign in</a>
|
||||
</div>
|
||||
</idp-centercontainer>
|
||||
`;
|
||||
|
||||
@@ -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;
|
||||
height: 100px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
--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%);
|
||||
|
||||
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;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 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;
|
||||
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="main">
|
||||
${this.usedSubTemplate
|
||||
? this.usedSubTemplate
|
||||
: html`<dees-spinner size="60"></dees-spinner>`}
|
||||
<div class="split-container">
|
||||
<!-- Left: Branding Panel -->
|
||||
<div class="brand-panel">
|
||||
<div class="brand-content">
|
||||
<h1 class="logo">idp.global</h1>
|
||||
<p class="tagline">Your permanent identity on the web</p>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:code'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Open Source</h3>
|
||||
<p>Fully transparent, community-driven, no vendor lock-in</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:heart'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Always Free</h3>
|
||||
<p>Free for individuals and organizations. Paid support available for SLAs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<dees-icon .icon=${'lucide:fingerprint'}></dees-icon>
|
||||
</div>
|
||||
<div class="feature-text">
|
||||
<h3>Permanent Identity</h3>
|
||||
<p>One identity across all your applications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learn-more">
|
||||
<dees-button
|
||||
type="secondary"
|
||||
@click=${() => window.open('https://about.idp.global', '_blank')}
|
||||
>Learn more</dees-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Stepper Panel -->
|
||||
<div class="stepper-panel">
|
||||
<div class="stepper-content">
|
||||
${this.usedSubTemplate
|
||||
? this.usedSubTemplate
|
||||
: html`<div class="spinner-container"><dees-spinner size="60"></dees-spinner></div>`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -71,8 +291,10 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
|
||||
if (!this.storedData.validationTokenUrlParam) {
|
||||
this.usedSubTemplate = html`
|
||||
You need a validation token, but we couldn't find one. Please contact workspace.global
|
||||
support.
|
||||
<div class="error-message">
|
||||
You need a validation token, but we couldn't find one.<br/>
|
||||
Please contact support for assistance.
|
||||
</div>
|
||||
`;
|
||||
await this.domtools.convenience.smartdelay.delayFor(5000);
|
||||
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 />
|
||||
${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
|
||||
<div class="error-message">
|
||||
The supplied validation token does not match any registration sessions.<br/>
|
||||
${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
|
||||
</div>
|
||||
`;
|
||||
await this.domtools.convenience.smartdelay.delayFor(5000);
|
||||
idpState.domtools.router.pushUrl('/');
|
||||
@@ -125,10 +349,10 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
validationFunc: async (stepperArg, elementArg, signal) => {
|
||||
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const response = await idpState.idpClient.requests.setData
|
||||
await idpState.idpClient.requests.setData
|
||||
.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
userData: {
|
||||
@@ -148,7 +372,7 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
);
|
||||
deesForm.setStatus('success', 'ok!');
|
||||
stepperArg.goNext();
|
||||
});
|
||||
}, { signal });
|
||||
},
|
||||
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
||||
const deesForm = stepElementArg.querySelector('dees-form');
|
||||
@@ -167,10 +391,10 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
validationFunc: async (stepperArg, elementArg, signal) => {
|
||||
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const response = await idpState.idpClient.requests.mobileNumberVerification
|
||||
await idpState.idpClient.requests.mobileNumberVerification
|
||||
.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
mobileNumber: eventArg.detail.data.mobileNumber,
|
||||
@@ -184,7 +408,7 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
);
|
||||
deesForm.setStatus('success', 'ok!');
|
||||
stepperArg.goNext();
|
||||
});
|
||||
}, { signal });
|
||||
},
|
||||
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
||||
const deesForm = stepElementArg.querySelector('dees-form');
|
||||
@@ -203,7 +427,7 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
validationFunc: async (stepperArg, elementArg, signal) => {
|
||||
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const response = await idpState.idpClient.requests.mobileNumberVerification.fire({
|
||||
@@ -219,7 +443,7 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
await this.domtools.convenience.smartdelay.delayFor(3000);
|
||||
deesForm.setStatus('normal', 'Retry And Next!');
|
||||
}
|
||||
});
|
||||
}, { signal });
|
||||
},
|
||||
onReturnToStepFunc: async (stepperArg, stepElementArg) => {
|
||||
stepperArg.goBack();
|
||||
@@ -239,10 +463,10 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
<dees-form-submit>Next</dees-form-submit>
|
||||
</dees-form>
|
||||
`,
|
||||
validationFunc: async (stepperArg, elementArg) => {
|
||||
validationFunc: async (stepperArg, elementArg, signal) => {
|
||||
const deesForm: plugins.deesCatalog.DeesForm = elementArg.querySelector('dees-form');
|
||||
deesForm.addEventListener('formData', async (eventArg: CustomEvent) => {
|
||||
const response = await idpState.idpClient.requests.setData.fire({
|
||||
await idpState.idpClient.requests.setData.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
userData: {
|
||||
username: null,
|
||||
@@ -253,10 +477,9 @@ export class IdpRegistrationStepper extends DeesElement {
|
||||
password: eventArg.detail.data.password,
|
||||
},
|
||||
});
|
||||
const finishRegistrationResponse =
|
||||
await idpState.idpClient.requests.finishRegistration.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
});
|
||||
await idpState.idpClient.requests.finishRegistration.fire({
|
||||
token: this.storedData.validationTokenUrlParam,
|
||||
});
|
||||
deesForm.setStatus('pending', 'User created!');
|
||||
await this.domtools.convenience.smartdelay.delayFor(500);
|
||||
deesForm.setStatus('pending', 'Obtaining Refresh Token...');
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,85 +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;
|
||||
font-family: 'Geist Sans';
|
||||
color: var(--foreground);
|
||||
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
padding: 0px 16px;
|
||||
.form-header {
|
||||
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;
|
||||
font-weight: 600;
|
||||
margin: 24px auto;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
dees-button {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
.greeting strong {
|
||||
color: var(--foreground);
|
||||
font-weight: 600;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<idp-centercontainer>
|
||||
<div class="maincontainer">
|
||||
${resolveExec(async () => {
|
||||
${directives.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>
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/account');
|
||||
}}
|
||||
>Manage your account</dees-button
|
||||
>
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>Logout</dees-button
|
||||
>
|
||||
<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>
|
||||
<dees-button
|
||||
type="secondary"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/logout');
|
||||
}}
|
||||
>Sign out</dees-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return html`
|
||||
Do you want to sign in or register?
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/login');
|
||||
}}
|
||||
>Sign In</dees-button
|
||||
>
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/register');
|
||||
}}
|
||||
>Register</dees-button
|
||||
>
|
||||
<div class="form-header">
|
||||
<h2>Welcome</h2>
|
||||
<p>Sign in to your account or create a new one</p>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/login');
|
||||
}}
|
||||
>Sign In</dees-button>
|
||||
<dees-button
|
||||
type="secondary"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/register');
|
||||
}}
|
||||
>Create Account</dees-button>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
|
||||
<dees-button
|
||||
@click=${() => {
|
||||
window.open('https://code.foss.global/idp.global/idp.global', '_blank');
|
||||
}}
|
||||
>Get the Source Code</dees-button
|
||||
>
|
||||
<div class="secondary-actions">
|
||||
<dees-button
|
||||
type="discreet"
|
||||
@click=${() => {
|
||||
window.open('https://code.foss.global/idp.global/idp.global', '_blank');
|
||||
}}
|
||||
>View Source Code</dees-button>
|
||||
</div>
|
||||
</idp-centercontainer>
|
||||
`;
|
||||
|
||||
@@ -33,6 +33,7 @@ export class IdpViewcontainer extends DeesElement {
|
||||
.viewContainer {
|
||||
min-width: 100vh;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(-255deg,#06152280 -3.35%,#939eff38 32.79%,#22578480 67.41%,#06152280 97.48%),#212121;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
+1
-3
@@ -1,8 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"target": "ES2022",
|
||||
"target": "es2022",
|
||||
"module": "NodeNext",
|
||||
"moduleResolution": "NodeNext",
|
||||
"esModuleInterop": true,
|
||||
|
||||
Reference in New Issue
Block a user