feat(web): customizable login branding page

apps/api/prisma/schema.prisma

@@ -294,10 +294,58 @@ model Session {
 
 // Setup
 
+type BrandingText {
+  en String?
+  fr String?
+}
+
+type ResourceLink {
+  href  String
+  label BrandingText?
+}
+
+type BrandingConfig {
+  boldDetails              Boolean?
+  boldName                 Boolean?
+  boldResourceLinks        Boolean?
+  boldTagline              Boolean?
+  customLogoHeight         Int?
+  customLogoSrc            String?
+  customLogoUrl            String?
+  customLogoWidth          Int?
+  customPrimaryColor       String?
+  customSecondaryColor     String?
+  detailsFontSize          Int?
+  enableBranding           Boolean?
+  instanceDetails          BrandingText?
+  instanceName             BrandingText?
+  instanceTagline          BrandingText?
+  loginTheme               String?
+  logoAlignment            String?
+  logoSize                 String?
+  logoSource               String?
+  nameAlignment            String?
+  nameFontSize             Int?
+  panelTextColor           String?
+  resourceLinks            ResourceLink[]
+  resourceLinksFontSize    Int?
+  rightPanelPrimaryColor   String?
+  rightPanelSecondaryColor String?
+  rightPanelTheme          String?
+  sectionsOrder            String[]
+  showDetails              Boolean?
+  showFooterLinks          Boolean?
+  showLogo                 Boolean?
+  showResourceLinks        Boolean?
+  showTagline              Boolean?
+  taglineFontSize          Int?
+}
+
 model SetupState {
-  createdAt                     DateTime @default(now()) @db.Date
-  updatedAt                     DateTime @updatedAt @db.Date
-  id                            String   @id @default(auto()) @map("_id") @db.ObjectId
+  createdAt                     DateTime        @default(now()) @db.Date
+  updatedAt                     DateTime        @updatedAt @db.Date
+  id                            String          @id @default(auto()) @map("_id") @db.ObjectId
+  branding                      BrandingConfig?
   isDemo                        Boolean
   isExperimentalFeaturesEnabled Boolean?
   isSetup                       Boolean

apps/api/src/setup/dto/update-setup-state.dto.ts

@@ -1,10 +1,13 @@
 import { ValidationSchema } from '@douglasneuroinformatics/libnest';
 import { ApiProperty } from '@nestjs/swagger';
 import { $UpdateSetupStateData } from '@opendatacapture/schemas/setup';
-import type { UpdateSetupStateData } from '@opendatacapture/schemas/setup';
+import type { BrandingConfig, UpdateSetupStateData } from '@opendatacapture/schemas/setup';
 
 @ValidationSchema($UpdateSetupStateData)
 export class UpdateSetupStateDto implements UpdateSetupStateData {
-  @ApiProperty()
+  @ApiProperty({ required: false })
+  branding?: BrandingConfig | null;
+
+  @ApiProperty({ required: false })
   isExperimentalFeaturesEnabled?: boolean;
 }

apps/api/src/setup/setup.service.ts

@@ -7,6 +7,7 @@ import {
   InternalServerErrorException,
   ServiceUnavailableException
 } from '@nestjs/common';
+import { $BrandingConfig } from '@opendatacapture/schemas/setup';
 import type { CreateAdminData, InitAppOptions, SetupState, UpdateSetupStateData } from '@opendatacapture/schemas/setup';
 
 import type { RuntimePrismaClient } from '@/core/prisma';
@@ -37,7 +38,13 @@ export class SetupService {
 
   async getState() {
     const savedOptions = await this.getSavedOptions();
+    // The stored value is validated against the schema so that scalar columns
+    // (e.g. `loginTheme`) are narrowed to their expected literal union types.
+    // Note: unknown keys are stripped here, so a stale dev server running an
+    // older $BrandingConfig will silently drop newer branding fields on read.
+    const branding = $BrandingConfig.nullable().safeParse(savedOptions?.branding ?? null);
     return {
+      branding: branding.success ? branding.data : null,
       isDemo: Boolean(savedOptions?.isDemo),
       isExperimentalFeaturesEnabled: Boolean(savedOptions?.isExperimentalFeaturesEnabled),
       isGatewayEnabled: this.configService.get('GATEWAY_ENABLED'),
@@ -67,17 +74,22 @@ export class SetupService {
     return { success: true };
   }
 
-  async updateState(data: UpdateSetupStateData): Promise<Partial<SetupState>> {
+  async updateState({ branding, ...rest }: UpdateSetupStateData): Promise<Partial<SetupState>> {
     const setupState = await this.getSavedOptions();
     if (!setupState?.isSetup) {
       throw new ServiceUnavailableException('Cannot update state before setup');
     }
-    return this.setupStateModel.update({
-      data,
+    const normalizedBranding = branding ? { resourceLinks: [], sectionsOrder: [], ...branding } : branding;
+    await this.setupStateModel.update({
+      data: {
+        ...rest,
+        ...(branding !== undefined ? { branding: { set: normalizedBranding ?? null } } : {})
+      },
       where: {
         id: setupState.id
       }
     });
+    return this.getState();
   }
 
   private async dropDatabase(): Promise<void> {

apps/web/src/components/LoginBranding/LoginBrandingPanel.stories.tsx

@@ -0,0 +1,59 @@
+import type { BrandingConfig } from '@opendatacapture/schemas/setup';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { LoginBrandingPanel } from './LoginBrandingPanel';
+
+type Story = StoryObj<typeof LoginBrandingPanel>;
+
+const baseBranding: BrandingConfig = {
+  instanceName: { en: 'Open Data Capture', fr: 'Open Data Capture' },
+  instanceTagline: {
+    en: 'A platform for clinical and research data collection.',
+    fr: 'Une plateforme pour la collecte de données cliniques et de recherche.'
+  },
+  loginTheme: 'ocean'
+};
+
+export const Default: Story = {
+  args: {
+    branding: baseBranding,
+    className: 'h-screen w-screen'
+  }
+};
+
+export const Preview: Story = {
+  args: {
+    branding: baseBranding,
+    className: 'h-96 w-[36rem]',
+    preview: true
+  }
+};
+
+export const WithResources: Story = {
+  args: {
+    branding: {
+      ...baseBranding,
+      loginTheme: 'midnight',
+      resourceLinks: [
+        { href: 'https://example.org/handbook', label: { en: 'Handbook', fr: 'Manuel' } },
+        { href: 'https://example.org/contact', label: { en: 'Contact', fr: 'Contact' } }
+      ],
+      showResourceLinks: true
+    },
+    className: 'h-screen w-screen'
+  }
+};
+
+export const CustomGradient: Story = {
+  args: {
+    branding: {
+      ...baseBranding,
+      customPrimaryColor: '#0ea5e9',
+      customSecondaryColor: '#7c3aed',
+      loginTheme: 'custom'
+    },
+    className: 'h-screen w-screen'
+  }
+};
+
+export default { component: LoginBrandingPanel } as Meta<typeof LoginBrandingPanel>;