105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
"use client"; // This MUST be the very first line of the file
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import "./LoginModal.scss"; // Adjust path based on your actual structure
|
|
import { clearAuthMessage } from "@/app/redux/auth/authSlice";
|
|
|
|
// Define the props interface for LoginModal
|
|
type LoginModalProps = {
|
|
onLogin: (email: string, password: string) => Promise<boolean>;
|
|
authMessage: string;
|
|
clearAuthMessage: () => void;
|
|
};
|
|
// LoginModal component
|
|
export default function LoginModal({ onLogin }: LoginModalProps) {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
console.log("LoginModal rendered"); // Debugging log to check if the component renders
|
|
|
|
// Effect to clear authentication messages when email or password inputs change
|
|
useEffect(() => {
|
|
clearAuthMessage();
|
|
}, [email, password]); // Dependency array ensures effect runs when these change
|
|
|
|
// Handler for form submission
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault(); // Prevent default form submission behavior
|
|
setIsLoading(true); // Set loading state to true
|
|
await onLogin(email, password); // Call the passed onLogin function (now uncommented)
|
|
setIsLoading(false); // Set loading state back to false after login attempt
|
|
};
|
|
return (
|
|
// The content of the login modal, without the modal overlay/wrapper
|
|
<form onSubmit={handleSubmit} className="login-form">
|
|
{/* Email input field */}
|
|
<div className="login-form__group">
|
|
<label htmlFor="email" className="login-form__label">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
className="login-form__input"
|
|
placeholder="admin@example.com"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
{/* Password input field */}
|
|
<div className="login-form__group">
|
|
<label htmlFor="password" className="login-form__label">
|
|
Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
className="login-form__input"
|
|
placeholder="password123"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
required
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="login-form__button"
|
|
disabled={isLoading} // Disable button while loading
|
|
>
|
|
{isLoading ? (
|
|
<svg
|
|
className="login-form__spinner"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
{" "}
|
|
{/* BEM class name */}
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
></circle>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
></path>
|
|
</svg>
|
|
) : (
|
|
"Login" // Button text for normal state
|
|
)}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|