Custom CSS styling of login page

CHANGELOG.md

@@ -4,6 +4,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- New auth option `cssUrl` which is then loaded as a stylesheet in the chaperone html. This only works with a custom chaperone build.
+
 
 ## [0.6.15-prerelease] - 2023-09-06 
 

src/index.ts

@@ -77,6 +77,9 @@ class WebSdkApi implements AppAgentClient {
       if (authOpts.logoUrl !== undefined) {
         url.searchParams.set('logo_url', makeUrlAbsolute(authOpts.logoUrl))
       }
+      if (authOpts.cssUrl !== undefined) {
+        url.searchParams.set('css_url', makeUrlAbsolute(authOpts.cssUrl))
+      }
       if (authOpts.appName !== undefined) {
         url.searchParams.set('app_name', authOpts.appName)
       }
@@ -268,6 +271,8 @@ type AuthFormCustomization = {
   appName?: string
   // The URL of the hApp logo. Currently displayed on a white background with no `width` or `height` constraints.
   logoUrl?: string
+  // The URL of a CSS file to apply to the Holo Login iframe
+  cssUrl?: string
   // Determines whether the "REGISTRATION CODE" field is shown.
   // 
   // Set this to `true` if you want to prompt the user for a registration code that will be passed directly to your happ as a mem_proof (ie, not using a memproof server). This field does nothing if the membraneProofServer option (see below) is set.
@@ -289,6 +294,8 @@ type AuthFormCustomization = {
     // An arbitrary value that will be passed to the Membrane Proof Server as additional information
     payload: unknown
   },
+  // The parent HTMLElement to insert the login iframe into. Defaults to `document.body`
+  container?: HTMLElement,
   // INTERNAL OPTION
   // anonymous_allowed is barely implemented in Chaperone, and is subject to change,
   // so exposing this in the documentation is misleading.