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 globals from "../globals";
import { apiClient } from "../utils/httpClients";
import propTypes from "prop-types";
export default class AuthenticationGuard extends React.Component {
constructor(props) {
@ -14,8 +15,10 @@ export default class AuthenticationGuard extends React.Component {
if (userDataResponse.status === 200) {
this.context.update({ user: userDataResponse.data });
} 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;
}
}
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 "../styles/Admin.css";
import globals from "../globals";
import AuthenticationGuard from "../components/AuthenticationGuard";
export default class Admin extends React.Component {
constructor(props) {
@ -175,37 +176,40 @@ export default class Admin extends React.Component {
render() {
return (
<React.Fragment>
<div className="page-root">
<AuthenticationGuard accessLevel={3} />
<React.Fragment>
<div className='center'>
<h1 id='title'>Administration</h1>
<Button onClick={() => {
this.setState({ buttonColors: ["black", "", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[0],
}} variant="outline-secondary">Matches</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "black", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[1],
}} variant="outline-secondary">Users</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "", "black"] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[2],
}} variant="outline-secondary">Suspended Users</Button></div>
<Table striped bordered hover>
{this.renderTableHead()}
<tbody>
{this.renderTableData()}
{/* {this.matchUserTableData()} */}
</tbody>
</Table>
<div className='center'>
<h1 id='title'>Administration</h1>
<Button onClick={() => {
this.setState({ buttonColors: ["black", "", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[0],
}} variant="outline-secondary">Matches</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "black", ""] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[1],
}} variant="outline-secondary">Users</Button>
<Button onClick={() => {
this.setState({ buttonColors: ["", "", "black"] });
}} sx={{
margin: 3,
backgroundColor: this.state.buttonColors[2],
}} variant="outline-secondary">Suspended Users</Button></div>
<Table striped bordered hover>
{this.renderTableHead()}
<tbody>
{this.renderTableData()}
{/* {this.matchUserTableData()} */}
</tbody>
</Table>
</React.Fragment>
</React.Fragment>
</div>
);
}
}