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/studio/src/app/auth/login/page.tsx
+14 -13
View File
@@ -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&apos;t know your Organization ID.
Please search and select your organization to continue.
</p>
</div>
)}
web/studio/src/app/layout.tsx
+18 -20
View File
@@ -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>
);