├── public ├── _redirects └── vite.svg ├── src ├── assets │ ├── pc.png │ ├── logo.png │ ├── Vector.png │ ├── aiaashu.jpg │ ├── avatar.png │ ├── image1.jpg │ ├── image2.jpg │ ├── image3.jpg │ ├── mobile.png │ └── logo.svg ├── index.css ├── Components │ ├── UserDashboard │ │ ├── MainDasboard.jsx │ │ ├── Task │ │ │ ├── CompletedTask.jsx │ │ │ ├── IncompletedTask.jsx │ │ │ ├── AllTask.jsx │ │ │ ├── Task.jsx │ │ │ └── EditTask.jsx │ │ ├── Dashboard.jsx │ │ ├── TaskSubnav.jsx │ │ ├── DashboardNav.jsx │ │ ├── DashboardContent.jsx │ │ ├── Notification.jsx │ │ ├── Search.jsx │ │ ├── DashboardSidebar.jsx │ │ ├── CreateTask.jsx │ │ └── Account.jsx │ ├── HomePage │ │ ├── HomePage.jsx │ │ ├── MobileSidebar.jsx │ │ ├── Hero.jsx │ │ └── Navbar.jsx │ ├── MainDashboard │ │ ├── Content │ │ │ ├── Projects.jsx │ │ │ ├── ManageTask.jsx │ │ │ ├── DefaultDashboard.jsx │ │ │ └── Teams.jsx │ │ ├── MainDashboardContent.jsx │ │ ├── MainDashboard.jsx │ │ └── Sidebar.jsx │ ├── Support.jsx │ ├── AboutUs.jsx │ ├── Modal │ │ └── Modal.jsx │ ├── Login │ │ └── Login.jsx │ └── Signup │ │ └── SignUp.jsx ├── main.jsx ├── styles │ └── styles.js └── App.jsx ├── postcss.config.js ├── vite.config.js ├── .gitignore ├── index.html ├── tailwind.config.js ├── .eslintrc.cjs ├── README.md └── package.json /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /src/assets/pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/pc.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/Vector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/Vector.png -------------------------------------------------------------------------------- /src/assets/aiaashu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/aiaashu.jpg -------------------------------------------------------------------------------- /src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/avatar.png -------------------------------------------------------------------------------- /src/assets/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/image1.jpg -------------------------------------------------------------------------------- /src/assets/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/image2.jpg -------------------------------------------------------------------------------- /src/assets/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/image3.jpg -------------------------------------------------------------------------------- /src/assets/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/TaskHub-Internship-Project/HEAD/src/assets/mobile.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | *::-webkit-scrollbar { 6 | display: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/MainDasboard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const MainDasboard = () => { 4 | return
MainDasboard
; 5 | }; 6 | 7 | export default MainDasboard; 8 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Task/CompletedTask.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AllTask from "./AllTask"; 3 | 4 | const CompletedTask = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default CompletedTask; 13 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Task/IncompletedTask.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import AllTask from "./AllTask"; 3 | 4 | const IncompletedTask = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default IncompletedTask; 13 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/Components/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./Navbar"; 3 | import Hero from "./Hero"; 4 | 5 | const HomePage = () => { 6 | return ( 7 | <> 8 |
9 | 10 | 11 |
12 | 13 | ); 14 | }; 15 | 16 | export default HomePage; 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Collaborative Task Management App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/styles/styles.js: -------------------------------------------------------------------------------- 1 | const styles = { 2 | menuHover: 3 | " hover:text-[#406BBF] transition-all duration-300 cursor-pointer ", 4 | 5 | button: " my-3 flex items-center justify-center rounded-xl cursor-pointer", 6 | 7 | input: "w-full border p-1 rounded-[5px]", 8 | 9 | noramlFlex: "flex items-center", 10 | userDashboardBtn: 11 | "text-[##132039] bg-transparent w-full outline-none flex items-center transition duration-300 px-4 py-3 gap-2 font-semibold border-b", 12 | }; 13 | 14 | export default styles; 15 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/Content/Projects.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Projects = () => { 4 | return ( 5 |
6 |

7 | All Projects 8 |

9 | 10 |

11 | No Project yet! 12 |

13 |
14 | ); 15 | }; 16 | 17 | export default Projects; 18 | -------------------------------------------------------------------------------- /src/Components/Support.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Navbar from "./HomePage/Navbar"; 3 | 4 | const Support = () => { 5 | return ( 6 | <> 7 | 8 | 9 |
10 |

11 | Contact me for any support 12 | 13 | {" "} 14 | asfakahmed680@gmail.com 15 | 16 |

17 |
18 | 19 | ); 20 | }; 21 | 22 | export default Support; 23 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | darkMode: "class", 5 | theme: { 6 | fontFamily: { 7 | Roboto: ["Roboto", "sans-serif"], 8 | Poppins: ["Poppins", "sans-serif"], 9 | }, 10 | extend: { 11 | screens: { 12 | "1000px": "1050px", 13 | "1040px": "1040px", 14 | "1100px": "1110px", 15 | "800px": "800px", 16 | "1300px": "1300px", 17 | "400px": "400px", 18 | }, 19 | }, 20 | }, 21 | plugins: [], 22 | }; 23 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/MainDashboardContent.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // manually imported components 4 | import DefaultDashboard from "./Content/DefaultDashboard"; 5 | import Teams from "./Content/Teams"; 6 | import ManageTask from "./Content/ManageTask"; 7 | import Projects from "./Content/Projects"; 8 | 9 | const MainDashboardContent = ({ active }) => { 10 | return ( 11 |
12 | {active === 1 && } 13 | {active === 2 && } 14 | {active === 3 && } 15 | {active === 4 && } 16 |
17 | ); 18 | }; 19 | 20 | export default MainDashboardContent; 21 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Task/AllTask.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Task from "./Task"; 3 | 4 | const AllTask = () => { 5 | // getting the todo data from local storage 6 | const allTodos = JSON.parse(localStorage.getItem("todo")); 7 | 8 | return ( 9 | <> 10 |
11 | {allTodos ? ( 12 | <> 13 | {allTodos?.map((todo) => ( 14 | 15 | ))} 16 | 17 | ) : ( 18 |
No task yet!
19 | )} 20 |
21 | 22 | ); 23 | }; 24 | 25 | export default AllTask; 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Futures 2 | 3 | 12 | 13 | ## What not done 14 | 15 | 22 | 23 | ### The reason I haven't been able to finish them is because I'm completely focused on design for front-end development and I can also do functionality but a bit. I want to learn more functionality and I think I can get a chance for it. 24 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/MainDashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // manually imported components 4 | import Sidebar from "./Sidebar"; 5 | import MainDashboardContent from "./MainDashboardContent"; 6 | 7 | const MainDashboard = () => { 8 | const [active, setActive] = useState(1); 9 | 10 | // get dark or light from localstorage 11 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 12 | 13 | return ( 14 |
15 |
16 | 17 |
18 |
22 | 23 |
24 |
25 | ); 26 | }; 27 | 28 | export default MainDashboard; 29 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import DashboardSidebar from "./DashboardSidebar"; 3 | import DashboardContent from "./DashboardContent"; 4 | 5 | const Dashboard = () => { 6 | const [active, setActtive] = useState(1); 7 | 8 | // get dark or light from localstorage 9 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 10 | 11 | return ( 12 |
16 |
17 | 18 |
19 |
23 | 27 |
28 |
29 | ); 30 | }; 31 | 32 | export default Dashboard; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "task-managment-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "framer-motion": "^10.16.4", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0", 16 | "react-icons": "^4.10.1", 17 | "react-router-dom": "^6.15.0", 18 | "react-show-more-text": "^1.6.2", 19 | "react-toastify": "^9.1.3" 20 | }, 21 | "devDependencies": { 22 | "@types/react": "^18.2.15", 23 | "@types/react-dom": "^18.2.7", 24 | "@vitejs/plugin-react": "^4.0.3", 25 | "autoprefixer": "^10.4.15", 26 | "eslint": "^8.45.0", 27 | "eslint-plugin-react": "^7.32.2", 28 | "eslint-plugin-react-hooks": "^4.6.0", 29 | "eslint-plugin-react-refresh": "^0.4.3", 30 | "postcss": "^8.4.29", 31 | "tailwindcss": "^3.3.3", 32 | "vite": "^4.4.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import react from "react"; 2 | 3 | // librarys 4 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 5 | 6 | // manually imported components 7 | import HomePage from "./Components/HomePage/HomePage"; 8 | import Login from "./Components/Login/Login"; 9 | import SignUp from "./Components/Signup/SignUp"; 10 | import UserDashboard from "./Components/UserDashboard/Dashboard"; 11 | import MainDashboard from "./Components/MainDashboard/MainDashboard"; 12 | import AboutUs from "./Components/AboutUs"; 13 | import Support from "./Components/Support"; 14 | 15 | function App() { 16 | return ( 17 | <> 18 | 19 | 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | 28 | 29 | 30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/TaskSubnav.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const TaskSubnav = ({ totalTask, padding }) => { 4 | // get dark or light from localstorage 5 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 6 | 7 | // getting the todo data from local storage 8 | const allTodos = JSON.parse(localStorage.getItem("todo")); 9 | 10 | return ( 11 | 33 | ); 34 | }; 35 | 36 | export default TaskSubnav; 37 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/DashboardNav.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const DashboardNav = ({ active, setActive }) => { 4 | // get dark or light from localstorage 5 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 6 | 7 | return ( 8 | 39 | ); 40 | }; 41 | 42 | export default DashboardNav; 43 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Components/AboutUs.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // image 4 | import image from "../assets/asfakAhmed.jpg"; 5 | import Navbar from "./HomePage/Navbar"; 6 | 7 | const AboutUs = () => { 8 | return ( 9 |
10 | 11 |
12 |
13 | asfakahmed/image 18 |
19 | 20 |
21 |

22 | Asfak Ahmed 23 |

24 |

25 | Founder of this app 26 |

27 |

28 | I am Asfaq Ahmed. I am a front-end web developer. I have been 29 | working in this sector for the past 1+ years. I consider coding as 30 | the most important thing in my life. I love to tackle complex 31 | problems.{" "} 32 | 33 | I won 2nd runner's prize in " ProgrammingHeroweb application 34 | showcase contest 2". 35 | 36 |

37 |
38 |
39 |
40 | ); 41 | }; 42 | 43 | export default AboutUs; 44 | -------------------------------------------------------------------------------- /src/Components/HomePage/MobileSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // react icons 4 | import { RxCross1 } from "react-icons/rx"; 5 | 6 | // framer motion 7 | import { motion } from "framer-motion"; 8 | import { Link } from "react-router-dom"; 9 | 10 | const MobileSidebar = ({ setOpen }) => { 11 | // get dark or light from localstorage 12 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 13 | 14 | return ( 15 |
16 | 24 |
25 | setOpen(false)} 29 | /> 30 |
31 |
    32 |
  • 33 | Home 34 |
    • 35 |
  • 36 | About Us 37 |
    • 38 |
  • 39 | Support 40 |
    • 41 |
