[dev] [tofikwest] tofik/customize-trust-center (#1906)

* feat(organization): add primary color field, update ui, set up trust portal settings

* fix(questionnaire): adjust minimum width for answered questions display

* fix(questionnaire): update minimum width class for questionnaire history

* feat(questionnaire): add animations to results cards, header, and table in security questionnaire

* chore(db): update version to 1.3.19 in package.json

---------

Co-authored-by: Tofik Hasanov <[email protected]>
Co-authored-by: Mariano Fuentes <[email protected]>

Author: 3 people

.npmrc

@@ -8,4 +8,5 @@ export interface UpdateOrganizationDto {
   hasAccess?: boolean;
   fleetDmLabelId?: number;
   isFleetSetupCompleted?: boolean;
+  primaryColor?: string;
 }

apps/api/src/organization/dto/update-organization.dto.ts

@@ -6,12 +6,14 @@ import {
   Get,
   Patch,
   Post,
+  Query,
   UseGuards,
 } from '@nestjs/common';
 import {
   ApiBody,
   ApiHeader,
   ApiOperation,
+  ApiQuery,
   ApiResponse,
   ApiSecurity,
   ApiTags,
@@ -30,6 +32,7 @@ import { GET_ORGANIZATION_RESPONSES } from './schemas/get-organization.responses
 import { UPDATE_ORGANIZATION_RESPONSES } from './schemas/update-organization.responses';
 import { DELETE_ORGANIZATION_RESPONSES } from './schemas/delete-organization.responses';
 import { TRANSFER_OWNERSHIP_RESPONSES } from './schemas/transfer-ownership.responses';
+import { GET_ORGANIZATION_PRIMARY_COLOR_RESPONSES } from './schemas/get-organization-primary-color';
 import {
   UPDATE_ORGANIZATION_BODY,
   TRANSFER_OWNERSHIP_BODY,
@@ -162,4 +165,47 @@ export class OrganizationController {
       }),
     };
   }
+
+  @Get('primary-color')
+  @ApiOperation(ORGANIZATION_OPERATIONS.getPrimaryColor)
+  @ApiQuery({
+    name: 'token',
+    required: false,
+    description:
+      'Access token for public access (alternative to authentication). When provided, authentication is not required.',
+    example: 'tok_abc123def456',
+  })
+  @ApiResponse(GET_ORGANIZATION_PRIMARY_COLOR_RESPONSES[200])
+  @ApiResponse(GET_ORGANIZATION_PRIMARY_COLOR_RESPONSES[401])
+  @ApiResponse(GET_ORGANIZATION_PRIMARY_COLOR_RESPONSES[404])
+  async getPrimaryColor(
+    @Query('token') token: string | undefined,
+    @OrganizationId() organizationId?: string,
+    @AuthContext() authContext?: AuthContextType,
+  ) {
+    // If token is provided, use it to resolve organization
+    // Otherwise, require organizationId from auth
+    if (!token && !organizationId) {
+      throw new BadRequestException(
+        'Either authentication or access token is required',
+      );
+    }
+
+    const primaryColor = await this.organizationService.getPrimaryColor(
+      organizationId || '',
+      token,
+    );
+
+    return {
+      ...primaryColor,
+      authType: token ? 'access-token' : authContext?.authType,
+      // Include user context for session auth (helpful for debugging)
+      ...(authContext?.userId && {
+        authenticatedUser: {
+          id: authContext.userId,
+          email: authContext.userEmail,
+        },
+      }),
+    };
+  }
 }

apps/api/src/organization/organization.controller.ts

@@ -28,6 +28,7 @@ export class OrganizationService {
           hasAccess: true,
           fleetDmLabelId: true,
           isFleetSetupCompleted: true,
+          primaryColor: true,
           createdAt: true,
         },
       });
@@ -63,6 +64,7 @@ export class OrganizationService {
           hasAccess: true,
           fleetDmLabelId: true,
           isFleetSetupCompleted: true,
+          primaryColor: true,
           createdAt: true,
         },
       });
@@ -86,6 +88,7 @@ export class OrganizationService {
           hasAccess: true,
           fleetDmLabelId: true,
           isFleetSetupCompleted: true,
+          primaryColor: true,
           createdAt: true,
         },
       });
@@ -273,4 +276,60 @@ export class OrganizationService {
       throw error;
     }
   }
+  async getPrimaryColor(organizationId: string, token?: string) {
+    try {
+      let targetOrgId = organizationId;
+
+      // If token is provided, resolve organization from the access grant
+      if (token) {
+        const grant = await db.trustAccessGrant.findUnique({
+          where: { accessToken: token },
+          select: {
+            expiresAt: true,
+            accessRequest: {
+              select: {
+                organizationId: true,
+              },
+            },
+          },
+        });
+
+        if (!grant) {
+          throw new NotFoundException('Invalid or expired access token');
+        }
+
+        if (grant.expiresAt && new Date() > grant.expiresAt) {
+          throw new NotFoundException('Access token has expired');
+        }
+
+        targetOrgId = grant.accessRequest.organizationId;
+      }
+
+      const primaryColor = await db.organization.findUnique({
+        where: { id: targetOrgId },
+        select: { primaryColor: true },
+      });
+
+      if (!primaryColor) {
+        throw new NotFoundException(`Organization with ID ${targetOrgId} not found`);
+      }
+
+      this.logger.log(
+        `Retrieved organization primary color for organization ${targetOrgId}: ${primaryColor.primaryColor}`,
+      );
+
+      return {
+        primaryColor: primaryColor.primaryColor,
+      };
+    } catch (error) {
+      if (error instanceof NotFoundException) {
+        throw error;
+      }
+      this.logger.error(
+        `Failed to retrieve organization primary color for organization ${organizationId}:`,
+        error,
+      );
+      throw error;
+    }
+  }
 }

