slococo
/
fids
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow anonymous users to access the website 

I.e, without login or signup
This commit is contained in:
Santiago Lo Coco 2023-12-07 15:28:03 -03:00
parent 047e580502
commit 6302458c8f
10 changed files with 127 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
browser-domain/src/App.tsx
View File

@ -1,5 +1,5 @@
import { LogIn } from "./components/LogIn/LogIn";
import { Navigate, Route, RouteProps, Routes } from "react-router";
import { Navigate, Route, RouteProps, Routes, useNavigate, useParams } from "react-router";
import { SignUp } from "./components/SignUp/SignUp";
import { CreateAirline } from "./components/SignUp/CreateAirline";
import { Home } from "./components/Home/Home";
@ -7,35 +7,60 @@ import { CreateFlight } from "./components/CreateFlight/CreateFlight";
import { Button } from "antd";
import useAuth, { AuthProvider } from "./useAuth";
import { EditFlight } from "./components/CreateFlight/EditFlight";
import LandingPage from "./components/Landing/Landing";
function Router() {
const { user, logout, isAirline, isAdmin } = useAuth();
const navigate = useNavigate()
return (
<div className="App">
<Routes>
<Route path="/login" element={<LogIn />} />
<Route path="/login" element={!user ? <LogIn /> : <Navigate to="/flights" />} />
<Route path="/signup" element={<SignUp />} />
<Route path="/create-airline" element={!isAdmin ? <LogIn /> : <CreateAirline />} />
<Route path="/home" element={!user ? <LogIn /> : <Home />} />
<Route path="/create-flight" element={!isAirline ? <LogIn /> : <CreateFlight />} />
<Route path="/edit-flight/:id" element={!isAirline && !isAdmin ? <LogIn /> : <EditFlight />} />
<Route path="/" element={!user ? <LogIn /> : <Home />} />
<Route path="/create-airline" element={!isAdmin ? (!user ? <Navigate to="/login" state={"/create-airline"} /> : <Navigate to="/flights" />) : <CreateAirline />} />
<Route path="/flights" element={<Home />} />
<Route path="/create-flight" element={!isAirline ? (!user ? <Navigate to="/login" state={"/create-flight"} /> : <Navigate to="/flights" />) : <CreateFlight />} />
<Route path="/edit-flight/:id" element={<EditFlightComponent />} />
<Route path="/" element={<LandingPage />} />
<Route path="*" element={<Navigate to="/" />} />
</Routes>
{window.location.pathname != '/' &&
<div className="LogoutButton">
{
{!!!localStorage.getItem("token") ?
<Button
onClick={() => navigate("/login")}
>
Login
</Button>
:
<Button
onClick={logout}
disabled={!!!localStorage.getItem("token")}
>
Logout
</Button>
}
</div>
}
</div>
);
}
const EditFlightComponent = () => {
const { isAirline, isAdmin, user } = useAuth();
const params = useParams();
if (!isAirline && !isAdmin) {
if (!user) {
return <Navigate to="/login" state={{ intendedPath: `/edit-flight/${params.id}` }} />;
} else {
return <Navigate to="/flights" />;
}
} else {
return <EditFlight />;
}
};
function App() {
return (
<AuthProvider>

2
browser-domain/src/components/CreateFlight/CreateFlight.tsx
View File

@ -46,7 +46,7 @@ export const CreateFlight = () => {
createFlight(newFlightData, token)
.then((data) => {
setFlight(data);
navigate("/home")
navigate("/flights")
})
.catch((error) => {
try {

2
browser-domain/src/components/CreateFlight/EditFlight.tsx
View File

@ -52,7 +52,7 @@ export const EditFlight: React.FC<Props> = (props) => {
editFlight(id, data, token)
.then((data) => {
navigate("/home")
navigate("/flights")
})
.catch((error) => {
try {

2
browser-domain/src/components/Home/Home.tsx
View File

@ -75,6 +75,7 @@ export const Home: React.FC<Props> = (props) => {
} else {
newParams.delete("search")
}
setCurrentPage(1)
navigate(`?${newParams.toString()}`);
};
@ -90,7 +91,6 @@ export const Home: React.FC<Props> = (props) => {
{isAdmin ? <button onClick={() => { navigate("/create-airline") }}>Create airline user</button> : <></>}
<form onSubmit={handleSearchSubmit}>
<Space size={8} direction="horizontal">
{/* <h2>Flights</h2> */}
<div style={{ display: 'flex' }}>
<Input
type="text"

38
browser-domain/src/components/Landing/Landing.css Normal file
View File

@ -0,0 +1,38 @@
.LandingPageContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
}
.Title {
font-size: 2.5em;
margin-bottom: 20px;
}
.Description {
font-size: 1.2em;
margin-bottom: 20px;
}
.ButtonContainer {
display: flex;
gap: 20px;
}
.StyledLink {
text-decoration: none;
}
.StyledButton {
padding: 10px 20px;
font-size: 1.2em;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

39
browser-domain/src/components/Landing/Landing.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from "react";
import { Link, useNavigate } from "react-router-dom";
import "./Landing.css";
const LandingPage: React.FC = () => {
const navigate = useNavigate();
const handleSubscribeClick = () => {
navigate("/login");
};
const handleGoToFlightsClick = () => {
navigate("/flights");
};
return (
<div className="LandingPageContainer">
<h1 className="Title">Welcome to FIDS!</h1>
<p className="Description">
If you want to subscribe to flights, please create or log in to your account.
</p>
<div className="ButtonContainer">
<Link to="/login" className="StyledLink">
<button className="StyledButton" onClick={handleSubscribeClick}>Create an Account</button>
</Link>
</div>
<p className="Description">
Otherwise, you can continue to the flights page.
</p>
<div className="ButtonContainer">
<button className="StyledButton" onClick={handleGoToFlightsClick}>
Go to Flights
</button>
</div>
</div>
);
};
export default LandingPage;

9
browser-domain/src/components/LogIn/LogIn.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from "react";
import { Button, Input } from "antd";
import useAuth from "../../useAuth";
import { useNavigate } from "react-router";
import { useLocation, useNavigate } from "react-router";
export const LogIn = () => {
const { login, loading, error } = useAuth();
@ -9,6 +9,11 @@ export const LogIn = () => {
const [password, setPassword] = useState("");
const navigate = useNavigate();
const location = useLocation();
const { state } = location;
console.log(state)
return (
<div className="Box Small">
<div className="Section">
@ -27,7 +32,7 @@ export const LogIn = () => {
<Button
style={{ width: "100%" }}
onClick={async () =>
login({ email, password })
login({ email, password}, state)
}
name="Login"
loading={loading}

2
browser-domain/src/hooks/useCreateAirline.tsx
View File

@ -24,7 +24,7 @@ export const useCreateAirline = () => {
const createResponse = await createAirlineAPI(credentials, token);
if (createResponse.id) {
navigate("/home");
navigate("/flights");
} else {
setError(createResponse.message);
}

2
browser-domain/src/hooks/useCreateUser.tsx
View File

@ -16,7 +16,7 @@ export const useCreateUser = () => {
const createResponse = await createUserAPI(credentials);
if (createResponse.id) {
login(credentials);
login(credentials, null)
} else {
setError(createResponse.message);
}

8
browser-domain/src/useAuth.tsx
View File

@ -11,7 +11,7 @@ interface AuthContextType {
isAdmin: boolean;
token?: string;
error?: any;
login: (credentials: Credentials) => void;
login: (credentials: Credentials, url: string | null) => void;
signUp: (email: string, name: string, password: string) => void;
logout: () => void;
}
@ -71,7 +71,7 @@ export function AuthProvider({
}
}, []);
function login(credentials: Credentials) {
function login(credentials: Credentials, url: string | null) {
setLoading(true);
const tokens = logIn(credentials)
.then((x) => {
@ -83,7 +83,7 @@ export function AuthProvider({
.then(y => {
setUser(y);
setToken(x.access_token)
navigate("/home")
navigate(url ? url : "/flights")
})
.catch((error) => {
try {
@ -107,7 +107,7 @@ export function AuthProvider({
localStorage.removeItem("token");
setUser(undefined);
setToken(undefined)
navigate("/login")
navigate("/")
}
const memoedValue = useMemo(