header controller, forgot password, confirm refgistration, new navabr

This commit is contained in:
Fil Cesana 2020-03-13 14:43:31 +01:00
parent 566f00984e
commit b6a8d9bf96
8 changed files with 538 additions and 24 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
smart-hut/public/title2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
smart-hut/public/title5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -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>
// )
// }
// }

View file

@ -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;

View file

@ -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 ConfirmForgotPasswrod extends React.Component {
render () {
return (
<MessageReg />
)
}
}

View file

@ -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 />
)
}
}

View file

@ -1,8 +1,10 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import HomeNavbar from './../components/HomeNavbar';
import { import {
Button, Button,
Container, Container,
Divider,
Grid, Grid,
Header, Header,
Icon, Icon,
@ -88,30 +90,7 @@ class DesktopContainer extends Component {
}} }}
vertical vertical
> >
<Menu <HomeNavbar />
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>
<HomepageHeading /> <HomepageHeading />
</Segment> </Segment>
</Visibility> </Visibility>