@flusys/ng-auth 3.0.1 → 4.0.0-rc

package/README.md

@@ -5,7 +5,7 @@
 `@flusys/ng-auth` provides complete authentication functionality including login, registration, token management, company/branch selection, user administration, and permission handling.
 
 **Package:** `@flusys/ng-auth`
-**Version:** 3.0.1
+**Version:** 4.0.0-rc
 **Dependencies:** ng-core, ng-shared, ng-layout
 **Build:** `npm run build:ng-auth`
 
@@ -526,7 +526,6 @@ getCompanyBranches(companyId);         // User's permitted branches in company
 ## Pages
 
 All page components follow Angular 21 best practices:
-- `ChangeDetectionStrategy.OnPush` for optimal performance
 - Signal Forms (`@angular/forms/signals`) with validation
 - 100% responsive design (mobile-first with Tailwind)
 - Dark mode compatible (PrimeNG + Tailwind CSS variables)
@@ -582,11 +581,11 @@ All page components follow Angular 21 best practices:
 **ProfilePageComponent** (`/profile`)
 - Page title with description
 - Avatar section with initials fallback
-- Profile picture upload (requires `PROFILE_UPLOAD_PROVIDER` from ng-storage)
+- Profile picture upload (requires `FILE_PROVIDER` from ng-storage)
 - Update name and phone with Signal Forms
-- Extra fields support via AUTH_PROFILE_EXTENSION
-  - Editable fields (user can modify)
-  - View-only fields (managed by admin)
+- Extra fields support via two providers:
+  - `AUTH_PROFILE_EXTENSION` - Fields user can edit
+  - `AUTH_USER_FORM_EXTENSION` - Fields displayed as view-only ("Managed by Admin")
 - Change password section with PrimeNG password strength indicator
 - Company/branch info (if company feature enabled)
 - Roles/actions display (requires `PROFILE_PERMISSION_PROVIDER` from ng-iam)
@@ -597,7 +596,7 @@ All page components follow Angular 21 best practices:
 
 | Provider | Source | Feature Enabled |
 |----------|--------|-----------------|
-| `PROFILE_UPLOAD_PROVIDER` | ng-storage via `provideStorageProviders()` | Profile picture upload |
+| `FILE_PROVIDER` | ng-storage via `provideStorageProviders()` | Profile picture upload |
 | `PROFILE_PERMISSION_PROVIDER` | ng-iam via `provideIamProviders()` | Roles/actions display |
 
 ### Administration Pages
@@ -639,7 +638,6 @@ All page components follow Angular 21 best practices:
 ## Dialog Components
 
 Both dialog components use Angular 21 patterns:
-- `ChangeDetectionStrategy.OnPush`
 - `input.required<T>()` for required inputs
 - `output<void>()` for events
 - `effect()` for reactive data loading
@@ -1127,7 +1125,6 @@ All components follow these patterns:
 
 | Pattern | Implementation |
 |---------|---------------|
-| Change Detection | `ChangeDetectionStrategy.OnPush` |
 | Dependency Injection | `inject()` function |
 | State (private writable) | `private readonly _data = signal<T>(...)` |
 | State (public readonly) | `readonly data = this._data.asReadonly()` |
