ydeng/sports-matcher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Authentication guard now takes in a access level prop.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-07 13:51:38 -05:00
parent 0e218750f8
commit 525c2b6d5a
2 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
sports-matcher/client/src/components/AuthenticationGuard.js
View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import globals from "../globals"; import globals from "../globals";
import { apiClient } from "../utils/httpClients"; import { apiClient } from "../utils/httpClients";
import propTypes from "prop-types";
export default class AuthenticationGuard extends React.Component { export default class AuthenticationGuard extends React.Component {
constructor(props) { constructor(props) {
@ -14,8 +15,10 @@ export default class AuthenticationGuard extends React.Component {
if (userDataResponse.status === 200) { if (userDataResponse.status === 200) {
this.context.update({ user: userDataResponse.data }); this.context.update({ user: userDataResponse.data });
} else if (userDataResponse.status == 401) { } else if (userDataResponse.status == 401) {
this.context.navigate("/signup"); this.context.navigate("/signup", { replace: true });
} }
} else if (this.context.user.accessLevel < this.props.accessLevel) {
this.context.navigate("/", { replace: true });
} }
} }
@ -23,3 +26,11 @@ export default class AuthenticationGuard extends React.Component {
return null; return null;
} }
} }
AuthenticationGuard.defaultProps = {
accessLevel: 0
};
AuthenticationGuard.propTypes = {
accessLevel: propTypes.number,
};

62
sports-matcher/client/src/pages/NewAdmin.js
View File

@ -2,6 +2,7 @@ import React from "react";
import { Button, Table } from "react-bootstrap"; import { Button, Table } from "react-bootstrap";
import "../styles/Admin.css"; import "../styles/Admin.css";
import globals from "../globals"; import globals from "../globals";
import AuthenticationGuard from "../components/AuthenticationGuard";
export default class Admin extends React.Component { export default class Admin extends React.Component {
constructor(props) { constructor(props) {
@ -175,37 +176,40 @@ export default class Admin extends React.Component {
render() { render() {
return ( return (
<React.Fragment> <div className="page-root">
<AuthenticationGuard accessLevel={3} />
<React.Fragment>
<div className='center'> <div className='center'>
<h1 id='title'>Administration</h1> <h1 id='title'>Administration</h1>
<Button onClick={() => { <Button onClick={() => {
this.setState({ buttonColors: ["black", "", ""] }); this.setState({ buttonColors: ["black", "", ""] });
}} sx={{ }} sx={{
margin: 3, margin: 3,
backgroundColor: this.state.buttonColors[0], backgroundColor: this.state.buttonColors[0],
}} variant="outline-secondary">Matches</Button> }} variant="outline-secondary">Matches</Button>
<Button onClick={() => { <Button onClick={() => {
this.setState({ buttonColors: ["", "black", ""] }); this.setState({ buttonColors: ["", "black", ""] });
}} sx={{ }} sx={{
margin: 3, margin: 3,
backgroundColor: this.state.buttonColors[1], backgroundColor: this.state.buttonColors[1],
}} variant="outline-secondary">Users</Button> }} variant="outline-secondary">Users</Button>
<Button onClick={() => { <Button onClick={() => {
this.setState({ buttonColors: ["", "", "black"] }); this.setState({ buttonColors: ["", "", "black"] });
}} sx={{ }} sx={{
margin: 3, margin: 3,
backgroundColor: this.state.buttonColors[2], backgroundColor: this.state.buttonColors[2],
}} variant="outline-secondary">Suspended Users</Button></div> }} variant="outline-secondary">Suspended Users</Button></div>
<Table striped bordered hover> <Table striped bordered hover>
{this.renderTableHead()} {this.renderTableHead()}
<tbody> <tbody>
{this.renderTableData()} {this.renderTableData()}
{/* {this.matchUserTableData()} */} {/* {this.matchUserTableData()} */}
</tbody> </tbody>
</Table> </Table>
</React.Fragment> </React.Fragment>
</div>
); );
} }
} }