111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Egg, Loader2, Tv } from "lucide-react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { authApi } from "@/lib/api";
|
|
import { useStore } from "@/lib/store";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const { isAuthenticated } = useStore();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
router.push("/dashboard");
|
|
}
|
|
}, [isAuthenticated, router]);
|
|
|
|
const handlePlexLogin = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await authApi.getPlexUrl();
|
|
sessionStorage.setItem("plexPinId", response.data.pinId);
|
|
window.location.href = response.data.authUrl;
|
|
} catch (error) {
|
|
toast.error("Failed to initiate Plex login");
|
|
console.error(error);
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
if (!isMounted) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background p-4">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
|
<Egg className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-2xl font-display">The Coop</CardTitle>
|
|
<CardDescription>Loading...</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-background p-4">
|
|
<Card className="w-full max-w-md border-2">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-4">
|
|
<Egg className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<CardTitle className="text-2xl font-display">
|
|
Enter the Coop
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Sign in with Plex to start earning $COOP tokens
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
onClick={handlePlexLogin}
|
|
disabled={isLoading}
|
|
className="w-full h-12 text-lg"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-5 w-5 animate-spin" />
|
|
Connecting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Tv className="mr-2 h-5 w-5" />
|
|
Sign in with Plex
|
|
</>
|
|
)}
|
|
</Button>
|
|
<p className="mt-4 text-center text-sm text-muted-foreground">
|
|
Join the flock and get rewarded for your watch time
|
|
</p>
|
|
<p className="mt-2 text-center text-xs text-muted-foreground">
|
|
<a
|
|
href="/privacy"
|
|
className="underline hover:text-primary transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|