42 | 43 |
44 | ); 45 | }; 46 | 47 | export default MobileSidebar; 48 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/DashboardContent.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // manually imported components 4 | import DashboardNav from "./DashboardNav"; 5 | import CompletedTask from "./Task/CompletedTask"; 6 | import IncompletedTask from "./Task/IncompletedTask"; 7 | import AllTask from "./Task/AllTask"; 8 | import TaskSubnav from "./TaskSubnav"; 9 | import Notification from "./Notification"; 10 | import Search from "./Search"; 11 | import Account from "./Account"; 12 | 13 | const DashboardContent = ({ sidebarActive, setsidebarActive }) => { 14 | const [active, setActive] = useState(1); 15 | 16 | return ( 17 |
18 | {sidebarActive === 1 && ( 19 | <> 20 |
21 | {active === 1 && ( 22 | <> 23 | 24 | 25 | 26 | 27 | )} 28 | 29 | {active === 2 && ( 30 | <> 31 | 32 | 33 | 34 | 35 | )} 36 | 37 | {active === 3 && ( 38 | <> 39 | 40 | 41 | 42 | 43 | )} 44 |
45 | 46 | )} 47 | 48 | {sidebarActive === 2 && } 49 | {sidebarActive === 3 && } 50 | {sidebarActive === 4 && } 51 |
52 | ); 53 | }; 54 | 55 | export default DashboardContent; 56 | -------------------------------------------------------------------------------- /src/Components/Modal/Modal.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // image 4 | import vectorImage from "../../assets/Vector.png"; 5 | 6 | // framer motion 7 | import { motion } from "framer-motion"; 8 | 9 | const Modal = ({ setTodoDelete }) => { 10 | // get dark or light from localstorage 11 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 12 | 13 | return ( 14 | <> 15 |
16 | 23 |
27 | vector/image 28 | 29 |
30 |

