idp.global/app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(docs): refresh module readmes and add repository license file

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-20 08:15:42 +00:00
parent 2d1e6ea6e1
commit 76efcb835f
10 changed files with 511 additions and 1286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/00_commitinfo_data.ts
+1 -1
View File
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@idp.global/idp.global',
version: '1.17.0',
version: '1.17.1',
description: 'An identity provider software managing user authentications, registrations, and sessions.'
}
ts_web/readme.md
+55 -245
View File
@@ -1,259 +1,69 @@
# @idp.global/web
# `ts_web/` Web App Module
Web Components and UI elements for the idp.global Identity Provider platform. Built with `@design.estate/dees-element` and the dees-catalog component library.
The `ts_web/` folder contains the frontend for `idp.global`: login, registration, account management, org management, billing, and admin UI.
## Overview
It is built with `@design.estate/dees-element`, `@design.estate/dees-domtools`, and the shared `idp.global` client and interface packages.
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.
## Issue Reporting and Security
## Installation
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
## What Lives Here
| Path | Purpose |
| --- | --- |
| `index.ts` | Frontend entrypoint and initial render |
| `views/viewcontainer.ts` | View switching for welcome, login, register, finishregistration, and account |
| `elements/` | Web components for prompts, layout, and account UI |
| `elements/account/views/` | Account subviews including org, apps, subscriptions, paddle setup, and admin |
| `states/` | App-level and account-level state containers |
## UI Surface
The module currently includes:
- a welcome page
- login and registration prompts
- a multi-step registration flow
- an account area with navigation
- organization selection and creation flows
- bulk member invitation UI
- app and subscription views
- a global admin view
## Routing
`IdpViewcontainer` switches between these frontend states:
| View | Route |
| --- | --- |
| `welcome` | `/` |
| `login` | `/login` |
| `register` | `/register` |
| `finishregistration` | `/finishregistration` |
| `account` | `/account` |
## Build And Run
From the repository root:
```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 install
pnpm build
pnpm watch
```
The bundled output is served from `dist_ts_web/` by the TypedServer.
`pnpm watch` rebuilds the frontend bundle from `ts_web/index.ts` into `dist_serve/bundle.js` while the backend serves the app.
## Notes
- The app metadata in `ts_web/index.ts` identifies the site as `idp.global`.
- The frontend uses the shared client package for auth state and backend communication.
- Account-related UI is split into reusable elements plus state containers in `states/`.
## License and Legal Information
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](../LICENSE) file.
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license](../license) file.
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.
@@ -265,7 +75,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
### Company Information
Task Venture Capital GmbH
Task Venture Capital GmbH
Registered at District Court Bremen HRB 35230 HB, Germany
For any legal inquiries or further information, please contact us via email at hello@task.vc.