kitchen-simulator 5.0.0-test.17 → 5.0.0-test.19

package/src/components/header/styles.js

@@ -0,0 +1,320 @@
+import {
+  DEFAULT_FONT_FAMILY,
+  SECONDARY_PURPLE_COLOR,
+  BG_COLOR_HOVER,
+  SHADE_LIGHT_PURPLE_COLOR,
+  SHADE_DARK_PURPLE_COLOR,
+  BG_COLOR_1
+} from '../../constants';
+import styled from 'styled-components';
+
+// Common Styles
+export const IconButton = styled.button`
+  color: #fff;
+  font-size: 12px;
+  border: 0px;
+  border-radius: 3px;
+  background: #000;
+  border: 1px solid #000;
+  padding: 5px 5px 2px 5px;
+  cursor: pointer;
+`;
+
+export const ActiveIconButton = styled.button`
+  color: #fff;
+  font-size: 12px;
+  border: 0px;
+  border-radius: 3px;
+  background: #0f8a61;
+  border: 1px solid #0f8a61;
+  padding: 5px 5px 2px 5px;
+  cursor: pointer;
+`;
+
+// Main Styles
+export const Wrapper = styled.div`
+  background: rgba(0, 0, 0, 0.7);
+  font-size: 12px;
+`;
+
+export const TitleBar = styled.div`
+  width: 100%;
+  height: 35px;
+  background: #fff;
+  font-size: 16px;
+  color: #1b1b1b;
+  padding: 0px 8px 0px 8px;
+  clear: both;
+`;
+
+export const Title = styled.div`
+  float: left;
+  line-height: 32px;
+  color: #fff;
+  font-size: 12px;
+`;
+
+export const SelectTitle = styled.span`
+  color: ${SECONDARY_PURPLE_COLOR};
+  padding-left: 10px;
+  margin: auto;
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px;
+  text-align: center;
+`;
+
+export const TitleBarIconButton = styled.div`
+  float: left;
+  margin-left: 10px;
+  margin-top: 15px;
+  cursor: pointer;
+  :hover {
+    font-size: 20px;
+  }
+`;
+
+export const ContentWrapper = styled.div`
+  text-align: left;
+  clear: both;
+  padding: 10px 15px;
+`;
+
+export const SearchForm = styled.div`
+  position: relative;
+  margin: 0px 5px;
+`;
+
+export const SearchInput = styled.input`
+  background: #fff;
+  border: 0px;
+  border-radius: 3px;
+  height: 25px;
+  width: 100%;
+  padding-left: 24px;
+  &:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px;
+  }
+`;
+
+export const SearchIcon = styled.div`
+  position: absolute;
+  top: 6px;
+  left: 5px;
+  color: #666;
+  cursor: pointer;
+  font-size: 15px;
+`;
+
+export const Products = styled.div``;
+
+export const ProductsRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: streatch;
+`;
+export const TitlesRow = styled.div`
+  display: flex;
+`;
+
+export const RecentTitle = styled.div`
+  color: #fff;
+  margin: 14px 0px 19px;
+`;
+
+export const RecentStyles = styled.div``;
+
+export const AddStyleButtonWrapper = styled.div`
+  cursor: pointer;
+  color: #fff;
+  button {
+    float: left;
+  }
+  span {
+    float: left;
+    margin-top: 7px;
+    margin-left: 10px;
+    font-size: 10px;
+  }
+`;
+
+export const SubTitle = styled.div`
+  color: #1b1b1b;
+  cursor: pointer;
+  padding: 10px 5px;
+  :hover {
+    background: #ababab;
+  }
+`;
+export const ChildTitle = styled.div`
+  color: #000;
+  padding-bottom: 10px;
+`;
+export const CabinetTitle = styled.div`
+  color: #000;
+  font-weight: 800;
+`;
+export const PropteryValue = styled.div`
+  color: #000;
+  font-weight: 800;
+  padding-bottom: 10px;
+  span {
+    font-weight: 100;
+  }
+`;
+export const PositionValue = styled.div`
+  color: #000;
+  font-weight: 800;
+  padding-top: 10px;
+  span {
+    font-weight: 100;
+  }
+`;
+export const Diver = styled.div`
+  border-bottom: 1px solid #888;
+`;
+export const FurnitureBoxTitle = styled.div`
+  color: #000;
+  padding-bottom: 10px;
+  font-size: 11px;
+`;
+
+export const ClearFix = styled.div`
+  clear: both;
+  height: 0px;
+`;
+export const Image = styled.div`
+  text-align: center;
+  div {
+    width: 66px;
+    height: 70px;
+  }
+  img {
+    width: 66px;
+    height: 70px;
+    padding: 8px;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+  :hover {
+    img {
+      width: 70px;
+      height: 75px;
+    }
+  }
+`;
+export const SelectedWrapper = styled.div`
+  position: absolute;
+  left: 101px;
+  width: 180px;
+  background: #fff;
+  font-size: 12px;
+  box-shadow:
+    3px 1px 3px 0px rgba(0, 0, 0, 0.2),
+    -1px -1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+`;
+
+export const LogoBox = styled.div`
+  cursor: pointer;
+  position: relative;
+  margin-right: 20px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+`;
+
+export const SelectedBox = styled.button`
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 10px 20px;
+  outline: 0;
+  background-color: ${BG_COLOR_1};
+  border: none;
+  :hover {
+    background-color: ${BG_COLOR_HOVER};
+  }
+  :active {
+    background-color: ${BG_COLOR_HOVER};
+  }
+  // :focus{
+  //   box-shadow: 0px 0px 8px 2px ${SECONDARY_PURPLE_COLOR};
+  // }
+`;
+
+export const SaveBox = styled.button`
+  cursor: pointer;
+  position: relative;
+  margin-left: 1rem;
+  padding: 8px 20px;
+  border: 1px solid ${SECONDARY_PURPLE_COLOR};
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  color: ${SECONDARY_PURPLE_COLOR};
+  outline: 0;
+  :hover {
+    background-color: ${SHADE_LIGHT_PURPLE_COLOR};
+    border-color: ${SHADE_LIGHT_PURPLE_COLOR};
+  }
+  :active {
+    background-color: ${SHADE_DARK_PURPLE_COLOR};
+    border-color: ${SHADE_DARK_PURPLE_COLOR};
+  }
+  // :focus{
+  //   box-shadow: 0px 0px 8px 2px ${SECONDARY_PURPLE_COLOR};
+  // }
+`;
+
+export const EditBox = styled.div`
+  cursor: pointer;
+  :hover {
+    img {
+      transition: 0.3s;
+      color: rgba(0, 0, 0, 0.87);
+      padding: 0;
+      font-size: 1.4rem;
+      box-sizing: border-box;
+      transition:
+        background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+        border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      box-shadow:
+        0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+      font-family:
+        Muli,
+        Roboto,
+        'Helvetica',
+        Arial,
+        Open Sans;
+      font-weight: 600;
+      line-height: 1.75;
+      text-transform: uppercase;
+    }
+  }
+  :active {
+    img {
+      box-shadow: none !important;
+    }
+  }
+`;
+export const InputStyle = styled.div`
+  top: -5px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  transition:
+    padding-left 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    border-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    border-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+`;

package/src/components/login/Login.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import LoginForm from './LoginForm';
+
+import './style.scss';
+
+class Login extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      backgroundImage: 'url(/assets/img/1.jpg)',
+      fullSize: false
+    };
+  }
+
+  generateBackground() {
+    let { backgroundImage } = this.state;
+
+    let min = 1;
+    let max = 2;
+    let picNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+    backgroundImage = 'url(src/assets/img/' + picNumber + '.jpg)';
+    this.setState({
+      backgroundImage: backgroundImage
+    });
+  }
+  render() {
+    const { backgroundImage } = this.state;
+
+    return (
+      <div
+        className={'login login--fullscreen'}
+        style={{ backgroundImage: backgroundImage }}
+      >
+        <div className="login__header">
+          <div className="row">
+            <div className="col-lg-8">
+              <div className="login__header__logo">
+                {/* <Button className="ml-3" onClick={this.generateBackground}>
+                    Randomize Background Image
+                  </Button> */}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="login__block">
+          <div className="row">
+            <div className="col-xl-12">
+              <div className="login__block__promo text-white text-center">
+                <h1 className="mb-3 text-white">
+                  <strong>WELCOME TO KITCHEN-CONFIGURATOR</strong>
+                </h1>
+              </div>
+              <div className="login__block__inner">
+                <div className="login__block__form">
+                  <h4
+                    className="text-uppercase text-center"
+                    style={{ paddingTop: 10 }}
+                  >
+                    <strong>Please Log In</strong>
+                  </h4>
+                  <LoginForm />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {};
+}
+
+export default connect(mapStateToProps)(Login);

package/src/components/login/LoginForm/index.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Input, Button, Checkbox, Row } from 'antd';
+import { bindActionCreators } from 'redux';
+import connect from 'react-redux/es/connect/connect';
+import * as Actions from '../../../actions/user-actions';
+import jwtService from '../jwtService';
+import '../style.css';
+
+class LoginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: ''
+    };
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+
+    const { ...values } = this.state;
+
+    jwtService
+      .signInWithEmailAndPassword(values)
+      .then(response => {
+        this.props.login(
+          response.id,
+          response.role,
+          jwtService.getAccessToken()
+        );
+      })
+      .catch(error => {
+        alert(error.info);
+      });
+  }
+
+  handleUsernameChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ username: e.target.value });
+  }
+  handlePasswordChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ password: e.target.value });
+  }
+  handleInputInvalid(e, text) {
+    e.target.setCustomValidity('');
+    if (!e.target.validity.valid) {
+      e.target.setCustomValidity(text);
+    }
+  }
+
+  render() {
+    return (
+      <form onSubmit={e => this.handleSubmit(e)} className="login-form">
+        <Row className="login-form-row">
+          <label className="form-label mb-0">Username</label>
+          <Input
+            onChange={e => this.handleUsernameChange(e)}
+            onInvalid={e =>
+              this.handleInputInvalid(e, 'Please enter your name')
+            }
+            placeholder="Username"
+          />
+        </Row>
+        <Row className="login-form-row">
+          <label className="form-label mb-0">Password</label>
+          <Input
+            onChange={e => this.handlePasswordChange(e)}
+            onInvalid={e =>
+              this.handleInputInvalid(e, 'Please enter your password')
+            }
+            type="password"
+            placeholder="Password"
+          />
+        </Row>
+        <Row className="login-form-row-check">
+          <Checkbox className="form-label">Remember me</Checkbox>
+        </Row>
+        <Row className="login-form-row">
+          <div className="divider">-</div>
+        </Row>
+        <div className="form-actions">
+          <Button
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            Sign in
+          </Button>
+        </div>
+      </form>
+    );
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    {
+      login: Actions.login
+    },
+    dispatch
+  );
+}
+
+function mapStateToProps(state) {
+  return {};
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

package/src/components/login/Register.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import RegisterForm from './RegisterForm';
+import history from '../../@history';
+import './style.scss';
+
+class Register extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      backgroundImage: 'url(/assets/img/1.jpg)',
+      fullSize: false
+    };
+  }
+
+  generateBackground() {
+    let { backgroundImage } = this.state;
+
+    let min = 1;
+    let max = 2;
+    let picNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+    backgroundImage = 'url(src/assets/img/' + picNumber + '.jpg)';
+    this.setState({
+      backgroundImage: backgroundImage
+    });
+  }
+  render() {
+    const { backgroundImage } = this.state;
+    let { state: historyState } = history.location;
+    if (historyState === undefined) historyState = { type: 'register' };
+    const { type } = historyState;
+
+    return (
+      <div
+        className={'login login--fullscreen'}
+        style={{ backgroundImage: backgroundImage }}
+      >
+        <div className="login__header">
+          <div className="row">
+            <div className="col-lg-8">
+              <div className="login__header__logo">
+                {/* <Button className="ml-3" onClick={this.generateBackground}>
+                    Randomize Background Image
+                  </Button> */}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="login__block">
+          <div className="row">
+            <div className="col-xl-12">
+              <div className="login__block__promo text-white text-center">
+                <h1 className="mb-3 text-white">
+                  <strong>WELCOME TO KITCHEN-CONFIGURATOR</strong>
+                </h1>
+              </div>
+              <div className="login__block__inner">
+                <div className="register__block__form">
+                  <h4
+                    className="text-uppercase text-center"
+                    style={{ paddingTop: 10 }}
+                  >
+                    <strong>
+                      Please {type === 'register' ? 'Register' : 'Add User'}
+                    </strong>
+                  </h4>
+                  <RegisterForm type={type} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {};
+}
+
+export default connect(mapStateToProps)(Register);