Are you Sure?

31 |

This Action might delete everything up

32 |
33 |
34 |
35 | 44 | 53 |
54 | 55 |
56 | 57 | ); 58 | }; 59 | 60 | export default Modal; 61 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Notification.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // avatar image 4 | import avatar from "../../assets/avatar.png"; 5 | import { toast } from "react-toastify"; 6 | 7 | const Notification = () => { 8 | // get the user name and image from local storage 9 | const username = JSON.parse(localStorage.getItem("userName")); 10 | const photUrl = JSON.parse(localStorage.getItem("PhotoUrl")); 11 | 12 | // get todos from local storage 13 | const todos = JSON.parse(localStorage.getItem("todo")); 14 | 15 | // get dark or light from localstorage 16 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 17 | 18 | return ( 19 |
20 |

24 | Notifications 25 |

26 | 27 | {todos ? ( 28 | <> 29 | {todos?.map((todo) => ( 30 |
34 | avatar/image 39 |
40 |

44 | {username} Created a task 45 |

46 |

4 min ago

47 |
48 |
49 | ))} 50 | 51 | ) : ( 52 |
53 |

No notification yet!

54 |
55 | )} 56 |
57 | ); 58 | }; 59 | 60 | export default Notification; 61 | -------------------------------------------------------------------------------- /src/Components/HomePage/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // styles 4 | import styles from "../../styles/styles"; 5 | 6 | // images 7 | import mobileImage from "../../assets/mobile.png"; 8 | import pcImage from "../../assets/pc.png"; 9 | 10 | // react router dom 11 | import { Link } from "react-router-dom"; 12 | 13 | const Hero = () => { 14 | return ( 15 |
16 |
17 |

18 | Smash all of your
ideas into one place 19 |

20 |

21 | Collaborate with 22 | your 23 | friends to help 24 | you make your journey of bringing them to live a bit more 25 | fun. 26 |

27 |
28 | 31 | Login 32 | 33 | 36 | Sign Up 37 | 38 |
39 |

40 | 23 people are 41 | already enjoying our app 42 |

