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

package/src/components/sign/main/index.jsx

@@ -1,523 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-import styled from 'styled-components';
-import Dialog from '@material-ui/core/Dialog';
-import {
-  API_SERVER_URL,
-  SECONDARY_PURPLE_COLOR,
-  STATUS_NEGATIVE_COLOR,
-  STATUS_POSITIVE_COLOR,
-  TEXT_COLOR_NEUTRAL_2
-} from '../../../constants';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import { withStyles } from '@material-ui/core/styles';
-import SnackBar from '../../atoms/Snackbar';
-import axios from 'axios';
-import { emailValidation } from '../../../utils/email-validator';
-import jwtService from '../../login/jwtService';
-import history from '../../../@history';
-import { phoneValidation } from '../../../utils/phone-validator';
-
-const StyledMuiCheckbox = withStyles({
-  root: {
-    color: TEXT_COLOR_NEUTRAL_2,
-    '&$checked': {
-      color: SECONDARY_PURPLE_COLOR
-    }
-  },
-  checked: {}
-})(props => <Checkbox color="default" {...props} />);
-
-export default class Sign extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      type: 1, //1: login, 2: register
-      email: '',
-      emailfocusOn: false,
-      password: '',
-      passwordfocusOn: false,
-      remember: false,
-      firstName: '',
-      firstNamefocusOn: false,
-      lastName: '',
-      lastNamefocusOn: false,
-      phoneNumber: '',
-      phoneNumberfocusOn: false,
-      confirm: '',
-      confirmfocusOn: false,
-      isSnackBarOpen: false,
-      snackBarMessage: '',
-      snackBarColor: ''
-    };
-  }
-
-  closePanel() {
-    this.props.setSignOpen(false);
-  }
-
-  login(data) {
-    axios.post(`${API_SERVER_URL}/api/user/customer_login`, data).then(res => {
-      if (res.data.success === true) {
-        // const {email, firstName, lastName, phone, role} = res.data.userData;
-        sessionStorage.setItem('email', res.data.userData.email);
-        sessionStorage.setItem('firstName', res.data.userData.firstName);
-        sessionStorage.setItem('lastName', res.data.userData.lastName);
-        sessionStorage.setItem('phone', res.data.userData.phone);
-        const visualizerName = sessionStorage.getItem('visualizerName');
-        history.push({
-          pathname: `/${visualizerName}/project/${res.data.userData.role}/${res.data.token}/null?null`
-        });
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: `${
-            this.state.type === 1 ? 'Login' : 'Register'
-          } Successed!`,
-          snackBarColor: STATUS_POSITIVE_COLOR
-        });
-        this.props.setSignOpen(false);
-        if (this.props.myProjectsToLogin) {
-          this.props.setMyProjectsToLogin(false);
-          this.props.setMyProjectsOpen(true);
-        }
-      } else {
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: res.data.error,
-          snackBarColor: STATUS_NEGATIVE_COLOR
-        });
-        return;
-      }
-    });
-  }
-
-  _submit() {
-    const { email, password, firstName, lastName, phoneNumber, confirm, type } =
-      this.state;
-    let userData = {};
-    if (type === 1) {
-      if (
-        email === '' ||
-        !emailValidation(email) ||
-        !phoneValidation(phoneNumber) ||
-        password === ''
-      ) {
-        let msg;
-        if (email === '') msg = 'Type your email address';
-        else if (!emailValidation(email)) msg = 'Type your valid email address';
-        else if (!phoneValidation(phoneNumber)) msg = 'Type your valid phone';
-        else if (password === '') msg = 'Type your password';
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: msg,
-          snackBarColor: STATUS_NEGATIVE_COLOR
-        });
-        return;
-      }
-      userData = {
-        email: email,
-        password: password
-      };
-      this.login(userData);
-    } else {
-      if (
-        firstName === '' ||
-        lastName === '' ||
-        email === '' ||
-        phoneNumber === '' ||
-        !phoneValidation(phoneNumber) ||
-        !emailValidation(email) ||
-        password === '' ||
-        confirm === '' ||
-        password !== confirm
-      ) {
-        let msg;
-        if (firstName === '') msg = 'Type your first name';
-        else if (lastName === '') msg = 'Type your last name';
-        else if (email === '') msg = 'Type your email address';
-        else if (phoneNumber === '') msg = 'Type your phone number';
-        else if (!emailValidation(email)) msg = 'Type your valid email address';
-        else if (!phoneValidation(phoneNumber)) msg = 'Type your valid phone';
-        else if (password === '') msg = 'Type your password';
-        else if (confirm === '') msg = 'Type your confirm';
-        else if (password !== confirm) msg = 'Please input confirm password';
-        this.setState({
-          isSnackBarOpen: true,
-          snackBarMessage: msg,
-          snackBarColor: STATUS_NEGATIVE_COLOR
-        });
-        return;
-      }
-      userData = {
-        firstName: firstName,
-        lastName: lastName,
-        email: email,
-        phoneNumber: phoneNumber,
-        password: password
-      };
-      axios.post(`${API_SERVER_URL}/api/user/register`, userData).then(res => {
-        console.log(res);
-        if (res.data.success === true) {
-          this.login({ email: email, password: password });
-        } else {
-          this.setState({
-            isSnackBarOpen: true,
-            snackBarMessage: res.data.error,
-            snackBarColor: STATUS_NEGATIVE_COLOR
-          });
-          return;
-        }
-      });
-    }
-  }
-
-  render() {
-    let {
-      email,
-      password,
-      emailfocusOn,
-      passwordfocusOn,
-      firstName,
-      firstNamefocusOn,
-      lastName,
-      lastNamefocusOn,
-      phoneNumber,
-      phoneNumberfocusOn,
-      confirm,
-      confirmfocusOn,
-      remember,
-      type,
-      isSnackBarOpen,
-      snackBarMessage,
-      snackBarColor
-    } = this.state;
-
-    return (
-      <S.DialogWrapper>
-        <SnackBar
-          isOpen={isSnackBarOpen}
-          message={snackBarMessage}
-          snackBarColor={snackBarColor}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <S.Dialog>
-          <div
-            style={{ cursor: 'pointer', width: '100%', userSelect: 'none' }}
-            onClick={() => this.props.setSignOpen(false)}
-          >
-            <img
-              style={{ float: 'right', height: 25, transform: 'rotate(45deg)' }}
-              src="/assets/img/svg/bottombar/arrow-plus.svg"
-            />
-          </div>
-          <S.DialogTitle>
-            {type === 1 ? 'Login' : 'Register'} your account
-          </S.DialogTitle>
-          <S.DialogContent>
-            {type === 1
-              ? 'We need to log you in to retrieve your saved projects.'
-              : 'Register your DIY Design Space to save and recover your file at anytime.'}
-          </S.DialogContent>
-          {type === 1 ? (
-            <S.DialogContentSelection>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={email}
-                  onChange={e => this.setState({ email: e.target.value })}
-                  onFocus={e => this.setState({ emailfocusOn: true })}
-                  onBlur={e => this.setState({ emailfocusOn: false })}
-                  placeholder={emailfocusOn ? 'Enter Email' : 'Email'}
-                  required
-                />
-                {(emailfocusOn || !!email.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !emailfocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    Email
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!email.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ email: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper style={{ flexDirection: 'column' }}>
-                <S.DialogContent
-                  style={{ padding: 'unset', textAlign: 'right' }}
-                >
-                  Forgot Password?
-                </S.DialogContent>
-                <S.StyledInput
-                  value={password}
-                  type="password"
-                  onChange={e => this.setState({ password: e.target.value })}
-                  onFocus={e => this.setState({ passwordfocusOn: true })}
-                  onBlur={e => this.setState({ passwordfocusOn: false })}
-                  maxLength={50}
-                  placeholder={passwordfocusOn ? 'Enter Password' : 'Password'}
-                  required
-                />
-                {(passwordfocusOn || !!password.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{
-                      color: !passwordfocusOn && TEXT_COLOR_NEUTRAL_2,
-                      top: 9
-                    }}
-                  >
-                    Password
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!password.length && (
-                  <S.PlusImage
-                    style={{ top: 27 }}
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ password: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.DialogContent
-                style={{ paddingLeft: 'unset', paddingTop: 'unset' }}
-              >
-                or
-              </S.DialogContent>
-              <FormControlLabel
-                style={{ alignItems: 'flex-start', marginBottom: 15 }}
-                control={
-                  <StyledMuiCheckbox
-                    style={{ padding: 'unset', margin: '0 10px' }}
-                    checked={remember}
-                    onChange={() => this.setState({ remember: !remember })}
-                    value={remember}
-                  />
-                }
-                label={
-                  <S.DialogContents style={{ fontSize: 13 }}>
-                    Login with “<strong>One Time Password</strong>”
-                  </S.DialogContents>
-                }
-              />
-            </S.DialogContentSelection>
-          ) : (
-            <S.DialogContentSelection>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  id="first_name_input"
-                  value={firstName}
-                  onChange={e => this.setState({ firstName: e.target.value })}
-                  onFocus={e => this.setState({ firstNamefocusOn: true })}
-                  onBlur={e => this.setState({ firstNamefocusOn: false })}
-                  placeholder={
-                    firstNamefocusOn ? 'Enter first name' : 'First name'
-                  }
-                  required
-                />
-                {(firstNamefocusOn || !!firstName.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !firstNamefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    First Name
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!firstName.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ firstName: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={lastName}
-                  onChange={e => this.setState({ lastName: e.target.value })}
-                  onFocus={e => this.setState({ lastNamefocusOn: true })}
-                  onBlur={e => this.setState({ lastNamefocusOn: false })}
-                  placeholder={
-                    lastNamefocusOn ? 'Enter last name' : 'Last name'
-                  }
-                  required
-                />
-                {(lastNamefocusOn || !!lastName.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !lastNamefocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    Last Name
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!lastName.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ lastName: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={email}
-                  onChange={e => this.setState({ email: e.target.value })}
-                  onFocus={e => this.setState({ emailfocusOn: true })}
-                  onBlur={e => this.setState({ emailfocusOn: false })}
-                  placeholder={
-                    emailfocusOn ? 'Enter email address' : 'Email Address'
-                  }
-                  required
-                />
-                {(emailfocusOn || !!email.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !emailfocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    Email Address
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!email.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ email: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={phoneNumber}
-                  onChange={e => this.setState({ phoneNumber: e.target.value })}
-                  onFocus={e => this.setState({ phoneNumberfocusOn: true })}
-                  onBlur={e => this.setState({ phoneNumberfocusOn: false })}
-                  maxLength={50}
-                  placeholder={
-                    phoneNumberfocusOn ? 'Enter phone number' : 'Phone Number'
-                  }
-                  required
-                />
-                {(phoneNumberfocusOn || !!phoneNumber.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{
-                      color: !phoneNumberfocusOn && TEXT_COLOR_NEUTRAL_2
-                    }}
-                  >
-                    Phone Number
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!phoneNumber.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ phoneNumber: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={password}
-                  type="password"
-                  onChange={e => this.setState({ password: e.target.value })}
-                  onFocus={e => this.setState({ passwordfocusOn: true })}
-                  onBlur={e => this.setState({ passwordfocusOn: false })}
-                  maxLength={50}
-                  placeholder={passwordfocusOn ? 'Enter Password' : 'Password'}
-                  required
-                />
-                {(passwordfocusOn || !!password.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !passwordfocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    Password
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!password.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ password: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-              <S.StyledInputWrapper>
-                <S.StyledInput
-                  value={confirm}
-                  type="password"
-                  onChange={e => this.setState({ confirm: e.target.value })}
-                  onFocus={e => this.setState({ confirmfocusOn: true })}
-                  onBlur={e => this.setState({ confirmfocusOn: false })}
-                  maxLength={50}
-                  placeholder={
-                    confirmfocusOn
-                      ? 'Enter Confirm Password'
-                      : 'Confirm Password'
-                  }
-                  required
-                />
-                {(confirmfocusOn || !!confirm.length) && (
-                  <S.StyledInputHeadLabel
-                    style={{ color: !confirmfocusOn && TEXT_COLOR_NEUTRAL_2 }}
-                  >
-                    Confirm Password
-                  </S.StyledInputHeadLabel>
-                )}
-                {!!confirm.length && (
-                  <S.PlusImage
-                    maskImage="/assets/img/svg/bottombar/arrow-plus.svg"
-                    onClick={() => this.setState({ confirm: '' })}
-                  />
-                )}
-              </S.StyledInputWrapper>
-            </S.DialogContentSelection>
-          )}
-          <S.DialogAction>
-            <S.StyledButton onClick={() => this._submit()}>
-              {type === 1 ? 'Login' : 'Register'}
-            </S.StyledButton>
-            <S.StyledButton
-              style={{
-                border: 'unset',
-                padding: 'unset',
-                backgroundColor: 'unset',
-                color: SECONDARY_PURPLE_COLOR,
-                width: 'max-contet'
-              }}
-              onClick={() =>
-                this.setState({
-                  type: (type + 1) % 2,
-                  email: '',
-                  password: '',
-                  firstName: '',
-                  lastName: '',
-                  confirm: '',
-                  phoneNumber: ''
-                })
-              }
-            >
-              {type === 1
-                ? "Don't you have an account?"
-                : 'Already have an account?'}
-            </S.StyledButton>
-          </S.DialogAction>
-        </S.Dialog>
-      </S.DialogWrapper>
-    );
-  }
-}
-
-Sign.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  content: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  allowProjectFileSupport: PropTypes.bool.isRequired,
-  toolbarButtons: PropTypes.array
-};
-
-Sign.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  areaActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired
-};

package/src/components/sign/main/styles.js

@@ -1,163 +0,0 @@
-import {
-  DEFAULT_FONT_FAMILY,
-  TEXT_COLOR_NEUTRAL_1,
-  TEXT_COLOR_NEUTRAL_2,
-  SECONDARY_PURPLE_COLOR,
-  BG_COLOR_1,
-  TEXT_COLOR_NEUTRAL_3,
-  SHADE_LIGHT_PURPLE_COLOR,
-  SHADE_DARK_PURPLE_COLOR
-} from '../../../constants';
-import styled from 'styled-components';
-
-export const DialogWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  top: 60px;
-  width: 100%;
-  height: calc(100% - 60px);
-  display: flex;
-`;
-
-export const Dialog = styled.div`
-  position: relative;
-  margin: auto;
-  width: 400px;
-  display: flex;
-  flex-direction: column;
-  padding: 30px;
-  user-select: none;
-  text-align: center;
-  border-radius: 10px;
-  z-index: 10;
-  flex-flow: column;
-  background-color: rgb(255, 255, 255);
-  box-shadow: 0px 3px 5px -1px rgba(156, 154, 154, 0.2),
-    0px 6px 10px 0px rgba(156, 154, 154, 0.39),
-    0px 1px 18px 0px rgba(156, 154, 154, 0.12);
-`;
-
-export const DialogTitle = styled.span`
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 30px;
-  text-align: left;
-`;
-
-export const DialogAction = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const DialogContent = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 0px;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-  width: 100%;
-`;
-
-export const DialogContents = styled.span`
-  font-family: ${DEFAULT_FONT_FAMILY};
-  color: ${TEXT_COLOR_NEUTRAL_1};
-  padding: 10px 0px;
-  font-size: 14px;
-`;
-
-export const StyledButton = styled.button`
-  cursor: pointer;
-  position: relative;
-  border: 3px solid ${SECONDARY_PURPLE_COLOR};
-  border-radius: 5px;
-  padding: 7px 20px;
-  display: flex;
-  align-items: center;
-  color: ${BG_COLOR_1};
-  background-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};
-  }
-`;
-
-export const ButtonTitle = styled.span`
-  color: ${BG_COLOR_1};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 22px;
-  text-align: center;
-`;
-
-export const DialogContentSelection = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 10px 0px;
-  max-height: calc(100vh - 300px);
-  overflow-y: scroll;
-`;
-
-export const StyledInputWrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin: 10px 0px;
-`;
-
-export const StyledInput = styled.input`
-  width: 100%;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 22px;
-  height: 44px;
-  text-align: left;
-  padding: 10px;
-  color: ${TEXT_COLOR_NEUTRAL_2};
-  border: 1px solid;
-  border-radius: 5px;
-  outline: 0;
-  :focus {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-  :hover {
-    border: 2px solid ${SECONDARY_PURPLE_COLOR};
-  }
-`;
-
-export const StyledInputHeadLabel = styled.span`
-  font-size: 12px;
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-  position: absolute;
-  left: 12px;
-  top: -9px;
-  background-color: ${BG_COLOR_1};
-  padding: 0px 7px;
-  color: ${SECONDARY_PURPLE_COLOR};
-`;
-
-export const PlusImage = styled.img`
-  position: absolute;
-  height: 25px;
-  width: 25px;
-  transform: rotate(45deg);
-  right: 10px;
-  cursor: pointer;
-  background-color: ${TEXT_COLOR_NEUTRAL_3};
-  -webkit-mask-image: url(${props => props.maskImage});
-  -webkit-mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-`;