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": [
|
||||
"error",
|
||||
"always"
|
||||
]
|
||||
],
|
||||
"no-unused-vars": "warn"
|
||||
}
|
||||
}
|
@@ -10,6 +10,7 @@ import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
import Login from "./pages/Login";
|
||||
import { apiClient } from "./utils/httpClients";
|
||||
import Signup from "./pages/Signup";
|
||||
import { globalContext } from "./context.js";
|
||||
|
||||
|
||||
@@ -80,6 +81,7 @@ export default function layout() {
|
||||
<Route path="/" element={<Welcome />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/signup" element={<Signup />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<footer>
|
||||
|
@@ -13,7 +13,7 @@ export default class SportInfoCard extends React.Component {
|
||||
<Card.Title>{this.props.sport.name}</Card.Title>
|
||||
<Card.Subtitle className="mb-2 text-muted">{this.props.sport.minPlayers.toString()}</Card.Subtitle>
|
||||
<Card.Text>
|
||||
<p>{this.props.sport.description}</p>
|
||||
{this.props.sport.description}
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
@@ -8,7 +8,7 @@ export default class SportInfoCardDisplay extends React.Component {
|
||||
}
|
||||
render() {
|
||||
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>);
|
||||
}
|
||||
return (
|
||||
|
@@ -4,7 +4,9 @@ import "../styles/Dashboard.css";
|
||||
import { apiClient } from "../utils/httpClients.js";
|
||||
import MatchInfoCardDisplay from "../components/MatchInfoCardDisplay";
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -14,16 +16,14 @@ export default class Dashboard extends React.Component {
|
||||
displayedEquipment: [],
|
||||
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.
|
||||
// this.setState({ displayedMatches: await this.latestMatches() });
|
||||
// }
|
||||
|
||||
static contextType = globalContext;
|
||||
|
||||
async componentDidMount() {
|
||||
await needUser(this.context.navigate);
|
||||
await this.latestMatches();
|
||||
await this.availableSports();
|
||||
// await this.availableEquipment();
|
||||
}
|
||||
async latestMatches() {
|
||||
let recentMatchesRes = await apiClient.get("/match/recent/15");
|
||||
@@ -35,23 +35,10 @@ export default class Dashboard extends React.Component {
|
||||
async availableSports() {
|
||||
let availableSportsRes = await apiClient.get("/sport");
|
||||
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() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
@@ -74,10 +61,7 @@ export default class Dashboard extends React.Component {
|
||||
<h2>Available Sports</h2>
|
||||
<SportInfoCardDisplay recommendedsports={this.state.displayedSports} />
|
||||
</div>
|
||||
{/* <div className="p-4">
|
||||
<h2>Available Equipment</h2>
|
||||
<MatchInfoCardDisplay recommendedmatches={this.state.displayedEquipment} />
|
||||
</div> */}
|
||||
|
||||
|
||||
</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";
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: process.env.REACT_APP_API_HOST + "/api/",
|
||||
baseURL: (process.env.REACT_APP_API_HOST || "") + "/api/",
|
||||
timeout: 5000,
|
||||
withCredentials: process.env.NODE_ENV === "development",
|
||||
validateStatus: function (status) {
|
||||
return status === 401 || status == 200;
|
||||
}
|
||||
});
|
@@ -14,7 +14,7 @@
|
||||
4
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"warn",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
@@ -24,6 +24,7 @@
|
||||
"semi": [
|
||||
"error",
|
||||
"always"
|
||||
]
|
||||
],
|
||||
"no-unused-vars": "warn"
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user