43 |
44 |
45 |
46 | image/pcImage 47 | image/pcImage 52 |
53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Hero; 59 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Search.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // react icons 4 | import { CiSearch } from "react-icons/ci"; 5 | 6 | // manually imported components 7 | import TaskSubnav from "./TaskSubnav"; 8 | import Task from "./Task/Task"; 9 | 10 | const Search = () => { 11 | // getting the todo data from local storage 12 | const allTodos = JSON.parse(localStorage.getItem("todo")); 13 | 14 | // get dark or light from localstorage 15 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 16 | 17 | return ( 18 |
19 |
23 |

27 | Filter 28 |

29 | 30 | 34 | Name{" "} 35 | 36 |
37 | 38 | 42 | Priority 43 | 44 |
45 |
46 |
47 | 56 | 60 |
61 | 62 | 63 |
64 | {allTodos?.map((todo) => ( 65 | 66 | ))} 67 |
68 |
69 |
70 | ); 71 | }; 72 | 73 | export default Search; 74 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/Content/ManageTask.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // react icons 4 | import { BiEdit } from "react-icons/bi"; 5 | import { RiDeleteBin5Fill } from "react-icons/ri"; 6 | 7 | const ManageTask = () => { 8 | return ( 9 |
10 |

11 | All Task 12 |

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 57 | 58 |
NameStatusDue DateCompletionAction
US Client projectCompleted45%100% 28 |
29 | 30 | 31 |
32 |
My workoutOn goingDaily80% 40 |
41 | 42 | 43 |
44 |
Meeting scheduleComming12-09-202350% 52 |
53 | 54 | 55 |
56 |
59 |
60 |
61 | ); 62 | }; 63 | 64 | export default ManageTask; 65 | -------------------------------------------------------------------------------- /src/Components/HomePage/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | // logo image 4 | import logo from "../../assets/logo.svg"; 5 | 6 | // styles 7 | import styles from "../../styles/styles"; 8 | 9 | // icons 10 | import { BsSun, BsMoon } from "react-icons/bs"; 11 | import { AiOutlineMenu } from "react-icons/ai"; 12 | import MobileSidebar from "./MobileSidebar"; 13 | import { Link, useNavigate } from "react-router-dom"; 14 | 15 | const Navbar = () => { 16 | const [toggle, setToggle] = useState( 17 | JSON.parse(localStorage.getItem("theme")) 18 | ? JSON.parse(localStorage.getItem("theme")) 19 | : false 20 | ); 21 | 22 | const navigate = useNavigate(); 23 | 24 | const [open, setOpen] = useState(false); 25 | 26 | localStorage.setItem("theme", JSON.stringify(toggle)); 27 | 28 | const element = document.documentElement; 29 | 30 | useEffect(() => { 31 | if (toggle) { 32 | element.classList.add("dark"); 33 | } else { 34 | element.classList.remove("dark"); 35 | } 36 | }, [toggle]); 37 | 38 | return ( 39 | <> 40 | 83 | {open && } 84 | 85 | ); 86 | }; 87 | 88 | export default Navbar; 89 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/Content/DefaultDashboard.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // react icons 4 | import { GrTask } from "react-icons/gr"; 5 | import { VscProject } from "react-icons/vsc"; 6 | import { MdOutlinePeopleAlt } from "react-icons/md"; 7 | 8 | const DefaultDashboard = () => { 9 | return ( 10 |
11 | {/* overview section */} 12 |

13 | Overview 14 |

15 |
16 |
17 |

18 | 19 | Total Members 20 |

21 |

46

22 |
23 | 24 |
25 |

28 | 29 | Total Task 30 |

31 |

4

32 |
33 | 34 |
35 |

36 | 37 | Total Projects 38 |

39 |

8

40 |
41 |
42 | 43 | {/* recent section */} 44 | 45 |

46 | Recent Task 47 |

48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 64 | 65 | 66 | 67 | 68 | 69 | 72 | 73 | 74 | 75 | 76 | 77 | 80 | 81 |
IdNamepriorityDescription
01Daily RotineHigh 62 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quam 63 |
02Daily RotineHigh 70 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quam 71 |
03Daily RotineHigh 78 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quam 79 |
82 |
83 |
84 | ); 85 | }; 86 | 87 | export default DefaultDashboard; 88 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/Content/Teams.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // react icons 4 | import { AiFillStar } from "react-icons/ai"; 5 | import { BiEdit } from "react-icons/bi"; 6 | import { RiDeleteBin5Fill } from "react-icons/ri"; 7 | 8 | // iamges 9 | import image1 from "../../../assets/image1.jpg"; 10 | import image2 from "../../../assets/image2.jpg"; 11 | import image3 from "../../../assets/image3.jpg"; 12 | 13 | const Teams = () => { 14 | return ( 15 |
16 |

17 | All Teams 18 |

