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

Refactor login and signup pages, add floating

Browse Source 
particles component
This commit is contained in:
Pattadon 2023-11-23 14:40:47 +07:00
parent 24a04b8239
commit d827f5b8a2
4 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/FlaotingParticles.jsx
View File

@ -8,14 +8,7 @@ export function FloatingParticles() {
}, []);
return (
<div
style={{
position: "absolute",
width: "100%",
height: "100vh",
zIndex: 0,
backgroundColor: "#EBF2FA",
}}>
<div style={{ width: "0%", height: "100vh" }}>
<Particles
id="particles"
init={particlesInit}

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

@ -65,8 +65,15 @@ export function LoginPage() {
return (
<div>
<NavPreLogin text="Don't have account?" btn_text="Sign Up" link="/signup" />
<div className="flex flex-row bg-neutral-400">
<NavPreLogin
text="Don't have account?"
btn_text="Sign Up"
link="/signup"
/>
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
{/* Particles Container */}
<FloatingParticles />
{/* Login Box */}
<div className="flex items-center justify-center flex-1 z-50">
<div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
@ -78,7 +85,8 @@ export function LoginPage() {
xmlns="http://www.w3.org/2000/svg"
className="stroke-current shrink-0 h-6 w-6"
fill="none"
viewBox="0 0 24 24">
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
@ -122,20 +130,23 @@ export function LoginPage() {
/>
</div>
{/* Login Button */}
<button className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold" onClick={handleSubmit}>
<button
className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold"
onClick={handleSubmit}
>
Login
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button className="btn bg-gray-200 btn-outline w-full " onClick={() => googleLoginImplicit()}>
<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 className="basis-1/2 bg-#ebf2fa h-screen z-0">
<FloatingParticles />
</div>
</div>
</div>
);

14
frontend/src/components/authentication/SignUpPage.jsx
View File

@ -5,6 +5,7 @@ import { useGoogleLogin } from "@react-oauth/google";
import { NavPreLogin } from "../navigations/NavPreLogin";
import { useAuth } from "src/hooks/AuthHooks";
import { createUser, googleLogin } from "src/api/AuthenticationApi";
import { FloatingParticles } from "../FlaotingParticles";
export function SignUp() {
const Navigate = useNavigate();
@ -76,9 +77,13 @@ export function SignUp() {
return (
<div>
<NavPreLogin text="Already have an account?" btn_text="Log In" link="/login" />
<NavPreLogin
text="Already have an account?"
btn_text="Log In"
link="/login"
/>
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
{/* ... (other code) */}
<FloatingParticles />
<div className="w-1/4 h-1 flex items-center justify-center z-10">
<div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
{/* Register Form */}
@ -136,7 +141,10 @@ export function SignUp() {
</button>
<div className="divider">OR</div>
{/* Login with Google Button */}
<button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
<button
className="btn btn-outline btn-secondary w-full "
onClick={() => googleLoginImplicit()}
>
<FcGoogle className="rounded-full bg-white" />
Login with Google
</button>

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

@ -2,13 +2,10 @@ import { FloatingParticles } from "../FlaotingParticles";
export function LandingPage() {
return (
<div>
<div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
{/* Particles Container */}
<FloatingParticles />
{/* Navbar */}
<div className="navbar bg-white z-10">
<div className="navbar-end space-x-3 z-10"></div>
</div>
<div className="relative" id="home">
<div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
<div className="relative pt-36 ml-auto">
@ -24,12 +21,18 @@ export function LandingPage() {
</label>
</span>
</h1>
<p className="mt-8 text-#143D6C">Unleash productivity with our personal task and project management.</p>
<p className="mt-8 text-#143D6C">
Unleash productivity with our personal task and project
management.
</p>
<div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
<a
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">
<span className="relative text-base font-semibold text-white">Get started</span>
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>
</a>
</div>
</div>