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

Remove particles loader from LoginPage and

Browse Source 
SignUpPage
This commit is contained in:
Pattadon 2023-11-23 03:09:20 +07:00
parent 6310bd62f4
commit ca8e1d87dc
2 changed files with 17 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, 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 { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import refreshAccessToken from "./refreshAcessToken"; 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";
@ -74,99 +71,20 @@ function LoginPage() {
onError: (errorResponse) => console.log(errorResponse), onError: (errorResponse) => console.log(errorResponse),
}); });
{ {
/* Particles Loader*/
} }
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
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
data-theme="night" aria-hidden="true"
className="h-screen flex items-center justify-center" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40"
> >
{/* Particles Container */} <div className="blur-[106px] h-56 bg-gradient-to-br from-pink-600 to-fuchsia-300"></div>
<div style={{ width: "0%", height: "100vh" }}> <div className="blur-[106px] h-32 bg-gradient-to-r from-fuchsia-500 to-orange-500"></div>
<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: "#008000",
},
links: {
color: "#00ff00",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 4,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 50,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 4, max: 5 },
},
},
detectRetina: true,
}}
/>
</div> </div>
{/* Login Box */} {/* Login Box */}
<div className="w-1/4 flex items-center justify-center"> <div className="w-1/4 flex items-center justify-center">
<div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10"> <div className="w-96 bg-white rounded-lg p-8 shadow-md space-y-4 z-10">
<h2 className="text-3xl font-bold text-center">Login</h2> <h2 className="text-3xl font-bold text-center">Login</h2>
{/* Email Input */} {/* Email Input */}
<div className="form-control "> <div className="form-control ">

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

@ -1,9 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import axiosapi from "../../api/AuthenticationApi"; import axiosapi from "../../api/AuthenticationApi";
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { FcGoogle } from "react-icons/fc"; import { FcGoogle } from "react-icons/fc";
import { useGoogleLogin } from "@react-oauth/google"; import { useGoogleLogin } from "@react-oauth/google";
@ -56,16 +53,7 @@ export default function SignUp() {
console.log(formData); console.log(formData);
}; };
{ {
/* Particles Loader*/
} }
const particlesInit = useCallback(async (engine) => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async (container) => {
console.log(container);
}, []);
const googleLoginImplicit = useGoogleLogin({ const googleLoginImplicit = useGoogleLogin({
flow: "auth-code", flow: "auth-code",
@ -90,86 +78,16 @@ export default function SignUp() {
}); });
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
data-theme="night" aria-hidden="true"
className="h-screen flex items-center justify-center" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40"
> >
{/* Particles Container */} <div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
<div style={{ width: "0%", height: "100vh" }}> <div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
<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: "#023020",
},
links: {
color: "#228B22",
distance: 150,
enable: true,
opacity: 1,
width: 1,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: false,
speed: 4,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 50,
},
opacity: {
value: 0.6,
},
shape: {
type: "circle",
},
size: {
value: { min: 6, max: 8 },
},
},
detectRetina: true,
}}
/>
</div> </div>
<div className="w-1/4 h-1 flex items-center justify-center"> <div className="w-1/4 h-1 flex items-center justify-center z-10">
<div className="w-96 bg-neutral rounded-lg p-8 shadow-md space-y-4 z-10"> <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
{/* Register Form */} {/* Register Form */}
<h2 className="text-3xl font-bold text-center">Signup</h2> <h2 className="text-3xl font-bold text-center">Signup</h2>
{/* Email Input */} {/* Email Input */}