19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 32 | 33 | 34 | 37 | 43 | 44 | 45 | 48 | 49 | 50 | 53 | 59 | 60 | 61 | 64 | 65 | 66 | 69 | 75 | 76 |
Team LeaderSummaryCompletionRewardAction
30 | image/1 31 | Lorem ipsum dolor sit amet.45% 35 | 36 | 38 |
39 | 40 | 41 |
42 |
46 | image/1 47 | amet consectetur adipisicing 80% 51 | 52 | 54 |
55 | 56 | 57 |
58 |
62 | image/1 63 | nostrum dolorem porro.100% 67 | 68 | 70 |
71 | 72 | 73 |
74 |
77 |
78 |
79 | ); 80 | }; 81 | 82 | export default Teams; 83 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Task/Task.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // react icons 4 | import { AiOutlineClockCircle, AiFillStar } from "react-icons/ai"; 5 | import { BiEdit } from "react-icons/bi"; 6 | import { RiDeleteBin5Fill } from "react-icons/ri"; 7 | import Modal from "../../Modal/Modal"; 8 | import EditTask from "./EditTask"; 9 | 10 | // show more text 11 | import ShowMoreText from "react-show-more-text"; 12 | 13 | const Task = ({ todoData }) => { 14 | const [todoDelete, setTodoDelete] = useState(false); 15 | const [todoEdit, setTodoEdit] = useState(false); 16 | const [completedTask, setCompletedTask] = useState( 17 | JSON.parse(localStorage.getItem("isCompleted")) || false 18 | ); 19 | 20 | // get dark or light from localstorage 21 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 22 | 23 | // set the completed task in local storage 24 | localStorage.setItem("isCompleted", JSON.stringify(completedTask)); 25 | 26 | return ( 27 | <> 28 |
34 | {todoData?.priority === "high" && ( 35 | 41 | )} 42 |
43 |

47 | {todoData?.title} 48 |

49 | setCompletedTask(true)} 54 | /> 55 |
56 | 57 |
58 |

59 | 67 | {todoData?.description} 68 | 69 |

70 |
71 |
72 |

76 | 81 | {todoData?.startDate}{" "} 82 | -{" "} 83 | {todoData?.endDate} 84 |

85 |
86 | setTodoEdit(true)} 91 | /> 92 | setTodoDelete(true)} 97 | /> 98 |
99 |
100 |
101 | 102 | {todoDelete && } 103 | {todoEdit && } 104 | 105 | ); 106 | }; 107 | 108 | export default Task; 109 | -------------------------------------------------------------------------------- /src/Components/MainDashboard/Sidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // avatar image 4 | import logo from "../../assets/logo.svg"; 5 | import mobileLogo from "../../assets/logo.png"; 6 | 7 | // react icons 8 | import { FiUsers } from "react-icons/fi"; 9 | import { BiArrowBack, BiHomeAlt2 } from "react-icons/bi"; 10 | import { IoLogOutOutline } from "react-icons/io5"; 11 | import { RiCheckboxMultipleBlankLine } from "react-icons/ri"; 12 | import { LuLayoutDashboard } from "react-icons/lu"; 13 | 14 | // styles 15 | import styles from "../../styles/styles"; 16 | 17 | import { useNavigate } from "react-router-dom"; 18 | import { AiOutlineFundProjectionScreen } from "react-icons/ai"; 19 | 20 | const Sidebar = ({ setActive, active }) => { 21 | // use navigate 22 | const navigate = useNavigate(); 23 | 24 | // get dark or light from localstorage 25 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 26 | 27 | return ( 28 | <> 29 | 120 | 121 | ); 122 | }; 123 | 124 | export default Sidebar; 125 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/DashboardSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // avatar image 4 | import avatar from "../../assets/avatar.png"; 5 | 6 | // react icons 7 | import { AiOutlinePlus } from "react-icons/ai"; 8 | import { BiHomeAlt2 } from "react-icons/bi"; 9 | import { CiSearch } from "react-icons/ci"; 10 | import { IoNotificationsOutline, IoLogOutOutline } from "react-icons/io5"; 11 | import { RxAvatar } from "react-icons/rx"; 12 | import { LuLayoutDashboard } from "react-icons/lu"; 13 | 14 | // styles 15 | import styles from "../../styles/styles"; 16 | import CreateTask from "./CreateTask"; 17 | import DashboardContent from "./DashboardContent"; 18 | import Dashboard from "./Dashboard"; 19 | import { useNavigate } from "react-router-dom"; 20 | 21 | const DashboardSidebar = ({ setActive, active }) => { 22 | const [createTask, setCreateTask] = useState(false); 23 | 24 | // use navigate 25 | const navigate = useNavigate(); 26 | 27 | // get dark or light from localstorage 28 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 29 | 30 | // getting user information from local storage 31 | const username = JSON.parse(localStorage.getItem("userName")); 32 | const bio = JSON.parse(localStorage.getItem("bio")); 33 | const PhotoUrl = JSON.parse(localStorage.getItem("PhotoUrl")); 34 | 35 | return ( 36 | <> 37 | 144 | {createTask && } 145 | 146 | ); 147 | }; 148 | 149 | export default DashboardSidebar; 150 | -------------------------------------------------------------------------------- /src/Components/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import { React, useState } from "react"; 2 | import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; 3 | import styles from "../../styles/styles"; 4 | import { Link, useNavigate } from "react-router-dom"; 5 | import { ToastContainer, toast } from "react-toastify"; 6 | import "react-toastify/dist/ReactToastify.css"; 7 | import Navbar from "../HomePage/Navbar"; 8 | 9 | const Login = () => { 10 | const navigate = useNavigate(); 11 | const [userName, setUserName] = useState(""); 12 | const [password, setPassword] = useState(""); 13 | const [visible, setVisible] = useState(false); 14 | 15 | const handleOnSubmit = (e) => { 16 | e.preventDefault(); 17 | 18 | // local storage data 19 | const getUsernameFromLocalStorage = JSON.parse( 20 | localStorage.getItem("userName") 21 | ); 22 | const getPasswordFromLocalStorage = JSON.parse( 23 | localStorage.getItem("password") 24 | ); 25 | 26 | if ( 27 | userName === getUsernameFromLocalStorage && 28 | password === getPasswordFromLocalStorage 29 | ) { 30 | toast.success("login success"); 31 | navigate("/user-dashboard"); 32 | } else { 33 | toast.error("Please provide the correct information"); 34 | } 35 | }; 36 | 37 | return ( 38 | <> 39 | 40 |
41 |
42 |

