From 822143f546e30d7ede9884345351b231c1a45991 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Tue, 21 Nov 2023 22:30:12 +0700 Subject: [PATCH 1/7] Add react-daterange-picker package --- frontend/package.json | 1 + frontend/pnpm-lock.yaml | 72 +++++++++++++------ .../src/components/dashboard/dashboard.jsx | 40 +++++++---- package.json | 1 + pnpm-lock.yaml | 5 ++ 5 files changed, 85 insertions(+), 34 deletions(-) create mode 100644 package.json create mode 100644 pnpm-lock.yaml diff --git a/frontend/package.json b/frontend/package.json index 714e1c7..e5ae2dd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,6 +31,7 @@ "@syncfusion/ej2-base": "^23.1.41", "@syncfusion/ej2-kanban": "^23.1.36", "@tremor/react": "^3.11.1", + "@wojtekmaj/react-daterange-picker": "^5.4.4", "axios": "^1.6.1", "bootstrap": "^5.3.2", "dotenv": "^16.3.1", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 26c8422..e4ccb3d 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -68,6 +68,9 @@ dependencies: '@tremor/react': specifier: ^3.11.1 version: 3.11.1(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)(tailwindcss@3.3.5) + '@wojtekmaj/react-daterange-picker': + specifier: ^5.4.4 + version: 5.4.4(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) axios: specifier: ^1.6.1 version: 1.6.2 @@ -1551,6 +1554,29 @@ packages: resolution: {integrity: sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==} dev: false + /@wojtekmaj/react-daterange-picker@5.4.4(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-EoHFD2SHG1ZeBfdQ9NYaO9MzcdKXy8gikxxFlO3f7HJ/tOGI6/Vxt752sgNnCGsF4JlqVoWVHweyxYOExumRdA==} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.2.37 + clsx: 2.0.0 + make-event-props: 1.6.2 + prop-types: 15.8.1 + react: 18.2.0 + react-calendar: 4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + react-date-picker: 10.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + react-dom: 18.2.0(react@18.2.0) + react-fit: 1.7.1(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0) + transitivePeerDependencies: + - '@types/react-dom' + dev: false + /acorn-jsx@5.3.2(acorn@8.11.2): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -3380,14 +3406,6 @@ packages: warning: 4.0.3 dev: false - /react-day-picker@8.9.1(date-fns@2.30.0)(react@18.2.0): - resolution: {integrity: sha512-W0SPApKIsYq+XCtfGeMYDoU0KbsG3wfkYtlw8l+vZp6KoBXGOlhzBUp4tNx1XiwiOZwhfdGOlj7NGSCKGSlg5Q==} - peerDependencies: - date-fns: ^2.28.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - dependencies: - date-fns: 2.30.0 - react: 18.2.0 /react-calendar@4.6.1(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-MvCPdvxEvq7wICBhFxlYwxS2+IsVvSjTcmlr0Kl3yDRVhoX7btNg0ySJx5hy9rb1eaM4nDpzQcW5c87nfQ8n8w==} peerDependencies: @@ -3479,6 +3497,16 @@ packages: - '@types/react-dom' dev: false + /react-day-picker@8.9.1(date-fns@2.30.0)(react@18.2.0): + resolution: {integrity: sha512-W0SPApKIsYq+XCtfGeMYDoU0KbsG3wfkYtlw8l+vZp6KoBXGOlhzBUp4tNx1XiwiOZwhfdGOlj7NGSCKGSlg5Q==} + peerDependencies: + date-fns: ^2.28.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + date-fns: 2.30.0 + react: 18.2.0 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -3511,8 +3539,6 @@ packages: tiny-warning: 1.0.3 dev: false - /react-icons@4.11.0(react@18.2.0): - resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==} /react-icons@4.12.0(react@18.2.0): resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==} peerDependencies: @@ -3611,18 +3637,6 @@ packages: react-transition-group: 2.9.0(react-dom@18.2.0)(react@18.2.0) dev: false - /react-transition-group@2.9.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==} - peerDependencies: - react: '>=15.0.0' - react-dom: '>=15.0.0' - dependencies: - dom-helpers: 3.4.0 - loose-envify: 1.4.0 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-lifecycles-compat: 3.0.4 /react-time-picker@6.5.2(@types/react-dom@18.2.15)(@types/react@18.2.37)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-xRamxjndpq3HfnEL+6T3VyirLMEn4D974OJgs9sTP8iJX/RB02rmwy09C9oBThTGuN3ycbozn06iYLn148vcdw==} peerDependencies: @@ -3648,6 +3662,20 @@ packages: - '@types/react-dom' dev: false + /react-transition-group@2.9.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==} + peerDependencies: + react: '>=15.0.0' + react-dom: '>=15.0.0' + dependencies: + dom-helpers: 3.4.0 + loose-envify: 1.4.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-lifecycles-compat: 3.0.4 + dev: false + /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==} peerDependencies: diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 5a2b91c..8670af3 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -9,22 +9,38 @@ import { Text, Title, Legend, + DateRangePicker, } from "@tremor/react"; import KpiCard from "./kpiCard"; import { BarChartGraph } from "./Barchart"; import DonutChartGraph from "./DonutChart"; import { AreaChartGraph } from "./Areachart"; import ProgressCircleChart from "./ProgressCircle"; +import { useState } from "react"; const valueFormatter = (number) => `$ ${new Intl.NumberFormat("us").format(number).toString()}`; export default function Dashboard() { + const [value, setValue] = useState({ + from: new Date(2021, 0, 1), + to: new Date(2023, 0, 7), + }); + console.log(value); return (
Dashboard All of your progress will be shown right here. +
+ Select Date Range: + +
@@ -60,18 +76,18 @@ export default function Dashboard() { -
- - Tasks - -
- - -
+
+ + Tasks + +
+ + +
diff --git a/package.json b/package.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/package.json @@ -0,0 +1 @@ +{} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..2b9f188 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,5 @@ +lockfileVersion: '6.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false From ca2ad68a8c717407ea4f2a73ed5a2f2f0a1a7bb9 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Thu, 23 Nov 2023 00:51:52 +0700 Subject: [PATCH 2/7] Fix casing of KpiCard component and remove unnecessary console.log --- frontend/src/components/dashboard/Barchart.jsx | 1 - frontend/src/components/dashboard/dashboard.jsx | 2 +- frontend/src/components/kanbanBoard/taskCard.jsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index 18c53fe..ab4d0b4 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -4,7 +4,6 @@ import axiosInstance from "../../api/configs/AxiosConfig"; const fetchBarChartData = async () => { let res = await axiosInstance.get("/dashboard/weekly/"); - console.log(res.data); // const barchartData = [ // { // date: "Mon", diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 5a2b91c..b1da562 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -10,7 +10,7 @@ import { Title, Legend, } from "@tremor/react"; -import KpiCard from "./kpiCard"; +import KpiCard from "./KpiCard"; import { BarChartGraph } from "./Barchart"; import DonutChartGraph from "./DonutChart"; import { AreaChartGraph } from "./Areachart"; diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx index 2c5053f..b5e7126 100644 --- a/frontend/src/components/kanbanBoard/taskCard.jsx +++ b/frontend/src/components/kanbanBoard/taskCard.jsx @@ -45,7 +45,7 @@ function TaskCard({ task, deleteTask, updateTask}) { description={task.description} tags={task.tags} difficulty={task.difficulty} - challenge={task.challenge} + f challenge={task.challenge} importance={task.importance} />
Date: Thu, 23 Nov 2023 01:20:45 +0700 Subject: [PATCH 3/7] Remove DateRangePicker component from Dashboard --- frontend/src/components/dashboard/dashboard.jsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 887fb6d..b31ef10 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -18,14 +18,6 @@ export default function Dashboard() { Dashboard All of your progress will be shown right here.
- Select Date Range: - -
From 6310bd62f4e8e85b9c8c0377f980311ef90c5bf8 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Thu, 23 Nov 2023 02:14:15 +0700 Subject: [PATCH 4/7] Add smooth scrolling and fix formatting issues --- .../components/authentication/LoginPage.jsx | 14 +- .../components/authentication/SignUpPage.jsx | 9 +- .../components/landingPage/LandingPage.jsx | 134 +++++++++++++++--- 3 files changed, 127 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index dff40ab..bfd942b 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -42,7 +42,8 @@ function LoginPage() { // 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; + axiosapi.axiosInstance.defaults.headers["Authorization"] = + "Bearer " + res.data.access; setIsAuthenticated(true); redirect("/"); }) @@ -85,7 +86,10 @@ function LoginPage() { }, []); return ( -
+
{/* Particles Container */}
OR
{/* Login with Google Button */} - diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 6bcc8dc..7d73580 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -7,7 +7,6 @@ import { loadFull } from "tsparticles"; import { FcGoogle } from "react-icons/fc"; import { useGoogleLogin } from "@react-oauth/google"; - function Copyright(props) { return (
@@ -104,6 +103,7 @@ export default function SignUp() { className="-z-10" options={{ fpsLimit: 240, + smooth: true, interactivity: { events: { onClick: { @@ -229,13 +229,12 @@ export default function SignUp() { className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()} > - Login with Google + + Login with Google {/* Already have an account? */}
diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx index 1fe0e1e..f5895ec 100644 --- a/frontend/src/components/landingPage/LandingPage.jsx +++ b/frontend/src/components/landingPage/LandingPage.jsx @@ -1,28 +1,119 @@ +import { useCallback } from "react"; +import Particles from "react-tsparticles"; +import { loadFull } from "tsparticles"; + export function LandingPage() { + const particlesInit = useCallback(async (engine) => { + console.log(engine); + await loadFull(engine); + }, []); + + const particlesLoaded = useCallback(async (container) => { + console.log(container); + }, []); return ( -
-
-
- TurTask +
+ {/* Particles Container */} +
+ +
+ {/* Navbar */} +
+ -
-
-

+

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

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio incidunt nam itaque sed eius modi error - totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta! +

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

From ca8e1d87dc7ae188644617ffa63c0089c94b38b3 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Thu, 23 Nov 2023 03:09:20 +0700 Subject: [PATCH 5/7] Remove particles loader from LoginPage and SignUpPage --- .../components/authentication/LoginPage.jsx | 98 ++--------------- .../components/authentication/SignUpPage.jsx | 100 ++---------------- 2 files changed, 17 insertions(+), 181 deletions(-) diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx index bfd942b..5ed8d83 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,9 +1,6 @@ import { useEffect, useState } from "react"; import { useNavigate, redirect } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; -import { useCallback } from "react"; -import Particles from "react-tsparticles"; -import { loadFull } from "tsparticles"; import refreshAccessToken from "./refreshAcessToken"; import axiosapi from "../../api/AuthenticationApi"; import { FcGoogle } from "react-icons/fc"; @@ -74,99 +71,20 @@ function LoginPage() { 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 ( -
- {/* Particles Container */} -
- +
+ {/* Login Box */}
-
+

Login

{/* Email Input */}
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 7d73580..389a466 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,9 +1,6 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; 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 { useGoogleLogin } from "@react-oauth/google"; @@ -56,16 +53,7 @@ export default function SignUp() { 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({ flow: "auth-code", @@ -90,86 +78,16 @@ export default function SignUp() { }); return ( -
- {/* Particles Container */} -
- +
+ -
-
+
+
{/* Register Form */}

Signup

{/* Email Input */} From 91aac3dec60e0d83df4e451a0528ba746c8a411d Mon Sep 17 00:00:00 2001 From: sosokker Date: Thu, 23 Nov 2023 04:57:15 +0700 Subject: [PATCH 6/7] 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} + +
+
+ ); +}; From 5c19933c44bab667df3c73c79254b562509f62d5 Mon Sep 17 00:00:00 2001 From: sosokker Date: Thu, 23 Nov 2023 05:01:41 +0700 Subject: [PATCH 7/7] Add nav to signup --- .../components/authentication/SignUpPage.jsx | 162 ++++++++---------- 1 file changed, 67 insertions(+), 95 deletions(-) diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 389a466..50e2fc4 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,24 +1,9 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; import axiosapi from "../../api/AuthenticationApi"; import { FcGoogle } from "react-icons/fc"; import { useGoogleLogin } from "@react-oauth/google"; - -function Copyright(props) { - return ( -
- {"Copyright © "} - - TurTask - {" "} - {new Date().getFullYear()} - {"."} -
- ); -} +import { NavPreLogin } from "../navigations/NavPreLogin"; export default function SignUp() { const Navigate = useNavigate(); @@ -50,10 +35,7 @@ export default function SignUp() { const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); - console.log(formData); }; - { - } const googleLoginImplicit = useGoogleLogin({ flow: "auth-code", @@ -78,83 +60,73 @@ export default function SignUp() { }); return ( -
- -
-
- {/* Register Form */} -

Signup

- {/* Email Input */} -
- - -
- {/* Username Input */} -
- - -
- {/* Password Input */} -
- - -
-

+
+ +
+ +
+
+ {/* Register Form */} +

Signup

+ {/* Email Input */} +
+ + +
+ {/* Username Input */} +
+ + +
+ {/* Password Input */} +
+ + +
+

- {/* Signups Button */} - -
OR
- {/* Login with Google Button */} - - {/* Already have an account? */} -
- Already have an account? + {/* Signups Button */} + +
OR
+ {/* Login with Google Button */} + + {/* Already have an account? */} +
-