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 b0a0956..79456a6 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; export 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 2c3489b..3b306a2 100644 --- a/frontend/src/components/authentication/LoginPage.jsx +++ b/frontend/src/components/authentication/LoginPage.jsx @@ -1,11 +1,11 @@ +import { useState } from "react"; import { useNavigate, redirect } from "react-router-dom"; import { useGoogleLogin } from "@react-oauth/google"; -import { useCallback, useState } from "react"; -import Particles from "react-tsparticles"; -import { loadFull } from "tsparticles"; import { FcGoogle } from "react-icons/fc"; import { useAuth } from "src/hooks/AuthHooks"; -import { googleLogin, apiUserLogin } from "src/api/AuthenticationApi"; +import { FloatingParticles } from "../FlaotingParticles"; +import { NavPreLogin } from "../navigations/NavPreLogin"; +import { apiUserLogin, googleLogin } from "src/api/AuthenticationApi"; export function LoginPage() { const { setIsAuthenticated } = useAuth(); @@ -13,6 +13,7 @@ export function LoginPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [error, setError] = useState(null); const handleEmailChange = (event) => { setEmail(event.target.value); @@ -21,6 +22,7 @@ export function LoginPage() { const handlePasswordChange = (event) => { setPassword(event.target.value); }; + const handleSubmit = (event) => { event.preventDefault(); @@ -30,15 +32,13 @@ export 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); setIsAuthenticated(true); redirect("/"); }) .catch((err) => { - console.log("Login failed"); - console.log(err); + setError("Incorrect username or password"); }); }; @@ -62,138 +62,80 @@ export function LoginPage() { }, onError: (errorResponse) => console.log(errorResponse), }); - { - /* Particles Loader*/ - } - const particlesInit = useCallback(async (engine) => { - await loadFull(engine); - }, []); 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 fb6202e..1019779 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -1,29 +1,14 @@ import { useState } from "react"; import { useNavigate } from "react-router-dom"; -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"; import { createUser, googleLogin } from "src/api/AuthenticationApi"; -function Copyright(props) { - return ( -
- {"Copyright © "} - - TurTask - {" "} - {new Date().getFullYear()} - {"."} -
- ); -} - export function SignUp() { const Navigate = useNavigate(); - const { setIsAuthenticated } = useAuth; + const { setIsAuthenticated } = useAuth(); const [formData, setFormData] = useState({ email: "", @@ -53,12 +38,6 @@ export function SignUp() { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; - { - /* Particles Loader*/ - } - const particlesInit = useCallback(async (engine) => { - await loadFull(engine); - }, []); const googleLoginImplicit = useGoogleLogin({ flow: "auth-code", @@ -83,139 +62,73 @@ export 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 f735146..e16ff6e 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 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 e1814c6..1a151c8 100644 --- a/frontend/src/components/kanbanBoard/taskCard.jsx +++ b/frontend/src/components/kanbanBoard/taskCard.jsx @@ -44,7 +44,7 @@ export 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