86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
export default function GoogleCallbackPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
|
|
const [message, setMessage] = useState("");
|
|
|
|
useEffect(() => {
|
|
const code = searchParams.get("code");
|
|
const error = searchParams.get("error");
|
|
|
|
if (error) {
|
|
setStatus("error");
|
|
setMessage(error === "access_denied" ? "You declined Google access." : `Google returned an error: ${error}`);
|
|
return;
|
|
}
|
|
|
|
if (!code) {
|
|
setStatus("error");
|
|
setMessage("No authorization code received from Google.");
|
|
return;
|
|
}
|
|
|
|
apiFetch<{ connected: boolean; googleEmail: string }>("/api/google/exchange", {
|
|
method: "POST",
|
|
body: JSON.stringify({ code }),
|
|
}).then((res) => {
|
|
if (res.error) {
|
|
setStatus("error");
|
|
setMessage(res.error.message ?? "Failed to connect Google account.");
|
|
} else {
|
|
setStatus("success");
|
|
setMessage(`Connected as ${res.data?.googleEmail ?? "your Google account"}.`);
|
|
setTimeout(() => router.replace("/exports"), 2000);
|
|
}
|
|
});
|
|
}, [searchParams, router]);
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background">
|
|
<div className="glass-panel rounded-2xl p-10 text-center max-w-sm w-full shadow-lg">
|
|
{status === "loading" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full border-4 border-primary border-t-transparent animate-spin mx-auto mb-4" />
|
|
<p className="text-sm text-muted-foreground">Connecting your Google account...</p>
|
|
</>
|
|
)}
|
|
{status === "success" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full bg-green-500/10 flex items-center justify-center mx-auto mb-4">
|
|
<svg className="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm font-semibold text-foreground">Google Connected!</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{message}</p>
|
|
<p className="text-xs text-muted-foreground mt-2">Redirecting to Exports...</p>
|
|
</>
|
|
)}
|
|
{status === "error" && (
|
|
<>
|
|
<div className="h-12 w-12 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-4">
|
|
<svg className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</div>
|
|
<p className="text-sm font-semibold text-foreground">Connection Failed</p>
|
|
<p className="text-xs text-muted-foreground mt-1">{message}</p>
|
|
<button
|
|
onClick={() => router.replace("/exports")}
|
|
className="mt-4 text-xs text-primary hover:underline"
|
|
>
|
|
Back to Exports
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|