Login

Login

by evgkch

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>

SCSS

body {
  font-family: Arial;
  background-color: #242423;
}

.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 50px;
  
  .input-form {
    height: 50px;
    width: 300px;
    outline: none;
    border: none;
    border-bottom: solid 3px white;
    margin-bottom: 10px;
    padding: 0 10px;
    transition: all 300ms;
  }
  
  .form-success {
     &:focus {
      border-color: #EFCE3D;
    }
  }
  
  .form-warning {
     &:focus {
      border-color: #EF2E2D;
    }
  }
  
  .submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    color: white;
    user-select: none;
    background-color: #44A9EF;
  }
  
  .blocked-button {
    user-select: none;
    background-color: #183C54;
    cursor: no-drop;
  }
  .loading-button {
    background-color: #EFCE3D;
    cursor: progress;
  }
}

.list-item {
  display: flex;
  background-color: white;
  
  div {
    display: flex;
    justify-content: center;
    align-items: center; 
    padding: 10px;
  }
}

Babel + JSX

// Local store
class Store {
	constructor(name, initialState = {}) {
  	this.name = name;
    this.subscribers = [];
  	this.state = initialState;
  }
  subscribe(subscriber) {
  	this.subscribers.push(subscriber);
  }
  unsubscribe(subscriber) {
  	this.subscribers = this.subscribers.filter(item => item !== subscriber);
  }
  update(state) {
  	this.state = { ...this.state, ...state };
    console.log(this.state);
    this.subscribers.map(component => component.setState(this.state));
  }
}

// Subscribe component to store with controller
const connect = (controller, store) => (component) =>
	class extends React.Component {
    constructor() {
      super();
      console.log(this)
      if (store) store.subscribe(this);
      this.ctrl = controller(
        (state) => store
          ? store.update(state)
          : this.setState(state),
        () => this.state
      );
    }
    componentDidMount() {
    	if (store) this.setState(store.state);
    }
    componentWillUnmount() {
    	if (store) store.unsubscribe(this);
    }
    render() {
      return React.createElement(component, {...this.state, ...this.props, ctrl: this.ctrl })
    }
  }

// For changes without React
const Model = (controller, store) =>
	controller(
  	store.update.bind(store),
    () => store.state
  );
  
	function getButtonName(status) {
    switch (status) {
    	case 'active':
      case 'blocked':
      	return 'login';
      case 'loading':
        return 'sending...';
      default:
      	break;
    }
  }
  
class Login extends React.Component {
	onKeyDown(keyCode) {
  	if (keyCode === 13) {
    	this.props.ctrl.login()
    }
  }
	render() {
  	const { buffer = {}, availableFields = {}, list = [], status, ctrl } = this.props;
  	return (
    	<div className="form">
    	  <input
          type="text"
          value={buffer.username}
          className={`input-form ${availableFields.username ? 'form-success' : 'form-warning'}`}
          onChange={(e) =>...