43 | Login 44 |

45 |
46 |
47 |
48 |
49 |
50 | 55 |
56 | setUserName(e.target.value)} 64 | className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 dark:bg-[#3960AC] dark:border-[#829ed6] dark:placeholder:text-[#7997D2] focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 65 | /> 66 |
67 |
68 |
69 | 74 |
75 | setPassword(e.target.value)} 83 | className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 dark:bg-[#3960AC] dark:border-[#829ed6] dark:placeholder:text-[#7997D2] dark:text-[#7997D2] focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 84 | /> 85 | {visible ? ( 86 | setVisible(false)} 90 | /> 91 | ) : ( 92 | setVisible(true)} 96 | /> 97 | )} 98 |
99 |
100 |
101 |
102 | 108 | 113 |
114 |
115 |

116 | Forgot your password? 117 |

118 |
119 |
120 |
121 | 126 |
127 |
129 |

Not have any account?

130 | 133 | Sign Up 134 | 135 |
136 |
137 |
138 |
139 | 140 | {/* toast message */} 141 | 153 |
154 | 155 | ); 156 | }; 157 | 158 | export default Login; 159 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Task/EditTask.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // react icons 4 | import { RxCross1 } from "react-icons/rx"; 5 | import { AiOutlinePlus } from "react-icons/ai"; 6 | 7 | // react toastify message 8 | import { ToastContainer, toast } from "react-toastify"; 9 | import "react-toastify/dist/ReactToastify.css"; 10 | 11 | // framer motion 12 | import { motion } from "framer-motion"; 13 | 14 | // global styles 15 | import styles from "../../../styles/styles"; 16 | import { redirect, useNavigate } from "react-router-dom"; 17 | 18 | const EditTask = ({ setTodoEdit }) => { 19 | const [title, setTitle] = useState(""); 20 | const [startDate, setStartDate] = useState(); 21 | const [endDate, setEndDate] = useState(); 22 | const [description, setDescription] = useState(""); 23 | const [priority, setPriority] = useState(""); 24 | 25 | const navigate = useNavigate(); 26 | 27 | // get old todos in the local storage 28 | const todos = JSON.parse(localStorage.getItem("todo") || "[]"); 29 | 30 | // making all data is an object 31 | const todo = { 32 | title, 33 | startDate, 34 | endDate, 35 | description, 36 | priority, 37 | }; 38 | 39 | todos.push(todo); 40 | 41 | // handle on submit 42 | const handleOnSubmit = (e) => { 43 | e.preventDefault(); 44 | // storing data to local storage 45 | localStorage.setItem("todo", JSON.stringify(todos)); 46 | toast.success("Task Successfully Created!"); 47 | window.location.reload(); 48 | }; 49 | 50 | return ( 51 |
52 |
53 | 58 |
59 |

60 | Edit Task 61 |

62 | setTodoEdit(false)} 67 | /> 68 |
69 | 70 |
71 | 74 |
75 | setTitle(e.target.value)} 82 | placeholder="Title Here" 83 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 84 | /> 85 |
86 | 87 |
88 |
89 | 94 |
95 | setStartDate(e.target.value)} 102 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 103 | /> 104 |
105 |
106 | 107 |
108 | 113 |
114 | setEndDate(e.target.value)} 121 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 122 | /> 123 |
124 |
125 |
126 | 127 | 132 |
133 | 142 |
143 | 144 |
145 | 150 | 163 |
164 | 165 | 170 |
171 | 172 | 173 | {/* toast message */} 174 | 186 |
187 |
188 | ); 189 | }; 190 | 191 | export default EditTask; 192 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/CreateTask.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // react icons 4 | import { RxCross1 } from "react-icons/rx"; 5 | import { AiOutlinePlus } from "react-icons/ai"; 6 | 7 | // react toastify message 8 | import { ToastContainer, toast } from "react-toastify"; 9 | import "react-toastify/dist/ReactToastify.css"; 10 | 11 | // framer motion 12 | import { motion } from "framer-motion"; 13 | 14 | // global styles 15 | import styles from "../../styles/styles"; 16 | import { redirect, useNavigate } from "react-router-dom"; 17 | 18 | const CreateTask = ({ setCreateTask }) => { 19 | const [title, setTitle] = useState(""); 20 | const [startDate, setStartDate] = useState(); 21 | const [endDate, setEndDate] = useState(); 22 | const [description, setDescription] = useState(""); 23 | const [priority, setPriority] = useState(""); 24 | 25 | const navigate = useNavigate(); 26 | 27 | // get old todos in the local storage 28 | const todos = JSON.parse(localStorage.getItem("todo") || "[]"); 29 | 30 | // generating id for every single todo 31 | const id = new Date().getTime().toString(); 32 | 33 | // making all data is an object 34 | const todo = { 35 | id, 36 | title, 37 | startDate, 38 | endDate, 39 | description, 40 | priority, 41 | todoCreated: true, 42 | }; 43 | 44 | todos.push(todo); 45 | 46 | // handle on submit 47 | const handleOnSubmit = (e) => { 48 | e.preventDefault(); 49 | // storing data to local storage 50 | localStorage.setItem("todo", JSON.stringify(todos)); 51 | toast.success("Task Successfully Created!"); 52 | window.location.reload(); 53 | }; 54 | 55 | return ( 56 |
57 |
58 | 63 |
64 |

