602 lines
35 KiB
TypeScript
602 lines
35 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { cmsApi, Organization, getImageUrl } from '@/lib/api';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import Image from 'next/image';
|
|
import { Plus, Building2, Globe, Calendar, ExternalLink, ShieldCheck, Palette, Upload, Save, X, Fingerprint, Key, Settings2 } from 'lucide-react';
|
|
|
|
export default function OrganizationsPage() {
|
|
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [newName, setNewName] = useState('');
|
|
const [newDomain, setNewDomain] = useState('');
|
|
|
|
// Admin User States
|
|
const [adminFullName, setAdminFullName] = useState('');
|
|
const [adminEmail, setAdminEmail] = useState('');
|
|
const [adminPassword, setAdminPassword] = useState('');
|
|
|
|
// Branding States
|
|
const [isBrandingModalOpen, setIsBrandingModalOpen] = useState(false);
|
|
const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null);
|
|
const [primaryColor, setPrimaryColor] = useState('#3B82F6');
|
|
const [secondaryColor, setSecondaryColor] = useState('#8B5CF6');
|
|
const [isSavingBranding, setIsSavingBranding] = useState(false);
|
|
const [uploadingLogo, setUploadingLogo] = useState(false);
|
|
|
|
// SSO States
|
|
const [isSSOModalOpen, setIsSSOModalOpen] = useState(false);
|
|
const [issuerUrl, setIssuerUrl] = useState('');
|
|
const [clientId, setClientId] = useState('');
|
|
const [clientSecret, setClientSecret] = useState('');
|
|
const [ssoEnabled, setSsoEnabled] = useState(false);
|
|
const [isSavingSSO, setIsSavingSSO] = useState(false);
|
|
|
|
const { user } = useAuth();
|
|
|
|
useEffect(() => {
|
|
loadOrganizations();
|
|
}, []);
|
|
|
|
const loadOrganizations = async () => {
|
|
try {
|
|
const data = await cmsApi.getOrganizations();
|
|
setOrganizations(data);
|
|
} catch (error) {
|
|
console.error('Failed to load organizations', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCreate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
try {
|
|
await cmsApi.provisionOrganization({
|
|
org_name: newName,
|
|
org_domain: newDomain || undefined,
|
|
admin_full_name: adminFullName,
|
|
admin_email: adminEmail,
|
|
admin_password: adminPassword
|
|
});
|
|
setNewName('');
|
|
setNewDomain('');
|
|
setAdminFullName('');
|
|
setAdminEmail('');
|
|
setAdminPassword('');
|
|
setIsModalOpen(false);
|
|
loadOrganizations();
|
|
} catch (error) {
|
|
console.error('Failed to create organization', error);
|
|
alert('Failed to provision organization. Please ensure the email is unique.');
|
|
}
|
|
};
|
|
|
|
const openBranding = (org: Organization) => {
|
|
setSelectedOrg(org);
|
|
setPrimaryColor(org.primary_color || '#3B82F6');
|
|
setSecondaryColor(org.secondary_color || '#8B5CF6');
|
|
setIsBrandingModalOpen(true);
|
|
};
|
|
|
|
const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file || !selectedOrg) return;
|
|
|
|
setUploadingLogo(true);
|
|
try {
|
|
const resp = await cmsApi.uploadOrganizationLogo(selectedOrg.id, file);
|
|
setSelectedOrg({ ...selectedOrg, logo_url: resp.url });
|
|
// Update in list
|
|
setOrganizations(orgs => orgs.map(o => o.id === selectedOrg.id ? { ...o, logo_url: resp.url } : o));
|
|
} catch (error) {
|
|
console.error('Failed to upload logo', error);
|
|
alert('Failed to upload logo. Please try again.');
|
|
} finally {
|
|
setUploadingLogo(false);
|
|
}
|
|
};
|
|
|
|
const handleBrandingSave = async () => {
|
|
if (!selectedOrg) return;
|
|
|
|
setIsSavingBranding(true);
|
|
try {
|
|
await cmsApi.updateOrganizationBranding(selectedOrg.id, {
|
|
primary_color: primaryColor,
|
|
secondary_color: secondaryColor
|
|
});
|
|
// Update in list
|
|
setOrganizations(orgs => orgs.map(o => o.id === selectedOrg.id ? { ...o, primary_color: primaryColor, secondary_color: secondaryColor } : o));
|
|
setIsBrandingModalOpen(false);
|
|
} catch (error) {
|
|
console.error('Failed to update branding', error);
|
|
alert('Failed to update branding. Please try again.');
|
|
} finally {
|
|
setIsSavingBranding(false);
|
|
}
|
|
};
|
|
|
|
const openSSOConfig = async (org: Organization) => {
|
|
setSelectedOrg(org);
|
|
setIsSSOModalOpen(true);
|
|
// Temporarily set org in localStorage for API calls
|
|
localStorage.setItem('studio_selected_org_id', org.id);
|
|
try {
|
|
const config = await cmsApi.getSSOConfig();
|
|
if (config) {
|
|
setIssuerUrl(config.issuer_url);
|
|
setClientId(config.client_id);
|
|
setClientSecret(config.client_secret);
|
|
setSsoEnabled(config.enabled);
|
|
} else {
|
|
setIssuerUrl('');
|
|
setClientId('');
|
|
setClientSecret('');
|
|
setSsoEnabled(false);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load SSO config', error);
|
|
}
|
|
};
|
|
|
|
const handleSSOSave = async () => {
|
|
if (!selectedOrg) return;
|
|
|
|
setIsSavingSSO(true);
|
|
try {
|
|
await cmsApi.updateSSOConfig({
|
|
issuer_url: issuerUrl,
|
|
client_id: clientId,
|
|
client_secret: clientSecret,
|
|
enabled: ssoEnabled
|
|
});
|
|
setIsSSOModalOpen(false);
|
|
alert('SSO configuration saved successfully!');
|
|
} catch (error) {
|
|
console.error('Failed to save SSO config', error);
|
|
alert('Failed to save SSO config. Please ensure all fields are correct.');
|
|
} finally {
|
|
setIsSavingSSO(false);
|
|
}
|
|
};
|
|
|
|
if (user?.role !== 'admin') {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
|
|
<div className="p-4 rounded-full bg-red-500/10 mb-4">
|
|
<ShieldCheck className="w-12 h-12 text-red-500" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
|
<p className="text-gray-400">Only system administrators can access this page.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in duration-500">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Organizations</h1>
|
|
<p className="text-gray-400 mt-1">Manage tenants and isolated environments.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20 shadow-glow"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
New Organization
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{[1, 2, 3].map(i => (
|
|
<div key={i} className="h-48 rounded-xl glass animate-pulse" />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{organizations.map((org) => (
|
|
<div
|
|
key={org.id}
|
|
className="group relative p-6 rounded-xl glass border border-white/10 hover:border-blue-500/50 transition-all hover:translate-y-[-2px] overflow-hidden"
|
|
>
|
|
<div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<Building2 className="w-16 h-16" />
|
|
</div>
|
|
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="p-3 rounded-lg bg-blue-500/10 text-blue-400 overflow-hidden w-12 h-12 flex items-center justify-center relative">
|
|
{org.logo_url ? (
|
|
<Image src={getImageUrl(org.logo_url)} alt={org.name} fill className="object-contain" unoptimized />
|
|
) : (
|
|
<Building2 className="w-6 h-6" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">{org.name}</h3>
|
|
<div className="flex items-center gap-1.5 text-sm text-gray-400">
|
|
<Globe className="w-3 h-3" />
|
|
{org.domain || 'No custom domain'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mt-4 mb-2">
|
|
<div className="flex-1 h-1 rounded-full" style={{ backgroundColor: org.primary_color || '#3B82F6' }} title="Primary Color" />
|
|
<div className="flex-1 h-1 rounded-full" style={{ backgroundColor: org.secondary_color || '#8B5CF6' }} title="Secondary Color" />
|
|
</div>
|
|
|
|
<div className="space-y-3 mt-4">
|
|
<div className="flex items-center justify-between text-xs text-gray-500 bg-black/20 p-2 rounded-lg">
|
|
<div className="flex items-center gap-1">
|
|
<Calendar className="w-3 h-3" />
|
|
Created: {new Date(org.created_at).toLocaleDateString()}
|
|
</div>
|
|
<div className="text-blue-500 font-mono">
|
|
{org.id.split('-')[0]}...
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<button
|
|
onClick={() => openBranding(org)}
|
|
className="py-2 px-2 text-[10px] font-medium border border-blue-500/20 bg-blue-500/5 hover:bg-blue-500/10 text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
|
>
|
|
<Palette className="w-3 h-3" /> Brand
|
|
</button>
|
|
<button
|
|
onClick={() => openSSOConfig(org)}
|
|
className="py-2 px-2 text-[10px] font-medium border border-blue-500/20 bg-blue-500/5 hover:bg-blue-500/10 text-blue-400 rounded-lg transition-colors flex items-center justify-center gap-1"
|
|
>
|
|
<Fingerprint className="w-3 h-3" /> SSO
|
|
</button>
|
|
<button className="py-2 px-2 text-[10px] font-medium border border-white/5 bg-white/5 hover:bg-white/10 rounded-lg transition-colors flex items-center justify-center gap-1 text-gray-400">
|
|
Docs <ExternalLink className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Create Organization Modal */}
|
|
{isModalOpen && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="w-full max-w-md glass border border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
<h2 className="text-xl font-bold mb-6">Create New Organization</h2>
|
|
<form onSubmit={handleCreate} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Organization Name</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
|
placeholder="e.g. Acme Corp"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Domain (Optional)</label>
|
|
<input
|
|
type="text"
|
|
value={newDomain}
|
|
onChange={(e) => setNewDomain(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
|
placeholder="e.g. acme.com"
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4 border-t border-white/5">
|
|
<h3 className="text-xs font-black uppercase tracking-widest text-blue-500 mb-4">Initial Administrator</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Full Name</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={adminFullName}
|
|
onChange={(e) => setAdminFullName(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
|
placeholder="e.g. John Doe"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Email</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={adminEmail}
|
|
onChange={(e) => setAdminEmail(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
|
placeholder="admin@acme.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Admin Password</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
value={adminPassword}
|
|
onChange={(e) => setAdminPassword(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 mt-8">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsModalOpen(false)}
|
|
className="flex-1 px-4 py-2.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all shadow-lg shadow-blue-500/20"
|
|
>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Branding Management Modal */}
|
|
{isBrandingModalOpen && selectedOrg && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="w-full max-w-2xl glass border border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h2 className="text-xl font-bold">Branding Management</h2>
|
|
<p className="text-sm text-gray-400">{selectedOrg.name}</p>
|
|
</div>
|
|
<button onClick={() => setIsBrandingModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="space-y-6">
|
|
{/* Logo Upload */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-3 text-brand">Organization Logo</label>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-20 h-20 rounded-xl bg-black/40 border border-white/10 flex items-center justify-center overflow-hidden relative">
|
|
{selectedOrg.logo_url ? (
|
|
<Image src={getImageUrl(selectedOrg.logo_url)} alt="Preview" fill className="object-contain" unoptimized />
|
|
) : (
|
|
<Building2 className="w-8 h-8 text-gray-600" />
|
|
)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<label className="relative flex items-center justify-center gap-2 px-4 py-2 bg-blue-600/10 hover:bg-blue-600/20 text-blue-400 rounded-lg cursor-pointer transition-all border border-blue-500/20">
|
|
<Upload className="w-4 h-4" />
|
|
{uploadingLogo ? 'Uploading...' : 'Upload Logo'}
|
|
<input type="file" className="hidden" accept="image/*" onChange={handleLogoUpload} disabled={uploadingLogo} />
|
|
</label>
|
|
<p className="text-[10px] text-gray-500 mt-2">PNG, JPG or SVG. Max 2MB.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Colors */}
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-2">Primary Color</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="color"
|
|
value={primaryColor}
|
|
onChange={(e) => setPrimaryColor(e.target.value)}
|
|
className="w-10 h-10 rounded cursor-pointer bg-transparent border-none"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={primaryColor}
|
|
onChange={(e) => setPrimaryColor(e.target.value)}
|
|
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-2">Secondary Color</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="color"
|
|
value={secondaryColor}
|
|
onChange={(e) => setSecondaryColor(e.target.value)}
|
|
className="w-10 h-10 rounded cursor-pointer bg-transparent border-none"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={secondaryColor}
|
|
onChange={(e) => setSecondaryColor(e.target.value)}
|
|
className="flex-1 bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Live Preview */}
|
|
<div className="space-y-4">
|
|
<label className="block text-sm font-medium text-gray-400 mb-2">Experience Portal Preview</label>
|
|
<div className="rounded-xl border border-white/10 overflow-hidden bg-slate-900 shadow-inner">
|
|
{/* Mock Experience Header */}
|
|
<div className="h-10 px-4 flex items-center justify-between border-b border-white/5" style={{ backgroundColor: primaryColor }}>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-5 h-5 bg-white/20 rounded flex items-center justify-center overflow-hidden relative">
|
|
{selectedOrg.logo_url ? (
|
|
<Image src={getImageUrl(selectedOrg.logo_url)} alt="Logo" fill className="object-contain" unoptimized />
|
|
) : <div className="w-3 h-3 bg-white" />}
|
|
</div>
|
|
<div className="w-16 h-2 bg-white/30 rounded" />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<div className="w-6 h-2 bg-white/20 rounded" />
|
|
<div className="w-6 h-2 bg-white/20 rounded" />
|
|
</div>
|
|
</div>
|
|
{/* Mock Experience Content */}
|
|
<div className="p-4 space-y-3 bg-[#0a0c10]">
|
|
<div className="w-2/3 h-4 bg-white/10 rounded mb-2" />
|
|
<div className="w-full h-24 bg-white/5 rounded-lg border border-white/5 p-3">
|
|
<div className="w-1/3 h-3 rounded mb-2" style={{ backgroundColor: secondaryColor }} />
|
|
<div className="w-full h-2 bg-white/5 rounded mb-1" />
|
|
<div className="w-full h-2 bg-white/5 rounded mb-1" />
|
|
<div className="w-1/2 h-2 bg-white/5 rounded" />
|
|
<div className="mt-4 flex justify-end">
|
|
<div className="px-3 py-1.5 rounded text-[8px] font-bold text-white" style={{ backgroundColor: primaryColor }}>
|
|
GET STARTED
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-blue-500/10 border border-blue-500/20">
|
|
<p className="text-[10px] text-blue-400 leading-relaxed">
|
|
This is a real-time preview of how the brand identity will apply to the student's learning experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-10">
|
|
<button
|
|
onClick={() => setIsBrandingModalOpen(false)}
|
|
className="flex-1 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleBrandingSave}
|
|
disabled={isSavingBranding}
|
|
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
|
>
|
|
{isSavingBranding ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
|
Save Branding
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* SSO Configuration Modal */}
|
|
{isSSOModalOpen && selectedOrg && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
|
|
<div className="w-full max-w-xl glass border border-white/10 rounded-2xl p-8 shadow-2xl">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-2 rounded-lg bg-blue-500/10 text-blue-400">
|
|
<Fingerprint className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold">Single Sign-On (OIDC)</h2>
|
|
<p className="text-sm text-gray-400">{selectedOrg.name}</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => setIsSSOModalOpen(false)} className="p-2 hover:bg-white/5 rounded-full transition-colors">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/10">
|
|
<div>
|
|
<h3 className="font-medium text-white">Enable OIDC SSO</h3>
|
|
<p className="text-xs text-gray-500">Allow users to log in via your identity provider.</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setSsoEnabled(!ssoEnabled)}
|
|
className={`w-12 h-6 rounded-full transition-colors relative ${ssoEnabled ? 'bg-blue-600' : 'bg-gray-700'}`}
|
|
>
|
|
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${ssoEnabled ? 'right-1' : 'left-1'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4 pt-2">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Issuer URL</label>
|
|
<div className="relative">
|
|
<Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="url"
|
|
value={issuerUrl}
|
|
onChange={(e) => setIssuerUrl(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
|
placeholder="https://accounts.google.com or https://okta.com/..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Client ID</label>
|
|
<div className="relative">
|
|
<ShieldCheck className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="text"
|
|
value={clientId}
|
|
onChange={(e) => setClientId(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
|
placeholder="Your OIDC Client ID"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-400 mb-1.5">Client Secret</label>
|
|
<div className="relative">
|
|
<Key className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
|
|
<input
|
|
type="password"
|
|
value={clientSecret}
|
|
onChange={(e) => setClientSecret(e.target.value)}
|
|
className="w-full bg-black/40 border border-white/10 rounded-lg pl-10 pr-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all font-mono text-sm"
|
|
placeholder="••••••••••••••••"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4 rounded-xl bg-blue-500/10 border border-blue-500/20 space-y-2">
|
|
<div className="flex items-center gap-2 text-blue-400 text-xs font-bold">
|
|
<Settings2 className="w-4 h-4" /> CONFIGURATION STEPS
|
|
</div>
|
|
<p className="text-[10px] text-blue-300 leading-relaxed">
|
|
1. Register OpenCCB as an application in your Identity Provider (Okta, Google, Azure AD).<br />
|
|
2. Set the Redirect URI to: <span className="font-mono bg-blue-500/20 px-1">http://localhost:3001/auth/sso/callback</span><br />
|
|
3. Copy the Issuer URL, Client ID, and Client Secret here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 mt-8">
|
|
<button
|
|
onClick={() => setIsSSOModalOpen(false)}
|
|
className="flex-1 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={handleSSOSave}
|
|
disabled={isSavingSSO}
|
|
className="flex-[2] px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl transition-all shadow-lg shadow-blue-500/20 font-bold flex items-center justify-center gap-2"
|
|
>
|
|
{isSavingSSO ? <div className="w-5 h-5 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : <Save className="w-5 h-5" />}
|
|
Save SSO Settings
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|