77 lines
3.4 KiB
TypeScript
77 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { use, useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ShieldCheck, Loader2 } from "lucide-react";
|
|
|
|
interface PageProps {
|
|
searchParams: Promise<{
|
|
token_hash?: string;
|
|
type?: string;
|
|
next?: string;
|
|
}>;
|
|
}
|
|
|
|
export default function VerifyLinkPage({ searchParams }: PageProps) {
|
|
const params = use(searchParams);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const tokenHash = params.token_hash || "";
|
|
const type = params.type || "";
|
|
const next = params.next || "/";
|
|
|
|
const handleSubmit = () => {
|
|
setIsSubmitting(true);
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex min-h-svh w-full items-center justify-center p-6 md:p-10 overflow-hidden bg-slate-950">
|
|
{/* Background gradients for rich aesthetics */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-60" />
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />
|
|
<div className="absolute bottom-0 right-1/4 w-[400px] h-[400px] bg-indigo-500/10 rounded-full blur-[100px] pointer-events-none" />
|
|
|
|
<div className="relative w-full max-w-md z-10">
|
|
<Card className="border-slate-800/80 bg-slate-900/60 backdrop-blur-xl shadow-2xl transition-all duration-300 hover:border-slate-700/80">
|
|
<CardHeader className="flex flex-col items-center justify-center text-center space-y-4 pt-8">
|
|
<div className="p-3.5 bg-blue-500/10 rounded-full text-blue-400 border border-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.15)] animate-pulse">
|
|
<ShieldCheck className="w-8 h-8" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<CardTitle className="text-2xl font-bold tracking-tight text-slate-100">
|
|
Sicherheit prüfen
|
|
</CardTitle>
|
|
<p className="text-sm text-slate-400 max-w-xs mx-auto">
|
|
Bitte bestätigen Sie den Vorgang mit einem Klick auf den Button, um fortzufahren.
|
|
</p>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="pb-8">
|
|
<form action="/auth/confirm" method="GET" onSubmit={handleSubmit} className="w-full">
|
|
<input type="hidden" name="token_hash" value={tokenHash} />
|
|
<input type="hidden" name="type" value={type} />
|
|
<input type="hidden" name="next" value={next} />
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting || !tokenHash}
|
|
className="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium shadow-[0_0_20px_rgba(59,130,246,0.25)] transition-all duration-200 h-11 active:scale-[0.98] disabled:opacity-50"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Wird weitergeleitet...
|
|
</>
|
|
) : (
|
|
"Bestätigen & Fortfahren"
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|