103 lines
4.4 KiB
JavaScript
103 lines
4.4 KiB
JavaScript
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>
|
|
);
|
|
}
|
|
}
|