Merge branch 'non-logged-views-feature' into 'dev'
Login and Home pages are done. Login is ready to handle the authentication See merge request sa4-2020/the-sanmarinoes/frontend!3
This commit is contained in:
Matteo Omenetti
commit
8c719274a1
20 changed files with 691 additions and 45 deletions
3
smart-hut/.gitignore
vendored
3
smart-hut/.gitignore
vendored
|
|
@ -21,3 +21,6 @@
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
|
# idea
|
||||||
|
.idea
|
||||||
|
|
|
||||||
110
smart-hut/package-lock.json
generated
110
smart-hut/package-lock.json
generated
|
|
@ -1347,11 +1347,39 @@
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
||||||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
"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": {
|
"@sheerun/mutationobserver-shim": {
|
||||||
"version": "0.3.2",
|
"version": "0.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz",
|
||||||
"integrity": "sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q=="
|
"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": {
|
"@svgr/babel-plugin-add-jsx-attribute": {
|
||||||
"version": "4.2.0",
|
"version": "4.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
|
"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": {
|
"clean-css": {
|
||||||
"version": "4.2.3",
|
"version": "4.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||||
|
|
@ -3522,6 +3555,15 @@
|
||||||
"sha.js": "^2.4.8"
|
"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": {
|
"cross-spawn": {
|
||||||
"version": "6.0.5",
|
"version": "6.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||||
|
|
@ -4948,6 +4990,11 @@
|
||||||
"strip-eof": "^1.0.0"
|
"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": {
|
"exit": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||||
|
|
@ -7863,6 +7910,11 @@
|
||||||
"object.assign": "^4.1.0"
|
"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": {
|
"killable": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
|
||||||
|
|
@ -8159,6 +8211,14 @@
|
||||||
"object-visit": "^1.0.0"
|
"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": {
|
"md5.js": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
|
||||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
|
"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": {
|
"react-router": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
|
||||||
|
|
@ -11388,6 +11462,24 @@
|
||||||
"node-forge": "0.9.0"
|
"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": {
|
"semver": {
|
||||||
"version": "6.3.0",
|
"version": "6.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
|
"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": {
|
"shebang-command": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
|
||||||
|
|
@ -12661,6 +12758,11 @@
|
||||||
"mime-types": "~2.1.24"
|
"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": {
|
"typedarray": {
|
||||||
"version": "0.0.6",
|
"version": "0.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||||
|
|
@ -12962,6 +13064,14 @@
|
||||||
"makeerror": "1.0.x"
|
"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": {
|
"watchpack": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,14 @@
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
"@testing-library/user-event": "^7.1.2",
|
"@testing-library/user-event": "^7.1.2",
|
||||||
|
"classnames": "^2.2.6",
|
||||||
|
"material-ui-image": "^3.2.3",
|
||||||
"react": "^16.12.0",
|
"react": "^16.12.0",
|
||||||
"react-dom": "^16.12.0",
|
"react-dom": "^16.12.0",
|
||||||
"react-router": "^5.1.2",
|
"react-router": "^5.1.2",
|
||||||
"react-router-dom": "^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": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
|
|
|
||||||
BIN
smart-hut/public/header-pic.jpg
Normal file
BIN
smart-hut/public/header-pic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
smart-hut/public/img/banner.jpg
Normal file
BIN
smart-hut/public/img/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
smart-hut/public/img/header.jpg
Normal file
BIN
smart-hut/public/img/header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
smart-hut/public/img/logo.png
Normal file
BIN
smart-hut/public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
|
|
@ -1,14 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<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="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta name="description" content="Web site created using create-react-app" />
|
||||||
name="description"
|
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
|
||||||
content="Web site created using create-react-app"
|
|
||||||
/>
|
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
|
@ -25,8 +26,9 @@
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
<!--
|
||||||
|
|
@ -39,5 +41,6 @@
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
6
smart-hut/public/style.css
Normal file
6
smart-hut/public/style.css
Normal file
|
|
@ -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() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<a href="/home">Go Home</a>
|
|
||||||
</div>
|
|
||||||
<Routes/>
|
<Routes/>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,15 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Route, Switch } from 'react-router-dom';
|
import {Route, Switch} from 'react-router-dom';
|
||||||
import Home from './views/Home';
|
import Home from './views/Home';
|
||||||
|
import Login from "./views/Login";
|
||||||
|
import Signup from "./views/Signup";
|
||||||
|
|
||||||
export default function Routes() {
|
export default function Routes() {
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/home" exact component={Home}/>
|
<Route path="/" exact component={Home}/>
|
||||||
|
<Route path="/login" exact component={Login}/>
|
||||||
|
<Route path="/signup" exact component={Signup}/>
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
69
smart-hut/src/components/Banner.js
Normal file
69
smart-hut/src/components/Banner.js
Normal file
|
|
@ -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,
|
||||||
|
};
|
||||||
9
smart-hut/src/components/Footer.js
Normal file
9
smart-hut/src/components/Footer.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function Footer() {
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<p>This is the footer</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
73
smart-hut/src/components/Header.js
Normal file
73
smart-hut/src/components/Header.js
Normal file
|
|
@ -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
|
//React Router
|
||||||
import { BrowserRouter as Router} from 'react-router-dom';
|
import { BrowserRouter as Router} from 'react-router-dom';
|
||||||
|
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Router>
|
<Router>
|
||||||
<App />
|
<App />
|
||||||
</Router>
|
</Router>
|
||||||
, document.getElementById('root'));
|
, 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();
|
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';
|
||||||
|
|
||||||
/**
|
// Heads up!
|
||||||
* @return {string}
|
// 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.
|
||||||
export default function Home(){
|
const getWidth = () => {
|
||||||
return(
|
const isSSR = typeof window === 'undefined';
|
||||||
"Hello World"
|
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;
|
||||||
|
|
|
||||||
80
smart-hut/src/views/Login.js
Normal file
80
smart-hut/src/views/Login.js
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
10
smart-hut/src/views/Signup.js
Normal file
10
smart-hut/src/views/Signup.js
Normal file
|
|
@ -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 a new issue