added components

smart-hut/src/views/Forgot-pass-reset.js

@@ -0,0 +1,85 @@
+import React, {Component} from 'react';
+import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
+//import { call } from '../client_server';
+
+
+export default class ChangePass  extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            password: "",
+            error: {
+                state: false,
+                message: "",
+            }
+        }
+    }
+
+    onChangeHandler = (event) => {
+        let nam = event.target.name;
+        let val = event.target.value;
+        this.setState({[nam]: val});
+    };
+
+    checkpassword = (e) => {
+        if (e.target.value !== this.state.password) {
+          this.setState({error: {
+            state : true,
+            message : "Passwords do not match.",
+          }});
+        }
+    };
+
+    handleChangePassword = (e) => {
+
+    };
+
+    render() {
+        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'/> Reset Password
+                </Header>
+                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
+                    <Message
+                      error
+                      header='Change Password Error'
+                      content= {this.state.error.message}
+                    />
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Reset your password'
+                        name="password"
+                        type='password'
+                        onChange={this.onChangeHandler}
+                        required
+                    /> 
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Confirm Password'
+                        name="confirm-password"
+                        type='password'
+                        onChange={this.checkpassword}
+                        required
+                    /> 
+                    <Button  color='blue' fluid size='large' onClick={this.handleChangePassword}>
+                        Confirm password
+                    </Button>
+                </Form>
+              </Grid.Column>
+            </Grid>
+          </React.Fragment>
+        )
+      }
+}

smart-hut/src/views/Forgot-password.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import {Button, Form, Grid, Header, Image, Icon, Message} from 'semantic-ui-react';
+//import { call } from '../client_server';
+
+
+export default class ForgotPass  extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            user: "",
+            error: {
+                state: false,
+                message: "",
+            }
+        }
+    }
+
+    onChangeHandler = (event) => {
+        let nam = event.target.name;
+        let val = event.target.value;
+        this.setState({[nam]: val});
+    };
+
+    handleSendEmail = (e) => {
+
+    };
+
+    render() {
+        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'/> Reset Password
+                </Header>
+                <Form size='large' style={{marginTop : "2em"}} error={this.state.error.state}>
+                    <Message
+                      error
+                      header='Send E-mail Error'
+                      content= {this.state.error.message}
+                    />
+                    <Form.Input
+                        icon='address card outline'
+                        iconPosition='left'
+                        placeholder='Username or E-mail'
+                        name="user"
+                        type='text'
+                        onChange={this.onChangeHandler}
+                        required
+                    /> 
+                    <Button  color='blue' fluid size='large' onClick={this.handleSendEmail}>
+                        Send E-mail
+                    </Button>
+                </Form>
+              </Grid.Column>
+            </Grid>
+          </React.Fragment>
+        )
+      }
+}