2020-02-27 09:42:13 +00:00
|
|
|
import React, {Component} from 'react';
|
2020-03-04 20:24:18 +00:00
|
|
|
import {Button, Form, Grid, Header, Image, Icon, Input, Message} from 'semantic-ui-react';
|
2020-03-04 15:12:58 +00:00
|
|
|
import { call } from '../client_server';
|
2020-03-02 10:23:50 +00:00
|
|
|
|
2020-02-27 09:42:13 +00:00
|
|
|
export default class Signup extends Component{
|
2020-03-02 10:23:50 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.state = {
|
2020-03-04 15:12:58 +00:00
|
|
|
completeName: "",
|
|
|
|
username: "",
|
2020-03-02 10:23:50 +00:00
|
|
|
email: "",
|
2020-03-04 15:12:58 +00:00
|
|
|
password : "",
|
2020-03-04 20:24:18 +00:00
|
|
|
error : { state : false,
|
|
|
|
message: ""},
|
2020-03-02 10:23:50 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-03-04 15:12:58 +00:00
|
|
|
handleRegistration = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
const params = {
|
|
|
|
"email": this.state.email,
|
|
|
|
"name": this.state.completeName,
|
|
|
|
"password": this.state.password,
|
|
|
|
"username": this.state.username,
|
|
|
|
};
|
|
|
|
|
|
|
|
call.register(params)
|
|
|
|
.then(res => {
|
2020-03-04 20:24:18 +00:00
|
|
|
if (res.status === "Errore") {
|
|
|
|
this.setState({error: { state: true,
|
|
|
|
message: "Errore"}});
|
2020-03-05 10:02:33 +00:00
|
|
|
} else if (res.status === 200 && res.data){
|
|
|
|
this.props.history.push("/");
|
2020-03-04 15:12:58 +00:00
|
|
|
}
|
|
|
|
}).catch(err => {
|
2020-03-04 20:24:18 +00:00
|
|
|
//console.log(err);
|
2020-03-04 15:12:58 +00:00
|
|
|
});
|
2020-03-02 10:23:50 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
onChangeHandler = (event) => {
|
|
|
|
let nam = event.target.name;
|
|
|
|
let val = event.target.value;
|
|
|
|
this.setState({[nam]: val});
|
|
|
|
};
|
|
|
|
|
2020-02-27 09:42:13 +00:00
|
|
|
render() {
|
2020-03-02 10:23:50 +00:00
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<Button
|
|
|
|
circular
|
|
|
|
style={{margin: "2em"}}
|
|
|
|
href="/"
|
|
|
|
>
|
|
|
|
<Icon name='arrow alternate circle left'/>
|
|
|
|
Go Home </Button>
|
|
|
|
<Grid textAlign='center' style={{height: '70vh'}} verticalAlign='middle'>
|
|
|
|
<Grid.Column style={{maxWidth: 450}}>
|
|
|
|
<Header as='h2' color='blue' textAlign='center'>
|
|
|
|
<Image src='img/logo.png'/> Sign-up to SmartHut
|
|
|
|
</Header>
|
2020-03-04 20:24:18 +00:00
|
|
|
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
|
|
|
|
<Message
|
|
|
|
error
|
2020-03-04 20:38:49 +00:00
|
|
|
header='Singup Error'
|
2020-03-04 20:24:18 +00:00
|
|
|
content= {this.state.error.message}
|
|
|
|
/>
|
2020-03-02 10:23:50 +00:00
|
|
|
<Form.Input
|
|
|
|
icon='address card outline'
|
|
|
|
iconPosition='left'
|
|
|
|
placeholder='First Name and Last Name'
|
|
|
|
name="completeName"
|
|
|
|
type='text'
|
|
|
|
onChange={this.onChangeHandler}
|
|
|
|
required
|
2020-03-09 14:07:06 +00:00
|
|
|
/>
|
2020-03-02 10:23:50 +00:00
|
|
|
<Form.Input
|
|
|
|
icon='user'
|
|
|
|
iconPosition='left'
|
|
|
|
placeholder='Username'
|
|
|
|
name="username"
|
|
|
|
type='text'
|
|
|
|
onChange={this.onChangeHandler}
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
<Form.Input
|
|
|
|
control={Input}
|
|
|
|
type="name"
|
|
|
|
icon='envelope outline'
|
|
|
|
name="email"
|
|
|
|
iconPosition='left'
|
|
|
|
placeholder='E-mail'
|
|
|
|
onChange={this.onChangeHandler}
|
|
|
|
/*error={{
|
|
|
|
content: 'Please enter a valid email address',
|
|
|
|
pointing: 'below',
|
|
|
|
}}*/
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
<Form.Input
|
|
|
|
icon='lock'
|
|
|
|
iconPosition='left'
|
|
|
|
placeholder='Password (at least 8 characters)'
|
|
|
|
name="password"
|
|
|
|
type='password'
|
|
|
|
onChange={this.onChangeHandler}
|
|
|
|
minLength={6}
|
|
|
|
required
|
|
|
|
/>
|
2020-03-04 15:12:58 +00:00
|
|
|
<Button color='blue' fluid size='large' onClick={this.handleRegistration}>
|
2020-03-02 10:23:50 +00:00
|
|
|
Register
|
|
|
|
</Button>
|
|
|
|
</Form>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
|
|
|
</React.Fragment>
|
2020-02-27 09:42:13 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|