Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement organization-based SSO login with an AsyncCombobox and add logo variant branding options.

Browse Source
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-02-26 11:50:34 -03:00
parent 824da230a4
commit 947abcb0bc
24 changed files with 823 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/experience/src/context/BrandingContext.tsx
+36 -31
View File
@@ -2,6 +2,7 @@
import React, { createContext, useContext, useEffect, useState } from 'react';
import { lmsApi, Organization, getImageUrl } from '@/lib/api';
import { usePathname } from 'next/navigation';
interface BrandingContextType {
branding: Organization | null;
@@ -21,42 +22,14 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
const orgId = process.env.NEXT_PUBLIC_ORG_ID || '00000000-0000-0000-0000-000000000001';
const pathname = usePathname();
useEffect(() => {
const loadBranding = async () => {
try {
const data = await lmsApi.getBranding(orgId);
setBranding(data);
// Apply CSS variables
if (data.primary_color) {
document.documentElement.style.setProperty('--primary-color', data.primary_color);
}
if (data.secondary_color) {
document.documentElement.style.setProperty('--secondary-color', data.secondary_color);
}
// Update Title
if (data.platform_name) {
document.title = `${data.platform_name} | Experiencia de Aprendizaje`;
}
// Update Favicon
if (data.favicon_url) {
// Import getImageUrl logic locally or assume it needs import
// Since I can't easily add import at top with replace_file, I will assume getImageUrl handles the path or do logic here.
// Actually I need to import getImageUrl at the top. Instead of complicating, I'll update imports too.
const faviconUrl = getImageUrl(data.favicon_url);
const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
if (link) {
link.href = faviconUrl;
} else {
const newLink = document.createElement("link");
newLink.rel = "shortcut icon";
newLink.href = faviconUrl;
document.head.appendChild(newLink);
}
}
console.log('Branding loaded in Experience:', data);
} catch (error) {
console.error('Failed to load branding', error);
} finally {
@@ -67,6 +40,38 @@ export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ chil
loadBranding();
}, [orgId]);
useEffect(() => {
if (!branding) return;
console.log('Applying branding in Experience for path:', pathname);
// Apply CSS variables
if (branding.primary_color) {
document.documentElement.style.setProperty('--primary-color', branding.primary_color);
}
if (branding.secondary_color) {
document.documentElement.style.setProperty('--secondary-color', branding.secondary_color);
}
// Update Title
if (branding.platform_name) {
document.title = `${branding.platform_name} | Experiencia de Aprendizaje`;
}
// Update Favicon
if (branding.favicon_url) {
const faviconUrl = getImageUrl(branding.favicon_url);
const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
if (link) {
link.href = faviconUrl;
} else {
const newLink = document.createElement("link");
newLink.rel = "shortcut icon";
newLink.href = faviconUrl;
document.head.appendChild(newLink);
}
}
}, [branding, pathname]);
return (
<BrandingContext.Provider value={{ branding, loading }}>
{children}