@@ -1286,6 +1283,7 @@ import {
   AUTH_USER_LIST_EXTENSION,
   AUTH_USER_DETAIL_CONFIG,
   AUTH_PROFILE_EXTENSION,
+  AUTH_USER_FORM_EXTENSION,
 } from '@flusys/ng-auth';
 ```
 
@@ -1360,9 +1358,9 @@ Configure user detail view mode.
 
 ### AUTH_PROFILE_EXTENSION
 
-Add extra fields and sections to profile page.
+Add extra fields that **users can edit** on their own profile page.
 
-**IProfileExtraField:** `key`, `label`, `type` (text|number|select|checkbox|textarea|date|template), `placeholder?`, `editable?` (false=view-only), `required?`, `options?`, `pattern?`, `validationMessage?`, `order?`, `sectionKey?`, `template?`, `component?`, `injector?`
+**IProfileExtraField:** `key`, `label`, `type` (text|number|select|checkbox|textarea|date|template), `placeholder?`, `required?`, `options?`, `pattern?`, `validationMessage?`, `order?`, `sectionKey?`, `template?`, `component?`, `injector?`
 
 **IProfileExtraSection:** `key`, `title`, `icon?`, `order?`, `component?`, `template?`, `collapsible?`, `collapsed?`, `editPermission?`
 
@@ -1370,7 +1368,7 @@ Add extra fields and sections to profile page.
 
 | Method | Purpose |
 |--------|---------|
-| `getExtraFields?()` | Return field definitions |
+| `getExtraFields?()` | Return field definitions (user-editable) |
 | `getExtraSections?()` | Return section definitions |
 | `getExtraFieldValues?(userId)` | Fetch values from custom API |
 | `saveExtraFieldValues?(userId, data)` | Save values to custom API |
@@ -1381,6 +1379,34 @@ Add extra fields and sections to profile page.
 // Custom component: inject(PROFILE_FIELD_CONTEXT) for field, value, updateValue()
 ```
 
+### AUTH_USER_FORM_EXTENSION
+
+Add extra fields that **admins can edit** on the user management form (`/administration/users/:id`).
+These fields appear as **view-only** on the user's profile page with "Managed by Admin" label.
+
+**IUserFormExtraField:** `key`, `label`, `type` (text|number|select|checkbox|textarea|date|template), `placeholder?`, `required?`, `options?`, `pattern?`, `validationMessage?`, `order?`, `template?`, `component?`, `injector?`
+
+**IUserFormExtensionProvider Methods:**
+
+| Method | Purpose |
+|--------|---------|
+| `getExtraFields?()` | Return field definitions (admin-editable) |
+| `getExtraFieldValues?(userId)` | Fetch values from custom API |
+| `saveExtraFieldValues?(userId, data)` | Save values to custom API |
+| `validateExtraFields?(data)` | Custom validation, return error message or null |
+
+```typescript
+{ provide: AUTH_USER_FORM_EXTENSION, useClass: MyUserFormExtension }
+// Custom component: inject(USER_FORM_FIELD_CONTEXT) for field, value, updateValue()
+```
+
+**Profile vs Admin Form Pattern:**
+
+| Provider | Used In | Who Edits | Profile Display |
+|----------|---------|-----------|-----------------|
+| `AUTH_PROFILE_EXTENSION` | Profile page | User | Editable fields |
+| `AUTH_USER_FORM_EXTENSION` | Admin user form | Admin | View-only ("Managed by Admin") |
+
 ### Provider Factory Example
 
 Combine all extensions in a single provider function for app.config.ts:
@@ -1392,7 +1418,8 @@ export function provideAuthExtensions(): Provider[] {
     { provide: AUTH_REGISTRATION_EXTENSION, useClass: MyRegistrationExtension },
     { provide: AUTH_USER_LIST_EXTENSION, useFactory: (r, m) => new MyUserListExtension(r, m), deps: [Router, MessageService] },
     { provide: AUTH_USER_DETAIL_CONFIG, useValue: { viewMode: 'dialog', allowEdit: true } },
-    { provide: AUTH_PROFILE_EXTENSION, useClass: MyProfileExtension },
+    { provide: AUTH_PROFILE_EXTENSION, useClass: MyProfileExtension },      // User-editable fields
+    { provide: AUTH_USER_FORM_EXTENSION, useClass: MyUserFormExtension },   // Admin-editable fields
   ];
 }
 // Usage: providers: [...provideAuthExtensions()]
@@ -1419,8 +1446,8 @@ When using extensions, registration data flows as:
 
 ---
 
-**Last Updated:** 2026-02-25
+**Last Updated:** 2026-03-01
 **Version:** 3.0.1
 **Angular Version:** 21
 
-All 15 components use `ChangeDetectionStrategy.OnPush`, responsive design, and dark mode support. Form components use Signal Forms.
+All 15 components use responsive design and dark mode support. Form components use Signal Forms.