Merge branch 'restructure' into develop

This commit is contained in:
Hansi Xu 2022-04-05 21:18:15 -04:00
commit c691b710b7

View File

@ -0,0 +1,82 @@
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 registerResponse = await apiClient.post("/user", this.state);
if (registerResponse.status === 200) {
this.warnUser()
}
}
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>
);
}
}