1'use client';
2
3import { useState } from 'react';
4import { ReactifyLoginForm } from '@/components/reactify/login-form';
5import { useRouter } from 'next/navigation';
6import { Package } from 'lucide-react'; // Or your desired logo component
7
8export default function LoginPageExample() {
9 const router = useRouter();
10 const [isLoading, setIsLoading] = useState(false);
11 const [errorMessage, setErrorMessage] = useState<string | null>(null);
12
13 const handleSubmit = async (data: any) => {
14 setIsLoading(true);
15 setErrorMessage(null);
16 // Simulate API call for login
17 await new Promise(resolve => setTimeout(resolve, 1000));
18 if (data.email === "error@example.com") {
19 setErrorMessage("Invalid credentials.");
20 } else {
21 alert('Login successful! (Simulated)');
22 // router.push('/dashboard'); // Redirect on success
23 }
24 setIsLoading(false);
25 };
26
27 const handleForgotPassword = () => {
28 router.push('/auth-demo/forgot-password');
29 };
30
31 const handleSignup = () => {
32 router.push('/auth-demo/signup');
33 };
34
35 return (
36 <ReactifyLoginForm
37 logo={<Package className="h-10 w-10 text-primary" />}
38 onSubmit={handleSubmit}
39 onForgotPassword={handleForgotPassword}
40 onSignup={handleSignup}
41 isLoading={isLoading}
42 errorMessage={errorMessage}
43 title="Login to Your Account"
44 description="Access your dashboard and features."
45 />
46 );
47}