'use client' import { useCallback, useEffect, useRef, useState, FormEvent } from 'react' import Image from 'next/image' import { useTranslations } from 'next-intl' import { Button } from '@/components/ui/button' import { LanguageSwitcherSelect } from '@/components/ui/language-switcher' import { STORAGE_GATEWAY_URL } from '@/lib/device-identity' interface GoogleCredentialResponse { credential?: string } interface GoogleAccountsIdApi { initialize(config: { client_id: string callback: (response: GoogleCredentialResponse) => void }): void prompt(): void } interface GoogleApi { accounts: { id: GoogleAccountsIdApi } } type LoginRequestBody = | { username: string; password: string } | { credential?: string } type LoginErrorPayload = { code?: string error?: string hint?: string } function readLoginErrorPayload(value: unknown): LoginErrorPayload { if (!value || typeof value !== 'object') return {} const record = value as Record return { code: typeof record.code === 'string' ? record.code : undefined, error: typeof record.error === 'string' ? record.error : undefined, hint: typeof record.hint === 'string' ? record.hint : undefined, } } declare global { interface Window { google?: GoogleApi } } function GoogleIcon({ className }: { className?: string }) { return ( ) } const GATEWAY_URL_PRESETS = [ 'ws://127.0.0.1:18789', 'wss://127.0.0.1:18789', 'ws://localhost:18789', 'wss://localhost:18789', 'wss://gateway:18789', ] const GATEWAY_CONNECTION_TIMEOUT_MS = 5000 type ConnectionStatus = 'idle' | 'testing' | 'success' | 'failed' export default function LoginPage() { const t = useTranslations('auth') const tc = useTranslations('common') const [username, setUsername] = useState('') const [password, setPassword] = useState('') const [error, setError] = useState('') const [pendingApproval, setPendingApproval] = useState(false) const [needsSetup, setNeedsSetup] = useState(false) const [loading, setLoading] = useState(false) const [googleLoading, setGoogleLoading] = useState(false) const [googleReady, setGoogleReady] = useState(false) const googleCallbackRef = useRef<((response: GoogleCredentialResponse) => void) | null>(null) // Advanced settings state const [advancedOpen, setAdvancedOpen] = useState(false) const [gatewayPreset, setGatewayPreset] = useState(() => { // Auto-select wss:// preset when the page is served over HTTPS (reverse proxy) if (typeof window !== 'undefined' && window.location.protocol === 'https:') { return 'wss://127.0.0.1:18789' } return 'ws://127.0.0.1:18789' }) const [gatewayCustom, setGatewayCustom] = useState('') const [connectionStatus, setConnectionStatus] = useState('idle') const [connectionError, setConnectionError] = useState('') // Initialize gateway URL from localStorage on mount useEffect(() => { const saved = localStorage.getItem(STORAGE_GATEWAY_URL) if (saved) { if (GATEWAY_URL_PRESETS.includes(saved)) { setGatewayPreset(saved) } else { setGatewayPreset('custom') setGatewayCustom(saved) } } }, []) const getEffectiveGatewayUrl = (): string => { return gatewayPreset === 'custom' ? gatewayCustom.trim() : gatewayPreset } const handleGatewayUrlChange = (value: string) => { setGatewayPreset(value) if (value !== 'custom') { localStorage.setItem(STORAGE_GATEWAY_URL, value) setConnectionStatus('idle') } } const handleGatewayCustomChange = (value: string) => { setGatewayCustom(value) const trimmed = value.trim() if (trimmed) { localStorage.setItem(STORAGE_GATEWAY_URL, trimmed) setConnectionStatus('idle') } } const handleTestConnection = () => { const url = getEffectiveGatewayUrl() if (!url) return setConnectionStatus('testing') setConnectionError('') return new Promise((resolve) => { try { const ws = new WebSocket(url) const timeout = setTimeout(() => { ws.close() setConnectionStatus('failed') setConnectionError('Connection timed out') resolve() }, GATEWAY_CONNECTION_TIMEOUT_MS) ws.onopen = () => { clearTimeout(timeout) ws.close() setConnectionStatus('success') resolve() } ws.onerror = () => { clearTimeout(timeout) ws.close() setConnectionStatus('failed') setConnectionError('Could not connect') resolve() } } catch { setConnectionStatus('failed') setConnectionError('Invalid URL') resolve() } }) } const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '' // Check if first-time setup is needed on page load — auto-redirect to /setup useEffect(() => { fetch('/api/setup') .then((res) => res.json()) .then((data) => { if (data.needsSetup) { window.location.href = '/setup' } }) .catch(() => { // Ignore — setup check is best-effort }) }, []) const completeLogin = useCallback(async (path: string, body: LoginRequestBody) => { const res = await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }) if (!res.ok) { const data = readLoginErrorPayload(await res.json().catch(() => null)) if (data.code === 'PENDING_APPROVAL') { setPendingApproval(true) setNeedsSetup(false) setError('') setLoading(false) setGoogleLoading(false) return false } if (data.code === 'NO_USERS') { setNeedsSetup(true) setError('') setLoading(false) setGoogleLoading(false) return false } setError(data.error || t('loginFailed')) setPendingApproval(false) setNeedsSetup(false) setLoading(false) setGoogleLoading(false) return false } // Full reload ensures the session cookie is sent on all subsequent requests. // router.push() + refresh() can race and use stale RSC payloads. window.location.href = '/' return true }, [t]) async function handleSubmit(e: FormEvent) { e.preventDefault() setError('') setLoading(true) // Read DOM values directly to handle browser autofill (which doesn't fire onChange) const form = e.target as HTMLFormElement const formUsername = (form.elements.namedItem('username') as HTMLInputElement)?.value || username const formPassword = (form.elements.namedItem('password') as HTMLInputElement)?.value || password try { await completeLogin('/api/auth/login', { username: formUsername, password: formPassword }) } catch { setError(t('networkError')) setLoading(false) } } // Initialize Google Sign-In SDK (hidden prompt mode) useEffect(() => { if (!googleClientId) return const onScriptLoad = () => { if (!window.google) return googleCallbackRef.current = async (response: GoogleCredentialResponse) => { setError('') setGoogleLoading(true) try { const ok = await completeLogin('/api/auth/google', { credential: response?.credential }) if (!ok) return } catch { setError(t('googleSignInFailed')) setGoogleLoading(false) } } window.google.accounts.id.initialize({ client_id: googleClientId, callback: (response: GoogleCredentialResponse) => googleCallbackRef.current?.(response), }) setGoogleReady(true) } const existing = document.querySelector('script[data-google-gsi="1"]') as HTMLScriptElement | null if (existing) { if (window.google) onScriptLoad() return } const script = document.createElement('script') script.src = 'https://accounts.google.com/gsi/client' script.async = true script.defer = true script.setAttribute('data-google-gsi', '1') script.onload = onScriptLoad script.onerror = () => setError(t('googleSignInFailed')) document.head.appendChild(script) }, [googleClientId, completeLogin, t]) const handleGoogleSignIn = () => { if (!window.google || !googleReady) return window.google.accounts.id.prompt() } return (

{t('missionControl')}

{t('signInToContinue')}

{pendingApproval && (

{t('accessRequestSubmitted')}

{t('accessRequestDescription')}

)} {needsSetup && (

{t('noAdminAccount')}

{t('noAdminDescription')}

)} {error && (

{error}

)} {/* Advanced Settings — WebSocket gateway URL configuration */}

{advancedOpen && (

{t('gatewayUrl')}

{gatewayPreset === 'custom' && ( handleGatewayCustomChange(e.target.value)} placeholder={t('gatewayUrlPlaceholder')} className="mt-2 w-full h-10 px-3 rounded-lg bg-secondary border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-smooth" /> )}

{connectionStatus === 'success' && ( {t('connectionSuccess')} )} {connectionStatus === 'failed' && ( {t('connectionFailed')}{connectionError ? `: ${connectionError}` : ''} )}

)}

{/* Google Sign-In button — shown only when client ID is configured */} {googleClientId && (

{!googleReady && (

{t('loadingGoogleSignIn')}

)} {/* Divider */}

{tc('or')}

)}

{t('username')} setUsername(e.target.value)} className="w-full h-10 px-3 rounded-lg bg-secondary border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-smooth" placeholder={t('enterUsername')} autoComplete="username" autoFocus required aria-required="true" />

{t('password')} setPassword(e.target.value)} className="w-full h-10 px-3 rounded-lg bg-secondary border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-smooth" placeholder={t('enterPassword')} autoComplete="current-password" required aria-required="true" />

{t('orchestrationTagline')}

) }