139 lines
4.3 KiB
TypeScript
139 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { BrandedAuthShell } from '@/components/shared/branded-auth-shell';
|
|
|
|
/**
|
|
* Validate the `?next=` post-login redirect target. auth-flow-auditor M10:
|
|
* an unvalidated `next` lets `/portal/login?next=https://evil.example`
|
|
* navigate cross-site after sign-in. Only allow same-origin paths
|
|
* scoped to the portal surface - anything else falls back to the
|
|
* dashboard.
|
|
*/
|
|
function safeNextPath(raw: string | null): string {
|
|
const fallback = '/portal/dashboard';
|
|
if (!raw) return fallback;
|
|
// Reject absolute URLs (http://, https://, //evil.example) and
|
|
// protocol-relative URLs. Only `/portal/...` paths are kept.
|
|
if (!raw.startsWith('/portal/')) return fallback;
|
|
if (raw.startsWith('//')) return fallback;
|
|
return raw;
|
|
}
|
|
|
|
export default function PortalLoginPage() {
|
|
const router = useRouter();
|
|
const search = useSearchParams();
|
|
// The middleware backstop (src/proxy.ts) redirects unauthenticated
|
|
// portal visitors with `?redirect=`; older links / manual callers may
|
|
// still use `?next=`. Accept either, preferring `redirect`.
|
|
const next = safeNextPath(search.get('redirect') ?? search.get('next'));
|
|
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await fetch('/api/portal/auth/sign-in', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const data = await res.json().catch(() => ({}));
|
|
setError((data as { error?: string }).error ?? 'Invalid email or password');
|
|
return;
|
|
}
|
|
|
|
// typedRoutes: `next` is a runtime string we can't statically check.
|
|
router.replace(next as never);
|
|
router.refresh();
|
|
} catch {
|
|
setError('Unable to connect. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<BrandedAuthShell>
|
|
<div className="text-center mb-6">
|
|
<h1 className="text-xl font-semibold text-gray-900">Client Portal</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Sign in to your account</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="email">Email address</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
autoFocus
|
|
autoComplete="email"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Link
|
|
href="/portal/forgot-password"
|
|
className="text-xs text-[#0058b3] underline-offset-2 underline hover:no-underline"
|
|
>
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
autoComplete="current-password"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full bg-[#007bff] hover:bg-[#0069d9] text-white"
|
|
disabled={loading || !email || !password}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
|
Signing in…
|
|
</>
|
|
) : (
|
|
'Sign in'
|
|
)}
|
|
</Button>
|
|
</form>
|
|
|
|
<p className="text-center text-xs text-gray-400 mt-6">
|
|
This portal is for existing clients only.
|
|
</p>
|
|
</BrandedAuthShell>
|
|
);
|
|
}
|