@progalaxyelabs/ngx-stonescriptphp-client 1.3.1 → 1.5.0

package/README.md

@@ -7,9 +7,9 @@
 
 **Note:** While published as `@progalaxyelabs/ngx-stonescriptphp-client`, this is the official client for [StoneScriptPHP](https://stonescriptphp.org). Future versions will migrate to the `@stonescriptphp` namespace.
 
-## ✅ Authentication Support (v2.0.0)
+## ✅ Authentication Support (v2.0.0+)
 
-**Current Version: 2.0.0 (Modal-Based Authentication)**
+**Current Version: 1.4.0 (Full-Page Authentication Components)**
 
 **Fully compatible with StoneScriptPHP Framework v2.1.x authentication!**
 
@@ -19,7 +19,39 @@
 - ✅ **Configurable**: Choose your auth strategy via environment config
 - ✅ **All HTTP methods**: GET, POST, PUT, PATCH, DELETE with automatic token refresh
 
-### Modal-Based User Authentication (NEW in v2.0.0)
+### Multi-Auth Server Support (NEW)
+- ✅ **Multiple identity providers**: Authenticate against different auth servers (customer auth vs employee auth)
+- ✅ **Runtime server switching**: Switch between auth servers dynamically
+- ✅ **Per-request server selection**: Specify server for individual auth calls
+- ✅ **Backward compatible**: Single-server config still works
+- ✅ **Use case**: Shared admin platforms that accept both customer and employee logins
+
+```typescript
+// Multi-server configuration
+authServers: {
+  customer: { url: 'https://auth.progalaxyelabs.com', default: true },
+  employee: { url: 'https://admin-auth.progalaxyelabs.com' }
+}
+```
+
+See [MULTI-AUTH-SERVER.md](MULTI-AUTH-SERVER.md) for complete documentation.
+
+### Full-Page Authentication UI (NEW in v1.4.0)
+- ✅ **AuthPageComponent**: Embeddable full-page auth with custom branding
+- ✅ **Customizable Branding**: Logo, colors, gradients, app name, subtitle
+- ✅ **Login/Register Toggle**: Seamless switching between modes
+- ✅ **Styled Card Layout**: Professional gradient background with centered card
+- ✅ **Zero Configuration**: Works out-of-the-box with sensible defaults
+
+```typescript
+// Quick Example: Branded auth page
+<lib-auth-page
+  [providers]="['google', 'emailPassword']"
+  (authenticated)="onAuth($event)">
+</lib-auth-page>
+```
+
+### Modal-Based User Authentication (v2.0.0)
 - ✅ **6 Auth Providers**: Google, LinkedIn, Apple, Microsoft, GitHub, Email/Password
 - ✅ **Declarative Configuration**: Enable/disable providers via environment
 - ✅ **Popup OAuth**: Social login via popup windows (no full-page redirects)
@@ -37,7 +69,7 @@ authProviders: {
 
 See [Configuration](#configuration) and [AUTH-PROVIDER-CONFIG.md](AUTH-PROVIDER-CONFIG.md) for details.
 
-📖 **Documentation**: [CHANGELOG](docs/CHANGELOG.md) | [Auth Compatibility](docs/AUTH_COMPATIBILITY.md) | [Provider Config](AUTH-PROVIDER-CONFIG.md) | [Modal Auth Spec](MODAL-AUTH-SPEC.md)
+📖 **Documentation**: [CHANGELOG](docs/CHANGELOG.md) | [Auth Compatibility](docs/AUTH_COMPATIBILITY.md) | [Provider Config](AUTH-PROVIDER-CONFIG.md) | [Modal Auth Spec](MODAL-AUTH-SPEC.md) | [Multi-Auth Server](MULTI-AUTH-SERVER.md)
 
 ---
 
@@ -139,6 +171,76 @@ PHP Backend (StoneScriptPHP)          Angular Frontend
 
 ## Configuration
 
+### Branding Configuration (v1.4.0+)
+
+Customize your authentication pages with your brand identity:
+
+```typescript
+// app.config.ts or environment.ts
+import { NgxStoneScriptPhpClientModule, MyEnvironmentModel } from '@progalaxyelabs/ngx-stonescriptphp-client';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    NgxStoneScriptPhpClientModule.forRoot({
+      apiServer: {
+        host: 'http://localhost:9100/'
+      },
+      branding: {
+        appName: 'My Platform',           // Required: App name on auth pages
+        logo: '/assets/logo.png',         // Optional: Logo URL
+        primaryColor: '#667eea',          // Optional: Auto-generates gradient
+        gradientStart: '#667eea',         // Optional: Custom gradient start
+        gradientEnd: '#764ba2',           // Optional: Custom gradient end
+        subtitle: 'Secure authentication' // Optional: Subtitle text
+      }
+    } as MyEnvironmentModel)
+  ]
+};
+```
+
+**Using the AuthPageComponent:**
+
+```typescript
+import { Component } from '@angular/core';
+import { AuthPageComponent, TenantSelectedEvent } from '@progalaxyelabs/ngx-stonescriptphp-client';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [AuthPageComponent],
+  template: `
+    <lib-auth-page
+      [providers]="['google', 'linkedin', 'emailPassword']"
+      (authenticated)="onAuthenticated($event)">
+    </lib-auth-page>
+  `
+})
+export class LoginComponent {
+  onAuthenticated(event: TenantSelectedEvent) {
+    console.log('User authenticated:', event);
+    // Navigate to dashboard, etc.
+  }
+}
+```
+
+**Branding Options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `appName` | `string` | **Required**. Application name displayed on auth pages |
+| `logo` | `string` | Optional. URL to logo image (max 200x80px recommended) |
+| `primaryColor` | `string` | Optional. Primary brand color (hex). Auto-generates gradient if no gradient colors provided |
+| `gradientStart` | `string` | Optional. Gradient start color (hex). Overrides primaryColor |
+| `gradientEnd` | `string` | Optional. Gradient end color (hex). Required if gradientStart is set |
+| `subtitle` | `string` | Optional. Subtitle text below app name |
+
+**Default Styling:**
+- Gradient: `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
+- White card with rounded corners and shadow
+- Responsive design (mobile-friendly)
+
+---
+
 ### Authentication Modes (v1.0.0+)
 
 Choose your authentication strategy based on your backend: