81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react';
|
|
|
|
export default class Login extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
logged : false,
|
|
email: "",
|
|
password : ""
|
|
};
|
|
}
|
|
|
|
handleLogin = (e) => {
|
|
// TODO Login should be handled here
|
|
console.log(this.state);
|
|
};
|
|
|
|
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"}}>
|
|
<Form.Input
|
|
control={Input}
|
|
type="email"
|
|
icon='user'
|
|
name="email"
|
|
iconPosition='left'
|
|
placeholder='E-mail'
|
|
onChange={this.onChangeHandler}
|
|
/*error={{
|
|
content: 'Please enter a valid email address',
|
|
pointing: 'below',
|
|
}}*/
|
|
/>
|
|
<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>
|
|
)
|
|
}
|
|
}
|