TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update login page and fix bug

Browse Source
This commit is contained in:
sosokker 2023-11-23 04:57:15 +07:00
parent ca8e1d87dc
commit 91aac3dec6
5 changed files with 194 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/api/AuthenticationApi.jsx
View File

@ -7,14 +7,9 @@ const baseURL = import.meta.env.VITE_BASE_URL;
const apiUserLogin = (data) => { const apiUserLogin = (data) => {
return axiosInstance return axiosInstance
.post("token/obtain/", data) .post("token/obtain/", data)
.then((response) => { .then((response) => response)
console.log(response.statusText);
return response;
})
.catch((error) => { .catch((error) => {
console.log("apiUserLogin error: ", error); throw error;
return error;
}); });
}; };

91
frontend/src/components/FlaotingParticles.jsx Normal file
View File

@ -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 (
<div
style={{
position: "absolute",
width: "100%",
height: "100vh",
zIndex: 0,
backgroundColor: "#EBF2FA",
}}>
<Particles
id="particles"
init={particlesInit}
className="-z-10"
options={{
fpsLimit: 240,
smooth: true,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#4f46e5",
},
links: {
color: "#818cf8",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 2,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 40,
},
opacity: {
value: 0.5,
},
shape: {
type: "square",
},
size: {
value: { min: 4, max: 5 },
},
},
detectRetina: true,
}}
/>
</div>
);
}

151
frontend/src/components/authentication/LoginPage.jsx
View File

@ -1,23 +1,19 @@
import { useEffect, useState } from "react"; import { useState } from "react";
import { useNavigate, redirect } from "react-router-dom"; import { useNavigate, redirect } from "react-router-dom";
import { useGoogleLogin } from "@react-oauth/google"; import { useGoogleLogin } from "@react-oauth/google";
import refreshAccessToken from "./refreshAcessToken";
import axiosapi from "../../api/AuthenticationApi"; import axiosapi from "../../api/AuthenticationApi";
import { FcGoogle } from "react-icons/fc"; import { FcGoogle } from "react-icons/fc";
import { useAuth } from "src/hooks/AuthHooks"; import { useAuth } from "src/hooks/AuthHooks";
import { FloatingParticles } from "../FlaotingParticles";
import { NavPreLogin } from "../navigations/NavPreLogin";
function LoginPage() { function LoginPage() {
const { setIsAuthenticated } = useAuth(); const { setIsAuthenticated } = useAuth();
const Navigate = useNavigate(); const Navigate = useNavigate();
useEffect(() => {
if (!refreshAccessToken()) {
Navigate("/");
}
}, []);
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState(null);
const handleEmailChange = (event) => { const handleEmailChange = (event) => {
setEmail(event.target.value); setEmail(event.target.value);
@ -26,6 +22,7 @@ function LoginPage() {
const handlePasswordChange = (event) => { const handlePasswordChange = (event) => {
setPassword(event.target.value); setPassword(event.target.value);
}; };
const handleSubmit = (event) => { const handleSubmit = (event) => {
event.preventDefault(); event.preventDefault();
@ -36,17 +33,13 @@ function LoginPage() {
password: password, password: password,
}) })
.then((res) => { .then((res) => {
// On successful login, store tokens and set the authorization header
localStorage.setItem("access_token", res.data.access); localStorage.setItem("access_token", res.data.access);
localStorage.setItem("refresh_token", res.data.refresh); localStorage.setItem("refresh_token", res.data.refresh);
axiosapi.axiosInstance.defaults.headers["Authorization"] =
"Bearer " + res.data.access;
setIsAuthenticated(true); setIsAuthenticated(true);
redirect("/"); redirect("/");
}) })
.catch((err) => { .catch((err) => {
console.log("Login failed"); setError("Incorrect username or password");
console.log(err);
}); });
}; };
@ -70,72 +63,80 @@ function LoginPage() {
}, },
onError: (errorResponse) => console.log(errorResponse), onError: (errorResponse) => console.log(errorResponse),
}); });
{
}
return ( return (
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100"> <div>
<div <NavPreLogin text="Don't have account?" btn_text="Sign Up" link="/signup" />
aria-hidden="true" <div className="flex flex-row bg-neutral-400">
className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40" {/* Login Box */}
> <div className="flex items-center justify-center flex-1 z-50">
<div className="blur-[106px] h-56 bg-gradient-to-br from-pink-600 to-fuchsia-300"></div> <div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
<div className="blur-[106px] h-32 bg-gradient-to-r from-fuchsia-500 to-orange-500"></div> <h2 className="text-3xl font-bold">Log in to your account</h2>
</div> {/* Error Message */}
{/* Login Box */} {error && (
<div className="w-1/4 flex items-center justify-center"> <div role="alert" className="alert alert-error">
<div className="w-96 bg-white rounded-lg p-8 shadow-md space-y-4 z-10"> <svg
<h2 className="text-3xl font-bold text-center">Login</h2> xmlns="http://www.w3.org/2000/svg"
{/* Email Input */} className="stroke-current shrink-0 h-6 w-6"
<div className="form-control "> fill="none"
<label className="label" htmlFor="email"> viewBox="0 0 24 24">
<p className="text-bold"> <path
Email<span className="text-red-500 text-bold">*</span> strokeLinecap="round"
</p> strokeLinejoin="round"
</label> strokeWidth="2"
<input d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
className="input" />
type="email" </svg>
id="email" <span>{error}</span>
placeholder="Enter your email" </div>
onChange={handleEmailChange} )}
/> {/* Email Input */}
</div> <div className="form-control ">
{/* Password Input */} <label className="label" htmlFor="email">
<div className="form-control"> <p className="text-bold">
<label className="label" htmlFor="password"> Email<span className="text-red-500 text-bold">*</span>
<p className="text-bold"> </p>
Password<span className="text-red-500 text-bold">*</span> </label>
</p> <input
</label> className="input"
<input type="email"
className="input" id="email"
type="password" placeholder="Enter your email"
id="password" value={email}
placeholder="Enter your password" onChange={handleEmailChange}
onChange={handlePasswordChange} />
/> </div>
</div> {/* Password Input */}
{/* Login Button */} <div className="form-control">
<button className="btn btn-success w-full " onClick={handleSubmit}> <label className="label" htmlFor="password">
Login <p className="text-bold">
</button> Password<span className="text-red-500 text-bold">*</span>
<div className="divider">OR</div> </p>
{/* Login with Google Button */} </label>
<button <input
className="btn btn-outline btn-secondary w-full " className="input"
onClick={() => googleLoginImplicit()} type="password"
> id="password"
<FcGoogle className="rounded-full bg-white" /> placeholder="Enter your password"
Login with Google value={password}
</button> onChange={handlePasswordChange}
{/* Forgot Password Link */} />
<div className="justify-left"> </div>
<a href="#" className="text-blue-500 text-sm text-left"> {/* Login Button */}
Forgot your password? <button className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold" onClick={handleSubmit}>
</a> Login
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button className="btn bg-gray-200 btn-outline w-full " onClick={() => googleLoginImplicit()}>
<FcGoogle className="rounded-full bg-white" />
Login with Google
</button>
</div> </div>
</div> </div>
<div className="basis-1/2 bg-#ebf2fa h-screen z-0">
<FloatingParticles />
</div>
</div> </div>
</div> </div>
); );

