kitchen-simulator 5.0.0-test.6 → 5.0.0-test.8

package/src/components/header/styles.js

@@ -1,320 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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(demo/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

@@ -1,108 +0,0 @@
-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

@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-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(demo/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);