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

Finished sign up page.

Browse Source
This commit is contained in:
Harrison Deng
2022-04-07 17:59:55 -05:00
parent f9fef07b9a
commit e7d689cdde
4 changed files with 156 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
sports-matcher/client/package-lock.json generated
View File

@@ -18,6 +18,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.2.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"validator": "^13.7.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"devDependencies": { "devDependencies": {
@@ -15382,6 +15383,14 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/validator": {
"version": "13.7.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
"integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==",
"engines": {
"node": ">= 0.10"
}
},
"node_modules/vary": { "node_modules/vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -27295,6 +27304,11 @@
} }
} }
}, },
"validator": {
"version": "13.7.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
"integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
},
"vary": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

1
sports-matcher/client/package.json
View File

@@ -13,6 +13,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.2.2", "react-router-dom": "^6.2.2",
"react-scripts": "5.0.0", "react-scripts": "5.0.0",
"validator": "^13.7.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

88
sports-matcher/client/src/pages/SIgnup.js
View File

@@ -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>
);
}
}

140
sports-matcher/client/src/pages/Signup.js Normal file
View File

@@ -0,0 +1,140 @@
import React from "react";
import { Alert, Button, Card, Container, Form } from "react-bootstrap";
import { Link } from "react-router-dom";
import validator from "validator";
import { apiClient } from "../utils/httpClients";
export default class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
user: {
email: null,
firstName: null,
lastName: null,
phone: null,
password: null
},
alert: {
show: false,
variant: null,
headerMsg: null,
content: null
}
};
this.registerUser = this.registerUser.bind(this);
this.setUserState = this.setUserState.bind(this);
}
async registerUser(event) {
event.preventDefault(); // We need this so that the page doesn't refresh.
let formIssues = this.validateCurrentForm();
if (formIssues.length > 0) {
this.notifyUser("Oops there were issue(s)", (
<ul>
{formIssues.map((issue) => {
return (
<li key={issue}>{issue}</li>
);
})}
</ul>
), "danger");
return;
}
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");
} 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) {
this.notifyUser("There were errors in the submitted info.", <div>Double check to see if everything is inputted is valid.</div>, "danger");
} else {
this.notifyUser("Error", <div>Internal server error. Please try again later.</div>, "danger");
}
}
validateCurrentForm() {
console.log(this.state);
let formIssues = [];
if (!validator.isEmail(this.state.user.email)) {
formIssues.push("The email submitted is invalid.");
}
if (this.state.user.password.length < 8) {
formIssues.push("The password submitted must have a minimum length of 8 characters.");
}
return formIssues;
}
setUserState(event) {
this.setState((state) => {
state.user[event.target.id] = event.target.value;
return state;
});
}
notifyUser(headerMsg, content, key) {
this.setState((state) => {
state.alert.show = true;
state.alert.headerMsg = headerMsg;
state.alert.content = content;
state.alert.key = key;
return state;
});
}
componentDidMount() {
if (this.context.user) {
this.context.navigate("/dashboard");
}
}
render() {
return (
<div className="page-root pt-3">
<Container>
<Alert show={this.state.alert.show} variant="warning" onClose={() => this.setState((state) => { state.alert.show = false; return state; })} dismissible>
<Alert.Heading>{this.state.alert.headerMsg}</Alert.Heading>
{this.state.alert.content}
</Alert>
<Card style={{ width: "35rem" }}>
<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} required />
</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} required />
</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} required />
</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} required />
</Form.Group>
<Button variant="primary" type="submit">
Register!
</Button>
</Form>
</Card.Body>
</Card>
</Container>
</div >
);
}
}