125
frontend/src/components/landingPage/LandingPage.jsx
View File

@ -1,119 +1,19 @@
import { useCallback } from "react"; import { FloatingParticles } from "../FlaotingParticles";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
export function LandingPage() { export function LandingPage() {
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
return ( return (
<div className="bg-black"> <div>
{/* Particles Container */} {/* Particles Container */}
<div <FloatingParticles />
style={{
position: "absolute",
width: "100%",
height: "100vh",
zIndex: 0,
backgroundColor: "black",
}}
>
<Particles
id="particles"
init={particlesInit}
loaded={particlesLoaded}
className="-z-10"
options={{
fpsLimit: 240,
smooth: true,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#4f46e5",
},
links: {
color: "#818cf8",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 2,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 100,
},
opacity: {
value: 0.5,
},
shape: {
type: "square",
},
size: {
value: { min: 4, max: 5 },
},
},
detectRetina: true,
}}
/>
</div>
{/* Navbar */} {/* Navbar */}
<div className="navbar bg-white z-10"> <div className="navbar bg-white z-10">
<div className="navbar-start z-10"> <div className="navbar-end space-x-3 z-10"></div>
<a className="btn btn-ghost text-xl z-10 text-white">TurTask</a>
</div>
<div className="navbar-end space-x-3 pr-2 z-10">
<a className="btn z-10" href="/login">
Login
</a>
<a className="btn z-10" href="/signup">
Sign Up
</a>
</div>
</div> </div>
<div className="relative" id="home"> <div className="relative" id="home">
<div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6"> <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
<div className="relative pt-36 ml-auto"> <div className="relative pt-36 ml-auto">
<div className="lg:w-2/3 text-center mx-auto"> <div className="lg:w-2/3 text-center mx-auto">
<h1 className="text-gray-100 font-bold text-5xl md:text-6xl xl:text-7xl"> <h1 className="text-#143D6C font-bold text-5xl md:text-6xl xl:text-7xl">
Manage your task with{" "} Manage your task with{" "}
<span className="text-primary"> <span className="text-primary">
TurTask TurTask
@ -124,19 +24,12 @@ export function LandingPage() {
</label> </label>
</span> </span>
</h1> </h1>
<p className="mt-8 text-gray-400"> <p className="mt-8 text-#143D6C">Unleash productivity with our personal task and project management.</p>
Unleash productivity with our all-in-one task and project <div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
management solution. Streamline your workflow, automate tasks,
and conquer projects effortlessly.
</p>
<div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
<a <a
href="/login" href="/login"
className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max" className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
> <span className="relative text-base font-semibold text-white">Get started</span>
<span className="relative text-base font-semibold text-white">
Get started
</span>
</a> </a>
</div> </div>
</div> </div>

16
frontend/src/components/navigations/NavPreLogin.jsx Normal file
View File

@ -0,0 +1,16 @@
import { Link } from "react-router-dom";
export const NavPreLogin = ({ text, btn_text, link }) => {
return (
<div className="navbar bg-base-100 sticky top-0 z-50 border-2 border-neutral-400">
<div className="navbar-start"></div>
<div className="navbar-center hidden lg:flex"></div>
<div className="navbar-end space-x-3">
<p className="font-bold">{text}</p>
<Link to={link} className="btn bg-blue-700 hover:bg-blue-900 text-white font-bold">
{btn_text}
</Link>
</div>
</div>
);
};