From 91aac3dec60e0d83df4e451a0528ba746c8a411d Mon Sep 17 00:00:00 2001 From: sosokker Date: Thu, 23 Nov 2023 04:57:15 +0700 Subject: [PATCH] Update login page and fix bug --- frontend/src/api/AuthenticationApi.jsx | 9 +- frontend/src/components/FlaotingParticles.jsx | 91 +++++++++++ .../components/authentication/LoginPage.jsx | 151 +++++++++--------- .../components/landingPage/LandingPage.jsx | 125 ++------------- .../components/navigations/NavPreLogin.jsx | 16 ++ 5 files changed, 194 insertions(+), 198 deletions(-) create mode 100644 frontend/src/components/FlaotingParticles.jsx create mode 100644 frontend/src/components/navigations/NavPreLogin.jsx diff --git a/frontend/src/api/AuthenticationApi.jsx b/frontend/src/api/AuthenticationApi.jsx index bca81d5..8f6e5e3 100644 --- a/frontend/src/api/AuthenticationApi.jsx +++ b/frontend/src/api/AuthenticationApi.jsx @@ -7,14 +7,9 @@ const baseURL = import.meta.env.VITE_BASE_URL; const apiUserLogin = (data) => { return axiosInstance .post("token/obtain/", data) - .then((response) => { - console.log(response.statusText); - - return response; - }) + .then((response) => response) .catch((error) => { - console.log("apiUserLogin error: ", error); - return error; + throw error; }); }; diff --git a/frontend/src/components/FlaotingParticles.jsx b/frontend/src/components/FlaotingParticles.jsx new file mode 100644 index 0000000..c6d103a --- /dev/null +++ b/frontend/src/components/FlaotingParticles.jsx @@ -0,0 +1,91 @@ +import { useCallback } from "react"; +import Particles from "react-tsparticles"; +import { loadFull } from "tsparticles"; + +export function FloatingParticles() { + const particlesInit = useCallback(async (engine) => { + await loadFull(engine); + }, []); + + return ( +
+ +
+ ); +} diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index 5ed8d83..a6f406b 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,23 +1,19 @@ -import { useEffect, useState } from "react"; +import { useState } from "react"; import { useNavigate, redirect } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; -import refreshAccessToken from "./refreshAcessToken"; import axiosapi from "../../api/AuthenticationApi"; import { FcGoogle } from "react-icons/fc"; import { useAuth } from "src/hooks/AuthHooks"; +import { FloatingParticles } from "../FlaotingParticles"; +import { NavPreLogin } from "../navigations/NavPreLogin"; function LoginPage() { const { setIsAuthenticated } = useAuth(); const Navigate = useNavigate(); - useEffect(() => { - if (!refreshAccessToken()) { - Navigate("/"); - } - }, []); - const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [error, setError] = useState(null); const handleEmailChange = (event) => { setEmail(event.target.value); @@ -26,6 +22,7 @@ function LoginPage() { const handlePasswordChange = (event) => { setPassword(event.target.value); }; + const handleSubmit = (event) => { event.preventDefault(); @@ -36,17 +33,13 @@ function LoginPage() { 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; setIsAuthenticated(true); redirect("/"); }) .catch((err) => { - console.log("Login failed"); - console.log(err); + setError("Incorrect username or password"); }); }; @@ -70,72 +63,80 @@ function LoginPage() { }, onError: (errorResponse) => console.log(errorResponse), }); - { - } return ( -
- - {/* Login Box */} -
-
-

Login

- {/* Email Input */} -
- - -
- {/* Password Input */} -
- - -
- {/* Login Button */} - -
OR
- {/* Login with Google Button */} - - {/* Forgot Password Link */} -
- - Forgot your password? - +
+ +
+ {/* Login Box */} +
+
+

Log in to your account

+ {/* Error Message */} + {error && ( +
+ + + + {error} +
+ )} + {/* Email Input */} +
+ + +
+ {/* Password Input */} +
+ + +
+ {/* Login Button */} + +
OR
+ {/* Login with Google Button */} +
+
+ +
); diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx index f5895ec..e26a44a 100644 --- a/frontend/src/components/landingPage/LandingPage.jsx +++ b/frontend/src/components/landingPage/LandingPage.jsx @@ -1,119 +1,19 @@ -import { useCallback } from "react"; -import Particles from "react-tsparticles"; -import { loadFull } from "tsparticles"; +import { FloatingParticles } from "../FlaotingParticles"; export function LandingPage() { - const particlesInit = useCallback(async (engine) => { - console.log(engine); - await loadFull(engine); - }, []); - - const particlesLoaded = useCallback(async (container) => { - console.log(container); - }, []); return ( -
+
{/* Particles Container */} -
- -
+ {/* Navbar */}
-

+

Manage your task with{" "} TurTask @@ -124,19 +24,12 @@ export function LandingPage() {

-

- Unleash productivity with our all-in-one task and project - management solution. Streamline your workflow, automate tasks, - and conquer projects effortlessly. -

- diff --git a/frontend/src/components/navigations/NavPreLogin.jsx b/frontend/src/components/navigations/NavPreLogin.jsx new file mode 100644 index 0000000..e9ce035 --- /dev/null +++ b/frontend/src/components/navigations/NavPreLogin.jsx @@ -0,0 +1,16 @@ +import { Link } from "react-router-dom"; + +export const NavPreLogin = ({ text, btn_text, link }) => { + return ( +
+
+
+
+

{text}

+ + {btn_text} + +
+
+ ); +};