From 2c06a8adb29a0389fe12bed516e3372f019d376c Mon Sep 17 00:00:00 2001 From: Felix Albrigtsen Date: Sun, 24 Apr 2022 13:01:19 +0200 Subject: [PATCH] Universal login and appbar improvements --- src/client/src/FrontPage.js | 36 ++-------------- src/client/src/LoginPage.js | 14 +++++-- src/client/src/TournamentHistory.js | 26 ++++++------ src/client/src/TournamentManager.js | 6 +++ src/client/src/TournamentOverview.js | 42 ++++++++++--------- src/client/src/TournamentTeams.js | 3 ++ src/client/src/components/AsuraBar.js | 8 ++-- .../{nosuchpage.js => NoSuchPage.js} | 0 src/client/src/components/NoUserPage.js | 19 +++++++++ src/client/src/components/NotLoggedIn.js | 5 +++ 10 files changed, 89 insertions(+), 70 deletions(-) rename src/client/src/components/{nosuchpage.js => NoSuchPage.js} (100%) create mode 100644 src/client/src/components/NoUserPage.js create mode 100644 src/client/src/components/NotLoggedIn.js diff --git a/src/client/src/FrontPage.js b/src/client/src/FrontPage.js index a2e5f32..6e3182e 100644 --- a/src/client/src/FrontPage.js +++ b/src/client/src/FrontPage.js @@ -199,48 +199,18 @@ function Home(props) { } -// class LoginManager { -// checkLogin() { -// fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`) -// .then(res => res.json()) -// .then(data => { -// if (data.status !== "OK") { -// console.error(data.data); -// return; -// } -// console.log(data); -// setUser(data.data); -// return user; -// }) -// .catch((err) => console.log(err.message)); -// } - -// isLoggedIn() { -// let loggedIn = user.googleId !== "" && user.asuraId !== -1; -// console.log(loggedIn); -// return loggedIn; -// } -// isManager() { -// return this.isLoggedIn() && user.isManager; -// } -// } - -// let login = new LoginManager(); -// login.checkLogin(); - - let showSuccess = (message) => {}; let showError = (message) => {}; export default function App() { const [user, setUser] = React.useState({}); - let checkLogin = () => { + let fetchUser = () => { fetch(process.env.REACT_APP_API_URL + `/users/getSavedUser`) .then(res => res.json()) .then(data => { if (data.status !== "OK") { setUser({ isManager: false, isLoggedIn: false }); - console.log(data.data); + console.log(data.data); // "No user logged in" return; } let u = data.data; @@ -255,7 +225,7 @@ export default function App() { } React.useEffect(() => { - checkLogin(); + fetchUser(); }, []); const [openError, setOpenError] = React.useState(false); diff --git a/src/client/src/LoginPage.js b/src/client/src/LoginPage.js index 8ee614a..4537bb4 100644 --- a/src/client/src/LoginPage.js +++ b/src/client/src/LoginPage.js @@ -6,12 +6,20 @@ import ErrorSnackbar from "./components/ErrorSnackbar"; import {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material'; export default function LoginPage(props) { + if (props.user.isLoggedIn) { + //Redirect to the front page if the user is logged in + window.location.href = "/"; + return; + } + return ( <> - - + + + + You must be logged in to access administrator features. + - Sign in with google Sign in with google diff --git a/src/client/src/TournamentHistory.js b/src/client/src/TournamentHistory.js index 9bde926..d9edce7 100644 --- a/src/client/src/TournamentHistory.js +++ b/src/client/src/TournamentHistory.js @@ -5,6 +5,7 @@ import AddCircleIcon from '@mui/icons-material/AddCircle'; import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown'; import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp'; import Appbar from './components/AsuraBar'; +import LoginPage from './LoginPage'; import EmojiEventsIcon from '@mui/icons-material/EmojiEvents'; @@ -143,16 +144,17 @@ function shorten(description, maxLength) { ; } -export default function TournamentHistory() { - return ( - <> - - - - Past Tournaments - - - - - ); +export default function TournamentHistory(props) { + if (!props.user.isLoggedIn) { return ; } + return ( + <> + + + + Past Tournaments + + + + + ); } \ No newline at end of file diff --git a/src/client/src/TournamentManager.js b/src/client/src/TournamentManager.js index 9b01b72..09210e0 100644 --- a/src/client/src/TournamentManager.js +++ b/src/client/src/TournamentManager.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; // import { AlertContainer, alert } from "react-custom-alert"; import Appbar from "./components/AsuraBar"; import TournamentBar from "./components/TournamentBar"; +import LoginPage from "./LoginPage"; import { useParams } from "react-router-dom"; import { Button, TextField, Grid, Box, Container, Paper, Stack } from "@mui/material"; import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material"; @@ -220,6 +221,11 @@ export default function TournamentManager(props) { showError = props.showError; showSuccess = props.showSuccess; + + if (!props.user.isLoggedIn) { + return ; + } + return ( <> diff --git a/src/client/src/TournamentOverview.js b/src/client/src/TournamentOverview.js index 558d56d..f9e696d 100644 --- a/src/client/src/TournamentOverview.js +++ b/src/client/src/TournamentOverview.js @@ -2,6 +2,7 @@ import * as React from "react"; import { Link } from "react-router-dom"; import Appbar from './components/AsuraBar'; import TournamentBar from "./components/TournamentBar"; +import ErrorSnackbar from "./components/ErrorSnackbar"; import { useParams } from 'react-router-dom' import { Button, IconButton, Paper, Stack, CircularProgress, Box, Grid, Typography, Container } from "@mui/material"; import "./components/tournamentBracket.css"; @@ -10,17 +11,11 @@ import DoDisturbIcon from '@mui/icons-material/DoDisturb'; import BackspaceIcon from '@mui/icons-material/Backspace'; import AddCircleIcon from '@mui/icons-material/AddCircle'; - -function showError(error) { - alert("Something went wrong. \n" + error); - console.error(error); -} - function TournamentTier(props){ let roundTypes = ["winner","finals", "semifinals", "quarterfinals", "eighthfinals", "sixteenthfinals", "thirtysecondfinals"]; let matches = []; for (let i = 0; i < props.matches.length; i++) { - matches.push(); + matches.push(); } return(
    @@ -94,11 +89,11 @@ function Match(props){ {team1Name} - { props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null ? - : null + { props.match.team1Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && + } - { props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded ? - : null + { props.match.team1Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && + } {/* { props.match.winnerId && (props.match.team1Id === props.match.winnerId) && @@ -112,11 +107,11 @@ function Match(props){ {team2Name} - { props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null ? - : null + { props.match.team2Id !== null && !props.tournament.hasEnded && props.match.tier !== Math.log2(props.tournament.teamLimit) - 1 && props.match.winnerId === null && props.user.isLoggedIn && + } - { props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded ? - : null + { props.match.team2Id !== null && props.match.winnerId === null && !props.tournament.hasEnded && props.user.isLoggedIn && + } {/* { props.match.winnerId && (props.match.team2Id === props.match.winnerId) && @@ -177,17 +172,26 @@ function BracketViewer(props){
    {matches.map(tier => { let tierNum = tier[0].tier; - return + return })}
    : ); } +let showError = (message) => {}; export default function TournamentOverview(props) { const { tournamentId } = useParams(); const [tournament, setTournament] = React.useState(false); + const [openError, setOpenError] = React.useState(false); + const [errorMessage, setErrorMessage] = React.useState(""); + showError = (message) => { + setOpenError(false); + setErrorMessage(message); + setOpenError(true); + } + React.useEffect(() => { fetch(process.env.REACT_APP_API_URL + `/tournament/${tournamentId}`) .then(res => res.json()) @@ -208,10 +212,10 @@ export default function TournamentOverview(props) { return ( <> - { props.user.isLoggedIn && !tournament.hasEnded ? - : null + { props.user.isLoggedIn && !tournament.hasEnded && + } - + ); } diff --git a/src/client/src/TournamentTeams.js b/src/client/src/TournamentTeams.js index ea8b13b..83a87cb 100644 --- a/src/client/src/TournamentTeams.js +++ b/src/client/src/TournamentTeams.js @@ -2,6 +2,7 @@ import * as React from "react"; import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom"; import Appbar from "./components/AsuraBar"; import TournamentBar from "./components/TournamentBar"; +import LoginPage from "./LoginPage"; import { Button, TextField, Stack, MenuItem, Box, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material"; import AddCircleIcon from '@mui/icons-material/AddCircle'; import DeleteIcon from '@mui/icons-material/Delete'; @@ -203,6 +204,8 @@ export default function TournamentTeams(props) { getTeams() }, []); + if (!props.user.isLoggedIn) { return ; } + return ( <> diff --git a/src/client/src/components/AsuraBar.js b/src/client/src/components/AsuraBar.js index 9c84d42..a9bd7ee 100644 --- a/src/client/src/components/AsuraBar.js +++ b/src/client/src/components/AsuraBar.js @@ -55,7 +55,9 @@ function NotLoggedInButton() { } export default function Appbar(props) { - return ( + console.log("Appbar-user:") + console.log(props.user); + return ( <> @@ -79,7 +81,7 @@ export default function Appbar(props) {

    {props.pageTitle || ""}

         - { props.pageTitle !== "Sign in" ? + { props.pageTitle !== "Login" ? { props.user.isLogggedIn ? : } : @@ -91,5 +93,5 @@ export default function Appbar(props) {     - ); + ); } \ No newline at end of file diff --git a/src/client/src/components/nosuchpage.js b/src/client/src/components/NoSuchPage.js similarity index 100% rename from src/client/src/components/nosuchpage.js rename to src/client/src/components/NoSuchPage.js diff --git a/src/client/src/components/NoUserPage.js b/src/client/src/components/NoUserPage.js new file mode 100644 index 0000000..c17acb2 --- /dev/null +++ b/src/client/src/components/NoUserPage.js @@ -0,0 +1,19 @@ +import * as React from "react"; +import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; +import { Typography } from '@mui/material' + +export default function NoSuchPage() { + return( + <> + + You are not logged in + + + You dont have access to this page, you can log in here: Login + + + Return to the home page + + + ) +} \ No newline at end of file diff --git a/src/client/src/components/NotLoggedIn.js b/src/client/src/components/NotLoggedIn.js new file mode 100644 index 0000000..5da8269 --- /dev/null +++ b/src/client/src/components/NotLoggedIn.js @@ -0,0 +1,5 @@ + + +export default function NoUserPage(props) { + return ("Skjerp deg") +} \ No newline at end of file