/components/Login/index.js

index.js

'use strict';

import React, {PropTypes} from 'react';
import {HotKeys} from 'react-hotkeys';
import {VERSION} from '../../common/constants/environment';
import LoginLoading from './LoginLoading';

const Login = ({hotKeyMap, loading, username, password, phone_ext, handleLoginFieldChange, handleLogin}) => {

  const handlers = {
    'login': handleLogin
  };
  
  return (
    <div>
      <HotKeys keyMap={hotKeyMap} handlers={handlers}>
        <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
          <div id="login-container" className="android-content mdl-layout__content md">
            <div className="mdl-typography--text-center">

              <div className="mdl-layout__content login">
                <LoginLoading isLoading={loading}/>

                <img src="./assets/images/logo.png" className="loginLogo"/>

                <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input className="mdl-textfield__input"
                         type="text"
                         id="login_username"
                         value={username}
                         onChange={handleLoginFieldChange.bind(null, 'username')}/>
                  <label className="mdl-textfield__label" htmlFor="login_username">Username</label>
                </div>

                <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input className="mdl-textfield__input"
                         type="password"
                         id="login_password"
                         value={password}
                         onChange={handleLoginFieldChange.bind(null, 'password')}/>
                  <label className="mdl-textfield__label" htmlFor="login_password">Password</label>
                </div>

                <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                  <input className="mdl-textfield__input"
                         type="text"
                         pattern="-?[0-9]*(\.[0-9]+)?"
                         id="login_phone_ext"
                         value={phone_ext}
                         onChange={handleLoginFieldChange.bind(null, 'phone_ext')}/>
                  <label className="mdl-textfield__label" htmlFor="login_phone_ext">Phone Extension</label>
                  <span className="mdl-textfield__error">Input is not a number!</span>
                </div>
                <br />

                <button id="login_button"
                        className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
                        onClick={handleLogin}>
                  Login
                </button>

                <div className="mdl-gid"></div>
                <div className="mdl-cell mdl-cell--2-col mdl-cell--10-offset">{VERSION}</div>

                <div id="login-snack-bar" className="snack-bar mdl-js-snackbar mdl-snackbar">
                  <div className="mdl-snackbar__text"></div>
                  <button className="mdl-snackbar__action" type="button"></button>
                </div>

              </div>

            </div>
          </div>
        </div>
      </HotKeys>
    </div>
  );
};

Login.propTypes = {
  loading: PropTypes.bool,
  username: PropTypes.string,
  password: PropTypes.string,
  phone_ext: PropTypes.string,
  handleLoginFieldChange: PropTypes.func.isRequired,
  handleLogin: PropTypes.func.isRequired
};

export default Login;