65 | Create Task 66 |

67 | setCreateTask(false)} 72 | /> 73 |
74 | 75 |
76 | 79 |
80 | setTitle(e.target.value)} 87 | placeholder="Title Here" 88 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 89 | /> 90 |
91 | 92 |
93 |
94 | 99 |
100 | setStartDate(e.target.value)} 107 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 108 | /> 109 |
110 |
111 | 112 |
113 | 118 |
119 | setEndDate(e.target.value)} 126 | className="bg-[#D9E1F2] w-full mt-2 mb-6 rounded border border-[#9FB5DF] outline-none placeholder:text-[##D9E1F2] py-2 px-4" 127 | /> 128 |
129 |
130 |
131 | 132 | 137 |
138 | 147 |
148 | 149 |
150 | 155 | 168 |
169 | 170 | 175 |
176 | 177 | 178 | {/* toast message */} 179 | 191 |
192 |
193 | ); 194 | }; 195 | 196 | export default CreateTask; 197 | -------------------------------------------------------------------------------- /src/Components/UserDashboard/Account.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | // style 4 | import styles from "../../styles/styles"; 5 | 6 | // react icons 7 | import { 8 | AiOutlineCamera, 9 | AiOutlineEye, 10 | AiOutlineEyeInvisible, 11 | } from "react-icons/ai"; 12 | import { RxAvatar } from "react-icons/rx"; 13 | 14 | // react toastify 15 | import { ToastContainer, toast } from "react-toastify"; 16 | import "react-toastify/dist/ReactToastify.css"; 17 | 18 | // react router dom 19 | import { Link } from "react-router-dom"; 20 | 21 | // avatar image 22 | import avatar from "../../assets/avatar.png"; 23 | 24 | const Account = () => { 25 | // get the user info from localstorage 26 | const username = JSON.parse(localStorage.getItem("userName")); 27 | const profileImg = JSON.parse(localStorage.getItem("PhotoUrl")); 28 | const userbio = JSON.parse(localStorage.getItem("bio")); 29 | const Email = JSON.parse(localStorage.getItem("email")); 30 | const userPassword = JSON.parse(localStorage.getItem("password")); 31 | 32 | // all states 33 | const [email, setEmail] = useState(Email ? Email : ""); 34 | const [userName, setUserName] = useState(username ? username : ""); 35 | const [password, setPassword] = useState(userPassword ? userPassword : ""); 36 | const [visible, setVisible] = useState(false); 37 | const [photoUrl, setPhotoUrl] = useState(null); 38 | const [bio, setBio] = useState(userbio ? userbio : ""); 39 | 40 | // const handleFileInputChange = (e) => { 41 | // const file = e.target.files[0]; 42 | // const url = URL.createObjectURL(file); 43 | // setUrl(url); 44 | // setAvatar(file); 45 | // }; 46 | 47 | // handleImageChange 48 | const handleImageChange = (e) => { 49 | e.preventDefault(); 50 | const file = e.target.files[0]; 51 | const url = URL.createObjectURL(file); 52 | setPhotoUrl(url); 53 | }; 54 | 55 | const handleFormSubmit = (e) => { 56 | e.preventDefault(); 57 | 58 | // local storage data 59 | localStorage.setItem("email", JSON.stringify(email)); 60 | localStorage.setItem("password", JSON.stringify(password)); 61 | localStorage.setItem("userName", JSON.stringify(userName)); 62 | localStorage.setItem("bio", JSON.stringify(bio)); 63 | localStorage.setItem("PhotoUrl", JSON.stringify(photoUrl)); 64 | localStorage.setItem("isAuthenticated", true); 65 | toast.success("Your information successfully updated!"); 66 | }; 67 | 68 | // get dark or light from localstorage 69 | const darkTheme = JSON.parse(localStorage.getItem("theme")); 70 | 71 | return ( 72 |
73 |
74 |
75 |
76 | profile/image 81 | 82 |
86 | 92 | 93 | 100 |
101 |
102 |
103 |
104 | 111 |
112 | setUserName(e.target.value)} 119 | className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm ${ 120 | darkTheme ? "bg-[#3960AC] text-[#D9E1F2]" : "" 121 | }`} 122 | /> 123 |
124 |
125 |
126 | 133 |
134 | setEmail(e.target.value)} 141 | className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm ${ 142 | darkTheme ? "bg-[#3960AC] text-[#D9E1F2]" : "" 143 | }`} 144 | /> 145 |
146 |
147 |
148 | 155 |
156 | setPassword(e.target.value)} 163 | className={`appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm ${ 164 | darkTheme ? "bg-[#3960AC] text-[#D9E1F2]" : "" 165 | }`} 166 | /> 167 | {visible ? ( 168 | setVisible(false)} 172 | /> 173 | ) : ( 174 | setVisible(true)} 178 | /> 179 | )} 180 |
181 |
182 | 183 |
184 | 191 |
192 | 202 |
203 |
204 | 205 |
206 | 213 | 214 | {/* toast message */} 215 | 227 |
228 |
229 |
230 | ); 231 | }; 232 | 233 | export default Account; 234 | -------------------------------------------------------------------------------- /src/Components/Signup/SignUp.jsx: -------------------------------------------------------------------------------- 1 | import { React, useState } from "react"; 2 | 3 | // react icons 4 | import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"; 5 | import { RxAvatar } from "react-icons/rx"; 6 | 7 | // styles 8 | import styles from "../../styles/styles"; 9 | 10 | // link from react router dom 11 | import { Link } from "react-router-dom"; 12 | 13 | // react toastify 14 | import { ToastContainer, toast } from "react-toastify"; 15 | import "react-toastify/dist/ReactToastify.css"; 16 | 17 | // manually imported components 18 | import Navbar from "../HomePage/Navbar"; 19 | 20 | const Signup = () => { 21 | const [email, setEmail] = useState(""); 22 | const [userName, setUserName] = useState(""); 23 | const [avatar, setAvatar] = useState(null); 24 | const [password, setPassword] = useState(""); 25 | const [visible, setVisible] = useState(false); 26 | const [url, setUrl] = useState(null); 27 | const [bio, setBio] = useState(""); 28 | 29 | // get the user email fro localstorage 30 | const userEmailFromLocalstorage = JSON.parse(localStorage.getItem("email")); 31 | 32 | const handleFileInputChange = (e) => { 33 | const file = e.target.files[0]; 34 | const url = URL.createObjectURL(file); 35 | setUrl(url); 36 | setAvatar(file); 37 | }; 38 | 39 | const handleFormSubmit = (e) => { 40 | e.preventDefault(); 41 | 42 | if (email === userEmailFromLocalstorage) { 43 | toast.error( 44 | `The "${email}" already registered, Please try to different email!` 45 | ); 46 | } else { 47 | toast.success("Your account successfully created, Now login!"); 48 | 49 | // local storage data 50 | localStorage.setItem("email", JSON.stringify(email)); 51 | localStorage.setItem("password", JSON.stringify(password)); 52 | localStorage.setItem("userName", JSON.stringify(userName)); 53 | localStorage.setItem("bio", JSON.stringify(bio)); 54 | localStorage.setItem("PhotoUrl", JSON.stringify(url)); 55 | localStorage.setItem("isAuthenticated", true); 56 | } 57 | }; 58 | 59 | return ( 60 | <> 61 | 62 |
63 |
64 |

