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

Auth. guard now only renders child if authenticated.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-07 15:37:45 -05:00
parent 525c2b6d5a
commit 92289c87b3
4 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,11 @@ export default class AuthenticationGuard extends React.Component {
} }
render() { render() {
return null; if (this.context.user) {
return this.props.children;
} else {
return null;
}
} }
} }
@ -33,4 +37,5 @@ AuthenticationGuard.defaultProps = {
AuthenticationGuard.propTypes = { AuthenticationGuard.propTypes = {
accessLevel: propTypes.number, accessLevel: propTypes.number,
children: propTypes.any
}; };

2
sports-matcher/client/src/components/SportInfoCard.js
View File

@ -11,7 +11,7 @@ export default class SportInfoCard extends React.Component {
<Card style={{ width: "20rem" }}> <Card style={{ width: "20rem" }}>
<Card.Body> <Card.Body>
<Card.Title>{this.props.sport.name}</Card.Title> <Card.Title>{this.props.sport.name}</Card.Title>
<Card.Subtitle className="mb-2 text-muted">{this.props.sport.minPlayers.toString()}</Card.Subtitle> <Card.Subtitle className="mb-2 text-muted">Requires a minimum of {this.props.sport.minPlayers.toString()} players.</Card.Subtitle>
<Card.Text> <Card.Text>
{this.props.sport.description} {this.props.sport.description}
</Card.Text> </Card.Text>

51
sports-matcher/client/src/pages/Dashboard.js
View File

@ -41,32 +41,31 @@ export default class Dashboard extends React.Component {
render() { render() {
return ( return (
<div className="page-root"> <AuthenticationGuard>
<AuthenticationGuard /> <div className="page-root">
<React.Fragment> <React.Fragment>
<h1></h1> <h1></h1>
<InputGroup className="w-50"> <InputGroup className="w-50">
<FormControl <FormControl
placeholder="Search for Matches" placeholder="Search for Matches"
aria-label="Search Bar" aria-label="Search Bar"
aria-describedby="basic-addon2" aria-describedby="basic-addon2"
/> />
<Button variant="outline-secondary" id="button-addon2"> <Button variant="outline-secondary" id="button-addon2">
Search Search
</Button> </Button>
</InputGroup> </InputGroup>
<div className="p-4"> <div className="p-4">
<h2>Available Matches</h2> <h2>Available Matches</h2>
<MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} /> <MatchInfoCardDisplay recommendedmatches={this.state.displayedMatches} />
</div> </div>
<div className="p-4"> <div className="p-4">
<h2>Available Sports</h2> <h2>Available Sports</h2>
<SportInfoCardDisplay recommendedsports={this.state.displayedSports} /> <SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
</div> </div>
</React.Fragment>
</div>
</React.Fragment> </AuthenticationGuard>
</div>
); );
} }
} }

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

@ -177,38 +177,37 @@ export default class Admin extends React.Component {
render() { render() {
return ( return (
<div className="page-root"> <div className="page-root">
<AuthenticationGuard accessLevel={3} /> <AuthenticationGuard accessLevel={3}>
<React.Fragment> <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>
</AuthenticationGuard >
</React.Fragment>
</div> </div>
); );
} }