96 lines
3.3 KiB
TypeScript
96 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import Cookies from "js-cookie";
|
|
import { logout, loginUser } from "../utils/userHandler";
|
|
type LoginCardProps = {
|
|
onClose: () => void;
|
|
};
|
|
|
|
const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black/35">
|
|
<div className="max-w-sm bg-white dark:bg-gray-900 rounded-xl shadow-md p-8 relative">
|
|
<button
|
|
className="absolute top-4 right-4 bg-red-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold shadow hover:bg-red-600 transition focus:outline-none focus:ring-2 focus:ring-red-400"
|
|
onClick={onClose}
|
|
aria-label="Close"
|
|
>
|
|
×
|
|
</button>
|
|
<h2 className="text-black dark:text-white text-2xl font-bold mb-6 text-center">
|
|
Login
|
|
</h2>
|
|
<form
|
|
onSubmit={async (event) => {
|
|
event.preventDefault();
|
|
const formData = new FormData(event.currentTarget);
|
|
const username = formData.get("username");
|
|
const password = formData.get("password");
|
|
loginUser(username as string, password as string);
|
|
}}
|
|
className="space-y-4 text-black dark:text-white"
|
|
>
|
|
<div>
|
|
<label
|
|
htmlFor="username"
|
|
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
|
>
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
required
|
|
id="username"
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="password"
|
|
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
|
|
>
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
required
|
|
id="password"
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
|
|
/>
|
|
</div>
|
|
{Cookies.get("name") ? (
|
|
<p></p>
|
|
) : (
|
|
<input
|
|
type="submit"
|
|
value="Login"
|
|
className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
|
|
/>
|
|
)}
|
|
</form>
|
|
{Cookies.get("name") ? (
|
|
<button
|
|
className="w-full bg-black dark:bg-gray-800 text-white font-semibold py-2 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition"
|
|
onClick={logout}
|
|
>
|
|
Logout
|
|
</button>
|
|
) : (
|
|
<p className="text-center text-gray-500 dark:text-gray-400 mt-4">
|
|
Don't have an account?{" "}
|
|
<a
|
|
href="/register"
|
|
className="text-blue-600 dark:text-blue-400 hover:underline"
|
|
>
|
|
Register here
|
|
</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginCard;
|