104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import LoginModal from "../features/Auth/LoginModal"; // Your LoginModal component
|
|
|
|
import "./page.scss"; // Global styles for LoginModal and page
|
|
import Modal from "../components/Modal/Modal";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const redirectPath = searchParams.get("redirect") || "/dashboard";
|
|
|
|
const [authMessage, setAuthMessage] = useState("");
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if already logged in by trying to fetch a protected resource or checking a client-accessible flag
|
|
// For HTTP-only cookies, you can't directly read the token here.
|
|
// Instead, you'd rely on a server-side check (e.g., in middleware or a Server Component)
|
|
// or a simple client-side flag if your backend also sets one (less secure for token itself).
|
|
// For this example, we'll assume if they land here, they need to log in.
|
|
// A more robust check might involve a quick API call to /api/auth/status
|
|
// if the token is in an HTTP-only cookie.
|
|
const checkAuthStatus = async () => {
|
|
// In a real app, this might be a call to a /api/auth/status endpoint
|
|
// that checks the HTTP-only cookie on the server and returns a boolean.
|
|
// For now, we'll rely on the middleware to redirect if unauthenticated.
|
|
// If the user somehow lands on /login with a valid cookie, the middleware
|
|
// should have redirected them already.
|
|
};
|
|
checkAuthStatus();
|
|
}, []);
|
|
|
|
const handleLogin = async (email: string, password: string) => {
|
|
setAuthMessage("Attempting login...");
|
|
try {
|
|
const response = await fetch("/api/auth/login", {
|
|
// <--- CALLING YOUR INTERNAL ROUTE HANDLER
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Check if the response status is 2xx
|
|
// Backend has successfully set the HTTP-only cookie
|
|
setAuthMessage("Login successful!");
|
|
setIsLoggedIn(true);
|
|
// Redirect to the intended path after successful login
|
|
router.replace(redirectPath);
|
|
} else {
|
|
// Handle login errors (e.g., invalid credentials)
|
|
setAuthMessage(data.message || "Login failed. Please try again.");
|
|
setIsLoggedIn(false);
|
|
}
|
|
} catch (error) {
|
|
console.error("Login failed:", error);
|
|
setAuthMessage("An error occurred during login. Please try again later.");
|
|
setIsLoggedIn(false);
|
|
}
|
|
return isLoggedIn; // Return the current login status
|
|
};
|
|
|
|
const clearAuthMessage = () => setAuthMessage("");
|
|
|
|
// If user is already logged in (e.g., redirected by middleware to dashboard),
|
|
// this page shouldn't be visible. The middleware should handle the primary redirect.
|
|
// This `isLoggedIn` state here is more for internal page logic if the user somehow
|
|
// bypasses middleware or lands on /login with a valid session.
|
|
// For a robust setup, the middleware is key.
|
|
|
|
return (
|
|
<div className="page-container">
|
|
<div className="page-container__content">
|
|
<h1 className="page-container__title">Payment Backoffice</h1>
|
|
<p className="page-container__text">
|
|
Please log in to access the backoffice.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Always show the modal on the login page */}
|
|
<Modal
|
|
open={true} // Always open on the login page
|
|
onClose={() => {
|
|
/* No direct close for login modal, user must log in */
|
|
}}
|
|
title="Login to Backoffice"
|
|
>
|
|
<LoginModal
|
|
onLogin={handleLogin} // Pass the API call function
|
|
authMessage={authMessage}
|
|
clearAuthMessage={clearAuthMessage}
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|