diff --git a/frontend/package.json b/frontend/package.json index 70698dc..f057dce 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 143df2b..22fdadd 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 @@ -1554,6 +1557,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: 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 dff40ab..a6f406b 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,26 +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 { 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"; 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); @@ -29,6 +22,7 @@ function LoginPage() { const handlePasswordChange = (event) => { setPassword(event.target.value); }; + const handleSubmit = (event) => { event.preventDefault(); @@ -39,16 +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"); }); }; @@ -72,144 +63,80 @@ 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 */} -
- - -
- {/* 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/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 0139867..6bedd81 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,29 +1,15 @@ import { 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"; +import { NavPreLogin } from "../navigations/NavPreLogin"; import { useAuth } from "src/hooks/AuthHooks"; -function Copyright(props) { - return ( -
- {"Copyright © "} - - TurTask - {" "} - {new Date().getFullYear()} - {"."} -
- ); -} export default function SignUp() { const Navigate = useNavigate(); - const { setIsAuthenticated } = useAuth; + const { setIsAuthenticated } = useAuth(); const [formData, setFormData] = useState({ email: "", @@ -52,19 +38,7 @@ export default function SignUp() { const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); - 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", @@ -89,140 +63,73 @@ export default function SignUp() { }); return ( -
- {/* Particles Container */} -
- -
-
-
- {/* 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? */} +
-
diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 761f0ca..b31ef10 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -4,13 +4,20 @@ import { BarChartGraph } from "./Barchart"; import DonutChartGraph from "./DonutChart"; import { AreaChartGraph } from "./Areachart"; import ProgressCircleChart from "./ProgressCircle"; +import { useState } from "react"; 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. +
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} />
-
-
- TurTask -
- + {/* Particles Container */} + + {/* Navbar */} +
+
-
-

+

Manage your task with{" "} TurTask @@ -33,21 +24,13 @@ 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 personal task and project management.

+
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} + +
+
+ ); +}; 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