65 | Sign Up 66 |

67 |
68 |
69 |
70 |
71 |
72 | 77 |
78 | setUserName(e.target.value)} 86 | className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:bg-[#3960AC] dark:border-[#6e93dd] rounded-md shadow-sm placeholder-gray-400 dark:placeholder:text-[#7997D2] focus:outline-none dark:text-[#7997D2] focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 87 | /> 88 |
89 |
90 |
91 | 96 |
97 | setEmail(e.target.value)} 105 | className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:bg-[#3960AC] dark:border-[#6e93dd] rounded-md shadow-sm placeholder-gray-400 dark:placeholder:text-[#7997D2] focus:outline-none dark:text-[#7997D2] focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 106 | /> 107 |
108 |
109 |
110 | 115 |
116 | setPassword(e.target.value)} 124 | className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:bg-[#3960AC] dark:border-[#6e93dd] rounded-md shadow-sm placeholder-gray-400 dark:placeholder:text-[#7997D2] focus:outline-none dark:text-[#7997D2] focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 125 | /> 126 | {visible ? ( 127 | setVisible(false)} 131 | /> 132 | ) : ( 133 | setVisible(true)} 137 | /> 138 | )} 139 |
140 |
141 | 142 |
143 | 148 |
149 | 158 |
159 |
160 | 161 |
162 | 163 | {avatar ? ( 164 | avatar 169 | ) : ( 170 | 171 | )} 172 | 173 | 174 | 187 |
188 | 189 |
190 | 195 | 196 | {/* toast message */} 197 | 209 |
210 |
212 |

Already have an account?

213 | 216 | Sign in 217 | 218 |
219 |
220 |
221 |
222 |
223 | 224 | ); 225 | }; 226 | 227 | export default Signup; 228 | --------------------------------------------------------------------------------