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

Add landing page and handling wrong url

Browse Source
This commit is contained in:
sosokker 2023-11-23 00:19:32 +07:00
parent 8c09b6bab5
commit 48bc82fb1e
7 changed files with 144 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/App.jsx
View File

@ -1,6 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import "./App.css"; import "./App.css";
import { Route, Routes } from "react-router-dom"; import { Route, Routes, Navigate } from "react-router-dom";
import axios from "axios"; import axios from "axios";
import TestAuth from "./components/testAuth"; import TestAuth from "./components/testAuth";
import LoginPage from "./components/authentication/LoginPage"; import LoginPage from "./components/authentication/LoginPage";
@ -13,6 +13,8 @@ import Eisenhower from "./components/EisenhowerMatrix/Eisenhower";
import PrivateRoute from "./PrivateRoute"; import PrivateRoute from "./PrivateRoute";
import ProfileUpdatePage from "./components/profilePage"; import ProfileUpdatePage from "./components/profilePage";
import Dashboard from "./components/dashboard/dashboard"; import Dashboard from "./components/dashboard/dashboard";
import { LandingPage } from "./components/landingPage/LandingPage";
import PublicRoute from "./PublicRoute";
import { useAuth } from "./hooks/AuthHooks"; import { useAuth } from "./hooks/AuthHooks";
@ -60,10 +62,17 @@ const App = () => {
const NonAuthenticatedComponents = () => { const NonAuthenticatedComponents = () => {
return ( return (
<div> <div>
<NavBar />
<Routes> <Routes>
<Route path="/login" element={<LoginPage />} /> <Route exact path="/l" element={<PublicRoute />}>
<Route path="/signup" element={<SignUpPage />} /> <Route exact path="/l" element={<LandingPage />} />
</Route>
<Route exact path="/login" element={<PublicRoute />}>
<Route exact path="/login" element={<LoginPage />} />
</Route>
<Route exact path="/signup" element={<PublicRoute />}>
<Route exact path="/signup" element={<SignUpPage />} />
</Route>
<Route path="*" element={<Navigate to="/l" />} />
</Routes> </Routes>
</div> </div>
); );
@ -91,8 +100,7 @@ const AuthenticatedComponents = () => {
<Route exact path="/priority" element={<PrivateRoute />}> <Route exact path="/priority" element={<PrivateRoute />}>
<Route exact path="/priority" element={<Eisenhower />} /> <Route exact path="/priority" element={<Eisenhower />} />
</Route> </Route>
<Route path="/login" element={<LoginPage />} /> <Route path="*" element={<Navigate to="/" />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes> </Routes>
</div> </div>
</div> </div>

2
frontend/src/PrivateRoute.jsx
View File

@ -3,7 +3,7 @@ import { useAuth } from "src/hooks/AuthHooks";
const PrivateRoute = () => { const PrivateRoute = () => {
const { isAuthenticated } = useAuth(); const { isAuthenticated } = useAuth();
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />; return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
}; };
export default PrivateRoute; export default PrivateRoute;

9
frontend/src/PublicRoute.jsx Normal file
View File

@ -0,0 +1,9 @@
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "src/hooks/AuthHooks";
const PublicRoute = () => {
const { isAuthenticated } = useAuth();
return isAuthenticated ? <Navigate to="/d" /> : <Outlet />;
};
export default PublicRoute;

45
frontend/src/components/dashboard/dashboard.jsx
View File

@ -1,24 +1,10 @@
import { import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react";
Card, import KpiCard from "./kpiCard";
Grid,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
Text,
Title,
Legend,
} from "@tremor/react";
import KpiCard from "./KpiCard";
import { BarChartGraph } from "./Barchart"; import { BarChartGraph } from "./Barchart";
import DonutChartGraph from "./DonutChart"; import DonutChartGraph from "./DonutChart";
import { AreaChartGraph } from "./Areachart"; import { AreaChartGraph } from "./Areachart";
import ProgressCircleChart from "./ProgressCircle"; import ProgressCircleChart from "./ProgressCircle";
const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div className="flex flex-col p-12"> <div className="flex flex-col p-12">
@ -48,8 +34,7 @@ export default function Dashboard() {
<Legend <Legend
className="mt-3 mx-auto w-1/2" className="mt-3 mx-auto w-1/2"
categories={["Completed Tasks", "Assigned Tasks"]} categories={["Completed Tasks", "Assigned Tasks"]}
colors={["indigo"]} colors={["indigo"]}></Legend>
></Legend>
</Card> </Card>
<Card> <Card>
<BarChartGraph /> <BarChartGraph />
@ -60,18 +45,18 @@ export default function Dashboard() {
</Grid> </Grid>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<div className="h-31"> <div className="h-31">
<Card className="mx-auto h-full"> <Card className="mx-auto h-full">
<Title>Tasks</Title> <Title>Tasks</Title>
<DonutChartGraph /> <DonutChartGraph />
<br /> <br />
<Legend <Legend
className="mt-3 mx-auto w-1/2" className="mt-3 mx-auto w-1/2"
categories={["Todo Task", "Recurrence Task"]} categories={["Todo Task", "Recurrence Task"]}
colors={["rose", "yellow"]} colors={["rose", "yellow"]}
/> />
</Card> </Card>
</div> </div>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>

75
frontend/src/components/landingPage/LandingPage.jsx Normal file
View File

@ -0,0 +1,75 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
export function LandingPage() {
return (
<div className="flex flex-col min-h-screen bg-gray-100 items-center">
<div className="bg-black text-white p-4 w-full">
<div className="container mx-auto flex justify-between items-center">
<h1 className="text-4xl font-bold">TurTask</h1>
<div className="space-x-4">
<a
href="\signup"
className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
Register
</a>
<a
href="\login"
className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
Login
</a>
</div>
</div>
</div>
<div className="container mx-auto flex-grow p-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="grid grid-rows-3">
<div className="text-center">
<img
src="https://img.freepik.com/vektoren-kostenlos/niedlich-schildkroete-meditation-yoga-karikatur-vektor-symbol-illustration-tier-sport-symbol-begriff-freigestellt_138676-6833.jpg"
alt="Your Picture"
className="rounded-full w-52 h-52 mx-auto mb-4"
/>
</div>
<div className="text-left">
<h1 className="text-6xl font-bold mb-6">TurTask</h1>
<p className="text-5xl font-bold mb-6">Your Ultimate Task Management</p>
</div>
<div className="text-left">
<p className="text-gray-700 text-xl font-bold">
TurTask is a task and project management tool that incorporates gamification elements.
</p>
</div>
</div>
<div className="flex items-center justify-center w-full">
<div className="bg-white p-10 rounded-lg shadow-md w-full md:w-96 lg:w-1/2">
<h1 className="text-4xl font-semibold mb-6">Create your account</h1>
<p className="text-gray-700 mb-6 text-lg">Start spending more time on your own table.</p>
<div className="font-bold">
<div className="mb-4">
<button className="flex items-center justify-center bg-blue-500 text-white px-10 py-3 rounded-lg">
<span className="mr-3">
<FontAwesomeIcon icon={faGoogle} />
</span>
Sign Up with Google
</button>
</div>
<div className="mb-4">
<button className="flex items-center justify-center bg-gray-800 text-white px-10 py-3 rounded-lg">
<span className="mr-3">
<FontAwesomeIcon icon={faGithub} />
</span>
Sign Up with Github
</button>
</div>
<div>
<button className="bg-green-500 text-white px-10 py-3 rounded-lg">Sign Up with your email.</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

64
frontend/src/components/landingPage/landingPage.jsx
View File

@ -1,64 +0,0 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
function landingPage() {
return (
<div className='flex flex-col min-h-screen bg-gray-100 items-center'>
<div className='bg-black text-white p-4 w-full'>
<div className='container mx-auto flex justify-between items-center'>
<h1 className='text-4xl font-bold'>TurTask</h1>
<div className='space-x-4'>
<a href='#' className='text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold'>Register</a>
<a href='#' className='text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold'>Login</a>
</div>
</div>
</div>
<div className='container mx-auto flex-grow p-12'>
<div className='grid grid-cols-1 md:grid-cols-2 gap-8'>
<div className='grid grid-rows-3'>
<div className='text-center'>
<img src='https://img.freepik.com/vektoren-kostenlos/niedlich-schildkroete-meditation-yoga-karikatur-vektor-symbol-illustration-tier-sport-symbol-begriff-freigestellt_138676-6833.jpg' alt='Your Picture' className='rounded-full w-52 h-52 mx-auto mb-4' />
</div>
<div className='text-left'>
<h1 className='text-6xl font-bold mb-6'>TurTask</h1>
<p className='text-5xl font-bold mb-6'>Your Ultimate Task Management</p>
</div>
<div className='text-left'>
<p className='text-gray-700 text-xl font-bold'>
TurTask is a task and project management tool that incorporates gamification elements.
</p>
</div>
</div>
<div className='flex items-center justify-center w-full'>
<div className='bg-white p-10 rounded-lg shadow-md w-full md:w-96 lg:w-1/2'>
<h1 className='text-4xl font-semibold mb-6'>Create your account</h1>
<p className='text-gray-700 mb-6 text-lg'>Start spending more time on your own table.</p>
<div className='font-bold'>
<div className='mb-4'>
<button className='flex items-center justify-center bg-blue-500 text-white px-10 py-3 rounded-lg'>
<span className='mr-3'><FontAwesomeIcon icon={faGoogle} /></span>
Sign Up with Google
</button>
</div>
<div className='mb-4'>
<button className='flex items-center justify-center bg-gray-800 text-white px-10 py-3 rounded-lg'>
<span className='mr-3'><FontAwesomeIcon icon={faGithub} /></span>
Sign Up with Github
</button>
</div>
<div>
<button className='bg-green-500 text-white px-10 py-3 rounded-lg'>
Sign Up with your email.
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default landingPage

61
frontend/src/components/signup/Signup.jsx
View File

@ -1,39 +1,38 @@
import React from 'react'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
function Signup() { function Signup() {
return ( return (
<div className="flex items-center justify-center h-screen"> <div className="flex items-center justify-center h-screen">
<div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md"> <div className="flex flex-col items-center bg-white p-10 rounded-lg shadow-md">
<h1 className="text-4xl font-semibold mb-6">Create your account</h1> <h1 className="text-4xl font-semibold mb-6">Create your account</h1>
<p className="text-gray-700 mb-6 text-lg"> <p className="text-gray-700 mb-6 text-lg">Start spending more time on your own table.</p>
Start spending more time on your own table. <div className="font-bold">
</p> <div className="mb-4">
<div className='font-bold'> <button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg">
<div className="mb-4"> <span className="mr-3">
<button className="flex items-center justify-center bg-blue-500 text-white px-14 py-3 rounded-lg"> <FontAwesomeIcon icon={faGoogle} />
<span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span> </span>
Sign Up with Google Sign Up with Google
</button> </button>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg"> <button className="flex items-center justify-center bg-gray-800 text-white px-14 py-3 rounded-lg">
<span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span> <span className="mr-3">
Sign Up with Github <FontAwesomeIcon icon={faGithub} />
</button> </span>
</div> Sign Up with Github
</button>
</div>
<div> <div>
<button className="bg-green-500 text-white px-14 py-3 rounded-lg"> <button className="bg-green-500 text-white px-14 py-3 rounded-lg">Sign Up with your email.</button>
Sign Up with your email. </div>
</button>
</div>
</div>
</div>
</div> </div>
); </div>
</div>
);
} }
export default Signup; export default Signup;