signup page implemented

smart-hut/src/views/Signup.js

@@ -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(
+    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>
     )
   }
 }