header controller, new navbar for the home when not in mobile, forgot password and confirm registration pages

smart-hut/src/Routes.js

@@ -1,15 +1,22 @@
 import React from 'react';
 import {Route, Switch} from 'react-router-dom';
+import ConfirmRegistration from "./views/ConfirmRegistration";
+import ForgotPassword from "./views/ForgotPassword";
 import Home from './views/Home';
 import Login from "./views/Login";
 import Signup from "./views/Signup";
+import TestHeaderController from "./views/TestHeaderController"
 
 export default function Routes() {
   return (
     <Switch>
       <Route path="/" exact component={Home}/>
+      <Route path="/confirm-registration" exact component={ConfirmRegistration}/>
+      <Route path="/forgot-password" exact component={ForgotPassword}/>
       <Route path="/login" exact component={Login}/>
       <Route path="/signup" exact component={Signup}/>
+
+      <Route path="/headerController" exact component={TestHeaderController}/>
     </Switch>
   )
 }

smart-hut/src/components/HeaderController.js

@@ -0,0 +1,191 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import { Button, Menu, Header, Dropdown, Icon, Grid, Divider} from 'semantic-ui-react'
+import { Segment, Image } from 'semantic-ui-react'
+
+const ImageExampleWrapped = () => (
+    <Image src='avatar3.png' size='tiny' centered
+        
+    />
+  )
+
+  const ImageExampleWrapped2 = () => (
+    <Image 
+        src='smart-home.png' 
+        size='tiny' 
+        centered
+        as='a'
+        href='/'
+    />
+  )  
+
+const ImageExampleWrapped3 = () => (
+    <Image src='title2.png' size='medium' centered/>
+  ) 
+
+const HeaderExampleIconProp = () => (
+    <Header as='h2' icon='plug' color="white" content='Smart Hut' />
+)
+
+
+
+const GridExampleInverted = () => (
+    <Grid columns='equal' divided inverted padded >
+      <Grid.Row color='black' textAlign='center'>
+        <Grid.Column width={2}>
+          <Segment color='black' inverted>
+          <ImageExampleWrapped2 /> 
+          </Segment>
+        </Grid.Column>
+        <Grid.Column>
+          <Segment color='black' inverted>
+          <ImageExampleWrapped3 />
+          </Segment>
+        </Grid.Column>
+        <Grid.Column width={3}>
+        <ImageExampleWrapped /> 
+        <Divider />
+        <Dropdown item icon='setting' size='huge'>
+        <Dropdown.Menu>
+          <Dropdown.Item>
+            <Icon name='dropdown' />
+            <span className='text'>Settings</span>
+            <Dropdown.Menu>
+              <Dropdown.Item>Document</Dropdown.Item>
+              <Dropdown.Item>Image</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown.Item>
+          <Dropdown.Item>See profile...</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item>Logout</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  )
+
+export default class MyHeader extends React.Component {
+    render() {
+        return (
+          <div>
+            <GridExampleInverted />
+          </div>
+        );
+      }
+  }
+
+
+
+        // const navbar = {
+        //     backgroundColor: "#20222b",
+        //     color: "white",
+        //     marginBottom: "4.6rem",
+        //     padding: "3.2rem 0"
+        // };
+        // const navbar__buttons = {
+        //     borderBottom: "1px solid lighten($light-blue, 10%)",
+        //     display: "flex",
+        //     justifyContent: "space-between",
+        //     padding: "3.2rem 1.6rem"
+        // }
+        // const button = {
+        //         background: "#8357c5",
+        //         border: "none",
+        //         borderBottom: "1px solid purple",
+        //         color: "white",
+        //         fontWeight: "500",
+        //         padding: "1.2rem"
+        // }
+
+
+
+//   const MenuExampleButtons = () => (
+//     <Menu>
+//       <Menu.Item>
+//         <Button primary>Sign up</Button>
+//       </Menu.Item>
+  
+//       <Menu.Item>
+//         <Button>Log-in</Button>
+//       </Menu.Item>
+//       <Menu.Item>
+//         <Button>Log-in</Button>
+//       </Menu.Item>
+//       <Menu.Item>
+//         <Button>Log-in</Button>
+//       </Menu.Item>
+//     </Menu>
+//   )
+
+
+
+
+
+
+
+
+// class MenuExampleInvertedSegment extends Component {
+//     state = { activeItem: 'home' }
+  
+//     handleItemClick = (e, { name }) => this.setState({ activeItem: name })
+  
+//     render() {
+//       const { activeItem } = this.state
+  
+//       return (
+//         <Segment inverted>
+//           <Menu inverted secondary>
+//             <Menu.Item
+//               name='home'
+//               active={activeItem === 'home'}
+//               onClick={this.handleItemClick}
+//             />
+//             <Menu.Item
+//               name='messages'
+//               active={activeItem === 'messages'}
+//               onClick={this.handleItemClick}
+//             />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <HeaderExampleIconProp />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item />
+//             <Menu.Item
+//                 name='messages'
+//                 active={activeItem === 'messages'}
+//                 onClick={this.handleItemClick}
+//             />
+//             <Dropdown item icon='wrench' simple>
+//             <Dropdown.Menu>
+//               <Dropdown.Item>
+//                 <Icon name='dropdown' />
+//                 <span className='text'>New</span>
+    
+//                 <Dropdown.Menu>
+//                   <Dropdown.Item>Document</Dropdown.Item>
+//                   <Dropdown.Item>Image</Dropdown.Item>
+//                 </Dropdown.Menu>
+//               </Dropdown.Item>
+//               <Dropdown.Item>Open</Dropdown.Item>
+//               <Dropdown.Item>Save...</Dropdown.Item>
+//               <Dropdown.Item>Edit Permissions</Dropdown.Item>
+//               <Dropdown.Divider />
+//               <Dropdown.Header>Export</Dropdown.Header>
+//               <Dropdown.Item>Share</Dropdown.Item>
+//             </Dropdown.Menu>
+//           </Dropdown>
+//             <ImageExampleWrapped /> 
+//             <Menu.Item />
+//           </Menu>
+//         </Segment>
+//       )
+//     }
+//   }

