Login Customizer Studio

SCRIPE's Login Customizer Studio is a powerful visual editor that allows tenant administrators to fully customize the login page experience without writing any code. The studio provides a split-pane interface with configuration panels on the left and a sandboxed iframe preview on the right, enabling real-time visual feedback as changes are made. The studio includes 8 configuration tabs: Appearance, Colors, Typography, Background, Overlay, Branding Panel, Accessibility, and Advanced. All modifications are draft-based, requiring explicit publish before going live.

Studio Overview

The Customizer Studio uses a split-pane architecture: the left panel contains 8 tabbed configuration sections (Appearance, Colors, Typography, Background, Overlay, Branding Panel, Accessibility, Advanced) while the right panel provides a sandboxed iframe that renders the login page with live CSS variable injection via postMessage. Device toggles allow previewing across desktop, tablet, and mobile breakpoints.

22 Login Layouts

SCRIPE ships with 22 production-ready login layouts organized into four tiers: T1 Split layouts (6) feature a dedicated branding panel alongside the login form, T2 Full-page layouts (8) use the entire viewport for immersive login experiences, T3 Centered layouts (4) use compact, card-based designs, and T4 Special layouts (4) provide cinematic and artistic treatments. Each layout supports independent background, overlay, and accessibility controls.

Design Tokens Pipeline

The customization system is built on a comprehensive design token pipeline. Tenant settings stored as JSON are transformed into semantic design tokens, which are then emitted as CSS custom properties and injected into the live DOM. This architecture ensures consistent, type-safe styling across all 22 layouts, including 23+ accessibility-specific CSS rules.

Background & Overlay Controls

Background and overlay controls adapt based on the selected layout type. Full-page layouts apply backgrounds and overlays to the wrapper container, while Split layouts scope backgrounds to the branding panel with independent form-section overlays. Overlay controls include color, opacity (0–100%), and blur (0–20px).

Light/Dark Theme Architecture

The Login Customizer supports independent light and dark mode configurations. When dark mode is enabled, a separate set of CSS variables is emitted for the dark panel (--login-dark-*), controlling form background, text color, input styling, and overlay. The dark mode toggle in the Appearance panel allows complete control over the dark theme without affecting the light configuration.

Branding Panel

The Branding Panel (visible in split layouts) provides dedicated controls for the branding side of the login page. It supports custom logo, company name, headline text, subtitle, and independent background/overlay controls. The branding panel overlay uses its own set of CSS variables (--login-panel-overlay-*) for granular control separate from the form section.

Draft / Publish / Rollback

The studio implements a safe Draft → Preview → Publish workflow using optimistic concurrency control. All changes are saved as drafts (DraftBrandingJson) until the admin explicitly publishes. Publishing increments the SettingsVersion counter — concurrent publishes from other admins are rejected with a 409 Conflict. Any previously published version can be rolled back from the audit log snapshots.

Safe Mode

Safe Mode is an emergency fallback that bypasses all tenant branding and restores platform defaults for the login page. When IsSafeMode is set to true on TenantSettings, the login page renders with the default SCRIPE theme regardless of any customization. This ensures a guaranteed working login experience even if branding configuration becomes corrupted.

Access Control

Login customization follows SCRIPE's role-based access control model. Opening the Customizer Studio requires the branding.manage permission. System Admins and Tenant Admins with the appropriate permission can edit and publish. Regular admins can only toggle personal preferences like dark/light mode. Safe mode activation is restricted to System Admins only.

Module Architecture

The Login Customizer follows SCRIPE's standard modular clean architecture with domain, data, and presentation layers. The presentation layer contains the StylePanel component (configuration UI), LoginPreviewShell (iframe management), the AccessibilityPanel (WCAG settings and profiles), and the useLoginBrandingTokens hook (token-to-CSS pipeline). Components are extracted to module-level to prevent React re-render focus loss issues.

src/modules/system/customization/
├── src/
│   ├── data/              # API services, repositories
│   ├── domain/            # Entities, types, interfaces
│   └── presentation/
│       ├── components/
│       │   ├── StylePanel.tsx        # Main config panels
│       │   ├── LoginPreviewShell.tsx  # Live preview iframe
│       │   └── ...
│       ├── hooks/
│       │   ├── useLoginBrandingTokens.ts  # Token → CSS pipeline
│       │   └── ...
│       └── views/
│           └── CustomizerView.tsx    # Studio layout

Logo Resolution & Asset Storage Paths

Uploaded logos and background brand assets are stored in tenant-scoped storage paths, versioned to bust browser CDN caches on publish.

Sandboxed CSS Custom Property Injection

The live preview frame receives real-time CSS variable updates via postMessage without page reload, ensuring a 60fps responsive editing experience.