Login and Home pages are done. Login is ready to handle the authentication
This commit is contained in:
christiancp
parent
df09dc770a
commit
bdf6b96098
|
|
@ -21,3 +21,6 @@
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# idea
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -1347,11 +1347,39 @@
|
|||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
||||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
||||
},
|
||||
"@semantic-ui-react/event-stack": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.1.tgz",
|
||||
"integrity": "sha512-SA7VOu/tY3OkooR++mm9voeQrJpYXjJaMHO1aFCcSouS2xhqMR9Gnz0LEGLOR0h9ueWPBKaQzKIrx3FTTJZmUQ==",
|
||||
"requires": {
|
||||
"exenv": "^1.2.2",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"@sheerun/mutationobserver-shim": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
|
||||
"integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q=="
|
||||
},
|
||||
"@stardust-ui/react-component-event-listener": {
|
||||
"version": "0.38.0",
|
||||
"resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz",
|
||||
"integrity": "sha512-sIP/e0dyOrrlb8K7KWumfMxj/gAifswTBC4o68Aa+C/GA73ccRp/6W1VlHvF/dlOR4KLsA+5SKnhjH36xzPsWg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@stardust-ui/react-component-ref": {
|
||||
"version": "0.38.0",
|
||||
"resolved": "https://registry.npmjs.org/@stardust-ui/react-component-ref/-/react-component-ref-0.38.0.tgz",
|
||||
"integrity": "sha512-xjs6WnvJVueSIXMWw0C3oWIgAPpcD03qw43oGOjUXqFktvpNkB73JoKIhS4sCrtQxBdct75qqr4ZL6JiyPcESw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.6.3"
|
||||
}
|
||||
},
|
||||
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
|
||||
|
|
@ -3124,6 +3152,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
|
|
@ -3522,6 +3555,15 @@
|
|||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"create-react-context": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
|
||||
"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
|
||||
"requires": {
|
||||
"gud": "^1.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
|
|
@ -4948,6 +4990,11 @@
|
|||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
|
||||
},
|
||||
"exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
|
|
@ -7863,6 +7910,11 @@
|
|||
"object.assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"keyboard-key": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
|
||||
"integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ=="
|
||||
},
|
||||
"killable": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
||||
|
|
@ -8159,6 +8211,14 @@
|
|||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"material-ui-image": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/material-ui-image/-/material-ui-image-3.2.3.tgz",
|
||||
"integrity": "sha512-dXU9Hj7l0OvmG5s39gwmBuZdYvf5kn17tMMPYg5Hpu4vgnSdfoGkE8kt5J449BWmZZaLMTf5pExcz80Du9dwog==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
|
|
@ -10698,6 +10758,20 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
|
||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
|
||||
"integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"create-react-context": "^0.3.0",
|
||||
"deep-equal": "^1.1.1",
|
||||
"popper.js": "^1.14.4",
|
||||
"prop-types": "^15.6.1",
|
||||
"typed-styles": "^0.0.7",
|
||||
"warning": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
|
||||
|
|
@ -11388,6 +11462,24 @@
|
|||
"node-forge": "0.9.0"
|
||||
}
|
||||
},
|
||||
"semantic-ui-react": {
|
||||
"version": "0.88.2",
|
||||
"resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz",
|
||||
"integrity": "sha512-+02kN2z8PuA/cMdvDUsHhbJmBzxxgOXVHMFr9XK7zGb0wkW9A6OPQMFokWz7ozlVtKjN6r7zsb+Qvjk/qq1OWw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@semantic-ui-react/event-stack": "^3.1.0",
|
||||
"@stardust-ui/react-component-event-listener": "~0.38.0",
|
||||
"@stardust-ui/react-component-ref": "~0.38.0",
|
||||
"classnames": "^2.2.6",
|
||||
"keyboard-key": "^1.0.4",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.6",
|
||||
"react-popper": "^1.3.4",
|
||||
"shallowequal": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"semver": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
||||
|
|
@ -11577,6 +11669,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"shallowequal": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
|
||||
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
|
||||
},
|
||||
"shebang-command": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||
|
|
@ -12661,6 +12758,11 @@
|
|||
"mime-types": "~2.1.24"
|
||||
}
|
||||
},
|
||||
"typed-styles": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
|
||||
"integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
|
||||
},
|
||||
"typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
|
|
@ -12962,6 +13064,14 @@
|
|||
"makeerror": "1.0.x"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||
|
|
|
|||
|
|
@ -8,11 +8,14 @@
|
|||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@testing-library/react": "^9.3.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"classnames": "^2.2.6",
|
||||
"material-ui-image": "^3.2.3",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"react-router": "^5.1.2",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"react-scripts": "3.4.0"
|
||||
"react-scripts": "3.4.0",
|
||||
"semantic-ui-react": "^0.88.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
|
|
@ -1,21 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
|
@ -24,12 +25,13 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
|
|
@ -39,5 +41,6 @@
|
|||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*background: linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51));*/
|
||||
|
|
@ -5,12 +5,7 @@ import Routes from './Routes';
|
|||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<a href="/home">Go Home</a>
|
||||
</div>
|
||||
<Routes/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import React from 'react';
|
||||
import {Route, Switch } from 'react-router-dom';
|
||||
import {Route, Switch} from 'react-router-dom';
|
||||
import Home from './views/Home';
|
||||
import Login from "./views/Login";
|
||||
import Signup from "./views/Signup";
|
||||
|
||||
export default function Routes() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route path="/home" exact component={Home}/>
|
||||
</Switch>
|
||||
)
|
||||
return (
|
||||
<Switch>
|
||||
<Route path="/" exact component={Home}/>
|
||||
<Route path="/login" exact component={Login}/>
|
||||
<Route path="/signup" exact component={Signup}/>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Link from '@material-ui/core/Link';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
mainFeaturedPost: {
|
||||
position: 'relative',
|
||||
backgroundColor: theme.palette.grey[800],
|
||||
color: theme.palette.common.white,
|
||||
marginBottom: theme.spacing(4),
|
||||
backgroundImage: 'img/banner.jpg',
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
},
|
||||
overlay: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
left: 0,
|
||||
backgroundColor: 'rgba(0,0,0,.3)',
|
||||
},
|
||||
mainFeaturedPostContent: {
|
||||
position: 'relative',
|
||||
padding: theme.spacing(3),
|
||||
[theme.breakpoints.up('md')]: {
|
||||
padding: theme.spacing(6),
|
||||
paddingRight: 0,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
|
||||
export default function Banner(props) {
|
||||
const classes = useStyles();
|
||||
const { post } = props;
|
||||
|
||||
return (
|
||||
<Paper className={classes.mainFeaturedPost} style={{ backgroundImage: `url(${post.image})` }}>
|
||||
{/* Increase the priority of the hero background image */}
|
||||
{<img style={{ display: 'none' }} src={post.image} alt={post.imageText} />}
|
||||
<div className={classes.overlay} />
|
||||
<Grid container>
|
||||
<Grid item md={6}>
|
||||
<div className={classes.mainFeaturedPostContent}>
|
||||
<Typography component="h1" variant="h3" color="inherit" gutterBottom>
|
||||
{post.title}
|
||||
</Typography>
|
||||
<Typography variant="h5" color="inherit" paragraph>
|
||||
{post.description}
|
||||
</Typography>
|
||||
<Link variant="subtitle1" href="#">
|
||||
{post.linkText}
|
||||
</Link>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
||||
Banner.propTypes = {
|
||||
post: PropTypes.object,
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
export default function Footer() {
|
||||
return(
|
||||
<div>
|
||||
<p>This is the footer</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import Link from '@material-ui/core/Link';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
toolbar: {
|
||||
borderBottom: `1px solid ${theme.palette.divider}`,
|
||||
},
|
||||
toolbarTitle: {
|
||||
flex: 1,
|
||||
},
|
||||
toolbarSecondary: {
|
||||
justifyContent: 'space-between',
|
||||
overflowX: 'auto',
|
||||
},
|
||||
toolbarLink: {
|
||||
padding: theme.spacing(1),
|
||||
flexShrink: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
export default function Header(props) {
|
||||
const classes = useStyles();
|
||||
const { sections, title } = props;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h5"
|
||||
color="inherit"
|
||||
align="center"
|
||||
noWrap
|
||||
className={classes.toolbarTitle}
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<Toolbar component="nav" variant="dense" className={classes.toolbarSecondary}>
|
||||
{sections.map(section => (
|
||||
<Link
|
||||
color="inherit"
|
||||
noWrap
|
||||
key={section.title}
|
||||
variant="body2"
|
||||
href={section.url}
|
||||
className={classes.toolbarLink}
|
||||
>
|
||||
{section.title}
|
||||
</Link>
|
||||
))}
|
||||
</Toolbar>
|
||||
<Button size="small" variant="outlined" style={{margin: "0 1rem"}}>Login</Button>
|
||||
|
||||
|
||||
<Button variant="outlined" size="small">
|
||||
Sign up
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
sections: PropTypes.array,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
|
@ -5,13 +5,10 @@ import * as serviceWorker from './serviceWorker';
|
|||
//React Router
|
||||
import { BrowserRouter as Router} from 'react-router-dom';
|
||||
|
||||
|
||||
ReactDOM.render(
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
, document.getElementById('root'));
|
||||
|
||||
// If you want your app to work offline and load faster, you can change
|
||||
// unregister() to register() below. Note this comes with some pitfalls.
|
||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||
serviceWorker.unregister();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,294 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Divider,
|
||||
Grid,
|
||||
Header,
|
||||
Icon,
|
||||
Image,
|
||||
List,
|
||||
Menu,
|
||||
Responsive,
|
||||
Segment,
|
||||
Sidebar,
|
||||
Visibility,
|
||||
} from 'semantic-ui-react';
|
||||
|
||||
/**
|
||||
* @return {string}
|
||||
*/
|
||||
export default function Home(){
|
||||
return(
|
||||
"Hello World"
|
||||
)
|
||||
// Heads up!
|
||||
// We using React Static to prerender our docs with server side rendering, this is a quite simple solution.
|
||||
// For more advanced usage please check Responsive docs under the "Usage" section.
|
||||
const getWidth = () => {
|
||||
const isSSR = typeof window === 'undefined';
|
||||
return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;
|
||||
}
|
||||
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
/* Heads up! HomepageHeading uses inline styling, however it's not the best practice. Use CSS or styled components for
|
||||
* such things.
|
||||
*/
|
||||
const HomepageHeading = ({ mobile }) => (
|
||||
<Container text>
|
||||
<Header
|
||||
as='h1'
|
||||
content='SmartHut'
|
||||
inverted
|
||||
style={{
|
||||
fontSize: mobile ? '2em' : '4em',
|
||||
fontWeight: 'normal',
|
||||
marginBottom: 0,
|
||||
marginTop: mobile ? '1.5em' : '3em',
|
||||
}}
|
||||
/>
|
||||
<Header
|
||||
as='h2'
|
||||
content='Keep your Home fully Connected'
|
||||
inverted
|
||||
style={{
|
||||
fontSize: mobile ? '1.5em' : '1.7em',
|
||||
fontWeight: 'normal',
|
||||
marginTop: mobile ? '0.5em' : '1.5em',
|
||||
}}
|
||||
/>
|
||||
<Button size='huge' color="orange" href="/signup">
|
||||
Get Started
|
||||
<Icon name='right arrow' />
|
||||
</Button>
|
||||
</Container>
|
||||
)
|
||||
|
||||
HomepageHeading.propTypes = {
|
||||
mobile: PropTypes.bool,
|
||||
}
|
||||
|
||||
class DesktopContainer extends Component {
|
||||
state = {};
|
||||
hideFixedMenu = () => this.setState({ fixed: false })
|
||||
showFixedMenu = () => this.setState({ fixed: true })
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
const { fixed } = this.state
|
||||
|
||||
return (
|
||||
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
|
||||
<Visibility
|
||||
once={false}
|
||||
onBottomPassed={this.showFixedMenu}
|
||||
onBottomPassedReverse={this.hideFixedMenu}
|
||||
>
|
||||
<Segment
|
||||
basic
|
||||
textAlign='center'
|
||||
style={{
|
||||
minHeight: 700,
|
||||
padding: '1em 0em',
|
||||
background: ` linear-gradient(to bottom, rgba(0, 46, 200, 0.51), rgba(0, 0, 0, 0.51)), url("img/header.jpg")`,
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
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>
|
||||
<HomepageHeading />
|
||||
</Segment>
|
||||
</Visibility>
|
||||
|
||||
{children}
|
||||
</Responsive>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
DesktopContainer.propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
class MobileContainer extends Component {
|
||||
state = {}
|
||||
|
||||
handleSidebarHide = () => this.setState({ sidebarOpened: false })
|
||||
|
||||
handleToggle = () => this.setState({ sidebarOpened: true })
|
||||
|
||||
render() {
|
||||
const { children } = this.props;
|
||||
const { sidebarOpened } = this.state;
|
||||
|
||||
return (
|
||||
<Responsive
|
||||
as={Sidebar.Pushable}
|
||||
getWidth={getWidth}
|
||||
maxWidth={Responsive.onlyMobile.maxWidth}
|
||||
>
|
||||
<Sidebar
|
||||
as={Menu}
|
||||
animation='push'
|
||||
inverted
|
||||
onHide={this.handleSidebarHide}
|
||||
vertical
|
||||
visible={sidebarOpened}
|
||||
>
|
||||
<Menu.Item as='a' active>
|
||||
Home
|
||||
</Menu.Item>
|
||||
<Menu.Item as='a'>Log in</Menu.Item>
|
||||
<Menu.Item as='a'>Sign Up</Menu.Item>
|
||||
</Sidebar>
|
||||
|
||||
<Sidebar.Pusher dimmed={sidebarOpened}>
|
||||
<Segment
|
||||
inverted
|
||||
textAlign='center'
|
||||
style={{ minHeight: 350, padding: '1em 0em' }}
|
||||
vertical
|
||||
>
|
||||
<Container>
|
||||
<Menu inverted pointing secondary size='large'>
|
||||
<Menu.Item onClick={this.handleToggle}>
|
||||
<Icon name='sidebar' />
|
||||
</Menu.Item>
|
||||
<Menu.Item position='right'>
|
||||
<Button as='a' inverted>
|
||||
Log in
|
||||
</Button>
|
||||
<Button as='a' inverted style={{ marginLeft: '0.5em' }}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Container>
|
||||
<HomepageHeading mobile />
|
||||
</Segment>
|
||||
|
||||
{children}
|
||||
</Sidebar.Pusher>
|
||||
</Responsive>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
MobileContainer.propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
const ResponsiveContainer = ({ children }) => (
|
||||
<div>
|
||||
<DesktopContainer>{children}</DesktopContainer>
|
||||
<MobileContainer>{children}</MobileContainer>
|
||||
</div>
|
||||
)
|
||||
|
||||
ResponsiveContainer.propTypes = {
|
||||
children: PropTypes.node,
|
||||
}
|
||||
|
||||
const Home = () => (
|
||||
<ResponsiveContainer>
|
||||
<Segment style={{ padding: '8em 0em' }} vertical>
|
||||
<Grid container stackable verticalAlign='middle'>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={8}>
|
||||
<Header as='h3' style={{ fontSize: '2em' }}>
|
||||
We help you keep your home connected
|
||||
</Header>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
In a few steps your home will be fully connected with SmartHut.
|
||||
</p>
|
||||
<Header as='h3' style={{ fontSize: '2em' }}>
|
||||
We Make Bananas That Can Dance
|
||||
</Header>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
Yes that's right, you thought it was the stuff of dreams, but even bananas can be
|
||||
bioengineered.
|
||||
</p>
|
||||
</Grid.Column>
|
||||
<Grid.Column floated='right' width={6}>
|
||||
<Image bordered rounded size='large' src='/img/banner.jpg' />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row>
|
||||
<Grid.Column textAlign='center'>
|
||||
<Button size='huge'>Check It Out</Button>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
|
||||
<Segment style={{ padding: '8em 0em' }} vertical>
|
||||
<Container text>
|
||||
<Header as='h3' style={{ fontSize: '2em' }}>
|
||||
Breaking The Grid, Grabs Your Attention
|
||||
</Header>
|
||||
<p style={{ fontSize: '1.33em' }}>
|
||||
Instead of focusing on content creation and hard work, we have learned how to master the
|
||||
art of doing nothing by providing massive amounts of whitespace and generic content that
|
||||
can seem massive, monolithic and worth your attention.
|
||||
</p>
|
||||
<Button as='a' size='large'>
|
||||
Read More
|
||||
</Button>
|
||||
</Container>
|
||||
</Segment>
|
||||
|
||||
<Segment inverted vertical style={{ padding: '5em 0em' }}>
|
||||
<Container>
|
||||
<Grid divided inverted stackable>
|
||||
<Grid.Row>
|
||||
<Grid.Column width={3}>
|
||||
<Header inverted as='h4' content='About' />
|
||||
<List link inverted>
|
||||
<List.Item as='a'>Sitemap</List.Item>
|
||||
<List.Item as='a'>Contact Us</List.Item>
|
||||
<List.Item as='a'>Religious Ceremonies</List.Item>
|
||||
<List.Item as='a'>Gazebo Plans</List.Item>
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}>
|
||||
<Header inverted as='h4' content='Services' />
|
||||
<List link inverted>
|
||||
<List.Item as='a'>Banana Pre-Order</List.Item>
|
||||
<List.Item as='a'>DNA FAQ</List.Item>
|
||||
<List.Item as='a'>How To Access</List.Item>
|
||||
<List.Item as='a'>Favorite X-Men</List.Item>
|
||||
</List>
|
||||
</Grid.Column>
|
||||
<Grid.Column width={7}>
|
||||
<Header as='h4' inverted>
|
||||
SmartHut
|
||||
</Header>
|
||||
<p>
|
||||
Keep your Home connected.
|
||||
</p>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Segment>
|
||||
</ResponsiveContainer>
|
||||
)
|
||||
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
import React, {Component} from 'react';
|
||||
import {Button, Form, Grid, Header, Image, Message, Segment, Icon, Checkbox, Input} from 'semantic-ui-react';
|
||||
|
||||
export default class Login extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
logged : false,
|
||||
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});
|
||||
};
|
||||
|
||||
toggle = () => this.setState((prevState) => ({ rememberme: !prevState.rememberme }));
|
||||
|
||||
render() {
|
||||
return (
|
||||
<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'/> Log-in to SmartHut
|
||||
</Header>
|
||||
<Form size='large' style={{marginTop : "2em"}}>
|
||||
<Form.Input
|
||||
control={Input}
|
||||
type="email"
|
||||
icon='user'
|
||||
name="email"
|
||||
iconPosition='left'
|
||||
placeholder='E-mail'
|
||||
onChange={this.onChangeHandler}
|
||||
/*error={{
|
||||
content: 'Please enter a valid email address',
|
||||
pointing: 'below',
|
||||
}}*/
|
||||
/>
|
||||
<Form.Input
|
||||
icon='lock'
|
||||
iconPosition='left'
|
||||
placeholder='Password'
|
||||
name="password"
|
||||
type='password'
|
||||
onChange={this.onChangeHandler}
|
||||
/>
|
||||
<Checkbox type="checkbox" name="rememberme" onClick={this.toggle} label='Remember me' style={{margin: "1.5em 0", float : "left"}}/>
|
||||
|
||||
<Button color='blue' fluid size='large' onClick={this.handleLogin}>
|
||||
Login
|
||||
</Button>
|
||||
</Form>
|
||||
<Message>
|
||||
<p><a href="/forgot-password">Forgot Password?</a></p>
|
||||
<p>New to us? <a href='/signup'> Sign Up</a></p>
|
||||
</Message>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, {Component} from 'react';
|
||||
|
||||
|
||||
export default class Signup extends Component{
|
||||
render() {
|
||||
return(
|
||||
"This is the register page"
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue