From 744064f3aa6f74633f8e4f6e027b7f14e9514ab9 Mon Sep 17 00:00:00 2001 From: Arunavo Ray Date: Thu, 17 Jul 2025 16:08:12 +0530 Subject: [PATCH] Updated SSO UI --- package.json | 2 +- src/components/config/SSOSettings.tsx | 355 ++++---------------------- src/lib/auth-config.ts | 5 +- src/lib/auth.ts | 3 +- 4 files changed, 55 insertions(+), 310 deletions(-) diff --git a/package.json b/package.json index a660ec4..ca0fc82 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ }, "scripts": { "setup": "bun install && bun run manage-db init", - "dev": "bunx --bun astro dev", + "dev": "bunx --bun astro dev --port 4567", "dev:clean": "bun run cleanup-db && bun run manage-db init && bunx --bun astro dev", "build": "bunx --bun astro build", "cleanup-db": "rm -f gitea-mirror.db data/gitea-mirror.db", diff --git a/src/components/config/SSOSettings.tsx b/src/components/config/SSOSettings.tsx index e17ce2c..9895045 100644 --- a/src/components/config/SSOSettings.tsx +++ b/src/components/config/SSOSettings.tsx @@ -3,7 +3,6 @@ import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Switch } from '@/components/ui/switch'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; @@ -39,26 +38,10 @@ interface SSOProvider { updatedAt: string; } -interface OAuthApplication { - id: string; - clientId: string; - clientSecret?: string; - name: string; - redirectURLs: string; - type: string; - disabled: boolean; - metadata?: string; - createdAt: string; - updatedAt: string; -} - export function SSOSettings() { - const [activeTab, setActiveTab] = useState('providers'); const [providers, setProviders] = useState([]); - const [applications, setApplications] = useState([]); const [isLoading, setIsLoading] = useState(true); const [showProviderDialog, setShowProviderDialog] = useState(false); - const [showAppDialog, setShowAppDialog] = useState(false); const [isDiscovering, setIsDiscovering] = useState(false); // Form states for new provider @@ -74,19 +57,7 @@ export function SSOSettings() { userInfoEndpoint: '', }); - // Form states for new application - const [appForm, setAppForm] = useState({ - name: '', - redirectURLs: '', - type: 'web', - }); - // Authentication methods state - const [authMethods, setAuthMethods] = useState({ - emailPassword: true, - sso: false, - oidc: false, - }); useEffect(() => { loadData(); @@ -95,19 +66,8 @@ export function SSOSettings() { const loadData = async () => { setIsLoading(true); try { - const [providersRes, appsRes] = await Promise.all([ - apiRequest('/sso/providers'), - apiRequest('/sso/applications'), - ]); + const providersRes = await apiRequest('/sso/providers'); setProviders(providersRes); - setApplications(appsRes); - - // Set auth methods based on what's configured - setAuthMethods({ - emailPassword: true, // Always enabled - sso: providersRes.length > 0, - oidc: appsRes.length > 0, - }); } catch (error) { showErrorToast(error, toast); } finally { @@ -175,9 +135,6 @@ export function SSOSettings() { userInfoEndpoint: '', }); toast.success('SSO provider created successfully'); - - // Enable SSO auth method - setAuthMethods(prev => ({ ...prev, sso: true })); } catch (error) { showErrorToast(error, toast); } @@ -188,56 +145,11 @@ export function SSOSettings() { await apiRequest(`/sso/providers?id=${id}`, { method: 'DELETE' }); setProviders(providers.filter(p => p.id !== id)); toast.success('Provider deleted successfully'); - - // Disable SSO if no providers left - if (providers.length === 1) { - setAuthMethods(prev => ({ ...prev, sso: false })); - } } catch (error) { showErrorToast(error, toast); } }; - const createApplication = async () => { - try { - const newApp = await apiRequest('/sso/applications', { - method: 'POST', - data: { - ...appForm, - redirectURLs: appForm.redirectURLs.split('\n').filter(url => url.trim()), - }, - }); - - setApplications([...applications, newApp]); - setShowAppDialog(false); - setAppForm({ - name: '', - redirectURLs: '', - type: 'web', - }); - toast.success('OAuth application created successfully'); - - // Enable OIDC auth method - setAuthMethods(prev => ({ ...prev, oidc: true })); - } catch (error) { - showErrorToast(error, toast); - } - }; - - const deleteApplication = async (id: string) => { - try { - await apiRequest(`/sso/applications?id=${id}`, { method: 'DELETE' }); - setApplications(applications.filter(a => a.id !== id)); - toast.success('Application deleted successfully'); - - // Disable OIDC if no applications left - if (applications.length === 1) { - setAuthMethods(prev => ({ ...prev, oidc: false })); - } - } catch (error) { - showErrorToast(error, toast); - } - }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); @@ -255,78 +167,41 @@ export function SSOSettings() { return (
- {/* Authentication Methods Card */} + {/* Header with status indicators */} +
+
+

Authentication & SSO

+

+ Configure how users authenticate with your application +

+
+
+
0 ? 'bg-green-500' : 'bg-muted'}`} /> + + {providers.length} Provider{providers.length !== 1 ? 's' : ''} configured + +
+
+ + {/* Info Alert for Authentication Flow */} + {providers.length === 0 && ( + + + + Current authentication: Users sign in with email and password only. + Add SSO providers to enable users to sign in with their existing accounts from external services like Google, Azure AD, or any OIDC-compliant provider. + + + )} + + {/* SSO Providers */} - - Authentication Methods - - Choose which authentication methods are available for users - - - -
-
- -

- Traditional email and password authentication -

-
- -
- - - -
-
- -

- Allow users to sign in with external OIDC providers -

-
- -
- - - -
-
- -

- Allow other applications to authenticate through this app -

-
- -
- - - - {/* SSO Configuration Tabs */} - - - SSO Providers - OAuth Applications - - - -
- SSO Providers + External Identity Providers - Configure external OIDC providers for user authentication + Connect external OIDC/OAuth providers (Google, Azure AD, etc.) to allow users to sign in with their existing accounts
@@ -443,11 +318,23 @@ export function SSOSettings() { {providers.length === 0 ? ( - - - No SSO providers configured. Add a provider to enable SSO authentication. - - +
+
+ + + +
+

No SSO providers configured

+

+ Enable Single Sign-On by adding an external identity provider like Google, Azure AD, or any OIDC-compliant service. +

+
+ +
+
) : (
{providers.map(provider => ( @@ -484,151 +371,7 @@ export function SSOSettings() {
)} - - - - - - -
-
- OAuth Applications - - Applications that can authenticate users through this OIDC provider - -
- - - - - - - Create OAuth Application - - Register a new application that can use this service for authentication - - -
-
- - setAppForm(prev => ({ ...prev, name: e.target.value }))} - placeholder="My Application" - /> -
- -
- - -
- -
- -