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