102 lines
2.9 KiB
JavaScript
102 lines
2.9 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Button, Form, Grid, Header, Image, Message, Icon, Checkbox, Input} from 'semantic-ui-react';
|
|
|
|
|
|
export default class Login extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
user: "",
|
|
password : "",
|
|
fireRedirect: false,
|
|
error : { state : false,
|
|
message: ""},
|
|
};
|
|
}
|
|
|
|
handleLogin = (e) => {
|
|
|
|
e.preventDefault();
|
|
const params = {
|
|
"usernameOrEmail": this.state.user,
|
|
"password": this.state.password,
|
|
};
|
|
|
|
this.props.auth({
|
|
user: this.state.user,
|
|
params : params,
|
|
}).then(res => {
|
|
if (res.status === "Errore") {
|
|
this.setState({error: { state: true,
|
|
message: "Errore"}});
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
onChangeHandler = (event) => {
|
|
let nam = event.target.name;
|
|
let val = event.target.value;
|
|
this.setState({[nam]: val});
|
|
};
|
|
|
|
toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<Button
|
|
circular
|
|
icon="right arrow"
|
|
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'/> Log-in to SmartHut
|
|
</Header>
|
|
<Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
|
|
<Message
|
|
error
|
|
header='Login Error'
|
|
content= {this.state.error.message}
|
|
/>
|
|
<Form.Input
|
|
control={Input}
|
|
type="text"
|
|
icon='user'
|
|
name="user"
|
|
iconPosition='left'
|
|
placeholder='Username or E-mail'
|
|
onChange={this.onChangeHandler}
|
|
/>
|
|
<Form.Input
|
|
icon='lock'
|
|
iconPosition='left'
|
|
placeholder='Password'
|
|
name="password"
|
|
type='password'
|
|
onChange={this.onChangeHandler}
|
|
/>
|
|
<Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>
|
|
|
|
<Button color='blue' fluid size='large' onClick={this.handleLogin}>
|
|
Login
|
|
</Button>
|
|
</Form>
|
|
<Message>
|
|
<p><a href="/forgot-password">Forgot Password?</a></p>
|
|
<p>New to us? <a href='/signup'> Sign Up</a></p>
|
|
</Message>
|
|
</Grid.Column>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|