frontend/smart-hut/src/views/Signup.js

141 lines
3.8 KiB
JavaScript
Raw Normal View History

2020-03-23 20:24:17 +00:00
import React, { Component } from "react";
import {
Button,
Form,
Grid,
Header,
Image,
Icon,
Input,
Message,
} from "semantic-ui-react";
import { Redirect } from "react-router-dom";
import { Forms } from "../remote";
2020-03-02 10:23:50 +00:00
2020-03-23 20:24:17 +00:00
export default class Signup extends Component {
2020-03-02 10:23:50 +00:00
constructor(props) {
super(props);
this.state = {
completeName: "",
username: "",
2020-03-02 10:23:50 +00:00
email: "",
2020-03-23 20:24:17 +00:00
password: "",
2020-03-25 21:15:52 +00:00
error: { state: false, message: [] },
2020-03-23 20:24:17 +00:00
success: false,
2020-03-02 10:23:50 +00:00
};
}
handleRegistration = (e) => {
e.preventDefault();
2020-03-23 20:24:17 +00:00
const params = {
email: this.state.email,
name: this.state.completeName,
password: this.state.password,
username: this.state.username,
};
2020-04-12 15:49:29 +00:00
Forms.submitRegistration(params)
.then(() => this.setState({ success: true }))
2020-04-12 15:49:29 +00:00
.catch((err) =>
this.setState({ error: { state: true, message: err.messages } })
);
2020-03-02 10:23:50 +00:00
};
onChangeHandler = (event) => {
let nam = event.target.name;
let val = event.target.value;
2020-03-23 20:24:17 +00:00
this.setState({ [nam]: val });
2020-03-02 10:23:50 +00:00
};
render() {
2020-03-14 14:48:33 +00:00
if (this.state.success) {
2020-03-23 20:24:17 +00:00
return <Redirect to="sent-email-reg" />;
2020-03-14 14:48:33 +00:00
}
2020-03-02 10:23:50 +00:00
return (
<React.Fragment>
2020-03-23 20:24:17 +00:00
<Button circular style={{ margin: "2em" }} href="/">
<Icon name="arrow alternate circle left" />
Go Home{" "}
</Button>
<Grid
textAlign="center"
style={{ height: "70vh" }}
verticalAlign="middle"
2020-03-02 10:23:50 +00:00
>
2020-03-23 20:24:17 +00:00
<Grid.Column style={{ maxWidth: 450 }}>
<Header as="h2" color="blue" textAlign="center">
<Image src="img/logo.png" /> Sign-up to SmartHut
2020-03-02 10:23:50 +00:00
</Header>
2020-03-23 20:24:17 +00:00
<Form
size="large"
style={{ marginTop: "2em" }}
error={this.state.error.state}
>
2020-03-25 21:15:52 +00:00
<Message error>
<Message.Header>Singup Error</Message.Header>
{this.state.error.message.map((e, i) => (
<span key={i}>
{e}
<br />
</span>
))}
</Message>
2020-03-02 10:23:50 +00:00
<Form.Input
2020-03-23 20:24:17 +00:00
icon="address card outline"
iconPosition="left"
placeholder="First Name and Last Name"
2020-03-02 10:23:50 +00:00
name="completeName"
2020-03-23 20:24:17 +00:00
type="text"
2020-03-02 10:23:50 +00:00
onChange={this.onChangeHandler}
required
/>
2020-03-02 10:23:50 +00:00
<Form.Input
2020-03-23 20:24:17 +00:00
icon="user"
iconPosition="left"
placeholder="Username"
2020-03-02 10:23:50 +00:00
name="username"
2020-03-23 20:24:17 +00:00
type="text"
2020-03-02 10:23:50 +00:00
onChange={this.onChangeHandler}
required
2020-03-23 20:24:17 +00:00
/>
2020-03-02 10:23:50 +00:00
<Form.Input
2020-03-23 20:24:17 +00:00
control={Input}
type="name"
icon="envelope outline"
name="email"
iconPosition="left"
placeholder="E-mail"
onChange={this.onChangeHandler}
/*error={{
2020-03-02 10:23:50 +00:00
content: 'Please enter a valid email address',
pointing: 'below',
}}*/
2020-03-23 20:24:17 +00:00
required
/>
2020-03-02 10:23:50 +00:00
<Form.Input
2020-03-23 20:24:17 +00:00
icon="lock"
iconPosition="left"
placeholder="Password (at least 8 characters)"
name="password"
type="password"
onChange={this.onChangeHandler}
minLength={6}
required
/>
<Button
color="blue"
fluid
size="large"
onClick={this.handleRegistration}
>
Register
2020-03-02 10:23:50 +00:00
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
2020-03-23 20:24:17 +00:00
);
}
}