+
+ {post.title}
+
+
+ {post.description}
+
+
+ {post.linkText}
+
+
+
+
+ );
+}
diff --git a/smart-hut/src/components/Header.js b/smart-hut/src/components/Header.js
new file mode 100644
index 0000000..b9bde06
--- /dev/null
+++ b/smart-hut/src/components/Header.js
@@ -0,0 +1,78 @@
+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 (
+ This is the footer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/smart-hut/src/components/HomeNavbar.js b/smart-hut/src/components/HomeNavbar.js
new file mode 100644
index 0000000..401cf72
--- /dev/null
+++ b/smart-hut/src/components/HomeNavbar.js
@@ -0,0 +1,133 @@
+import _ from "lodash";
+import React, { Component } from "react";
+import {
+ Container,
+ Icon,
+ Image,
+ Menu,
+ Sidebar,
+ Responsive,
+} from "semantic-ui-react";
+
+const NavBarMobile = ({
+ children,
+ leftItems,
+ onPusherClick,
+ onToggle,
+ rightItems,
+ visible,
+}) => (
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+ );
+ }
+}
+
+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 = () => (
+
+
+
+ {this.state.openSettingsModal ? (
+ d.id === this.state.settingsDeviceId)[0]}
+ />
+ ) : (
+ ""
+ )}
+ {ds
+ ? ds.map((e, i) => {
+ return (
+
+
+ );
+ })
+ : null}
+ {this.props.activeItem !== -1 ? (
+
+
+ ) : null}
+
+
+ );
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/DeviceSettings.js b/smart-hut/src/components/dashboard/devices/DeviceSettings.js
new file mode 100644
index 0000000..5967b39
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/DeviceSettings.js
@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import { editModeIconStyle, editModeStyle } from "./styleComponents";
+
+export default class Settings extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ displayForm: true,
+ };
+ }
+
+ displayForm = () => {
+ this.setState((prevState) => ({ displayForm: !prevState.displayForm }));
+ };
+
+ render() {
+ const view = (
+ this.props.edit.openModal(this.props.deviceId)}>
+
+ 
+
+
+ );
+ return
+
+ {this.props.device.name}
+
+
+ {this.props.device.name} ({this.props.device.id})
+
+
+
+ this.props.onChangeData(id, newSettings)
+ }
+ />
+
+
+ {this.props.device.name} ({this.props.device.id})
+
+
+ 
+
+ );
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/DimmerStyle.js b/smart-hut/src/components/dashboard/devices/DimmerStyle.js
new file mode 100644
index 0000000..cdc6216
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/DimmerStyle.js
@@ -0,0 +1,70 @@
+export const KnobDimmerStyle = {
+ cursor: "pointer",
+ marginTop: "1rem",
+ width: "9rem",
+ height: "9rem",
+ fill: "#1a2849",
+};
+
+export const KnobHolder = {
+ marginTop: "1rem",
+ cursor: "pointer",
+ padding: "3rem",
+ backgroundColor: "white",
+ width: "10rem",
+ height: "10rem",
+};
+
+export const KnobCircularTrack = {
+ fill: "white",
+ stroke: "#1a2849",
+};
+
+export const KnobIcon = {
+ fill: "#1a2849",
+};
+
+export const KnobProgress = {
+ stroke: "#1a2849",
+ strokeWidth: "3rem",
+};
+
+export const ValueStyle = {
+ pointerEvents: "none",
+ fill: "#1a2849",
+ fontSize: "1.3rem",
+ fontFamily: "Lato",
+ textAnchor: "middle",
+};
+
+export const CircularThumbStyle = {
+ fill: "white",
+ stroke: "#1a2849",
+ strokeWidth: ".2rem",
+ r: "1.4rem",
+};
+
+export const textStyle = {
+ position: "absolute",
+ fill: "#1a2849",
+ fontSize: "1.5rem",
+ fontFamily: "Lato",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+};
+
+export const knobIcon = {
+ position: "absolute",
+ left: "50%",
+ top: "30%",
+ transform: "translateX(-50%)",
+ width: "2rem",
+ height: "2rem",
+};
+
+export const knobContainer = {
+ position: "relative",
+ width: "9rem",
+ height: "9rem",
+};
diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js
new file mode 100644
index 0000000..be4e8b3
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -0,0 +1,157 @@
+// vim: set ts=2 sw=2 et tw=80:
+
+/**
+ * Users can add lights in their rooms.
+ * Lights are devices like bulbs, LED strip lights, lamps.
+ * Lights may support an intensity level (from 0% to 100%).
+ * Lights have an internal state that can be changed and it must
+ * be shown accordingly in the SmartHut views (house view and room views).
+ */
+
+import React, { Component } from "react";
+import {
+ iconStyle,
+ StyledDiv,
+ BottomPanel,
+ ThumbText,
+} from "./styleComponents";
+import Settings from "./DeviceSettings";
+import { Image } from "semantic-ui-react";
+import {
+ CircularInput,
+ CircularProgress,
+ CircularThumb,
+} from "react-circular-input";
+import {
+ LightDimmerContainer,
+ LightDimmerStyle,
+ textStyle,
+ nameStyle,
+ KnobProgress,
+ CircularThumbStyle,
+ knobIcon,
+} from "./LightStyle";
+import { call } from "../../../client_server";
+
+export default class Light extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ turnedOn: false,
+ intensity: props.device.intensity,
+ };
+ this.iconOn = "/img/lightOn.svg";
+ this.iconOff = "/img/lightOff.svg";
+
+ this.stateCallback = (e) => {
+ this.setState(
+ Object.assign(this.state, {
+ intensity: e.intensity,
+ turnedOn: e.on,
+ })
+ );
+ };
+
+ call.socketSubscribe(this.props.device.id, this.stateCallback);
+ }
+
+ onClickDevice = () => {
+ this.props.device.on = !this.state.turnedOn;
+ call.deviceUpdate(this.props.device, "regularLight").then((res) => {
+ if (res.status === 200) {
+ this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
+ }
+ });
+ };
+
+ getIcon = () => {
+ if (this.state.turnedOn) {
+ return this.iconOn;
+ }
+ return this.iconOff;
+ };
+
+ setIntensity = (newValue) => {
+ this.props.device.intensity =
+ Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
+ call.deviceUpdate(this.props.device, "dimmableLight").then((res) => {
+ if (res.status === 200) {
+ this.setState({
+ intensity:
+ Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100),
+ });
+ }
+ });
+ };
+
+ get intensity() {
+ return isNaN(this.state.intensity) ? 0 : this.state.intensity;
+ }
+
+ render() {
+ const intensityLightView = (
+
+
+
+ this.props.onChangeData(id, newSettings)
+ }
+ />
+
+
+ {this.props.device.name}
({this.props.device.id}) +
+
+
+ );
+
+ const normalLightView = (
+ ({this.props.device.id}) +
{} : this.onClickDevice}>
+
+
+
+ + {this.props.device.name} ({this.props.device.id}) +
+
+ {this.props.device.kind === "dimmableLight"
+ ? intensityLightView
+ : normalLightView}
+
+ );
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js
new file mode 100644
index 0000000..35577cd
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/LightStyle.js
@@ -0,0 +1,67 @@
+export const valueStyle = {
+ fill: "#3e99ff",
+ fontSize: "2.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const intensityLightStyle = {
+ fill: "#ffd31d",
+ fontSize: "1.2rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const textStyle = {
+ position: "absolute",
+ fill: "#ffd31d",
+ fontSize: "1.5rem",
+ fontFamily: "Lato",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+};
+
+export const nameStyle = {
+ fontSize: "1rem",
+ position: "absolute",
+ top: "30%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ color: "white",
+};
+
+export const LightDimmerStyle = {
+ cursor: "pointer",
+ marginTop: "1rem",
+ width: "9rem",
+ height: "9rem",
+ fill: "#ffd31d",
+};
+
+export const LightDimmerContainer = {
+ position: "relative",
+ width: "9rem",
+ height: "9rem",
+};
+
+export const CircularThumbStyle = {
+ fill: "white",
+ stroke: "#ffd31d",
+ strokeWidth: ".2rem",
+ r: "1.4rem",
+};
+
+export const KnobProgress = {
+ stroke: "#ffd31d",
+ strokeWidth: "3rem",
+};
+
+export const knobIcon = {
+ position: "absolute",
+ left: "50%",
+ top: "30%",
+ transform: "translateX(-50%)",
+ width: "2rem",
+ height: "2rem",
+};
diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
new file mode 100644
index 0000000..219bf1c
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -0,0 +1,378 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import {
+ Button,
+ Dropdown,
+ Form,
+ Icon,
+ Image,
+ Input,
+ Modal,
+} from "semantic-ui-react";
+
+const StyledDiv = styled.div`
+ background-color: #505bda;
+ padding: 3rem;
+ width: 10rem;
+ height: 10rem;
+ border-radius: 100%;
+ border: none;
+ position: relative;
+ box-shadow: 3px 2px 10px 5px #ccc;
+ transition: all 0.3s ease-out;
+ :hover {
+ background-color: #4345d9;
+ }
+ :active {
+ transform: translate(0.3px, 0.8px);
+ box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
+ }
+`;
+
+export default class NewDevice extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ step: 1,
+ openModal: false,
+ motion: false,
+ name: "",
+ };
+ this.baseState = this.state;
+ this.createDevice = this.createDevice.bind(this);
+ }
+
+ handleOpen = () => {
+ this.setState({ openModal: true });
+ };
+ handleClose = () => {
+ this.setState({ openModal: false });
+ };
+
+ resetState = () => {
+ this.setState(this.baseState);
+ this.handleClose();
+ };
+
+ nextStep = () => {
+ this.setState((prevState) => ({ step: prevState.step + 1 }));
+ };
+ previousStep = () => {
+ this.setState((prevState) => ({ step: prevState.step - 1 }));
+ };
+
+ setTypeOfDevice = (e, d) => {
+ if (d.value === "dimmableLight") {
+ this.setState({ typeOfDevice: d.value, intensity: 0 });
+ } else {
+ this.setState({ typeOfDevice: d.value });
+ }
+ };
+
+ setDeviceName = (e, d) => {
+ this.setState({ deviceName: d.value });
+ };
+
+ setTypeOfSensor = (e, d) => {
+ console.log(d.value);
+ if (d.value === "motionSensor") {
+ this.setState({ typeOfSensor: d.value, motion: true });
+ } else {
+ this.setState({ typeOfSensor: d.value });
+ }
+ };
+
+ setLightsDimmerSwitch = (e, d) => {
+ this.setState({ lightsAttached: d.value });
+ };
+
+ createDevice() {
+ // Connect to the backend and create device here.
+ const data = {
+ params: {
+ name: this.state.deviceName,
+ },
+ device: this.state.motion ? "motionSensor" : this.state.typeOfDevice,
+ };
+
+ switch (this.state.typeOfDevice) {
+ case "regularLight":
+ if (this.state.name === "") {
+ data.params["name"] = "Regular Light";
+ }
+ break;
+ case "smartPlug":
+ if (this.state.name === "") {
+ data.params["name"] = "Smart Plug";
+ }
+ break;
+ case "dimmableLight":
+ if (this.state.name === "") {
+ data.params["name"] = "Dimmable Light";
+ }
+ data.params["intensity"] = 0;
+ break;
+ case "sensor":
+ if (this.state.name === "") {
+ data.params["name"] = "Sensor";
+ }
+ if (!this.state.motion) {
+ data.params["sensor"] = this.state.typeOfSensor;
+ data.params["value"] = 0;
+ }
+ break;
+ case "switch":
+ if (this.state.name === "") {
+ data.params["name"] = "Switch";
+ }
+ data.params["lights"] = this.state.lightsAttached;
+ break;
+ case "buttonDimmer":
+ if (this.state.name === "") {
+ data.params["name"] = "Button Dimmer";
+ }
+ data.params["lights"] = this.state.lightsAttached;
+ break;
+ case "knobDimmer":
+ if (this.state.name === "") {
+ data.params["name"] = "Knob Dimmer";
+ }
+ data.params["lights"] = this.state.lightsAttached;
+ break;
+ default:
+ break;
+ }
+ console.log(data);
+ this.props.addDevice(data);
+ this.resetState();
+ }
+
+ render() {
+ const deviceOptions = [
+ {
+ key: "light",
+ text: "Normal Light",
+ value: "regularLight",
+ image: { avatar: true, src: "/img/lightOn.svg" },
+ },
+ {
+ key: "intensity-light",
+ text: "Intensity Light",
+ value: "dimmableLight",
+ image: { avatar: true, src: "/img/intensity-light.svg" },
+ },
+ {
+ key: "smart-plug",
+ text: "Smart Plug",
+ value: "smartPlug",
+ image: { avatar: true, src: "/img/smart-plug.svg" },
+ },
+ {
+ key: "sensor",
+ text: "Sensor",
+ value: "sensor",
+ image: { avatar: true, src: "/img/sensorOn.svg" },
+ },
+ {
+ key: "switch",
+ text: "Switch",
+ value: "switch",
+ image: { avatar: true, src: "/img/switchOn.svg" },
+ },
+ {
+ key: "knobDimmer",
+ text: "Knob Dimmer",
+ value: "knobDimmer",
+ image: { avatar: true, src: "/img/knob.svg" },
+ },
+ {
+ key: "buttonDimmer",
+ text: "Button Dimmer",
+ value: "buttonDimmer",
+ image: { avatar: true, src: "/img/plusMinus.svg" },
+ },
+ ];
+ const sensorOptions = [
+ {
+ key: "temperature",
+ text: "Temperature Sensor",
+ value: "TEMPERATURE",
+ image: { avatar: true, src: "/img/temperature-sensor.svg" },
+ },
+ {
+ key: "humidity",
+ text: "Humidity Sensor",
+ value: "HUMIDITY",
+ image: { avatar: true, src: "/img/humidity-sensor.svg" },
+ },
+ {
+ key: "light",
+ text: "Light Sensor",
+ value: "LIGHT",
+ image: { avatar: true, src: "/img/light-sensor.svg" },
+ },
+ {
+ key: "motion",
+ text: "Motion Sensor",
+ value: "motionSensor",
+ image: { avatar: true, src: "/img/sensorOn.svg" },
+ },
+ ];
+ const availableSwitchDevices = [];
+ const availableDimmerDevices = [];
+ this.props.devices.forEach((d) => {
+ if (
+ d.kind === "regularLight" ||
+ d.kind === "dimmableLight" ||
+ d.kind === "smartPlug"
+ ) {
+ availableSwitchDevices.push({
+ key: d.id,
+ text: d.name,
+ value: d.id,
+ });
+ }
+ if (d.kind === "dimmableLight") {
+ availableDimmerDevices.push({
+ key: d.id,
+ text: d.name,
+ value: d.id,
+ });
+ }
+ });
+ const step1 = (
+
+
+
+
+
+
+ );
+ const sensorForm = (
+
+
+ );
+ };
+
+ return (
+
+
+
+
+ this.props.onChangeData(id, newSettings)
+ }
+ />
+ {this.state.motion ? (
+
+
+
+ {+(Math.round(this.state.value + "e+2") + "e-2")}
+ {this.units}
+
+
+ {this.setName()} ({this.props.device.id})
+
+
+
+ )}
+
+ );
+ }
+}
diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js
new file mode 100644
index 0000000..c07927c
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js
@@ -0,0 +1,105 @@
+export const style = {
+ width: "10rem",
+ height: "10rem",
+ position: "absolute",
+ top: "0",
+ left: "0",
+};
+
+export const container = {
+ width: "10rem",
+ height: "10rem",
+ borderRadius: "100%",
+ border: "none",
+ position: "relative",
+};
+
+export const sensorText = {
+ fill: "#3e99ff",
+ fontSize: "1.2rem",
+ fontFamily: "Lato",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+};
+
+export const valueStyle = {
+ fill: "#3e99ff",
+ fontSize: "2.4rem",
+ fontFamily: "Lato",
+};
+
+export const errorStyle = {
+ fill: "#ff4050",
+ fontSize: "1.5rem",
+ fontFamily: "Lato",
+ textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
+};
+
+export const motionSensorInnerCircle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "8rem",
+ height: "8rem",
+ borderRadius: "100%",
+ border: "none",
+};
+
+export const motionSensorOuterCircle = {
+ textAlign: "center",
+ cursor: "pointer",
+ position: "relative",
+ width: "10rem",
+ height: "10rem",
+ borderRadius: "100%",
+ border: "none",
+ /*boxShadow: "3px 2px 10px 5px #ccc",*/
+};
+
+export const nameMotionStyle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ fontSize: "1.2rem",
+ overflow: "hidden",
+ whiteSpace: "nowrap",
+ textOverflow: "ellipsis",
+};
+
+export const motionSensorIcon = {
+ width: "2rem",
+ height: "2rem",
+ position: "absolute",
+ top: "15%",
+ left: "50%",
+ transform: "translateX(-50%)",
+};
+export const temperatureSensorColors = {
+ circle: "#323232",
+ progress: "#ff1e56",
+ text: "white",
+};
+
+export const lightSensorColors = {
+ circle: "#000839",
+ progress: "#ffa41b",
+ text: "white",
+};
+
+export const humiditySensorColors = {
+ circle: "#005082",
+ progress: "#00a8cc",
+ text: "white",
+};
+
+export const iconSensorStyle = {
+ position: "absolute",
+ top: "20%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ width: "2rem",
+ height: "2rem",
+};
diff --git a/smart-hut/src/components/dashboard/devices/SettingsModal.js b/smart-hut/src/components/dashboard/devices/SettingsModal.js
new file mode 100644
index 0000000..1c460d2
--- /dev/null
+++ b/smart-hut/src/components/dashboard/devices/SettingsModal.js
@@ -0,0 +1,111 @@
+import React, { Component, useState } from "react";
+import { Button, Checkbox, Form, Icon, Header, Modal } from "semantic-ui-react";
+
+const DeleteModal = (props) => (
+ 
+
+ ) : (
+ ""
+ )}
+
+ {!this.props.nicolaStop ? (
+
+
+ {this.props.type === "new" ? "Add new room" : "Modify room"}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/smart-hut/src/index.js b/smart-hut/src/index.js
new file mode 100644
index 0000000..12af31f
--- /dev/null
+++ b/smart-hut/src/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+//React Router
+//import { BrowserRouter, Route, Switch } from "react-router-dom";
+
+const index =
+
+ {this.props.type === "new" ? (
+
+ ) : (
+
+
+ {this.props.type === "new" ? (
+
+ ) : (
+
+ )}
+
+
+ ) : null}
+
+
+
+
+ {this.props.type === "modify" ? (
+
+ ) : null}
+ Select an icon:
+
+
+ The message will return in 2s
+
+
+
+
+ The message will return in 2s
+
+
+
+
+ The message will return in 2s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/smart-hut/src/views/DashboardTest.js b/smart-hut/src/views/DashboardTest.js
new file mode 100644
index 0000000..a56453f
--- /dev/null
+++ b/smart-hut/src/views/DashboardTest.js
@@ -0,0 +1,17 @@
+import React, { Component } from "react";
+import { Button } from "semantic-ui-react";
+
+export default class Dashboard extends Component {
+ handleLogOut = (e) => {
+ console.log(this.props);
+ this.props.logout();
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/smart-hut/src/views/Forgot-pass-reset.js b/smart-hut/src/views/Forgot-pass-reset.js
new file mode 100644
index 0000000..0380465
--- /dev/null
+++ b/smart-hut/src/views/Forgot-pass-reset.js
@@ -0,0 +1,123 @@
+import React, { Component } from "react";
+import {
+ Button,
+ Form,
+ Grid,
+ Header,
+ Image,
+ Icon,
+ Message,
+} from "semantic-ui-react";
+import { call } from "../client_server";
+import { Redirect } from "react-router-dom";
+
+export default class ChangePass extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ password: "",
+ error: {
+ state: false,
+ message: "",
+ },
+ success: false,
+ };
+ this.handleChangePassword = this.handleChangePassword.bind(this);
+ }
+
+ onChangeHandler = (event) => {
+ let nam = event.target.name;
+ let val = event.target.value;
+ this.setState({ [nam]: val });
+ };
+
+ handleChangePassword = (e) => {
+ const params = {
+ confirmationToken: this.props.query.token,
+ password: this.state.password,
+ };
+ if (this.state.confirmPassword !== this.state.password) {
+ this.setState({
+ error: {
+ state: true,
+ message: "Passwords do not match.",
+ },
+ });
+ }
+
+ call
+ .resetPassword(params)
+ .then((res) => {
+ if (res.status === 200) {
+ this.setState({ success: true });
+ } else {
+ this.setState({ error: { state: true, message: "Errore" } });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
+
+ render() {
+ if (this.state.success) {
+ return
+
+ The message will return in 2s
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/smart-hut/src/views/Home.js b/smart-hut/src/views/Home.js
new file mode 100644
index 0000000..b5e904f
--- /dev/null
+++ b/smart-hut/src/views/Home.js
@@ -0,0 +1,300 @@
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+import HomeNavbar from "./../components/HomeNavbar";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ Image,
+ List,
+ Menu,
+ Responsive,
+ Segment,
+ Sidebar,
+ Visibility,
+} from "semantic-ui-react";
+
+// 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 }) => (
+ 404 Page Not Found
++ Hey what are you doing here? Looks like you are lost, + this room does not exist. Maybe you were looking for + the kitchen, or the garage, or the bedroom, or your + love room... so don't wait here and let's go back to + our main room! ...or refresh this page some times... +
+ +404 Page Not Found
++ Hey what are you doing here? Looks like you are lost, + this room does not exist. Maybe you were looking for + the kitchen, or the garage, or the bedroom, or your + love room... so don't wait here and let's go back to + our main room! ...or refresh this page some times... +
+ +
+ {children}
+ {children}
+
+);
+
+ResponsiveContainer.propTypes = {
+ children: PropTypes.node,
+};
+
+const Home = () => (
+ + In a few steps your home will be fully connected with SmartHut. +
++ SmartHut is a leading worldwide company in technology innovation. + Explore our website to find the best devices for each room of your + home! +
++ Let us carrying you into the future. With SmartHut, being at home will + be a refreshing experience. With just a few clicks, you will be able + the set the illumination of your entire place. Follow the intelligent + light, follow SmartHut. +
+-
+
-
+
Keep your Home connected.
+
+
+ Instructions Page
+
+
+
+
+ First Step
+
+
+ Second Step
+
+
+ Third Step
+
+
+ Last Step
+
+
+);
+
+export default class Insturction extends Component {
+ render() {
+ return + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +
++ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +
++ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +
++ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa strong. Cum sociis natoque penatibus et + magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede link mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. +
++ Forgot Password? +
++ New to us? Sign Up +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {this.state.activeItem !== -1 ? (
+
+
+
+ ) : null}
+
+
+
+
+ );
+ }
+}
+
+export default Navbar;
diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js
new file mode 100644
index 0000000..625dd80
--- /dev/null
+++ b/smart-hut/src/views/Signup.js
@@ -0,0 +1,149 @@
+import React, { Component } from "react";
+import {
+ Button,
+ Form,
+ Grid,
+ Header,
+ Image,
+ Icon,
+ Input,
+ Message,
+} from "semantic-ui-react";
+import { Redirect } from "react-router-dom";
+import { call } from "../client_server";
+
+export default class Signup extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ completeName: "",
+ username: "",
+ email: "",
+ password: "",
+ error: { state: false, message: [] },
+ success: false,
+ };
+ }
+
+ handleRegistration = (e) => {
+ e.preventDefault();
+ const params = {
+ email: this.state.email,
+ name: this.state.completeName,
+ password: this.state.password,
+ username: this.state.username,
+ };
+
+ call
+ .register(params)
+ .then((res) => {
+ if (res.status === 200 && res.data) {
+ this.setState({ success: true });
+ }
+ })
+ .catch((err) => {
+ //console.log(err);
+ let errs = [
+ ...new Set(err.response.data.errors.map((e) => e.defaultMessage)),
+ ];
+ this.setState({ error: { state: true, message: errs } });
+ });
+ };
+
+ onChangeHandler = (event) => {
+ let nam = event.target.name;
+ let val = event.target.value;
+ this.setState({ [nam]: val });
+ };
+
+ render() {
+ if (this.state.success) {
+ return