114 lines
3.4 KiB
TypeScript
114 lines
3.4 KiB
TypeScript
|
||
import React, { useState } from 'react';
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
import { useToast } from "@/hooks/use-toast";
|
||
|
||
interface LoginPageProps {
|
||
onLogin: () => void;
|
||
}
|
||
|
||
export const LoginPage = ({ onLogin }: LoginPageProps) => {
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const { signIn } = useAuth();
|
||
const { toast } = useToast();
|
||
|
||
const handleLogin = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
|
||
try {
|
||
const { error } = await signIn(email, password);
|
||
|
||
if (error) {
|
||
toast({
|
||
title: "Login Error",
|
||
description: error.message,
|
||
variant: "destructive"
|
||
});
|
||
return;
|
||
}
|
||
|
||
toast({
|
||
title: "Success",
|
||
description: "Logged in successfully!"
|
||
});
|
||
|
||
onLogin();
|
||
} catch (err) {
|
||
toast({
|
||
title: "Error",
|
||
description: "An unexpected error occurred",
|
||
variant: "destructive"
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen flex">
|
||
{/* Left side with purple gradient */}
|
||
<div
|
||
className="bg-gradient-to-br flex flex-1 items-center justify-center p-12 text-white"
|
||
style={{
|
||
'--tw-gradient-from': '#4C4895',
|
||
'--tw-gradient-to': '#37337b',
|
||
'--tw-gradient-stops': 'var(--tw-gradient-from), var(--tw-gradient-to)',
|
||
} as React.CSSProperties}
|
||
>
|
||
<div className="max-w-md">
|
||
<h1 className="text-4xl font-bold mb-4">Cash Management Dashboard</h1>
|
||
<p className="text-lg text-purple-100">
|
||
Real-time Cash Reconciliation – Ensuring Accuracy & Transparency
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{/* Right side with login form */}
|
||
<div className="flex-1 bg-white flex items-center justify-center p-12">
|
||
<div className="w-full max-w-md">
|
||
<h2 className="text-2xl font-semibold text-purple-600 mb-8">Sign In to Your Dashboard</h2>
|
||
|
||
<form onSubmit={handleLogin} className="space-y-6">
|
||
<div>
|
||
<Input
|
||
type="email"
|
||
placeholder="Email address"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<Input
|
||
type="password"
|
||
placeholder="Enter Password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
|
||
disabled={loading}
|
||
/>
|
||
</div>
|
||
|
||
<Button
|
||
type="submit"
|
||
className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-lg"
|
||
disabled={loading}
|
||
>
|
||
{loading ? "Signing in..." : "Login to dashboard"}
|
||
</Button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|