import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google" import refreshAccessToken from './refreshAcesstoken'; import axiosapi from '../../api/AuthenticationApi'; function LoginPage() { const Navigate = useNavigate(); useEffect(() => { if (!refreshAccessToken()) { Navigate("/"); } }, []); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const handleEmailChange = event => { setEmail(event.target.value); }; const handlePasswordChange = event => { setPassword(event.target.value); }; const handleSubmit = event => { event.preventDefault(); // Send a POST request to the authentication API axiosapi .apiUserLogin({ email: email, password: password, }) .then(res => { // On successful login, store tokens and set the authorization header localStorage.setItem("access_token", res.data.access); localStorage.setItem("refresh_token", res.data.refresh); axiosapi.axiosInstance.defaults.headers["Authorization"] = "Bearer " + res.data.access; Navigate("/"); }) .catch(err => { console.log("Login failed"); console.log(err); }); }; const googleLoginImplicit = useGoogleLogin({ flow: "auth-code", redirect_uri: "postmessage", onSuccess: async response => { try { const loginResponse = await axiosapi.googleLogin(response.code); if (loginResponse && loginResponse.data) { const { access_token, refresh_token } = loginResponse.data; localStorage.setItem("access_token", access_token); localStorage.setItem("refresh_token", refresh_token); Navigate("/"); } } catch (error) { console.error("Error with the POST request:", error); } }, onError: errorResponse => console.log(errorResponse), }); return (
{/* Left Section (Login Box) */}

Log in to your account

{/* Email Input */}
{/* Password Input */}
{/* Login Button */}
OR
{/* Login with Google Button */} {/* Forgot Password Link */}
Forgot your password?
{/* Right Section (Blurred Image Background) */}
Text Overlay
); } export default LoginPage;