feat: Implement organization-based SSO login with an AsyncCombobox and add logo variant branding options.
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user