smart-hut/src/components/HomeNavbar.js

@@ -0,0 +1,130 @@
+import _ from "lodash";
+import React, { Component } from "react";
+import { render } from "react-dom";
+import {
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Sidebar,
+  Responsive
+} from "semantic-ui-react";
+
+
+const NavBarMobile = ({
+    children,
+    leftItems,
+    onPusherClick,
+    onToggle,
+    rightItems,
+    visible
+  }) => (
+    <Sidebar.Pushable>
+      <Sidebar
+        as={Menu}
+        animation="overlay"
+        icon="labeled"
+        inverted
+        items={leftItems}
+        vertical
+        visible={visible}
+      />
+      <Sidebar.Pusher
+        dimmed={visible}
+        onClick={onPusherClick}
+        style={{ minHeight: "100vh" }}
+      >
+        <Menu fixed="top" inverted>
+          <Menu.Item>
+            <Image size="mini" src="smart-home_index.png" />
+          </Menu.Item>
+          <Menu.Item onClick={onToggle}>
+            <Icon name="sidebar" />
+          </Menu.Item>
+          <Menu.Menu position="right">
+            {_.map(rightItems, item => <Menu.Item {...item} />)}
+          </Menu.Menu>
+        </Menu>
+        {children}
+      </Sidebar.Pusher>
+    </Sidebar.Pushable>
+  );
+  
+  const NavBarDesktop = ({ leftItems, rightItems }) => (
+    <Menu fixed="top" inverted>
+      <Menu.Item>
+        <Image size="mini" src="smart-home_index.png" />
+      </Menu.Item>
+      {_.map(leftItems, item => <Menu.Item {...item} />)}
+      <Menu.Menu position="right">
+        {_.map(rightItems, item => <Menu.Item {...item} />)}
+      </Menu.Menu>
+    </Menu>
+  );
+  
+  const NavBarChildren = ({ children }) => (
+    <Container style={{ marginTop: "5em" }}>{children}</Container>
+  );
+  
+ 
+class HomeNavabarApp extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      logged : true,
+      email: "",
+      password : ""
+    };
+  }
+    state = {
+    visible: false
+  };
+
+  handlePusher = () => {
+    const { visible } = this.state;
+
+    if (visible) this.setState({ visible: false });
+  };
+
+  handleToggle = () => this.setState({ visible: !this.state.visible });
+
+  render() {
+    const { children, leftItems, rightItems } = this.props;
+    const { visible } = this.state;
+
+    return (
+      <div>
+        <Responsive {...Responsive.onlyMobile}>
+          <NavBarMobile
+            leftItems={leftItems}
+            onPusherClick={this.handlePusher}
+            onToggle={this.handleToggle}
+            rightItems={rightItems}
+            visible={visible}
+          >
+            <NavBarChildren>{children}</NavBarChildren>
+          </NavBarMobile>
+        </Responsive>
+        <Responsive minWidth={Responsive.onlyTablet.minWidth}>
+          <NavBarDesktop leftItems={leftItems} rightItems={rightItems} />
+          <NavBarChildren>{children}</NavBarChildren>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const leftItems = [
+    { as: "a", content: "Home", key: "home", href:"/" },
+  ];
+  const rightItems = [
+    { as: "a", content: "Login", key: "login", href:"/login" },
+    { as: "a", content: "Sign up", key: "register", href:"/signup" }
+  ];
+
+const HomeNavbarApp = () => (
+    <HomeNavabarApp leftItems={leftItems} rightItems={rightItems}>
+    </HomeNavabarApp>
+  );
+
+export default HomeNavbarApp;

smart-hut/src/views/ConfirmRegistration.js

@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import HomeNavbar from "./../components/HomeNavbar";
+import {
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Sidebar,
+  Responsive,
+  Header,
+  Divider,
+  Message,
+  Grid
+} from "semantic-ui-react";
+
+class Paragraph extends Component {
+    state = { visible: true }
+  
+    handleDismiss = () => {
+      this.setState({ visible: false })
+  
+      setTimeout(() => {
+        this.setState({ visible: true })
+      }, 2000)
+    }
+  
+    render() {
+      if (this.state.visible) {
+        return (
+          <Message
+            onDismiss={this.handleDismiss}
+            header='Congratulation!'
+            content='An e-mail has been sent your address, please confirm
+            your registration by following the enclosed link'
+          />
+        )
+      }
+  
+      return (
+        <p>
+          <br />
+          <i>The message will return in 2s</i>
+          <br />
+          <br />
+        </p>
+      )
+    }
+  }
+
+
+  const MessageReg = () => (
+    <Grid>
+    <HomeNavbar />
+    <Divider />
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+        <Grid.Column width={6}>
+        </Grid.Column>
+        <Grid.Column width={10}>
+        <Image src='title5.png' />
+        </Grid.Column>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Column width={3}>
+    </Grid.Column>
+    <Grid.Column width={4}>
+      <Image src='./img/logo.png' />
+     </Grid.Column>
+    <Grid.Column width={6}>
+    <Paragraph />
+    </Grid.Column>
+    <Grid.Column width={4}>
+    </Grid.Column>
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    <Grid.Column width={10}>
+      <Divider />
+    </Grid.Column>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    </Grid.Row> 
+    </Grid>
+  ) 
+
+export default class ConfirmRegistration extends React.Component {
+  render () {
+    return (
+        <MessageReg />
+    )
+  }
+}

smart-hut/src/views/ForgotPassword.js

@@ -0,0 +1,107 @@
+import React, { Component } from "react";
+import { render } from "react-dom";
+import HomeNavbar from "./../components/HomeNavbar";
+import {
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Sidebar,
+  Responsive,
+  Header,
+  Divider,
+  Message,
+  Grid
+} from "semantic-ui-react";
+
+class Paragraph extends Component {
+    state = { visible: true }
+  
+    handleDismiss = () => {
+      this.setState({ visible: false })
+  
+      setTimeout(() => {
+        this.setState({ visible: true })
+      }, 2000)
+    }
+  
+    render() {
+      if (this.state.visible) {
+        return (
+          <Message
+            onDismiss={this.handleDismiss}
+            header='Link has been sent!'
+            content='An e-mail has been sent your address, please follow the
+            instruction to create a new password'
+          />
+        )
+      }
+  
+      return (
+        <p>
+          <br />
+          <i>The message will return in 2s</i>
+          <br />
+          <br />
+        </p>
+      )
+    }
+  }
+
+
+  const MessageReg = () => (
+    <Grid>
+    <HomeNavbar />
+    <Divider />
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+        <Grid.Column width={6}>
+        </Grid.Column>
+        <Grid.Column width={10}>
+        <Image src='title5.png' />
+        </Grid.Column>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Column width={3}>
+    </Grid.Column>
+    <Grid.Column width={4}>
+      <Image src='./img/logo.png' />
+     </Grid.Column>
+    <Grid.Column width={6}>
+    <Paragraph />
+    </Grid.Column>
+    <Grid.Column width={4}>
+    </Grid.Column>
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    </Grid.Row> 
+    <Grid.Row height={3}>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    <Grid.Column width={10}>
+      <Divider />
+    </Grid.Column>
+    <Grid.Column width={3}>
+    </Grid.Column>
+    </Grid.Row> 
+    </Grid>
+  ) 
+
+export default class ForgotPasswrod extends React.Component {
+  render () {
+    return (
+        <MessageReg />
+    )
+  }
+}

smart-hut/src/views/Home.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import HomeNavbar from './../components/HomeNavbar';
 import {
     Button,
     Container,
@@ -89,30 +90,7 @@ class DesktopContainer extends Component {
                         }}
                         vertical
                     >
-                        <Menu
-                            fixed="top"
-                            inverted={!fixed}
-                            pointing={!fixed}
-                            primary
-                            size='large'
-                            borderless
-
-                        >
-                            <Container>
-                                <Menu.Item as='a' active>
-                                    Home
-                                </Menu.Item>
-
-                                <Menu.Item position='right'>
-                                    <Button as='a' href="/login"  inverted={!fixed}>
-                                        Log in
-                                    </Button>
-                                    <Button as='a' href="/signup" inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
-                                        Sign Up
-                                    </Button>
-                                </Menu.Item>
-                            </Container>
-                        </Menu>
+                        <HomeNavbar />
                         <HomepageHeading />
                     </Segment>
                 </Visibility>

smart-hut/src/views/TestHeaderController.js

@@ -0,0 +1,20 @@
+import _ from "lodash";
+import React, { Component } from "react";
+import HeaderController from "./../components/HeaderController";
+import { render } from "react-dom";
+import {
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Sidebar,
+  Responsive
+} from "semantic-ui-react";
+
+export default class TestHeaderController extends React.Component {
+  render () {
+    return (
+      <HeaderController/>
+    )
+  }
+}