apps/api/src/organization/organization.service.ts

@@ -0,0 +1,67 @@
+import { ApiResponseOptions } from '@nestjs/swagger';
+
+export const GET_ORGANIZATION_PRIMARY_COLOR_RESPONSES: Record<
+  string,
+  ApiResponseOptions
+> = {
+  200: {
+    status: 200,
+    description: 'Organization primary color retrieved successfully',
+    content: {
+      'application/json': {
+        schema: {
+          type: 'object',
+          properties: {
+            primaryColor: {
+              type: 'string',
+              nullable: true,
+              description: 'The primary color in hex format (e.g., #FF5733)',
+              example: '#3B82F6',
+            },
+            authType: {
+              type: 'string',
+              enum: ['api-key', 'session'],
+              description: 'How the request was authenticated',
+            },
+          },
+        },
+      },
+    },
+  },
+  401: {
+    status: 401,
+    description:
+      'Unauthorized - Invalid authentication or insufficient permissions',
+    content: {
+      'application/json': {
+        schema: {
+          type: 'object',
+          properties: {
+            message: {
+              type: 'string',
+              example: 'Invalid or expired API key',
+            },
+          },
+        },
+      },
+    },
+  },
+  404: {
+    status: 404,
+    description: 'Organization not found',
+    content: {
+      'application/json': {
+        schema: {
+          type: 'object',
+          properties: {
+            message: {
+              type: 'string',
+              example: 'Organization with ID org_abc123def456 not found',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+

apps/api/src/organization/schemas/get-organization-primary-color.ts

@@ -63,6 +63,12 @@ export const GET_ORGANIZATION_RESPONSES: Record<string, ApiResponseOptions> = {
               description: 'Whether FleetDM setup is completed',
               example: false,
             },
+            primaryColor: {
+              type: 'string',
+              nullable: true,
+              description: 'Organization primary color in hex format',
+              example: '#3B82F6',
+            },
             createdAt: {
               type: 'string',
               format: 'date-time',

apps/api/src/organization/schemas/get-organization.responses.ts

@@ -50,6 +50,11 @@ export const UPDATE_ORGANIZATION_BODY: ApiBodyOptions = {
         description: 'Whether FleetDM setup is completed',
         example: false,
       },
+      primaryColor: {
+        type: 'string',
+        description: 'Organization primary color in hex format',
+        example: '#3B82F6',
+      },
     },
     additionalProperties: false,
   },

apps/api/src/organization/schemas/organization-api-bodies.ts

@@ -21,4 +21,9 @@ export const ORGANIZATION_OPERATIONS: Record<string, ApiOperationOptions> = {
     description:
       'Transfers organization ownership to another member. The current owner will become an admin and keep all other roles. The new owner will receive the owner role while keeping their existing roles. Only the current organization owner can perform this action. Supports both API key authentication (X-API-Key header) and session authentication (cookies + X-Organization-Id header).',
   },
+  getPrimaryColor: {
+    summary: 'Get organization primary color',
+    description:
+      'Returns the primary color of the organization. Supports three access methods: 1) API key authentication (X-API-Key header), 2) Session authentication (cookies + X-Organization-Id header), or 3) Public access using an access token query parameter (?token=tok_xxx). When using an access token, no authentication is required.',
+  },
 };

apps/api/src/organization/schemas/organization-operations.ts

@@ -64,6 +64,12 @@ export const UPDATE_ORGANIZATION_RESPONSES: Record<string, ApiResponseOptions> =
                 description: 'Whether FleetDM setup is completed',
                 example: false,
               },
+              primaryColor: {
+                type: 'string',
+                nullable: true,
+                description: 'Organization primary color in hex format',
+                example: '#3B82F6',
+              },
               createdAt: {
                 type: 'string',
                 format: 'date-time',

apps/api/src/organization/schemas/update-organization.responses.ts

@@ -1,4 +1,4 @@
-import { IsIn, IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsIn, IsOptional, IsString } from 'class-validator';
 import { ParseQuestionnaireDto } from './parse-questionnaire.dto';
 
 export type QuestionnaireExportFormat = 'pdf' | 'csv' | 'xlsx';
@@ -13,4 +13,8 @@ export class ExportQuestionnaireDto extends ParseQuestionnaireDto {
   @IsOptional()
   @IsIn(['internal', 'external'])
   source?: 'internal' | 'external';
+
+  @IsOptional()
+  @IsBoolean()
+  exportInAllExtensions?: boolean;
 }