mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 05:54:07 +01:00
Add landing page and handling wrong url
This commit is contained in:
sosokker
parent
8c09b6bab5
commit
48bc82fb1e
@ -1,6 +1,6 @@
|
||||
import { useEffect } from "react";
|
||||
import "./App.css";
|
||||
import { Route, Routes } from "react-router-dom";
|
||||
import { Route, Routes, Navigate } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import TestAuth from "./components/testAuth";
|
||||
import LoginPage from "./components/authentication/LoginPage";
|
||||
@ -13,6 +13,8 @@ import Eisenhower from "./components/EisenhowerMatrix/Eisenhower";
|
||||
import PrivateRoute from "./PrivateRoute";
|
||||
import ProfileUpdatePage from "./components/profilePage";
|
||||
import Dashboard from "./components/dashboard/dashboard";
|
||||
import { LandingPage } from "./components/landingPage/LandingPage";
|
||||
import PublicRoute from "./PublicRoute";
|
||||
|
||||
import { useAuth } from "./hooks/AuthHooks";
|
||||
|
||||
@ -60,10 +62,17 @@ const App = () => {
|
||||
const NonAuthenticatedComponents = () => {
|
||||
return (
|
||||
<div>
|
||||
<NavBar />
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/signup" element={<SignUpPage />} />
|
||||
<Route exact path="/l" element={<PublicRoute />}>
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
@ -91,8 +100,7 @@ const AuthenticatedComponents = () => {
|
||||
<Route exact path="/priority" element={<PrivateRoute />}>
|
||||
<Route exact path="/priority" element={<Eisenhower />} />
|
||||
</Route>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/signup" element={<SignUpPage />} />
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ import { useAuth } from "src/hooks/AuthHooks";
|
||||
|
||||
const PrivateRoute = () => {
|
||||
const { isAuthenticated } = useAuth();
|
||||
return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
|
||||
return isAuthenticated ? <Outlet /> : <Navigate to="/" />;
|
||||
};
|
||||
|
||||
export default PrivateRoute;
|
||||
|
||||
9
frontend/src/PublicRoute.jsx
Normal file
9
frontend/src/PublicRoute.jsx
Normal 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;
|
||||
@ -1,24 +1,10 @@
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Tab,
|
||||
TabGroup,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
Text,
|
||||
Title,
|
||||
Legend,
|
||||
} from "@tremor/react";
|
||||
import KpiCard from "./KpiCard";
|
||||
import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, Legend } from "@tremor/react";
|
||||
import KpiCard from "./kpiCard";
|
||||
import { BarChartGraph } from "./Barchart";
|
||||
import DonutChartGraph from "./DonutChart";
|
||||
import { AreaChartGraph } from "./Areachart";
|
||||
import ProgressCircleChart from "./ProgressCircle";
|
||||
|
||||
const valueFormatter = (number) =>
|
||||
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div className="flex flex-col p-12">
|
||||
@ -48,8 +34,7 @@ export default function Dashboard() {
|
||||
<Legend
|
||||
className="mt-3 mx-auto w-1/2"
|
||||
categories={["Completed Tasks", "Assigned Tasks"]}
|
||||
colors={["indigo"]}
|
||||
></Legend>
|
||||
colors={["indigo"]}></Legend>
|
||||
</Card>
|
||||
<Card>
|
||||
<BarChartGraph />
|
||||
@ -60,18 +45,18 @@ export default function Dashboard() {
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="h-31">
|
||||
<Card className="mx-auto h-full">
|
||||
<Title>Tasks</Title>
|
||||
<DonutChartGraph />
|
||||
<br />
|
||||
<Legend
|
||||
className="mt-3 mx-auto w-1/2"
|
||||
categories={["Todo Task", "Recurrence Task"]}
|
||||
colors={["rose", "yellow"]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="h-31">
|
||||
<Card className="mx-auto h-full">
|
||||
<Title>Tasks</Title>
|
||||
<DonutChartGraph />
|
||||
<br />
|
||||
<Legend
|
||||
className="mt-3 mx-auto w-1/2"
|
||||
categories={["Todo Task", "Recurrence Task"]}
|
||||
colors={["rose", "yellow"]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
|
||||
75
frontend/src/components/landingPage/LandingPage.jsx
Normal file
75
frontend/src/components/landingPage/LandingPage.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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
|
||||
@ -1,39 +1,38 @@
|
||||
import React from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faGoogle, faGithub } from '@fortawesome/free-brands-svg-icons';
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
function Signup() {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<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>
|
||||
<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-14 py-3 rounded-lg">
|
||||
<span className="mr-3"><FontAwesomeIcon icon={faGoogle} /></span>
|
||||
Sign Up with Google
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<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>
|
||||
<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-14 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-14 py-3 rounded-lg">
|
||||
<span className="mr-3"><FontAwesomeIcon icon={faGithub} /></span>
|
||||
Sign Up with Github
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<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>
|
||||
Sign Up with Github
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button className="bg-green-500 text-white px-14 py-3 rounded-lg">
|
||||
Sign Up with your email.
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button className="bg-green-500 text-white px-14 py-3 rounded-lg">Sign Up with your email.</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Signup;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user