feat(docs): add package READMEs and publish metadata; update web package publish order
This commit is contained in:
@@ -0,0 +1,256 @@
|
||||
# @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.
|
||||
Reference in New Issue
Block a user