69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
'use client';
|
|
import { useFormState, useFormStatus } from 'react-dom';
|
|
import { login } from '@/lib/auth-actions';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { useEffect } from 'react';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { Logo } from '@/components/icons';
|
|
|
|
const initialState = {
|
|
message: '',
|
|
};
|
|
|
|
function SubmitButton() {
|
|
const { pending } = useFormStatus();
|
|
return (
|
|
<Button type="submit" className="w-full" disabled={pending}>
|
|
{pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Login
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
const [state, formAction] = useFormState(login, initialState);
|
|
const { toast } = useToast();
|
|
|
|
useEffect(() => {
|
|
if (state?.message) {
|
|
toast({
|
|
title: 'Login Failed',
|
|
description: state.message,
|
|
variant: 'destructive',
|
|
});
|
|
}
|
|
}, [state, toast]);
|
|
|
|
return (
|
|
<main className="flex items-center justify-center min-h-screen bg-background">
|
|
<Card className="w-full max-w-sm">
|
|
<CardHeader className="text-center">
|
|
<div className="flex justify-center items-center mb-4">
|
|
<Logo className="h-8 w-8 mr-2 text-primary" />
|
|
<h1 className="font-bold text-2xl">PromptVerse</h1>
|
|
</div>
|
|
<CardTitle>Welcome Back</CardTitle>
|
|
<CardDescription>Enter your password to access your prompts.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form action={formAction} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
/>
|
|
</div>
|
|
<SubmitButton />
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
);
|
|
}
|