89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { CheckCircle2, XCircle } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { createBrowserSupabaseClient } from "@/lib/supabase";
|
|
|
|
export default function AuthCallbackPage() {
|
|
const router = useRouter();
|
|
const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
|
|
|
|
useEffect(() => {
|
|
const supabase = createBrowserSupabaseClient();
|
|
|
|
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
|
|
if ((event === "SIGNED_IN" || event === "TOKEN_REFRESHED") && session) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
}
|
|
});
|
|
|
|
supabase.auth.getSession().then(({ data: { session } }) => {
|
|
if (session) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
} else {
|
|
setTimeout(() => {
|
|
supabase.auth.getSession().then(({ data: { session: s } }) => {
|
|
if (s) {
|
|
setStatus("success");
|
|
setTimeout(() => router.replace("/kunden/dashboard"), 1500);
|
|
} else {
|
|
setStatus("error");
|
|
}
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
|
|
return () => subscription.unsubscribe();
|
|
}, [router]);
|
|
|
|
if (status === "loading") {
|
|
return (
|
|
<div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
|
|
<div className="text-center">
|
|
<div className="w-10 h-10 border-2 border-orange-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
|
<p className="text-slate-400 text-sm">E-Mail-Adresse wird bestätigt…</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (status === "success") {
|
|
return (
|
|
<div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
|
|
<div className="w-full max-w-md text-center bg-[#18212f] border border-gray-800 rounded-2xl p-8">
|
|
<div className="w-12 h-12 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-green-500/20">
|
|
<CheckCircle2 className="w-6 h-6 text-green-400" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white mb-2">E-Mail bestätigt!</h2>
|
|
<p className="text-slate-400 text-sm">Sie werden automatisch weitergeleitet…</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#111925] flex items-center justify-center px-4">
|
|
<div className="w-full max-w-md text-center bg-[#18212f] border border-gray-800 rounded-2xl p-8">
|
|
<div className="w-12 h-12 bg-red-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-red-500/20">
|
|
<XCircle className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white mb-2">Bestätigung fehlgeschlagen</h2>
|
|
<p className="text-slate-400 text-sm mb-6">
|
|
Der Bestätigungslink ist abgelaufen oder ungültig. Bitte registrieren Sie sich erneut.
|
|
</p>
|
|
<Link
|
|
href="/kunden/registrieren"
|
|
className="inline-flex items-center justify-center bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-semibold px-6 py-2.5 text-sm transition-colors"
|
|
>
|
|
Zur Registrierung
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|