257 lines
6.8 KiB
Markdown
257 lines
6.8 KiB
Markdown
# @idp.global/web
|
|
|
|
Web Components and UI elements for the idp.global Identity Provider platform. Built with `@design.estate/dees-element` and the dees-catalog component library.
|
|
|
|
## Overview
|
|
|
|
This package provides the complete web interface for idp.global, including authentication flows, account management, and organization administration. All components are built as Web Components using the Lit-based `dees-element` framework.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @idp.global/web
|
|
# or
|
|
pnpm add @idp.global/web
|
|
```
|
|
|
|
## Architecture
|
|
|
|
```
|
|
ts_web/
|
|
├── index.ts # Application entry point
|
|
├── plugins.ts # Plugin imports
|
|
├── views/
|
|
│ ├── viewcontainer.ts # Main view router
|
|
│ └── index.ts
|
|
├── elements/ # Web Components
|
|
│ ├── idp-loginprompt.ts # Login form
|
|
│ ├── idp-registerprompt.ts # Registration form
|
|
│ ├── idp-registration-stepper.ts # Multi-step registration
|
|
│ ├── idp-centercontainer.ts # Centered layout container
|
|
│ ├── idp-transfermanager.ts # SSO transfer handling
|
|
│ ├── idp-welcome.ts # Welcome/landing page
|
|
│ └── account/ # Account dashboard components
|
|
│ ├── content.ts # Main account layout
|
|
│ ├── navigation.ts # Sidebar navigation
|
|
│ ├── org-select-modal.ts # Organization switcher
|
|
│ ├── create-org-modal.ts # Create organization dialog
|
|
│ ├── bulk-invite-modal.ts # Bulk member invite dialog
|
|
│ └── views/ # Account sub-views
|
|
│ ├── baseview.ts # Base view class
|
|
│ ├── usersview.ts # User profile view
|
|
│ ├── orgview.ts # Organization details
|
|
│ ├── orgsetup.ts # Organization setup
|
|
│ ├── appsview.ts # Connected apps
|
|
│ ├── adminview.ts # Global admin panel
|
|
│ ├── subscriptions.ts # Billing subscriptions
|
|
│ └── paddlesetup.ts # Payment setup
|
|
└── states/
|
|
├── idp.state.ts # Main application state
|
|
└── accountstate.ts # Account dashboard state
|
|
```
|
|
|
|
## Components
|
|
|
|
### Authentication Components
|
|
|
|
#### `<idp-loginprompt>`
|
|
|
|
Login form supporting password and magic link authentication.
|
|
|
|
```html
|
|
<idp-loginprompt></idp-loginprompt>
|
|
```
|
|
|
|
Features:
|
|
- Email/username + password login
|
|
- Magic link (passwordless) authentication
|
|
- Automatic button text based on password presence
|
|
- Form validation and error handling
|
|
- Redirect to registration
|
|
|
|
#### `<idp-registerprompt>`
|
|
|
|
Initial registration form for new users.
|
|
|
|
```html
|
|
<idp-registerprompt></idp-registerprompt>
|
|
```
|
|
|
|
#### `<idp-registration-stepper>`
|
|
|
|
Multi-step registration wizard for completing user profile.
|
|
|
|
```html
|
|
<idp-registration-stepper></idp-registration-stepper>
|
|
```
|
|
|
|
Steps include:
|
|
- Profile information
|
|
- Email verification
|
|
- Mobile verification (optional)
|
|
- Password setup
|
|
|
|
### Layout Components
|
|
|
|
#### `<idp-viewcontainer>`
|
|
|
|
Main view container that handles routing between views.
|
|
|
|
```html
|
|
<idp-viewcontainer></idp-viewcontainer>
|
|
```
|
|
|
|
Supported views:
|
|
- `welcome` - Landing page
|
|
- `login` - Login form
|
|
- `register` - Registration form
|
|
- `finishregistration` - Registration stepper
|
|
- `account` - Account dashboard
|
|
|
|
#### `<idp-centercontainer>`
|
|
|
|
Centered container with animation support for forms.
|
|
|
|
```html
|
|
<idp-centercontainer>
|
|
<h2>Your Content</h2>
|
|
<form>...</form>
|
|
</idp-centercontainer>
|
|
```
|
|
|
|
Methods:
|
|
- `show()` - Animate container into view
|
|
- `hide()` - Animate container out of view
|
|
|
|
### Account Dashboard Components
|
|
|
|
#### `<idp-account-content>`
|
|
|
|
Main account dashboard layout with navigation.
|
|
|
|
```html
|
|
<idp-account-content></idp-account-content>
|
|
```
|
|
|
|
#### Navigation Views
|
|
|
|
| Component | Route | Description |
|
|
|-----------|-------|-------------|
|
|
| `<idp-usersview>` | `/account/users` | User profile management |
|
|
| `<idp-orgview>` | `/account/org` | Organization details |
|
|
| `<idp-orgsetup>` | `/account/orgsetup` | Organization configuration |
|
|
| `<idp-appsview>` | `/account/apps` | Connected applications |
|
|
| `<idp-adminview>` | `/account/admin` | Global admin panel |
|
|
| `<idp-subscriptions>` | `/account/subscriptions` | Billing management |
|
|
| `<idp-paddlesetup>` | `/account/paddle` | Payment method setup |
|
|
|
|
### Modal Components
|
|
|
|
#### `<idp-org-select-modal>`
|
|
|
|
Organization switcher modal for users with multiple organizations.
|
|
|
|
#### `<idp-create-org-modal>`
|
|
|
|
Dialog for creating new organizations with slug validation.
|
|
|
|
#### `<idp-bulk-invite-modal>`
|
|
|
|
Bulk invitation dialog for inviting multiple members at once.
|
|
|
|
## State Management
|
|
|
|
### IdpState
|
|
|
|
Central application state using `@push.rocks/smartstate`.
|
|
|
|
```typescript
|
|
import { IdpState } from '@idp.global/web';
|
|
|
|
const idpState = await IdpState.getSingletonInstance();
|
|
|
|
// Access IdP client
|
|
const isLoggedIn = await idpState.idpClient.determineLoginStatus();
|
|
|
|
// Access router
|
|
idpState.domtools.router.pushUrl('/login');
|
|
|
|
// Subscribe to view changes
|
|
idpState.mainStatePart.select(s => s.view).subscribe(view => {
|
|
console.log('Current view:', view);
|
|
});
|
|
```
|
|
|
|
### AccountState
|
|
|
|
State for the account dashboard section.
|
|
|
|
```typescript
|
|
import { AccountState } from '@idp.global/web';
|
|
|
|
const accountState = await AccountState.getSingletonInstance();
|
|
|
|
// Access current organization
|
|
const currentOrg = accountState.currentOrganization;
|
|
|
|
// Access user roles
|
|
const roles = accountState.userRoles;
|
|
```
|
|
|
|
## Styling
|
|
|
|
Components use CSS custom properties for theming:
|
|
|
|
```css
|
|
:host {
|
|
--foreground: hsl(0 0% 98%);
|
|
--muted-foreground: hsl(240 5% 64.9%);
|
|
--background-accent: #303f9f;
|
|
}
|
|
```
|
|
|
|
All components include:
|
|
- Dark mode by default
|
|
- Geist Sans font family
|
|
- Smooth animations
|
|
- Responsive layouts
|
|
|
|
## Dependencies
|
|
|
|
- `@design.estate/dees-element` - Web Component base class
|
|
- `@design.estate/dees-catalog` - UI component library
|
|
- `@design.estate/dees-domtools` - DOM utilities and routing
|
|
- `@idp.global/idpclient` - IdP client library
|
|
- `@idp.global/interfaces` - TypeScript interfaces
|
|
- `@push.rocks/smartstate` - State management
|
|
- `@uptime.link/webwidget` - Status widget
|
|
|
|
## Views and Routes
|
|
|
|
| Route | View | Component |
|
|
|-------|------|-----------|
|
|
| `/` | `welcome` | `IdpWelcome` |
|
|
| `/login` | `login` | `IdpLoginPrompt` |
|
|
| `/register` | `register` | `IdpRegistrationPrompt` |
|
|
| `/finishregistration` | `finishregistration` | `IdpRegistrationStepper` |
|
|
| `/account` | `account` | `IdpAccountContent` |
|
|
| `/logout` | - | Logout handler |
|
|
|
|
## Building
|
|
|
|
The web module is bundled using `@git.zone/tsbundle`:
|
|
|
|
```bash
|
|
# Development with hot reload
|
|
pnpm watch
|
|
|
|
# Production build
|
|
pnpm build
|
|
```
|
|
|
|
The bundled output is served from `dist_ts_web/` by the TypedServer.
|
|
|
|
## License
|
|
|
|
MIT - See the main repository for full license details.
|