Feat: RBAC, Keys Extension, Invites
feat: org members page — invite users, cancel invites, change roles feat: show pending invitations banner on profile page feat: invite accept flow for existing users (no password needed) feat: departments page updates feat: SSH keys page — dept cert policy UI (expiry + extensions) feat: wire up auth pages to real API (register, verify, reset, OIDC) feat: CLI auth bridge — login page handles CLI token flow feat: admin users — suspend/unsuspend, role badges, role filter feat: add admin OAuth providers management page feat: activity page — org-wide audit log view for admins feat: add my memberships page chore: add isOrgAdmin/isOrgMember to AuthContext, restrict sidebar chore: update app routing and shared layout
This commit is contained in:
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { BannerAlert } from "@/components/auth/BannerAlert";
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
export default function ForgotPasswordPage() {
|
||||
const [email, setEmail] = useState("");
|
||||
@@ -15,11 +16,14 @@ export default function ForgotPasswordPage() {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
// Mock API call - POST /api/auth/forgot-password
|
||||
setTimeout(() => {
|
||||
try {
|
||||
await api.auth.forgotPassword(email);
|
||||
} catch {
|
||||
// Always show success to avoid leaking account existence
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsSubmitted(true);
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// Success state - always show neutral message (don't leak account existence)
|
||||
|
||||
@@ -1,36 +1,106 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { User, Lock, Upload, ArrowRight, Building2 } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useSearchParams, Link } from "react-router-dom";
|
||||
import { User, Lock, ArrowRight, Building2, Loader2, AlertCircle, CheckCircle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { api, ApiError } from "@/lib/api";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
|
||||
export default function InviteAcceptPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const token = searchParams.get("token") || "";
|
||||
const { login } = useAuth();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isTokenLoading, setIsTokenLoading] = useState(true);
|
||||
const [tokenError, setTokenError] = useState("");
|
||||
const [submitError, setSubmitError] = useState("");
|
||||
const [inviteData, setInviteData] = useState<{
|
||||
email: string;
|
||||
organization: { id: string; name: string };
|
||||
role: string;
|
||||
user_exists?: boolean;
|
||||
} | null>(null);
|
||||
|
||||
// Mock invite data - will be fetched from URL token
|
||||
const inviteData = {
|
||||
email: "invited@example.com",
|
||||
organization: "Acme Corp",
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!token) {
|
||||
setTokenError("No invite token found in the URL.");
|
||||
setIsTokenLoading(false);
|
||||
return;
|
||||
}
|
||||
api.invites.getInfo(token)
|
||||
.then((data) => {
|
||||
setInviteData(data);
|
||||
})
|
||||
.catch(() => {
|
||||
setTokenError("This invitation link is invalid or has expired.");
|
||||
})
|
||||
.finally(() => setIsTokenLoading(false));
|
||||
}, [token]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (password !== confirmPassword) {
|
||||
return;
|
||||
setSubmitError("");
|
||||
if (!inviteData?.user_exists) {
|
||||
if (password !== confirmPassword) {
|
||||
setSubmitError("Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
if (password.length < 8) {
|
||||
setSubmitError("Password must be at least 8 characters.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
try {
|
||||
const result = await api.invites.accept(token, name || undefined, inviteData?.user_exists ? undefined : password);
|
||||
if (result.token) {
|
||||
// Store the token manually since we're not using the normal login flow
|
||||
localStorage.setItem("gatehouse_token", result.token);
|
||||
}
|
||||
navigate("/profile");
|
||||
}, 1000);
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof ApiError ? err.message : "Failed to accept invite.";
|
||||
setSubmitError(msg);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isTokenLoading) {
|
||||
return (
|
||||
<div className="auth-card flex items-center justify-center py-12">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (tokenError) {
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 rounded-lg bg-destructive/10 flex items-center justify-center mx-auto mb-4">
|
||||
<AlertCircle className="w-6 h-6 text-destructive" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight mb-2">
|
||||
Invalid Invitation
|
||||
</h1>
|
||||
<p className="text-muted-foreground">{tokenError}</p>
|
||||
<Link to="/login" className="inline-block mt-4 text-sm text-primary hover:underline">
|
||||
Back to sign in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isExistingUser = !!inviteData?.user_exists;
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
@@ -41,95 +111,102 @@ export default function InviteAcceptPage() {
|
||||
You're invited!
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
<span className="font-medium text-foreground">{inviteData.organization}</span> has
|
||||
invited you to join their organization
|
||||
<span className="font-medium text-foreground">{inviteData?.organization.name}</span> has
|
||||
invited you to join as <span className="font-medium text-foreground capitalize">{inviteData?.role}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Avatar upload */}
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<Avatar className="w-20 h-20 mb-3">
|
||||
<AvatarFallback className="bg-primary text-primary-foreground text-xl">
|
||||
{name ? name.split(" ").map(n => n[0]).join("").slice(0, 2).toUpperCase() : "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<Button type="button" variant="outline" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Upload photo
|
||||
</Button>
|
||||
<div className="space-y-2">
|
||||
<Label>Email</Label>
|
||||
<Input type="email" value={inviteData?.email ?? ""} disabled className="bg-muted" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={inviteData.email}
|
||||
disabled
|
||||
className="bg-muted"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
{isExistingUser ? (
|
||||
<div className="rounded-lg bg-accent/10 border border-accent/20 p-4 flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-accent flex-shrink-0 mt-0.5" />
|
||||
<div className="text-sm">
|
||||
<p className="font-medium text-foreground">Account found</p>
|
||||
<p className="text-muted-foreground">You already have a Gatehouse account. Click below to join the organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full name</Label>
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="John Doe"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
minLength={8}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm password</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
className="pl-10"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{submitError && (
|
||||
<p className="text-sm text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Joining..."
|
||||
<><Loader2 className="w-4 h-4 mr-2 animate-spin" />Joining...</>
|
||||
) : (
|
||||
<>
|
||||
Join {inviteData.organization}
|
||||
Join {inviteData?.organization.name}
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{isExistingUser && (
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Not you?{" "}
|
||||
<Link to="/login" className="text-primary hover:underline">
|
||||
Sign in with a different account
|
||||
</Link>
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { Link, useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { Mail, Lock, ArrowRight, Fingerprint, ArrowLeft, ShieldCheck, Loader2, Smartphone, AlertTriangle } from "lucide-react";
|
||||
import { Mail, Lock, ArrowRight, Fingerprint, ArrowLeft, ShieldCheck, Loader2, Smartphone, AlertTriangle, Terminal } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -49,7 +49,7 @@ async function completeOidcFlow(oidcSessionId: string, token: string): Promise<s
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const { login, verifyTotp, refreshUser } = useAuth();
|
||||
const { login, verifyTotp, refreshUser, user, isLoading: authLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const { toast } = useToast();
|
||||
const [searchParams] = useSearchParams();
|
||||
@@ -69,6 +69,46 @@ export default function LoginPage() {
|
||||
const oidcSessionId = searchParams.get('oidc_session_id');
|
||||
const oidcError = searchParams.get('error');
|
||||
|
||||
// CLI bridge: if cli_token or cli_redirect is present the login was triggered
|
||||
// by the Gatehouse CLI tool. After successful auth the token is delivered
|
||||
// directly to the CLI's local callback server.
|
||||
const cliToken = searchParams.get('cli_token');
|
||||
const cliRedirectParam = searchParams.get('cli_redirect');
|
||||
const [cliRedirectUrl, setCliRedirectUrl] = useState<string | null>(cliRedirectParam);
|
||||
const cliFetchedRef = useRef(false);
|
||||
|
||||
// Exchange cli_token for the real redirect URL (keeps the URL clean)
|
||||
useEffect(() => {
|
||||
if (!cliToken || cliFetchedRef.current) return;
|
||||
cliFetchedRef.current = true;
|
||||
fetch(`${GATEHOUSE_API}/cli/redirect-url?token=${encodeURIComponent(cliToken)}`)
|
||||
.then((r) => r.json())
|
||||
.then((body) => {
|
||||
if (body?.data?.redirect_url) {
|
||||
setCliRedirectUrl(body.data.redirect_url);
|
||||
}
|
||||
})
|
||||
.catch(() => {/* ignore — user will just land on normal login */});
|
||||
}, [cliToken]);
|
||||
|
||||
const finishCliFlow = useCallback((token: string) => {
|
||||
if (!cliRedirectUrl) return false;
|
||||
// cliRedirectUrl already ends with "token=" — just append the value
|
||||
window.location.href = cliRedirectUrl + encodeURIComponent(token);
|
||||
return true;
|
||||
}, [cliRedirectUrl]);
|
||||
|
||||
// If the user is already authenticated and we're in CLI mode, deliver the
|
||||
// token immediately — no need to show the login form at all.
|
||||
useEffect(() => {
|
||||
if (authLoading) return; // wait until auth state is known
|
||||
if (!cliRedirectUrl) return;
|
||||
const existingToken = tokenManager.getToken();
|
||||
if (user && existingToken) {
|
||||
finishCliFlow(existingToken);
|
||||
}
|
||||
}, [authLoading, user, cliRedirectUrl, finishCliFlow]);
|
||||
|
||||
const finishOidcFlow = useCallback(async (token: string) => {
|
||||
if (!oidcSessionId) return false;
|
||||
try {
|
||||
@@ -110,8 +150,12 @@ export default function LoginPage() {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
// In CLI or OIDC mode we need to handle post-auth navigation ourselves,
|
||||
// so tell AuthContext not to navigate to /profile automatically.
|
||||
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
||||
|
||||
try {
|
||||
const result = await login(email, password, rememberMe);
|
||||
const result = await login(email, password, rememberMe, needsCustomNav);
|
||||
if (result.requiresWebAuthn) {
|
||||
setStep('webauthn');
|
||||
} else if (result.requiresTotp) {
|
||||
@@ -119,13 +163,17 @@ export default function LoginPage() {
|
||||
setTotpCode("");
|
||||
} else if (result.requiresMfaEnrollment) {
|
||||
// MFA enrollment required - will be handled by ProtectedLayout
|
||||
// Navigation happens in AuthContext
|
||||
// Navigation happens in AuthContext (MFA path always navigates)
|
||||
} else if (oidcSessionId) {
|
||||
// OIDC bridge: send token back to the Gatehouse backend to complete the flow
|
||||
const token = tokenManager.getToken();
|
||||
if (token) await finishOidcFlow(token);
|
||||
} else if (cliRedirectUrl) {
|
||||
// CLI bridge: deliver the token directly to the CLI's local server
|
||||
const token = tokenManager.getToken();
|
||||
if (token) finishCliFlow(token);
|
||||
}
|
||||
// If no TOTP, WebAuthn, or MFA enrollment required, navigation happens in AuthContext
|
||||
// Normal login: navigation already handled by AuthContext (skipNavigate=false)
|
||||
} catch (error) {
|
||||
if (import.meta.env.DEV) {
|
||||
console.error("[Gatehouse] Login failed:", error);
|
||||
@@ -178,16 +226,22 @@ export default function LoginPage() {
|
||||
// OIDC bridge: finish the flow if this is an OIDC login
|
||||
if (oidcSessionId && response.token) {
|
||||
await finishOidcFlow(response.token);
|
||||
} else if (cliRedirectUrl && response.token) {
|
||||
finishCliFlow(response.token);
|
||||
} else {
|
||||
await refreshUser();
|
||||
navigate('/profile');
|
||||
}
|
||||
} else {
|
||||
// Fallback to regular TOTP verification
|
||||
await verifyTotp(totpCode, useBackupCode);
|
||||
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
||||
await verifyTotp(totpCode, useBackupCode, needsCustomNav);
|
||||
if (oidcSessionId) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) await finishOidcFlow(token);
|
||||
} else if (cliRedirectUrl) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) finishCliFlow(token);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -227,13 +281,17 @@ export default function LoginPage() {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await verifyTotp(totpCode, useBackupCode);
|
||||
const needsCustomNav = !!(cliRedirectUrl || oidcSessionId);
|
||||
await verifyTotp(totpCode, useBackupCode, needsCustomNav);
|
||||
// OIDC bridge: finish the flow if this is an OIDC login
|
||||
if (oidcSessionId) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) await finishOidcFlow(token);
|
||||
} else if (cliRedirectUrl) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) finishCliFlow(token);
|
||||
}
|
||||
// Otherwise navigation happens in AuthContext
|
||||
// Normal login: navigation already handled by AuthContext (skipNavigate=false)
|
||||
} catch (error) {
|
||||
if (import.meta.env.DEV) {
|
||||
console.error("[Gatehouse] TOTP verification failed:", error);
|
||||
@@ -292,6 +350,9 @@ export default function LoginPage() {
|
||||
if (oidcSessionId) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) await finishOidcFlow(token);
|
||||
} else if (cliRedirectUrl) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) finishCliFlow(token);
|
||||
} else {
|
||||
navigate('/profile');
|
||||
}
|
||||
@@ -364,6 +425,9 @@ export default function LoginPage() {
|
||||
if (oidcSessionId) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) await finishOidcFlow(token);
|
||||
} else if (cliRedirectUrl) {
|
||||
const token = tokenManager.getToken();
|
||||
if (token) finishCliFlow(token);
|
||||
} else {
|
||||
await refreshUser();
|
||||
navigate('/profile');
|
||||
@@ -444,6 +508,11 @@ export default function LoginPage() {
|
||||
...(oidcSessionId ? { oidc_session_id: oidcSessionId } : {}),
|
||||
});
|
||||
|
||||
// CLI bridge: stash the redirect URL so OAuthCallbackPage can deliver the token
|
||||
if (cliRedirectUrl) {
|
||||
sessionStorage.setItem('cli_redirect_url', cliRedirectUrl);
|
||||
}
|
||||
|
||||
// Redirect browser to provider
|
||||
window.location.href = response.authorization_url;
|
||||
|
||||
@@ -860,11 +929,18 @@ export default function LoginPage() {
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-8">
|
||||
{cliRedirectUrl && (
|
||||
<div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Terminal className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
)}
|
||||
<h1 className="text-2xl font-semibold text-foreground tracking-tight">
|
||||
{oidcSessionId ? "Sign in to continue" : "Welcome back"}
|
||||
{cliRedirectUrl ? "Authorize CLI access" : oidcSessionId ? "Sign in to continue" : "Welcome back"}
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
{oidcSessionId
|
||||
{cliRedirectUrl
|
||||
? "Sign in to grant the Gatehouse CLI access to your account"
|
||||
: oidcSessionId
|
||||
? "An application is requesting access to your account"
|
||||
: "Sign in to your account to continue"}
|
||||
</p>
|
||||
|
||||
@@ -97,6 +97,15 @@ export default function OAuthCallbackPage() {
|
||||
tokenManager.setToken(token, expiresAt);
|
||||
await refreshUser();
|
||||
|
||||
// ── CLI bridge: deliver token to the local CLI server ─────────────────
|
||||
const cliCallbackUrl = sessionStorage.getItem('cli_redirect_url');
|
||||
if (cliCallbackUrl) {
|
||||
sessionStorage.removeItem('cli_redirect_url');
|
||||
// cliCallbackUrl already ends with "token=" — append the value
|
||||
window.location.href = cliCallbackUrl + encodeURIComponent(token);
|
||||
return;
|
||||
}
|
||||
|
||||
// ── OIDC bridge: complete the flow and redirect back to the OIDC client ──
|
||||
if (oidcSessionId) {
|
||||
try {
|
||||
|
||||
@@ -1,39 +1,122 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircle, XCircle, Shield, User, Mail, Building2 } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { CheckCircle, XCircle, Shield, User, Mail, Building2, Loader2, Key } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { tokenManager } from "@/lib/api";
|
||||
|
||||
const GATEHOUSE_API = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:5000/api/v1';
|
||||
const GATEHOUSE_OIDC = GATEHOUSE_API.replace(/\/api\/v1\/?$/, '');
|
||||
|
||||
const SCOPE_META: Record<string, { icon: typeof Shield; label: string; description: string }> = {
|
||||
openid: { icon: Shield, label: "OpenID", description: "Verify your identity" },
|
||||
profile: { icon: User, label: "Profile", description: "Access your name and profile picture" },
|
||||
email: { icon: Mail, label: "Email", description: "Access your email address" },
|
||||
groups: { icon: Building2, label: "Groups", description: "Access your group memberships" },
|
||||
offline_access: { icon: Key, label: "Offline Access", description: "Access your data while you are not logged in" },
|
||||
};
|
||||
|
||||
interface ConsentContext {
|
||||
oidc_session_id: string;
|
||||
client_name: string;
|
||||
scopes: string[];
|
||||
redirect_uri: string;
|
||||
}
|
||||
|
||||
export default function OIDCConsentPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const oidcSessionId = searchParams.get("oidc_session_id");
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [context, setContext] = useState<ConsentContext | null>(null);
|
||||
const [fetchError, setFetchError] = useState<string | null>(null);
|
||||
|
||||
// Mock OIDC client data - will be fetched from auth flow
|
||||
const clientData = {
|
||||
name: "GitLab",
|
||||
logo: null,
|
||||
redirectUri: "https://gitlab.example.com/callback",
|
||||
scopes: [
|
||||
{ id: "openid", name: "OpenID", description: "Verify your identity" },
|
||||
{ id: "profile", name: "Profile", description: "Access your name and profile picture" },
|
||||
{ id: "email", name: "Email", description: "Access your email address" },
|
||||
],
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!oidcSessionId) {
|
||||
setFetchError("No OIDC session provided.");
|
||||
return;
|
||||
}
|
||||
|
||||
const handleAllow = () => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(`${GATEHOUSE_OIDC}/oidc/begin`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ oidc_session_id: oidcSessionId }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.success) {
|
||||
setFetchError(body.message || "Failed to load consent context.");
|
||||
return;
|
||||
}
|
||||
setContext(body.data as ConsentContext);
|
||||
} catch {
|
||||
setFetchError("Failed to connect to authentication server.");
|
||||
}
|
||||
})();
|
||||
}, [oidcSessionId]);
|
||||
|
||||
const handleAllow = async () => {
|
||||
if (!context) return;
|
||||
setIsLoading(true);
|
||||
// Mock consent - will redirect to client callback
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const token = tokenManager.getToken();
|
||||
if (!token) {
|
||||
navigate(`/login?oidc_session_id=${context.oidc_session_id}`);
|
||||
return;
|
||||
}
|
||||
const res = await fetch(`${GATEHOUSE_OIDC}/oidc/complete`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ oidc_session_id: context.oidc_session_id, token }),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.success) {
|
||||
setFetchError(body.message || "Authorization failed.");
|
||||
return;
|
||||
}
|
||||
window.location.href = body.data.redirect_url;
|
||||
} catch {
|
||||
setFetchError("Failed to complete authorization.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
// In real implementation: redirect to redirectUri with auth code
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeny = () => {
|
||||
navigate(-1);
|
||||
if (context?.redirect_uri) {
|
||||
window.location.href = `${context.redirect_uri}?error=access_denied&error_description=User+denied+access`;
|
||||
} else {
|
||||
navigate(-1);
|
||||
}
|
||||
};
|
||||
|
||||
if (fetchError) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
|
||||
<XCircle className="w-8 h-8 text-destructive" />
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-foreground">Authorization Error</h1>
|
||||
<p className="text-muted-foreground mt-2">{fetchError}</p>
|
||||
<Button variant="outline" className="mt-6 w-full" onClick={() => navigate("/")}>
|
||||
Return to home
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
<Loader2 className="w-8 h-8 text-accent animate-spin mx-auto mb-4" />
|
||||
<p className="text-muted-foreground">Loading authorization request…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-card">
|
||||
<div className="text-center mb-6">
|
||||
@@ -41,7 +124,7 @@ export default function OIDCConsentPage() {
|
||||
<Shield className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold text-foreground tracking-tight">
|
||||
Authorize {clientData.name}
|
||||
Authorize {context.client_name}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
This application wants to access your account
|
||||
@@ -50,31 +133,42 @@ export default function OIDCConsentPage() {
|
||||
|
||||
<Card className="p-4 bg-secondary/30 border-0 mb-6">
|
||||
<p className="text-sm text-foreground font-medium mb-3">
|
||||
{clientData.name} is requesting access to:
|
||||
{context.client_name} is requesting access to:
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{clientData.scopes.map((scope) => (
|
||||
<li key={scope.id} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
|
||||
{scope.id === "openid" && <Shield className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "profile" && <User className="w-4 h-4 text-accent" />}
|
||||
{scope.id === "email" && <Mail className="w-4 h-4 text-accent" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{scope.name}</p>
|
||||
<p className="text-xs text-muted-foreground">{scope.description}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{context.scopes.map((scope) => {
|
||||
const meta = SCOPE_META[scope];
|
||||
const Icon = meta?.icon ?? Key;
|
||||
return (
|
||||
<li key={scope} className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-4 h-4 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">
|
||||
{meta?.label ?? scope}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{meta?.description ?? scope}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
|
||||
<Building2 className="w-4 h-4" />
|
||||
<span>
|
||||
Redirecting to: <span className="font-mono text-foreground">{clientData.redirectUri}</span>
|
||||
</span>
|
||||
</div>
|
||||
{context.redirect_uri && (
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
|
||||
<Building2 className="w-4 h-4" />
|
||||
<span>
|
||||
Redirecting to:{" "}
|
||||
<span className="font-mono text-foreground">
|
||||
{new URL(context.redirect_uri).origin}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator className="mb-6" />
|
||||
|
||||
@@ -93,8 +187,12 @@ export default function OIDCConsentPage() {
|
||||
className="flex-1"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{isLoading ? "Authorizing..." : "Allow"}
|
||||
{isLoading ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{isLoading ? "Authorizing…" : "Allow"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,14 +1,26 @@
|
||||
import { AlertTriangle, ArrowLeft, Home } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, useSearchParams } from "react-router-dom";
|
||||
|
||||
const ERROR_DESCRIPTIONS: Record<string, string> = {
|
||||
invalid_request: "The request was missing a required parameter or was otherwise malformed.",
|
||||
unauthorized_client: "The client is not authorized to request an authorization code using this method.",
|
||||
access_denied: "The resource owner or authorization server denied the request.",
|
||||
unsupported_response_type: "The authorization server does not support obtaining an authorization code using this method.",
|
||||
invalid_scope: "The requested scope is invalid, unknown, or malformed.",
|
||||
server_error: "The authorization server encountered an unexpected condition that prevented it from fulfilling the request.",
|
||||
temporarily_unavailable: "The authorization server is temporarily unavailable. Please try again later.",
|
||||
};
|
||||
|
||||
export default function OIDCErrorPage() {
|
||||
// Mock error data - will be parsed from URL params
|
||||
const errorData = {
|
||||
error: "invalid_request",
|
||||
description: "The request was missing a required parameter or was otherwise malformed.",
|
||||
clientName: "Unknown Application",
|
||||
};
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const error = searchParams.get("error") || "server_error";
|
||||
const errorDescription =
|
||||
searchParams.get("error_description") ||
|
||||
ERROR_DESCRIPTIONS[error] ||
|
||||
"An unexpected error occurred during authentication.";
|
||||
const clientName = searchParams.get("client") || "the application";
|
||||
|
||||
return (
|
||||
<div className="auth-card text-center">
|
||||
@@ -20,15 +32,16 @@ export default function OIDCErrorPage() {
|
||||
Authentication Error
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-2 mb-4">
|
||||
There was a problem with the authentication request.
|
||||
There was a problem with the authentication request from{" "}
|
||||
<span className="font-medium text-foreground">{clientName}</span>.
|
||||
</p>
|
||||
|
||||
<div className="bg-destructive/5 border border-destructive/20 rounded-lg p-4 mb-6 text-left">
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
Error: <code className="text-destructive">{errorData.error}</code>
|
||||
Error: <code className="text-destructive">{error}</code>
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{errorData.description}
|
||||
{decodeURIComponent(errorDescription)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Mail, Lock, User, ArrowRight, ArrowLeft } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { PasswordStrengthMeter, isPasswordValid } from "@/components/auth/PasswordStrengthMeter";
|
||||
import { BannerAlert } from "@/components/auth/BannerAlert";
|
||||
import { api, ApiError } from "@/lib/api";
|
||||
|
||||
type RegistrationState = "form" | "success" | "disabled";
|
||||
|
||||
export default function RegisterPage() {
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
@@ -42,22 +42,25 @@ export default function RegisterPage() {
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
// Mock registration - will be replaced with actual API call
|
||||
// POST /api/auth/register
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
|
||||
// Simulate different responses
|
||||
const mockResponse = "success" as RegistrationState | "error";
|
||||
|
||||
if (mockResponse === "disabled") {
|
||||
setState("disabled");
|
||||
} else if (mockResponse === "error") {
|
||||
setError("An error occurred. Please try again.");
|
||||
try {
|
||||
await api.auth.register(email, password, name.trim() || undefined);
|
||||
// Show "check your email" — verification email was sent
|
||||
setState("success");
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
if (err.code === 409) {
|
||||
setError("An account with this email already exists.");
|
||||
} else if (err.code === 403 || (err.message && err.message.toLowerCase().includes("disabled"))) {
|
||||
setState("disabled");
|
||||
} else {
|
||||
setError(err.message || "An error occurred. Please try again.");
|
||||
}
|
||||
} else {
|
||||
setState("success");
|
||||
setError("An error occurred. Please try again.");
|
||||
}
|
||||
}, 1000);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Registration disabled state
|
||||
|
||||
@@ -1,27 +1,43 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Lock, ArrowRight, CheckCircle } from "lucide-react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { Lock, ArrowRight, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api";
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const token = searchParams.get("token") || "";
|
||||
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
if (password !== confirmPassword) {
|
||||
setError("Passwords do not match.");
|
||||
return;
|
||||
}
|
||||
if (!token) {
|
||||
setError("Invalid reset link. Please request a new one.");
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
try {
|
||||
await api.auth.resetPassword(token, password);
|
||||
setIsSuccess(true);
|
||||
}, 1000);
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof Error ? err.message : "Failed to reset password. The link may be expired.";
|
||||
setError(msg);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
@@ -96,7 +112,7 @@ export default function ResetPasswordPage() {
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
"Resetting..."
|
||||
<><Loader2 className="w-4 h-4 mr-2 animate-spin" />Resetting...</>
|
||||
) : (
|
||||
<>
|
||||
Reset password
|
||||
@@ -104,6 +120,13 @@ export default function ResetPasswordPage() {
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { BannerAlert } from "@/components/auth/BannerAlert";
|
||||
import { api, ApiError } from "@/lib/api";
|
||||
|
||||
type VerificationState = "verifying" | "success" | "error" | "resend";
|
||||
|
||||
@@ -22,21 +23,20 @@ export default function VerifyEmailPage() {
|
||||
if (token && state === "verifying") {
|
||||
verifyToken(token);
|
||||
}
|
||||
}, [token, state]);
|
||||
}, [token]);
|
||||
|
||||
const verifyToken = async (verificationToken: string) => {
|
||||
// Mock verification - POST /api/auth/verify-email?token=...
|
||||
setTimeout(() => {
|
||||
// Simulate different responses
|
||||
const mockSuccess = Math.random() > 0.3; // 70% success rate for demo
|
||||
|
||||
if (mockSuccess) {
|
||||
setState("success");
|
||||
try {
|
||||
await api.auth.verifyEmail(verificationToken);
|
||||
setState("success");
|
||||
} catch (err) {
|
||||
setState("error");
|
||||
if (err instanceof ApiError) {
|
||||
setErrorMessage(err.message || "This verification link has expired or is invalid.");
|
||||
} else {
|
||||
setState("error");
|
||||
setErrorMessage("This verification link has expired or is invalid.");
|
||||
}
|
||||
}, 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResendVerification = async (e: React.FormEvent) => {
|
||||
@@ -44,11 +44,14 @@ export default function VerifyEmailPage() {
|
||||
setIsResending(true);
|
||||
setResendSuccess(false);
|
||||
|
||||
// Mock resend - POST /api/auth/request-email-verification
|
||||
setTimeout(() => {
|
||||
try {
|
||||
await api.auth.resendVerification(resendEmail);
|
||||
} catch {
|
||||
// Always show success to avoid leaking account existence
|
||||
} finally {
|
||||
setIsResending(false);
|
||||
setResendSuccess(true);
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
// Loading / Verifying state
|
||||
|
||||
Reference in New Issue
Block a user