feat: Implement organization-based SSO login with an AsyncCombobox and add logo variant branding options.
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
-- Add logo_variant to organizations
|
||||
ALTER TABLE organizations ADD COLUMN IF NOT EXISTS logo_variant VARCHAR(20) DEFAULT 'standard';
|
||||
COMMENT ON COLUMN organizations.logo_variant IS 'Header logo display style (standard or wide)';
|
||||
@@ -2700,6 +2700,42 @@ pub async fn get_organizations(
|
||||
Ok(Json(orgs))
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
pub struct OrgSearchQuery {
|
||||
pub q: String,
|
||||
}
|
||||
|
||||
#[derive(Serialize, sqlx::FromRow)]
|
||||
pub struct OrgSearchResult {
|
||||
pub id: Uuid,
|
||||
pub name: String,
|
||||
pub domain: Option<String>,
|
||||
}
|
||||
|
||||
pub async fn search_organizations(
|
||||
State(pool): State<PgPool>,
|
||||
Query(query): Query<OrgSearchQuery>,
|
||||
) -> Result<Json<Vec<OrgSearchResult>>, StatusCode> {
|
||||
if query.q.trim().is_empty() {
|
||||
return Ok(Json(vec![]));
|
||||
}
|
||||
|
||||
let search_term = format!("%{}%", query.q.trim());
|
||||
|
||||
let orgs = sqlx::query_as::<_, OrgSearchResult>(
|
||||
"SELECT id, name, domain FROM organizations WHERE name ILIKE $1 OR domain ILIKE $1 ORDER BY name ASC LIMIT 10"
|
||||
)
|
||||
.bind(search_term)
|
||||
.fetch_all(&pool)
|
||||
.await
|
||||
.map_err(|e| {
|
||||
tracing::error!("Failed to search organizations: {}", e);
|
||||
StatusCode::INTERNAL_SERVER_ERROR
|
||||
})?;
|
||||
|
||||
Ok(Json(orgs))
|
||||
}
|
||||
|
||||
pub async fn create_organization(
|
||||
claims: common::auth::Claims,
|
||||
State(pool): State<PgPool>,
|
||||
|
||||
@@ -15,9 +15,11 @@ use super::handlers::log_action;
|
||||
|
||||
#[derive(Deserialize, Serialize)]
|
||||
pub struct BrandingPayload {
|
||||
pub name: Option<String>,
|
||||
pub primary_color: Option<String>,
|
||||
pub secondary_color: Option<String>,
|
||||
pub platform_name: Option<String>,
|
||||
pub logo_variant: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Serialize)]
|
||||
@@ -25,6 +27,7 @@ pub struct BrandingResponse {
|
||||
pub logo_url: Option<String>,
|
||||
pub favicon_url: Option<String>,
|
||||
pub platform_name: Option<String>,
|
||||
pub logo_variant: Option<String>,
|
||||
pub primary_color: String,
|
||||
pub secondary_color: String,
|
||||
}
|
||||
@@ -293,16 +296,20 @@ pub async fn update_organization_branding(
|
||||
// Update organization
|
||||
let org = sqlx::query_as::<_, Organization>(
|
||||
"UPDATE organizations
|
||||
SET primary_color = COALESCE($1, primary_color),
|
||||
secondary_color = COALESCE($2, secondary_color),
|
||||
platform_name = COALESCE($3, platform_name),
|
||||
SET name = COALESCE($1, name),
|
||||
primary_color = COALESCE($2, primary_color),
|
||||
secondary_color = COALESCE($3, secondary_color),
|
||||
platform_name = COALESCE($4, platform_name),
|
||||
logo_variant = COALESCE($5, logo_variant),
|
||||
updated_at = NOW()
|
||||
WHERE id = $4
|
||||
WHERE id = $6
|
||||
RETURNING *",
|
||||
)
|
||||
.bind(&payload.name)
|
||||
.bind(&payload.primary_color)
|
||||
.bind(&payload.secondary_color)
|
||||
.bind(&payload.platform_name)
|
||||
.bind(&payload.logo_variant)
|
||||
.bind(org_id)
|
||||
.fetch_one(&pool)
|
||||
.await
|
||||
@@ -342,6 +349,7 @@ pub async fn get_organization_branding(
|
||||
logo_url: org.logo_url,
|
||||
favicon_url: org.favicon_url,
|
||||
platform_name: org.platform_name,
|
||||
logo_variant: org.logo_variant,
|
||||
primary_color: org.primary_color.unwrap_or_else(|| "#3B82F6".to_string()),
|
||||
secondary_color: org.secondary_color.unwrap_or_else(|| "#8B5CF6".to_string()),
|
||||
}))
|
||||
|
||||
@@ -282,6 +282,10 @@ async fn main() {
|
||||
.route("/auth/login", post(handlers::login))
|
||||
.route("/auth/sso/login/{org_id}", get(handlers::sso_login_init))
|
||||
.route("/auth/sso/callback", get(handlers::sso_callback))
|
||||
.route(
|
||||
"/organizations/search",
|
||||
get(handlers::search_organizations),
|
||||
)
|
||||
.route(
|
||||
"/organizations/{id}/branding",
|
||||
get(handlers_branding::get_organization_branding),
|
||||
|
||||
@@ -345,6 +345,7 @@ pub struct Organization {
|
||||
pub certificate_template: Option<String>,
|
||||
pub platform_name: Option<String>,
|
||||
pub favicon_url: Option<String>,
|
||||
pub logo_variant: Option<String>,
|
||||
pub created_at: DateTime<Utc>,
|
||||
pub updated_at: DateTime<Utc>,
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ const nextConfig = {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'http',
|
||||
|
||||
@@ -4,6 +4,7 @@ import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { lmsApi } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import AsyncCombobox from "@/components/AsyncCombobox";
|
||||
import { GraduationCap, Lock, Mail, User, Building2, ChevronLeft, ArrowRight } from "lucide-react";
|
||||
|
||||
type ViewMode = 'selection' | 'personal' | 'enterprise';
|
||||
@@ -194,34 +195,25 @@ export default function ExperienceLoginPage() {
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider">Dominio de la Empresa</label>
|
||||
<div className="relative">
|
||||
<Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input required type="text" value={organizationName} onChange={e => setOrganizationName(e.target.value)} className="w-full bg-slate-900/50 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:border-emerald-500 focus:outline-none transition-colors font-mono" placeholder="acme-corp" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider">Usuario / Correo</label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input required type="email" value={email} onChange={e => setEmail(e.target.value)} className="w-full bg-slate-900/50 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:border-emerald-500 focus:outline-none transition-colors" placeholder="usuario@empresa.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider">Contraseña</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
||||
<input required type="password" value={password} onChange={e => setPassword(e.target.value)} className="w-full bg-slate-900/50 border border-white/10 rounded-xl py-3 pl-10 pr-4 text-white text-sm focus:border-emerald-500 focus:outline-none transition-colors" placeholder="••••••••" />
|
||||
</div>
|
||||
<div className="space-y-1 z-50 relative">
|
||||
<label className="text-xs font-bold text-gray-400 uppercase tracking-wider">Nombre de la Empresa</label>
|
||||
<AsyncCombobox
|
||||
id="orgIdForSSO"
|
||||
value={orgIdForSSO}
|
||||
onChange={setOrgIdForSSO}
|
||||
onSearch={async (q) => {
|
||||
const res = await lmsApi.searchOrganizations(q);
|
||||
return res.map(o => ({ id: o.id, name: o.name }));
|
||||
}}
|
||||
placeholder="Busca tu empresa..."
|
||||
leftIcon={<Building2 size={18} />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <div className="bg-red-500/10 border border-red-500/20 text-red-300 text-xs p-3 rounded-lg font-medium">{error}</div>}
|
||||
|
||||
<button disabled={loading} type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-600/20 disabled:opacity-50 mt-2">
|
||||
{loading ? "Validando..." : "Iniciar Sesión"}
|
||||
<button disabled={loading || !orgIdForSSO} type="submit" className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-emerald-600/20 disabled:opacity-50 mt-2">
|
||||
{loading ? "Redirigiendo..." : "Continuar con SSO"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ import { AuthProvider } from "@/context/AuthContext";
|
||||
import { I18nProvider } from "@/context/I18nContext";
|
||||
import { BrandingProvider } from "@/context/BrandingContext";
|
||||
import AuthGuard from "@/components/AuthGuard";
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
@@ -22,25 +23,27 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<body className={`${inter.className} bg-[#050505] text-[#e5e5e5] min-h-screen flex flex-col`}>
|
||||
<BrandingProvider>
|
||||
<AuthProvider>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<AppHeader />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="py-12 px-6 border-t border-white/5 text-center bg-black/20">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-600">
|
||||
Desarrollado Por el Departamento de Informática © 2026. OpenCCB.
|
||||
</p>
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</BrandingProvider>
|
||||
<html lang="en">
|
||||
<body className={`${inter.className} bg-white dark:bg-[#050505] text-gray-900 dark:text-[#e5e5e5] min-h-screen flex flex-col transition-colors duration-300`}>
|
||||
<ThemeProvider>
|
||||
<BrandingProvider>
|
||||
<AuthProvider>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<AppHeader />
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="py-12 px-6 border-t border-black/5 dark:border-white/5 text-center bg-gray-50 dark:bg-black/20">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 dark:text-gray-600">
|
||||
Desarrollado Por el Departamento de Informática © 2026. OpenCCB.
|
||||
</p>
|
||||
</footer>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</BrandingProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -5,9 +5,10 @@ import Image from "next/image";
|
||||
import { useBranding } from "@/context/BrandingContext";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useTranslation } from "@/context/I18nContext";
|
||||
import { LogOut, Globe, Menu, X } from "lucide-react";
|
||||
import { LogOut, Globe, Menu, X, Sun, Moon } from "lucide-react";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
import { useState } from "react";
|
||||
import { useTheme } from "@/context/ThemeContext";
|
||||
|
||||
import { lmsApi, getImageUrl } from "@/lib/api";
|
||||
|
||||
@@ -15,6 +16,7 @@ export default function AppHeader() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { branding } = useBranding();
|
||||
const { user, logout } = useAuth();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
// Use platform_name if available, otherwise name, otherwise default
|
||||
@@ -22,22 +24,24 @@ export default function AppHeader() {
|
||||
|
||||
return (
|
||||
<header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-black/40 border-b border-white/5">
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-3 group" aria-label={`${platformName} - Dashboard`}>
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative">
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
|
||||
<div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
|
||||
{branding?.logo_url ? (
|
||||
<Image src={getImageUrl(branding.logo_url)} alt="" fill className="object-contain" sizes="40px" />
|
||||
<Image src={getImageUrl(branding.logo_url)} alt="" fill className={`object-contain ${branding?.logo_variant === 'wide' ? 'p-1' : 'p-0.5'}`} sizes={branding?.logo_variant === 'wide' ? '240px' : '48px'} />
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700" aria-hidden="true">
|
||||
{platformName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col -gap-1" aria-hidden="true">
|
||||
<span className="font-black text-sm md:text-lg tracking-tighter text-white leading-none">
|
||||
{platformName.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>
|
||||
</div>
|
||||
{branding?.logo_variant !== 'wide' && (
|
||||
<div className="flex flex-col -gap-1" aria-hidden="true">
|
||||
<span className="font-black text-base md:text-xl tracking-tighter text-white leading-none">
|
||||
{platformName.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">EXPERIENCIA</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -76,6 +80,14 @@ export default function AppHeader() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-all border-l border-white/10 pl-4"
|
||||
title={theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
|
||||
<div className="hidden md:flex items-center gap-4 pl-4 border-l border-white/10">
|
||||
<Link href="/profile" className="flex items-center gap-2 group/profile">
|
||||
<div className="w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center font-bold text-xs text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
|
||||
@@ -161,19 +173,27 @@ export default function AppHeader() {
|
||||
)}
|
||||
|
||||
<div className="pt-6 mt-6 border-t border-white/5 space-y-4">
|
||||
<div className="flex items-center gap-3 px-4 py-2 rounded-xl bg-white/5">
|
||||
<Globe size={16} className="text-gray-500" aria-hidden="true" />
|
||||
<select
|
||||
id="mobile-language-selector"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label={t('nav.selectLanguage') || 'Select Language'}
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none flex-1"
|
||||
<div className="flex items-center justify-between px-4 py-2 rounded-xl bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<Globe size={16} className="text-gray-500" aria-hidden="true" />
|
||||
<select
|
||||
id="mobile-language-selector"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label={t('nav.selectLanguage') || 'Select Language'}
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none"
|
||||
>
|
||||
<option value="en" className="bg-[#0f1115]">English</option>
|
||||
<option value="es" className="bg-[#0f1115]">Español</option>
|
||||
<option value="pt" className="bg-[#0f1115]">Português</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/10 rounded-lg text-gray-400 transition-colors"
|
||||
>
|
||||
<option value="en" className="bg-[#0f1115]">English</option>
|
||||
<option value="es" className="bg-[#0f1115]">Español</option>
|
||||
<option value="pt" className="bg-[#0f1115]">Português</option>
|
||||
</select>
|
||||
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { Search, ChevronDown, Check, Loader2 } from "lucide-react";
|
||||
|
||||
interface Option {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface AsyncComboboxProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onSearch: (query: string) => Promise<Option[]>;
|
||||
placeholder?: string;
|
||||
id?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
defaultOptions?: Option[];
|
||||
}
|
||||
|
||||
export default function AsyncCombobox({ value, onChange, onSearch, placeholder = "Search...", id, leftIcon, defaultOptions = [] }: AsyncComboboxProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [options, setOptions] = useState<Option[]>(defaultOptions);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const selectedOption = options.find(o => o.id === value) || defaultOptions.find(o => o.id === value);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const delayDebounceFn = setTimeout(async () => {
|
||||
if (!search) {
|
||||
setOptions(defaultOptions);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const results = await onSearch(search);
|
||||
setOptions(results);
|
||||
} catch (error) {
|
||||
console.error("Search failed", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [search, onSearch, isOpen, defaultOptions]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={containerRef}>
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
if (!isOpen && !options.length && defaultOptions.length) {
|
||||
setOptions(defaultOptions);
|
||||
}
|
||||
}}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
className="flex items-center justify-between w-full bg-slate-900/50 border border-white/10 rounded-xl px-4 py-3 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/50 text-left"
|
||||
>
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
{leftIcon && <div className="text-gray-400 shrink-0">{leftIcon}</div>}
|
||||
<span className={`truncate ${selectedOption ? "text-white text-sm" : "text-gray-500 text-sm"}`}>
|
||||
{selectedOption ? selectedOption.name : placeholder}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronDown size={18} className={`text-gray-500 shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-slate-800 border border-white/10 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="p-2 border-b border-white/5 bg-white/5">
|
||||
<div className="relative">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="true"
|
||||
aria-controls="combobox-options"
|
||||
className="w-full bg-slate-900/50 border-none rounded-lg pl-9 pr-8 py-2 text-sm text-white focus:outline-none focus:ring-0 placeholder:text-gray-500"
|
||||
placeholder="Buscar empresa..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
{loading && (
|
||||
<Loader2 size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-indigo-400 animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="combobox-options"
|
||||
role="listbox"
|
||||
className="max-h-60 overflow-y-auto p-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent"
|
||||
>
|
||||
{!loading && options.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No se encontraron resultados</div>
|
||||
) : (
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option.id}
|
||||
role="option"
|
||||
aria-selected={value === option.id}
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
onChange(option.id);
|
||||
setIsOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onChange(option.id);
|
||||
setIsOpen(false);
|
||||
setSearch("");
|
||||
}
|
||||
}}
|
||||
className={`flex items-center justify-between px-3 py-2.5 rounded-lg cursor-pointer transition-colors outline-none focus:bg-indigo-600 focus:text-white ${value === option.id ? "bg-indigo-600 text-white" : "hover:bg-white/5 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium">{option.name}</span>
|
||||
{value === option.id && <Check size={14} aria-hidden="true" />}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'dark' | 'light';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType>({
|
||||
theme: 'dark',
|
||||
toggleTheme: () => { },
|
||||
setTheme: () => { },
|
||||
});
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
|
||||
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [theme, setThemeState] = useState<Theme>('dark');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('theme') as Theme | null;
|
||||
if (savedTheme) {
|
||||
setThemeState(savedTheme);
|
||||
}
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme, mounted]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setThemeState(prev => (prev === 'dark' ? 'light' : 'dark'));
|
||||
};
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -26,6 +26,7 @@ export interface Organization {
|
||||
platform_name?: string;
|
||||
primary_color?: string;
|
||||
secondary_color?: string;
|
||||
logo_variant?: string;
|
||||
}
|
||||
export interface Recommendation {
|
||||
title: string;
|
||||
@@ -446,6 +447,10 @@ const apiFetch = async (url: string, options: RequestInit = {}, isCMS: boolean =
|
||||
};
|
||||
|
||||
export const lmsApi = {
|
||||
async searchOrganizations(query: string): Promise<{ id: string, name: string, domain?: string }[]> {
|
||||
return apiFetch(`/organizations/search?q=${encodeURIComponent(query)}`, {}, true);
|
||||
},
|
||||
|
||||
async getCatalog(orgId?: string, userId?: string): Promise<Course[]> {
|
||||
const params = new URLSearchParams();
|
||||
if (orgId) params.append('organization_id', orgId);
|
||||
|
||||
@@ -14,6 +14,7 @@ const config: Config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
darkMode: 'class',
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
|
||||
@@ -9,20 +9,21 @@ const nextConfig = {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'http',
|
||||
hostname: 'localhost',
|
||||
port: '3001',
|
||||
pathname: '/uploads/**',
|
||||
pathname: '/assets/**',
|
||||
},
|
||||
],
|
||||
},
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: '/uploads/:path*',
|
||||
destination: 'http://localhost:3001/uploads/:path*',
|
||||
source: '/assets/:path*',
|
||||
destination: 'http://localhost:3001/assets/:path*',
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
@@ -4,6 +4,7 @@ import React, { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { cmsApi } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import AsyncCombobox from "@/components/AsyncCombobox";
|
||||
import { BookOpen, Lock, Mail, User, Building2 } from "lucide-react";
|
||||
|
||||
export default function StudioLoginPage() {
|
||||
@@ -168,23 +169,23 @@ export default function StudioLoginPage() {
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>
|
||||
<div className="z-50 relative">
|
||||
<label className="block text-sm font-bold text-gray-300 mb-2">
|
||||
Organization ID
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Building2 className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={orgIdForSSO}
|
||||
onChange={(e) => setOrgIdForSSO(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-3 pl-11 pr-4 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="00000000-0000-0000-0000-000000000000"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<AsyncCombobox
|
||||
id="orgIdForSSO"
|
||||
value={orgIdForSSO}
|
||||
onChange={setOrgIdForSSO}
|
||||
onSearch={async (q) => {
|
||||
const res = await cmsApi.searchOrganizations(q);
|
||||
return res.map(o => ({ id: o.id, name: o.name }));
|
||||
}}
|
||||
placeholder="Search for your organization..."
|
||||
leftIcon={<Building2 size={20} />}
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-2 pl-1">
|
||||
Contact your administrator if you don't know your Organization ID.
|
||||
Please search and select your organization to continue.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -6,6 +6,8 @@ import { AuthProvider } from "@/context/AuthContext";
|
||||
import { I18nProvider } from "@/context/I18nContext";
|
||||
import { BookOpen } from "lucide-react";
|
||||
import AuthGuard from "@/components/AuthGuard";
|
||||
import { BrandingProvider } from "@/context/BrandingContext";
|
||||
import { ThemeProvider } from "@/context/ThemeContext";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
@@ -14,7 +16,7 @@ export const metadata: Metadata = {
|
||||
description: "Create and manage high-fidelity educational content.",
|
||||
};
|
||||
|
||||
import AuthHeader from "@/components/AuthHeader";
|
||||
import { Navbar } from "@/components/Navbar";
|
||||
import BrandingManager from "@/components/BrandingManager";
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -23,25 +25,21 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<body className={`${inter.className} bg-gray-950 text-gray-200 min-h-screen flex flex-col`}>
|
||||
<AuthProvider>
|
||||
<I18nProvider>
|
||||
<AuthGuard>
|
||||
<BrandingManager />
|
||||
<header className="h-16 md:h-20 glass sticky top-0 z-50 px-4 md:px-8 flex items-center justify-between border-b border-white/5 backdrop-blur-xl bg-black/40">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-transform">
|
||||
<BookOpen size={20} />
|
||||
</div>
|
||||
<span className="font-black text-2xl tracking-tighter text-white">STUDIO</span>
|
||||
</Link>
|
||||
<AuthHeader />
|
||||
</header>
|
||||
<main className="flex-1">{children}</main>
|
||||
</AuthGuard>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
<html lang="en">
|
||||
<body className={`${inter.className} bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-200 min-h-screen flex flex-col transition-colors duration-300`}>
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<I18nProvider>
|
||||
<BrandingProvider>
|
||||
<AuthGuard>
|
||||
<BrandingManager />
|
||||
<Navbar />
|
||||
<main className="flex-1 mt-16 md:mt-20">{children}</main>
|
||||
</AuthGuard>
|
||||
</BrandingProvider>
|
||||
</I18nProvider>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import { Search, ChevronDown, Check, Loader2 } from "lucide-react";
|
||||
|
||||
interface Option {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface AsyncComboboxProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onSearch: (query: string) => Promise<Option[]>;
|
||||
placeholder?: string;
|
||||
id?: string;
|
||||
leftIcon?: React.ReactNode;
|
||||
defaultOptions?: Option[];
|
||||
}
|
||||
|
||||
export default function AsyncCombobox({ value, onChange, onSearch, placeholder = "Search...", id, leftIcon, defaultOptions = [] }: AsyncComboboxProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [options, setOptions] = useState<Option[]>(defaultOptions);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const selectedOption = options.find(o => o.id === value) || defaultOptions.find(o => o.id === value);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const delayDebounceFn = setTimeout(async () => {
|
||||
if (!search) {
|
||||
setOptions(defaultOptions);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
try {
|
||||
const results = await onSearch(search);
|
||||
setOptions(results);
|
||||
} catch (error) {
|
||||
console.error("Search failed", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
}, [search, onSearch, isOpen, defaultOptions]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={containerRef}>
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
if (!isOpen && !options.length && defaultOptions.length) {
|
||||
setOptions(defaultOptions);
|
||||
}
|
||||
}}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
>
|
||||
<div className="flex items-center gap-3 overflow-hidden">
|
||||
{leftIcon && <div className="text-gray-400 shrink-0">{leftIcon}</div>}
|
||||
<span className={`truncate ${selectedOption ? "text-white" : "text-gray-500"}`}>
|
||||
{selectedOption ? selectedOption.name : placeholder}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronDown size={18} className={`text-gray-500 shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="p-2 border-b border-white/5 bg-white/5">
|
||||
<div className="relative">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="true"
|
||||
aria-controls="combobox-options"
|
||||
className="w-full bg-black/20 border-none rounded-md pl-9 pr-8 py-2 text-sm text-white focus:ring-0 placeholder:text-gray-500"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
{loading && (
|
||||
<Loader2 size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="combobox-options"
|
||||
role="listbox"
|
||||
className="max-h-60 overflow-y-auto p-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent"
|
||||
>
|
||||
{!loading && options.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No results found</div>
|
||||
) : (
|
||||
options.map(option => (
|
||||
<div
|
||||
key={option.id}
|
||||
role="option"
|
||||
aria-selected={value === option.id}
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
onChange(option.id);
|
||||
setIsOpen(false);
|
||||
setSearch("");
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onChange(option.id);
|
||||
setIsOpen(false);
|
||||
setSearch("");
|
||||
}
|
||||
}}
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium">{option.name}</span>
|
||||
{value === option.id && <Check size={14} aria-hidden="true" />}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,9 +12,11 @@ export default function BrandingSettings() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [formData, setFormData] = useState<BrandingPayload>({
|
||||
name: "",
|
||||
primary_color: "#3B82F6",
|
||||
secondary_color: "#8B5CF6",
|
||||
platform_name: "",
|
||||
logo_variant: "standard",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -26,9 +28,11 @@ export default function BrandingSettings() {
|
||||
const data = await cmsApi.getOrganization();
|
||||
setOrg(data);
|
||||
setFormData({
|
||||
name: data.name || "",
|
||||
primary_color: data.primary_color || "#3B82F6",
|
||||
secondary_color: data.secondary_color || "#8B5CF6",
|
||||
platform_name: data.platform_name || "",
|
||||
logo_variant: data.logo_variant || "standard",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch organization:", error);
|
||||
@@ -64,6 +68,20 @@ export default function BrandingSettings() {
|
||||
</legend>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Organization Name */}
|
||||
<div className="col-span-full">
|
||||
<label htmlFor="org-name" className="block text-sm font-medium text-gray-400 mb-2">Organization Name</label>
|
||||
<input
|
||||
id="org-name"
|
||||
type="text"
|
||||
value={formData.name || ""}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-blue-500/50 transition-colors"
|
||||
placeholder="My Organization"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-2">The official name of your organization.</p>
|
||||
</div>
|
||||
{/* Platform Name */}
|
||||
<div className="col-span-full">
|
||||
<label htmlFor="platform-name" className="block text-sm font-medium text-gray-400 mb-2">Platform Name</label>
|
||||
@@ -143,6 +161,38 @@ export default function BrandingSettings() {
|
||||
/>
|
||||
<p className="text-xs text-gray-500">Recommended: ICO or PNG, 32x32px.</p>
|
||||
</div>
|
||||
|
||||
{/* Logo Variant Selection */}
|
||||
<div className="col-span-full border-t border-white/5 pt-6 mt-2">
|
||||
<label className="block text-sm font-medium text-gray-400 mb-4">Logo Display Style (Header)</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, logo_variant: "standard" })}
|
||||
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "standard" ? "bg-blue-600/10 border-blue-500/50" : "bg-black/20 border-white/10 hover:border-white/20"}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center font-bold text-xs">O</div>
|
||||
<span className="text-sm font-bold">Standard</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Small icon next to the organization name. Best for square logos.</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, logo_variant: "wide" })}
|
||||
className={`flex flex-col gap-3 p-4 rounded-xl border transition-all text-left ${formData.logo_variant === "wide" ? "bg-blue-600/10 border-blue-500/50" : "bg-black/20 border-white/10 hover:border-white/20"}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-20 h-6 bg-blue-600/20 rounded-md border border-blue-500/30 flex items-center justify-center">
|
||||
<div className="w-12 h-2 bg-blue-500 rounded-full" />
|
||||
</div>
|
||||
<span className="text-sm font-bold">Wide / Horizontal</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">Shows the full logo without text. Best for horizontal images like yours.</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
@@ -3,19 +3,41 @@
|
||||
import Link from 'next/link';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useTranslation } from '@/context/I18nContext';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Webhook, Settings, Globe, Library } from 'lucide-react';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Webhook, Settings, Globe, Library, BookOpen, Sun, Moon } from 'lucide-react';
|
||||
import { useBranding } from '@/context/BrandingContext';
|
||||
import { useTheme } from '@/context/ThemeContext';
|
||||
import { getImageUrl } from '@/lib/api';
|
||||
import Image from 'next/image';
|
||||
|
||||
export function Navbar() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
const { branding } = useBranding();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
|
||||
const platformName = branding?.platform_name || 'OpenCCB';
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/20">
|
||||
<nav className="fixed top-0 w-full z-50 glass border-b border-white/10 bg-black/40 backdrop-blur-xl">
|
||||
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<Link href="/" className="flex items-center gap-2" aria-label="OpenCCB Studio - Inicio">
|
||||
<h1 className="text-xl font-bold tracking-tight">
|
||||
Open<span className="gradient-text">CCB</span> Studio
|
||||
</h1>
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-4 group" aria-label={`${platformName} Studio - Dashboard`}>
|
||||
<div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-32 h-8 md:w-48 md:h-10 px-2 bg-white' : 'w-8 h-8 md:w-10 md:h-10'}`}>
|
||||
{branding?.logo_url ? (
|
||||
<Image src={getImageUrl(branding.logo_url)} alt="" fill className={`object-contain ${branding?.logo_variant === 'wide' ? 'p-1' : ''}`} sizes={branding?.logo_variant === 'wide' ? '200px' : '40px'} />
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500 to-blue-700" aria-hidden="true">
|
||||
<BookOpen size={branding?.logo_variant === 'wide' ? 16 : 20} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{branding?.logo_variant !== 'wide' && (
|
||||
<div className="flex flex-col -gap-1">
|
||||
<span className="font-black text-sm md:text-lg tracking-tighter text-white leading-none">
|
||||
{platformName.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-[8px] md:text-[10px] font-black tracking-widest text-blue-500 uppercase">STUDIO</span>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -75,7 +97,17 @@ export function Navbar() {
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
|
||||
{/* Language Switcher */}
|
||||
{/* Theme Toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-all"
|
||||
title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
||||
aria-label={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
</button>
|
||||
|
||||
<div className="h-6 w-px bg-white/10 mx-2" />
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-gray-500" aria-hidden="true" />
|
||||
<select
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { cmsApi, Organization, getImageUrl } from '@/lib/api';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
interface BrandingContextType {
|
||||
branding: Organization | null;
|
||||
loading: boolean;
|
||||
refreshBranding: () => Promise<void>;
|
||||
}
|
||||
|
||||
const BrandingContext = createContext<BrandingContextType>({
|
||||
branding: null,
|
||||
loading: true,
|
||||
refreshBranding: async () => { },
|
||||
});
|
||||
|
||||
export const useBranding = () => useContext(BrandingContext);
|
||||
|
||||
export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const { user } = useAuth();
|
||||
const [branding, setBranding] = useState<Organization | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const pathname = usePathname();
|
||||
|
||||
const loadBranding = async () => {
|
||||
if (!user?.organization_id) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const data = await cmsApi.getBranding(user.organization_id);
|
||||
// Translate BrandingResponse to Organization shape (partial)
|
||||
const orgData = {
|
||||
id: user.organization_id,
|
||||
name: data.platform_name || 'OpenCCB',
|
||||
logo_url: data.logo_url,
|
||||
favicon_url: data.favicon_url,
|
||||
platform_name: data.platform_name,
|
||||
logo_variant: data.logo_variant,
|
||||
primary_color: data.primary_color,
|
||||
secondary_color: data.secondary_color,
|
||||
} as any;
|
||||
|
||||
setBranding(orgData);
|
||||
console.log('Branding loaded in Studio:', orgData);
|
||||
} catch (error) {
|
||||
console.error('Failed to load branding', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadBranding();
|
||||
}, [user?.organization_id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!branding) return;
|
||||
console.log('Applying branding in Studio 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} | Studio`;
|
||||
}
|
||||
|
||||
// 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, refreshBranding: loadBranding }}>
|
||||
{children}
|
||||
</BrandingContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client';
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||
|
||||
type Theme = 'dark' | 'light';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType>({
|
||||
theme: 'dark',
|
||||
toggleTheme: () => { },
|
||||
setTheme: () => { },
|
||||
});
|
||||
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
|
||||
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
||||
const [theme, setThemeState] = useState<Theme>('dark');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem('theme') as Theme | null;
|
||||
if (savedTheme) {
|
||||
setThemeState(savedTheme);
|
||||
}
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const root = window.document.documentElement;
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme, mounted]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setThemeState(prev => (prev === 'dark' ? 'light' : 'dark'));
|
||||
};
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
@@ -126,14 +126,26 @@ export interface Organization {
|
||||
primary_color?: string;
|
||||
secondary_color?: string;
|
||||
certificate_template?: string;
|
||||
logo_variant?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface BrandingPayload {
|
||||
name?: string;
|
||||
primary_color?: string;
|
||||
secondary_color?: string;
|
||||
platform_name?: string;
|
||||
logo_variant?: string;
|
||||
}
|
||||
|
||||
export interface BrandingResponse {
|
||||
logo_url?: string;
|
||||
favicon_url?: string;
|
||||
platform_name?: string;
|
||||
logo_variant?: string;
|
||||
primary_color: string;
|
||||
secondary_color: string;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
@@ -591,6 +603,10 @@ export const cmsApi = {
|
||||
login: (payload: AuthPayload): Promise<AuthResponse> => apiFetch('/auth/login', { method: 'POST', body: JSON.stringify(payload) }),
|
||||
getMe: (): Promise<User> => apiFetch('/auth/me'),
|
||||
|
||||
// Organizations Search
|
||||
searchOrganizations: (query: string): Promise<{ id: string, name: string, domain?: string }[]> => apiFetch(`/organizations/search?q=${encodeURIComponent(query)}`),
|
||||
getBranding: (id: string): Promise<BrandingResponse> => apiFetch(`/organizations/${id}/branding`),
|
||||
|
||||
// Courses
|
||||
getCourses: (): Promise<Course[]> => apiFetch('/courses'),
|
||||
createCourse: (title: string, organizationId?: string): Promise<Course> => apiFetch('/courses', { method: 'POST', body: JSON.stringify({ title, organization_id: organizationId }) }),
|
||||
|
||||
@@ -14,6 +14,7 @@ const config: Config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
darkMode: 'class',
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
|
||||
Reference in New Issue
Block a user