signup page implemented

This commit is contained in:
FilippoCesana 2020-03-02 11:23:50 +01:00
parent 8c719274a1
commit cd89cbc1bd

View file

@ -1,10 +1,98 @@
import React, {Component} from 'react';
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react';
export default class Signup extends Component{
constructor(props) {
super(props);
this.state = {
logged : false,
completeName: '',
username: '',
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});
};
render() {
return (
"This is the register page"
<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'/> Sign-up to SmartHut
</Header>
<Form size='large' style={{marginTop : "2em"}}>
<Form.Input
icon='address card outline'
iconPosition='left'
placeholder='First Name and Last Name'
name="completeName"
type='text'
onChange={this.onChangeHandler}
required
/>
<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
/>
<Button color='blue' fluid size='large' onClick={this.handleLogin}>
Register
</Button>
</Form>
</Grid.Column>
</Grid>
</React.Fragment>
)
}
}