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

merge

Browse Source
This commit is contained in:
Sahni-Arjun 2022-04-07 22:21:05 -04:00
commit 0d5e9351ab
12 changed files with 317 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sports-matcher/client/src/Layout.js
View File

@ -9,10 +9,11 @@ import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
import Dashboard from "./pages/Dashboard";
import Logout from "./pages/Logout";
import Admin from "./pages/NewAdmin";
import Rentals from "./pages/Rentals";
import Admin from "./pages/Administration";
import Login from "./pages/Login";
import Context from "./globals.js";
import Signup from "./pages/Signup";
export default function layout() {
@ -70,6 +71,7 @@ export default function layout() {
<Route path="/" element={<Welcome />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/logout" element={<Logout />} />
<Route path="/admin" element={<Admin />} />
<Route path="/rentals" element={<Rentals />} />

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

@ -13,12 +13,16 @@ export default class AuthenticationGuard extends React.Component {
let userDataResponse = await apiClient.get("/user");
if (userDataResponse.status === 200) {
this.context.update({ user: userDataResponse.data });
if (this.context.user && this.context.user.accessLevel < this.props.accessLevel) {
this.context.navigate("/", { replace: true });
}
} else if (userDataResponse.status == 401) {
this.context.navigate("/signup", { replace: true });
this.context.update({ user: null });
}
if (this.context.user && this.context.user.accessLevel < this.props.accessLevel) {
this.context.navigate("/", { replace: true });
}
}
componentDidUpdate() {
}
render() {

251
sports-matcher/client/src/pages/Administration.js Normal file
View File

@ -0,0 +1,251 @@
import React from "react";
import { Button, ButtonGroup, Spinner, Table } from "react-bootstrap";
import "../styles/Admin.css";
import globals from "../globals";
import AuthenticationGuard from "../components/AuthenticationGuard";
import { apiClient } from "../utils/httpClients";
export default class Admin extends React.Component {
constructor(props) {
super(props);
// Use null to indicate not loaded
// Use empty array to indicate no items for that state.
this.state = {
users: null,
suspendedUsers: null,
matches: null,
user: null,
currentTab: "matches",
};
}
static contextType = globals;
async componentDidMount() {
await this.loadActiveUsers();
await this.loadSuspendedUsers();
await this.loadMatches();
}
async loadActiveUsers() {
let response = await apiClient.get("/user/all/active");
if (response.status === 200) {
this.setState({ users: response.data.active });
}
}
async loadSuspendedUsers() {
let response = await apiClient.get("/user/all/suspended");
if (response.status === 200) {
this.setState({ suspendedUsers: response.data.suspended });
} else {
console.error(response.status);
}
}
async loadMatches() {
let response = await apiClient.get("/match/all");
if (response.status === 200) {
this.setState({ matches: response.data.all });
}
}
DeleteButton() {
return <Button onClick={() => {
alert("User deleted.");
}} variant="outline-secondary">Delete</Button>;
}
PardonButton() {
return <Button onClick={() => {
alert("User pardoned.");
}} variant="outline-secondary">Pardon</Button>;
}
EditButton() {
return <Button onClick={() => {
alert("clicked");
}} variant="outline-secondary">Edit</Button>;
}
userTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
matchTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Sport</th>
<th>Date</th>
<th>Location</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
userTableData() {
if (!this.state.users) {
return (
<tr>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
</tr>
);
}
return this.state.users.map((user) => {
const { _id, firstName, lastName, email, phone } = user;
return (
<tr key={_id}>
<td>{_id}</td>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
</tr>
);
});
}
susUserTableData() {
if (!this.state.suspendedUsers) {
return (
<tr>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
</tr>
);
}
return this.state.suspendedUsers.map((user) => {
const { _id, firstName, lastName, email, phone } = user;
return (
<tr key={_id}>
<td>{_id}</td>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
<td>{this.PardonButton()}</td>
</tr>
);
});
}
matchTableData() {
if (!this.state.matches) {
return (
<tr>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
<td><Spinner animation="grow" /></td>
</tr>
);
}
return this.state.matches.map((match) => {
const { _id, sport, when, location } = match;
const sportName = sport.name;
return (
<tr key={_id}>
<td>{_id}</td>
<td>{sportName}</td>
<td>{when}</td>
<td>{location}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
</tr>
);
});
}
renderTableHead() {
if (this.state.currentTab === "matches") {
return this.matchTableHead();
} else if (this.state.currentTab === "users") {
return this.userTableHead();
} else {
return this.userTableHead();
}
}
renderTableData() {
if (this.state.currentTab === "matches") {
return this.matchTableData();
} else if (this.state.currentTab === "users") {
return this.userTableData();
} else {
return this.susUserTableData();
}
}
render() {
return (
<div className="page-root">
<AuthenticationGuard accessLevel={3}>
<React.Fragment>
<div className='center'>
<h1 id='title'>Administration</h1>
<ButtonGroup aria-label="Pages">
<Button onClick={() => {
this.setState({ currentTab: "matches" });
}} variant="outline-secondary" active={this.state.currentTab === "matches"}>Matches</Button>
<Button onClick={() => {
this.setState({ currentTab: "users" });
}} variant="outline-secondary" active={this.state.currentTab === "users"}>Users</Button>
<Button onClick={() => {
this.setState({ currentTab: "suspended" });
}} variant="outline-secondary" active={this.state.currentTab === "suspended"}>Suspended Users</Button>
</ButtonGroup>
</div>
<Table striped bordered hover>
{this.renderTableHead()}
<tbody>
{this.renderTableData()}
{/* {this.matchUserTableData()} */}
</tbody>
</Table>
</React.Fragment>
</AuthenticationGuard >
</div>
);
}
}

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

@ -1,214 +0,0 @@
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) {
super(props);
this.state = {
users: [
{ id: 1, username: "username1", name: "name1", email: "user1@email.com", phone: "123-456-7890" },
{ id: 2, username: "username2", name: "name2", email: "user2@email.com", phone: "123-456-7890" },
{ id: 3, username: "username3", name: "name3", email: "user3@email.com", phone: "123-456-7890" },
{ id: 4, username: "username4", name: "name4", email: "user4@email.com", phone: "123-456-7890" }
],
suspendedUsers: [
{ id: 1, username: "suspended1", name: "s1", email: "s1@email.com", phone: "123-456-7890" },
{ id: 2, username: "suspended2", name: "s2", email: "s2@email.com", phone: "123-456-7890" },
{ id: 3, username: "suspended3", name: "s3", email: "s3@email.com", phone: "123-456-7890" },
{ id: 4, username: "suspended4", name: "s4", email: "s4@email.com", phone: "123-456-7890" }
],
matches: [
{ id: 1, sport: "Tennis", date: "08/08/2021", location: "toronto", description: "Tennis match" },
{ id: 2, sport: "Basketball", date: "09/09/2021", location: "toronto", description: "Basketball match" }
],
buttonColors: ["black", "", ""],
user: null
};
}
static contextType = globals;
async componentDidMount() {
}
DeleteButton() {
return <Button onClick={() => {
alert("User deleted.");
}} variant="outline-secondary">Delete</Button>;
}
PardonButton() {
return <Button onClick={() => {
alert("User pardoned.");
}} variant="outline-secondary">Pardon</Button>;
}
EditButton() {
return <Button onClick={() => {
alert("clicked");
}} variant="outline-secondary">Edit</Button>;
}
userTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Username</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
matchTableHead() {
return (
<thead>
<tr>
<th>ID</th>
<th>Sport</th>
<th>Date</th>
<th>Location</th>
<th>Description</th>
<th></th>
<th></th>
</tr>
</thead>
);
}
userTableData() {
return this.state.users.map((user) => {
const { id, username, name, email, phone } = user;
return (
<tr key={id}>
<td>{id}</td>
<td>{username}</td>
<td>{name}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
</tr>
);
});
}
susUserTableData() {
return this.state.suspendedUsers.map((user) => {
const { id, username, name, email, phone } = user;
return (
<tr key={id}>
<td>{id}</td>
<td>{username}</td>
<td>{name}</td>
<td>{email}</td>
<td>{phone}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
<td>{this.PardonButton()}</td>
</tr>
);
});
}
matchTableData() {
return this.state.matches.map((match) => {
const { id, sport, date, location, description } = match;
return (
<tr key={id}>
<td>{id}</td>
<td>{sport}</td>
<td>{date}</td>
<td>{location}</td>
<td>{description}</td>
<td>{this.DeleteButton()}</td>
<td>{this.EditButton()}</td>
<td>{this.PardonButton()}</td>
</tr>
);
});
}
selectTable() {
this.setState({ buttonColors: ["", "", ""] });
}
renderTableHead() {
if (this.state.buttonColors[0] === "black") {
return this.matchTableHead();
} else if (this.state.buttonColors[1] === "black") {
return this.userTableHead();
} else {
return this.userTableHead();
}
}
renderTableData() {
if (this.state.buttonColors[0] === "black") {
return this.matchTableData();
} else if (this.state.buttonColors[1] === "black") {
return this.userTableData();
} else {
return this.susUserTableData();
}
}
render() {
return (
<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>
</React.Fragment>
</AuthenticationGuard >
</div>
);
}
}

14
sports-matcher/client/src/pages/Profile.js Normal file
View File

@ -0,0 +1,14 @@
import React from "react";
import { Container } from "react-bootstrap";
export default class Profile extends React.Component {
render() {
return (
<div className="page-root">
<Container>
</Container>
</div>
);
}
}

19
sports-matcher/client/src/pages/Signup.js
View File

@ -2,6 +2,7 @@ import React from "react";
import { Alert, Button, Card, Container, Form } from "react-bootstrap";
import { Link } from "react-router-dom";
import validator from "validator";
import globals from "../globals";
import { apiClient } from "../utils/httpClients";
export default class Signup extends React.Component {
@ -27,9 +28,10 @@ export default class Signup extends React.Component {
this.setUserState = this.setUserState.bind(this);
}
static contextType = globals;
async registerUser(event) {
event.preventDefault(); // We need this so that the page doesn't refresh.
event.preventDefault();
let formIssues = this.validateCurrentForm();
if (formIssues.length > 0) {
this.notifyUser("Oops there were issue(s)", (
@ -45,9 +47,11 @@ export default class Signup extends React.Component {
}
const res = await apiClient.post("/user", this.state.user);
console.log(res.data);
if (res.status === 201) {
this.notifyUser("Success!", <div>You are successfully signed up! You <Link to="/login">can now go log in</Link>.</div>, "success");
this.notifyUser("Success!", <div>You are successfully signed up! You wil be directed to <Link to="/login">login</Link> now.</div>, "success");
this.redirectTimer = setTimeout(() => {
this.context.navigate("/signin", { replace: true });
}, 1000);
} else if (res.status === 409) {
this.notifyUser("User exists!", <div>This user already exists. Try <Link to="/login">logging in</Link> instead.</div>, "danger");
} else if (res.status === 400) {
@ -57,8 +61,11 @@ export default class Signup extends React.Component {
}
}
componentWillUnmount() {
clearTimeout(this.redirectTimer);
}
validateCurrentForm() {
console.log(this.state);
let formIssues = [];
if (!validator.isEmail(this.state.user.email)) {
formIssues.push("The email submitted is invalid.");
@ -104,8 +111,8 @@ export default class Signup extends React.Component {
</Alert>
<Card style={{ width: "35rem" }}>
<Card.Body>
<Card.Title>Login</Card.Title>
<Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle>
<Card.Title>Sign up!</Card.Title>
<Card.Subtitle>Welcome to Sports Matcher! Already <Link to="/login">have an account</Link>?</Card.Subtitle>
<Form onSubmit={this.registerUser}>
<Form.Group className="mb-3" controlId="firstName">
<Form.Label>First name</Form.Label>

12
sports-matcher/server/controllers/matchController.js
View File

@ -1,5 +1,5 @@
import express from "express";
import { requireAuthenticated } from "../middleware/authority.js";
import { requireAdmin, requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import matchModel from "../schemas/matchModel.js";
import sportModel from "../schemas/sportModel.js";
@ -46,6 +46,16 @@ MatchController.get("/recent/:limit?", needDatabase, async (req, res) => {
}
});
MatchController.get("/all", requireAdmin, async (req, res) => {
try {
const allmatches = await matchModel.find().populate("sport");
res.status(200).send({ all: allmatches });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error.");
}
});
MatchController.get("/recent/user/:limit", needDatabase, requireAuthenticated, async (req, res) => {
try {
let user = req.user;

1
sports-matcher/server/controllers/rentalController.js
View File

@ -39,7 +39,6 @@ rentalController.get("/recent/:limit?", needDatabase, async (req, res) => {
let limit = parseInt(req.params.limit);
if (!req.params.limit) limit = 10;
if (isNaN(limit)) {
console.log(typeof (limit));
res.status(400).send("Limit parameter is not a number.");
return;
}

23
sports-matcher/server/controllers/userController.js
View File

@ -1,5 +1,4 @@
import express from "express";
import validator from "validator";
import { requireAdmin, requireAuthenticated } from "../middleware/authority.js";
import { needDatabase } from "../middleware/database.js";
import userModel from "../schemas/userModel.js";
@ -125,14 +124,20 @@ UserController.patch("/:id?", needDatabase, requireAuthenticated, async (req, re
}
});
UserController.get("/all", requireAdmin, async (req, res) => {
try {
let all = await userModel.find();
res.status(200).send({ all: all });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");
}
});
UserController.get("/all/active", requireAdmin, async (req, res) => {
try {
if (req.user.accessLevel < 3) {
res.status(401).send("You do not have the required privileges.");
return;
}
let res = await userModel.find().where("suspend").lt(Date.now);
res.status(200).send({ all: res });
let active = await userModel.find().where("suspend").lt(Date.now());
res.status(200).send({ active: active });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");
@ -141,8 +146,8 @@ UserController.get("/all/active", requireAdmin, async (req, res) => {
UserController.get("/all/suspended", requireAuthenticated, async (req, res) => {
try {
let res = await userModel.find().where("suspend").gte(Date.now);
res.status(200).send({ suspended: res });
let suspended = await userModel.find().where("suspend").gte(Date.now());
res.status(200).send({ suspended: suspended });
} catch (error) {
console.error(error);
res.status(500).send("Internal server error");

2
sports-matcher/server/schemas/matchModel.js
View File

@ -21,7 +21,7 @@ const matchSchema = new mongoose.Schema({
participants: { type: [{ type: Types.ObjectId, ref: ModelNameRegister.User }], required: true, default: [] },
difficulty: { type: Number, required: true },
sport: { type: Types.ObjectId, ref: ModelNameRegister.Sport },
createDate: { type: Date, required: true, default: Date.now }
createDate: { type: Date, required: true, default: Date.now() }
});
matchSchema.pre("remove", function (next) {

2
sports-matcher/server/schemas/rentalModel.js
View File

@ -8,7 +8,7 @@ const rentalSchema = new mongoose.Schema({
rate: { type: String, required: true, trim: true },
description: { type: String, required: true },
contact: { type: String, required: true },
createDate: { type: Date, required: true, default: Date.now },
createDate: { type: Date, required: true, default: Date.now() },
creator: { type: Types.ObjectId, ref: modelNameRegister.User }
});

4
sports-matcher/server/schemas/userModel.js
View File

@ -19,7 +19,7 @@ const userSchema = new mongoose.Schema({
},
firstName: { type: String, required: true, trim: true },
lastName: { type: String, required: true, trim: true },
joinDate: { type: Date, default: Date.now, required: true },
joinDate: { type: Date, default: Date.now(), required: true },
phone: { type: Number, required: false, min: 0 },
password: {
type: String,
@ -36,7 +36,7 @@ const userSchema = new mongoose.Schema({
participatingMatchesPublicity: { type: Boolean, required: true, default: false },
friends: { type: Types.ObjectId, ref: modelNameRegister.User },
accessLevel: { type: Number, required: true, default: 0 },
suspend: { type: Date, required: true, default: Date.now } // suspend the user until the when the user was created.
suspend: { type: Date, required: true, default: Date.now() } // suspend the user until the when the user was created.
});
userSchema.statics.credentialsExist = async function (email, password) {