Compare commits
16 Commits
restructur
...
signup-pag
Author | SHA1 | Date | |
---|---|---|---|
|
687d6d8a63 | ||
|
9d982abe07 | ||
|
da6f5c8265 | ||
c738e8044a | |||
499cbf3409 | |||
30894c59c4 | |||
34bbfb3d5d | |||
|
9f1df7f7f4 | ||
|
1fd60e39d4 | ||
|
c691b710b7 | ||
6cd421ba01 | |||
0a2d513d3c | |||
bb911173ec | |||
|
859147ea3d | ||
8492c82e4f | |||
|
df2071439d |
102
Signup.js
Normal file
102
Signup.js
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Button, Card, Form, Alert, Container } from "react-bootstrap";
|
||||||
|
import { apiClient } from "../utils/httpClients";
|
||||||
|
// import { guard } from "../utils/routing";
|
||||||
|
|
||||||
|
export default class Signup extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
newUser: null,
|
||||||
|
alertShow: false,
|
||||||
|
alertKey: null,
|
||||||
|
alertMsg: null
|
||||||
|
};
|
||||||
|
this.state.newUser = {
|
||||||
|
email: null,
|
||||||
|
firstName: null,
|
||||||
|
lastName: null,
|
||||||
|
phone: null,
|
||||||
|
password: null
|
||||||
|
};
|
||||||
|
this.warnUser("Internal server error. Please try again later.", "danger");
|
||||||
|
|
||||||
|
const sleep = ms => new Promise(res => setTimeout(res, ms));
|
||||||
|
this.setState({ alertKey: "danger" }, () => {
|
||||||
|
console.log(this.state.alertKey);
|
||||||
|
});
|
||||||
|
console.log("Hello");
|
||||||
|
}
|
||||||
|
|
||||||
|
async registerUser() {
|
||||||
|
const sleep = ms => new Promise(res => setTimeout(res, ms));
|
||||||
|
const res = await apiClient.post("/user", this.state.newUser);
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.warnUser("You are successfully signed up!", "success");
|
||||||
|
sleep(3000).then(() => {
|
||||||
|
this.context.navigate("/dashboard", { replace: true });
|
||||||
|
});
|
||||||
|
} else if (res === 409) {
|
||||||
|
this.warnUser("This user already exists. Try logging in instead.", "danger");
|
||||||
|
} else if (res === 400) {
|
||||||
|
this.warnUser("Missing required fields.", "danger");
|
||||||
|
} else {
|
||||||
|
this.warnUser("Internal server error. Please try again later.", "danger");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setUserState(event) {
|
||||||
|
let newUser = this.state.user;
|
||||||
|
newUser[event.target.controlId] = event.target.value;
|
||||||
|
this.setState({user: newUser});
|
||||||
|
}
|
||||||
|
|
||||||
|
warnUser(msg, key) {
|
||||||
|
this.setState({alertMsg: msg});
|
||||||
|
this.setState({alertKey: key});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="page-root">
|
||||||
|
<Container style={{ maxWidth: "35rem" }}>
|
||||||
|
<Alert variant={this.state.alertKey} style={{ width: "35rem" }}>
|
||||||
|
<Alert.Heading>{this.state.alertMsg}</Alert.Heading>
|
||||||
|
</Alert>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<Card.Body>
|
||||||
|
<Card.Title>Sign up with us</Card.Title> <br />
|
||||||
|
<Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle> <br />
|
||||||
|
<Form onSubmit={this.registerUser}>
|
||||||
|
<Form.Group className="mb-3" controlId="firstName">
|
||||||
|
<Form.Label>First name</Form.Label>
|
||||||
|
<Form.Control type="text" placeholder="Ex. John" onChange={this.setUserState}/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3" controlId="lastName">
|
||||||
|
<Form.Label>Last name</Form.Label>
|
||||||
|
<Form.Control type="text" placeholder="Ex. Smith" onChange={this.setUserState}/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3" controlId="email">
|
||||||
|
<Form.Label>E-mail</Form.Label>
|
||||||
|
<Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={this.setUserState}/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3" controlId="phone">
|
||||||
|
<Form.Label>Phone number</Form.Label>
|
||||||
|
<Form.Control type="text" placeholder="Ex. (123) 456-7890" onChange={this.setUserState}/>
|
||||||
|
</Form.Group>
|
||||||
|
<Form.Group className="mb-3" controlId="password">
|
||||||
|
<Form.Label>Password</Form.Label>
|
||||||
|
<Form.Control type="password" placeholder="Enter password" onChange={this.setUserState}/>
|
||||||
|
</Form.Group>
|
||||||
|
<Button variant="primary" type="submit">
|
||||||
|
Register!
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Container>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@@ -35,6 +35,7 @@
|
|||||||
"semi": [
|
"semi": [
|
||||||
"error",
|
"error",
|
||||||
"always"
|
"always"
|
||||||
]
|
],
|
||||||
|
"no-unused-vars": "warn"
|
||||||
}
|
}
|
||||||
}
|
}
|
@@ -10,6 +10,7 @@ import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
|||||||
import Dashboard from "./pages/Dashboard";
|
import Dashboard from "./pages/Dashboard";
|
||||||
import Login from "./pages/Login";
|
import Login from "./pages/Login";
|
||||||
import { apiClient } from "./utils/httpClients";
|
import { apiClient } from "./utils/httpClients";
|
||||||
|
import Signup from "./pages/Signup";
|
||||||
import { globalContext } from "./context.js";
|
import { globalContext } from "./context.js";
|
||||||
|
|
||||||
|
|
||||||
@@ -80,6 +81,7 @@ export default function layout() {
|
|||||||
<Route path="/" element={<Welcome />} />
|
<Route path="/" element={<Welcome />} />
|
||||||
<Route path="/dashboard" element={<Dashboard />} />
|
<Route path="/dashboard" element={<Dashboard />} />
|
||||||
<Route path="/login" element={<Login />} />
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="/signup" element={<Signup />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
@@ -13,7 +13,7 @@ export default class SportInfoCard extends React.Component {
|
|||||||
<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">{this.props.sport.minPlayers.toString()}</Card.Subtitle>
|
||||||
<Card.Text>
|
<Card.Text>
|
||||||
<p>{this.props.sport.description}</p>
|
{this.props.sport.description}
|
||||||
</Card.Text>
|
</Card.Text>
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
|
@@ -8,7 +8,7 @@ export default class SportInfoCardDisplay extends React.Component {
|
|||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
let sports = null;
|
let sports = null;
|
||||||
if(this.props.recommendedsports && this.props.recommendedsports.length > 0) {
|
if (this.props.recommendedsports.length > 0) {
|
||||||
sports = this.props.recommendedsports.map((sport) => <SportInfoCard key={sport._id} sport={sport}></SportInfoCard>);
|
sports = this.props.recommendedsports.map((sport) => <SportInfoCard key={sport._id} sport={sport}></SportInfoCard>);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
@@ -4,7 +4,9 @@ import "../styles/Dashboard.css";
|
|||||||
import { apiClient } from "../utils/httpClients.js";
|
import { apiClient } from "../utils/httpClients.js";
|
||||||
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
|
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
|
||||||
import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
|
import SportInfoCardDisplay from "../components/SportInfoCardDisplay";
|
||||||
// import { needUser } from "../utils/routing.js";
|
import { globalContext } from "../context";
|
||||||
|
import { needUser } from "../utils/routing";
|
||||||
|
|
||||||
export default class Dashboard extends React.Component {
|
export default class Dashboard extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
@@ -14,16 +16,14 @@ export default class Dashboard extends React.Component {
|
|||||||
displayedEquipment: [],
|
displayedEquipment: [],
|
||||||
user: null
|
user: null
|
||||||
};
|
};
|
||||||
// this.getFirstName();
|
|
||||||
}
|
}
|
||||||
// async componentDidMount() {
|
|
||||||
// this.setState({ user: await needUser() }); // needUser says this page needs a user, and therefore, if there isn't a user, get them to login first. It returns the authenticated user.
|
static contextType = globalContext;
|
||||||
// this.setState({ displayedMatches: await this.latestMatches() });
|
|
||||||
// }
|
|
||||||
async componentDidMount() {
|
async componentDidMount() {
|
||||||
|
await needUser(this.context.navigate);
|
||||||
await this.latestMatches();
|
await this.latestMatches();
|
||||||
await this.availableSports();
|
await this.availableSports();
|
||||||
// await this.availableEquipment();
|
|
||||||
}
|
}
|
||||||
async latestMatches() {
|
async latestMatches() {
|
||||||
let recentMatchesRes = await apiClient.get("/match/recent/15");
|
let recentMatchesRes = await apiClient.get("/match/recent/15");
|
||||||
@@ -35,23 +35,10 @@ export default class Dashboard extends React.Component {
|
|||||||
async availableSports() {
|
async availableSports() {
|
||||||
let availableSportsRes = await apiClient.get("/sport");
|
let availableSportsRes = await apiClient.get("/sport");
|
||||||
if (availableSportsRes.status === 200) {
|
if (availableSportsRes.status === 200) {
|
||||||
this.setState({ displayedSports: availableSportsRes.data.recent });
|
this.setState({ displayedSports: availableSportsRes.data });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// async availableEquipment() {
|
|
||||||
// let availableEquipmentRes = await apiClient.get("/rentals");
|
|
||||||
// if (availableEquipmentRes.status === 200) {
|
|
||||||
// this.setState({ displayedEquipment: availableEquipmentRes.data.recent });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// async getFirstName() {
|
|
||||||
// // let result = await apiClient.post("/user/login", {"email": "johndoe@gmail.com", "password": "csc309h1"}).then(apiClient.get("/user"));
|
|
||||||
// let user = await apiClient.get("/user");
|
|
||||||
// let tags = document.getElementsByTagName("h1");
|
|
||||||
// tags[0].innerHTML = user.firstName;
|
|
||||||
// }
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
@@ -74,10 +61,7 @@ export default class Dashboard extends React.Component {
|
|||||||
<h2>Available Sports</h2>
|
<h2>Available Sports</h2>
|
||||||
<SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
|
<SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="p-4">
|
|
||||||
<h2>Available Equipment</h2>
|
|
||||||
<MatchInfoCardDisplay recommendedmatches={this.state.displayedEquipment} />
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
@@ -1,88 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { Button, Card, Form } from "react-bootstrap";
|
|
||||||
import { apiClient } from "../utils/httpClients";
|
|
||||||
import { guard } from "../utils/routing";
|
|
||||||
|
|
||||||
export default class Signup extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
user: null,
|
|
||||||
alertShow: false,
|
|
||||||
alertKey: null,
|
|
||||||
alertMsg: null
|
|
||||||
}
|
|
||||||
this.state.user = {
|
|
||||||
email: null,
|
|
||||||
firstName: null,
|
|
||||||
lastName: null,
|
|
||||||
phone: null,
|
|
||||||
password: null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async registerUser() {
|
|
||||||
const res = await apiClient.post("/user", this.state);
|
|
||||||
if (res.status === 200) {
|
|
||||||
this.warnUser("You are successfully signed up!", "success")
|
|
||||||
} else if (res === 409) {
|
|
||||||
this.warnUser("This user already exists. Try logging in instead.", "danger")
|
|
||||||
} else if (res === 400) {
|
|
||||||
this.warnUser("Missing required fields.", "danger")
|
|
||||||
} else {
|
|
||||||
this.warnUser("Internal server error. Please try again later.", "danger")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setUserState(event) {
|
|
||||||
newUser = this.state.user;
|
|
||||||
newUser[event.target.controlId] = event.target.value
|
|
||||||
this.setState({user: newUser})
|
|
||||||
}
|
|
||||||
|
|
||||||
warnUser(msg, key) {
|
|
||||||
this.setState({alertMsg: msg})
|
|
||||||
this.setState({show: true})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="page-root">
|
|
||||||
<Alert show={this.state.alertShow} variant={this.state.alertKey}>
|
|
||||||
<Alert.Heading>{this.state.alertMsg}</Alert.Heading>
|
|
||||||
</Alert>
|
|
||||||
<Card>
|
|
||||||
<Card.Body>
|
|
||||||
<Card.Title>Login</Card.Title>
|
|
||||||
<Card.Subtitle>Welcome to Sports Matcher!</Card.Subtitle>
|
|
||||||
<Form onSubmit={this.registerUser}>
|
|
||||||
<Form.Group className="mb-3" controlId="firstName">
|
|
||||||
<Form.Label>First name</Form.Label>
|
|
||||||
<Form.Control type="text" placeholder="Ex. John" onChange={this.setUserState}/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3" controlId="lastName">
|
|
||||||
<Form.Label>Last name</Form.Label>
|
|
||||||
<Form.Control type="text" placeholder="Ex. Smith" onChange={this.setUserState}/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3" controlId="email">
|
|
||||||
<Form.Label>E-mail</Form.Label>
|
|
||||||
<Form.Control type="email" placeholder="Ex. youremail@mail.com" onChange={this.setUserState}/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3" controlId="phone">
|
|
||||||
<Form.Label>Phone number</Form.Label>
|
|
||||||
<Form.Control type="text" placeholder="Ex. (123) 456-7890" onChange={this.setUserState}/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3" controlId="password">
|
|
||||||
<Form.Label>Password</Form.Label>
|
|
||||||
<Form.Control type="password" placeholder="Enter password" onChange={this.setUserState}/>
|
|
||||||
</Form.Group>
|
|
||||||
<Button variant="primary" type="submit">
|
|
||||||
Login
|
|
||||||
</Button>
|
|
||||||
</Form>
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@@ -1,7 +1,10 @@
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
|
||||||
export const apiClient = axios.create({
|
export const apiClient = axios.create({
|
||||||
baseURL: process.env.REACT_APP_API_HOST + "/api/",
|
baseURL: (process.env.REACT_APP_API_HOST || "") + "/api/",
|
||||||
timeout: 5000,
|
timeout: 5000,
|
||||||
withCredentials: process.env.NODE_ENV === "development",
|
withCredentials: process.env.NODE_ENV === "development",
|
||||||
|
validateStatus: function (status) {
|
||||||
|
return status === 401 || status == 200;
|
||||||
|
}
|
||||||
});
|
});
|
@@ -14,7 +14,7 @@
|
|||||||
4
|
4
|
||||||
],
|
],
|
||||||
"linebreak-style": [
|
"linebreak-style": [
|
||||||
"error",
|
"warn",
|
||||||
"unix"
|
"unix"
|
||||||
],
|
],
|
||||||
"quotes": [
|
"quotes": [
|
||||||
@@ -24,6 +24,7 @@
|
|||||||
"semi": [
|
"semi": [
|
||||||
"error",
|
"error",
|
||||||
"always"
|
"always"
|
||||||
]
|
],
|
||||||
|
"no-unused-vars": "warn"
|
||||||
}
|
}
|
||||||
}
|
}
|
Reference in New Issue
Block a user