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

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

@@ -0,0 +1,171 @@
+import React from 'react';
+import { Input, Button, Row } from 'antd';
+import { Link } from 'react-router-dom';
+import { API_SERVER_URL } from '../../../constants';
+import history from '../../../@history';
+import axios from 'axios';
+import '../style.css';
+
+class RegisterForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      userid: '',
+      role: 'customer',
+      password: '',
+      confirmPwd: ''
+    };
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+
+    const { confirmPwd, ...values } = this.state;
+    if (values.password !== confirmPwd) {
+      alert('The passwords do not match');
+      return;
+    }
+
+    axios
+      .post(`${API_SERVER_URL}/api/user/insert`, { ...values })
+      .then(response => {
+        if (response.data.success) {
+          alert('Successfully registered');
+          this.setState({
+            username: '',
+            userid: '',
+            role: 'customer',
+            password: '',
+            confirmPwd: ''
+          });
+        } else {
+          alert('Username already exists');
+        }
+      });
+  }
+
+  handleUsernameChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ username: e.target.value });
+  }
+  handleUserIDChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ userid: e.target.value });
+  }
+  handleUserRoleChange(e) {
+    this.setState({ role: e.target.value });
+  }
+  handlePasswordChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ password: e.target.value });
+  }
+  handleConfirmChange(e) {
+    e.target.setCustomValidity('');
+    this.setState({ confirmPwd: e.target.value });
+  }
+
+  handleInputInvalid(e, text) {
+    e.target.setCustomValidity('');
+    if (!e.target.validity.valid) {
+      e.target.setCustomValidity(text);
+    }
+  }
+
+  render() {
+    const { username, userid, role, password, confirmPwd } = this.state;
+    const { type } = this.props;
+    return (
+      <form onSubmit={e => this.handleSubmit(e)} className="register-form">
+        <Row className="register-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"
+            required
+            value={username}
+          />
+        </Row>
+        <Row className="register-form-row">
+          <label className="form-label mb-0">User ID</label>
+          <Input
+            onChange={e => this.handleUserIDChange(e)}
+            onInvalid={e => this.handleInputInvalid(e, 'Please enter your ID.')}
+            placeholder="User ID"
+            required
+            value={userid}
+          />
+        </Row>
+        <Row className="register-form-row">
+          <label className="form-label mb-0">User Role</label>
+          <select onChange={e => this.handleUserRoleChange(e)} value={role}>
+            <option value="customer"> customer </option>
+            <option value="designer"> designer </option>
+          </select>
+        </Row>
+        <Row className="register-form-row">
+          <label className="form-label mb-0">Password</label>
+          <Input
+            onChange={e => this.handlePasswordChange(e)}
+            onInvalid={e =>
+              this.handleInputInvalid(e, 'Please confirm your password.')
+            }
+            type="password"
+            placeholder="Password"
+            value={password}
+          />
+        </Row>
+        <Row className="register-form-row">
+          <label className="form-label mb-0">Confirm</label>
+          <Input
+            onChange={e => this.handleConfirmChange(e)}
+            onInvalid={e =>
+              this.handleInputInvalid(e, 'Please confirm your password.')
+            }
+            type="password"
+            placeholder="Confirm Password"
+            value={confirmPwd}
+          />
+        </Row>
+        <Row className="login-form-row">
+          <div className="divider">-</div>
+        </Row>
+        <div
+          className="form-actions"
+          style={{
+            width: '90%',
+            display: 'flex',
+            justifyContent: 'space-around'
+          }}
+        >
+          <Link
+            className="register-link-btn"
+            to=""
+            onClick={e => history.goBack()}
+          >
+            {' '}
+            Back{' '}
+          </Link>
+
+          <Button
+            type="primary"
+            htmlType="submit"
+            className="login-form-button"
+          >
+            {type === 'register' ? 'Register' : 'Add User'}
+          </Button>
+
+          <Link className="register-link-btn" to="/login">
+            {' '}
+            Sign In{' '}
+          </Link>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default RegisterForm;

package/src/components/login/jwtService.js

@@ -0,0 +1,201 @@
+import axios from 'axios';
+import jwtDecode from 'jwt-decode';
+import { API_SERVER_URL } from '../../constants';
+
+class EventEmitter {
+  constructor() {
+    this.events = {};
+  }
+
+  _getEventListByName(eventName) {
+    if (typeof this.events[eventName] === 'undefined') {
+      this.events[eventName] = new Set();
+    }
+    return this.events[eventName];
+  }
+
+  on(eventName, fn) {
+    this._getEventListByName(eventName).add(fn);
+  }
+
+  once(eventName, fn) {
+    const self = this;
+
+    const onceFn = function (...args) {
+      self.removeListener(eventName, onceFn);
+      fn.apply(self, args);
+    };
+    this.on(eventName, onceFn);
+  }
+
+  emit(eventName, ...args) {
+    this._getEventListByName(eventName).forEach(
+      function (fn) {
+        fn.apply(this, args);
+      }.bind(this)
+    );
+  }
+
+  removeListener(eventName, fn) {
+    this._getEventListByName(eventName).delete(fn);
+  }
+}
+
+class jwtService extends EventEmitter {
+  init() {
+    // this.setInterceptors();
+    this.handleAuthentication();
+  }
+
+  setInterceptors() {
+    axios.interceptors.response.use(
+      response => {
+        return response;
+      },
+      err => {
+        return new Promise((resolve, reject) => {
+          console.log(err);
+          if (
+            err.response.status === 401 &&
+            err.config &&
+            !err.config.__isRetryRequest
+          ) {
+            // if ( err)
+            // if you ever get an unauthorized response, logout the user
+            this.emit(
+              'onAutoLogout',
+              'Invalid access_token! There is a problem with Database.'
+            );
+            this.setSession(null);
+            this.setUser(null);
+            return;
+          }
+          // throw err;
+        });
+      }
+    );
+  }
+
+  handleAuthentication() {
+    let access_token = this.getAccessToken();
+
+    if (!access_token) {
+      return;
+    }
+    if (this.isAuthTokenValid(access_token)) {
+      this.setSession(access_token);
+      this.emit('onAutoLogin', true);
+    } else {
+      this.setSession(null);
+      this.emit('onAutoLogout', 'access_token expired');
+    }
+  }
+
+  createUser(data) {
+    return new Promise((resolve, reject) => {
+      axios.post('/api/auth/register', data).then(response => {
+        if (response.data.user) {
+          this.setUser(response.data.user);
+          this.setSession(response.data.access_token);
+          resolve(response.data.user);
+        } else {
+          reject(response.data.error);
+        }
+      });
+    });
+  }
+
+  signInWithEmailAndPassword(values) {
+    return new Promise((resolve, reject) => {
+      axios
+        .post(`${API_SERVER_URL}/api/user/login`, {
+          values
+        })
+        .then(response => {
+          if (response.data.user) {
+            this.setUser(response.data.user);
+            this.setSession(response.data.token);
+            resolve(response.data.user);
+          } else {
+            reject(response.data.error);
+          }
+        });
+    });
+  }
+
+  signInWithToken() {
+    return new Promise((resolve, reject) => {
+      axios
+        .post(`${API_SERVER_URL}/api/user/access-token`, {
+          data: {
+            access_token: this.getAccessToken()
+          }
+        })
+        .then(response => {
+          if (response.data.user) {
+            // this.emit('onLoginSuccess', {message: 'You log in with token.', variant: 'success'});
+            this.setUser(response.data.user);
+            this.setSession(response.data.access_token);
+            resolve(response.data.user);
+          } else {
+            reject(response.data.error);
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    });
+  }
+
+  updateUserData(user) {
+    return axios.post('/api/auth/user/update', {
+      user: user
+    });
+  }
+
+  setSession(access_token) {
+    if (access_token) {
+      sessionStorage.setItem('jwt_access_token', access_token);
+      // axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
+    } else {
+      sessionStorage.removeItem('jwt_access_token');
+      // delete axios.defaults.headers.common['Authorization'];
+    }
+  }
+  setUser(user) {
+    if (user) {
+      sessionStorage.setItem('jwt_access_user', JSON.stringify(user));
+    } else {
+      sessionStorage.removeItem('jwt_access_user');
+    }
+  }
+  getUser() {
+    return JSON.parse(sessionStorage.getItem('jwt_access_user'));
+  }
+  logout() {
+    this.setSession(null);
+    this.setUser(null);
+  }
+
+  isAuthTokenValid(access_token) {
+    if (!access_token) {
+      return false;
+    }
+    const decoded = jwtDecode(access_token);
+    const currentTime = Date.now() / 1000;
+    if (decoded.exp < currentTime) {
+      console.warn('access token expired');
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  getAccessToken() {
+    return window.sessionStorage.getItem('jwt_access_token');
+  }
+}
+
+const instance = new jwtService();
+
+export default instance;

package/src/components/login/style.css

@@ -0,0 +1,158 @@
+.login-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 65%;
+}
+.register-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 70%;
+}
+.login-form-row {
+  line-height: 30px;
+  margin-bottom: 18px;
+  margin-top: 13px;
+  width: 80%;
+}
+.register-form-row {
+  line-height: 30px;
+  margin-top: 7px;
+  width: 80%;
+}
+.login-form-row-check {
+  line-height: 30px;
+  margin-bottom: 10px;
+  margin-top: 13px;
+  width: 80%;
+  text-align: center;
+}
+.login-form-button {
+  height: 32px;
+  line-height: 1.499;
+  position: relative;
+  display: inline-block;
+  font-weight: 400;
+  white-space: nowrap;
+  text-align: center;
+  border: 1px solid transparent;
+  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+  cursor: pointer;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 14px;
+  border-radius: 4px;
+  color: white;
+  background-color: #1890ff;
+  border-color: #d9d9d9;
+}
+.login-form-button:not([disabled]):hover {
+  text-decoration: none;
+}
+.login-form-button:hover,
+.login-form-button:focus {
+  color: #fff;
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+}
+.register-link-btn {
+  color: #1890ff;
+  padding-top: 8px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.register-link-btn:hover,
+.register-link-btn:focus {
+  color: #40a9ff;
+  text-decoration: underline;
+}
+
+.form-label {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+}
+.form-actions {
+  padding-top: 7px;
+}
+
+.login-form-row input,
+.register-form-row input {
+  padding-left: 10px;
+  border: 1px solid #2299dd;
+  border-left: 3px solid #2299dd;
+  width: 100%;
+  height: 25px;
+  color: black;
+}
+.register-form-row select {
+  padding-left: 10px;
+  border: 1px solid #2299dd;
+  border-left: 3px solid #2299dd;
+  width: 100%;
+  height: 25px;
+  color: black;
+}
+
+.login {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
+  overflow-y: auto;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+.login__block__inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.login__block__form {
+  background-color: white;
+  border-radius: 10px;
+  width: 390px;
+  height: 420px;
+}
+.register__block__form {
+  background-color: white;
+  border-radius: 10px;
+  width: 390px;
+  height: 510px;
+}
+.login__block__promo {
+  padding: 0 0 2.61rem;
+  max-width: 61.53rem;
+  font-size: 14px;
+  line-height: 2rem;
+  text-align: center;
+  margin: 0 auto;
+}
+.login__block {
+  padding-top: 100px;
+}
+.text-white {
+  color: white;
+}
+.text-center {
+  text-align: center;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  color: white;
+  user-select: none;
+  background-color: rgba(0, 0, 0, 0.65);
+}