tx-form-login/dist/index.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _class, _temp, _initialiseProps; /***  examples/src/form.js ***/


/* component */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRouterDom = require('react-router-dom');

var _zxcvbn2 = require('zxcvbn');

var _zxcvbn3 = _interopRequireDefault(_zxcvbn2);

var _loading = require('./loading');

var _loading2 = _interopRequireDefault(_loading);

var _bundle = require('./bundle');

var _bundle2 = _interopRequireDefault(_bundle);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TxLogin = (_temp = _class = function (_React$Component) {
  _inherits(TxLogin, _React$Component);

  function TxLogin(props) {
    _classCallCheck(this, TxLogin);

    var _this = _possibleConstructorReturn(this, (TxLogin.__proto__ || Object.getPrototypeOf(TxLogin)).call(this, props));

    _initialiseProps.call(_this);

    var init = {
      psh_true: { show: true, type: "text" },
      psh_false: { show: false, type: "password" }
    };

    _this.state = {
      valid: false,
      loading: false,
      init: init,
      psh: init.psh_false, /* password show hide logic : state */
      pstring: '', /* password input string  */
      pscore: false /* password strength scrore */
    };
    return _this;
  }

  return TxLogin;
}(_react2.default.Component), _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.handleSubmit = function (e) {
    e.preventDefault();
    _this2.setState({ loading: true });
    var api = _this2.props.api;
    _this2.setState({ valid: true, loading: false });
  };

  this.handlePSH = function () {
    var init = _this2.state.init;
    var psh = _this2.state.psh;

    if (!psh.show) _this2.setState({ psh: init.psh_true });
    if (psh.show) _this2.setState({ psh: init.psh_false });
    console.log(_this2.state.psh);
  };

  this.handlePass = function (e) {
    var password = e.target.value;

    var _zxcvbn = (0, _zxcvbn3.default)(password),
        score = _zxcvbn.score;

    score = password !== "" ? score : false;
    _this2.setState({ pscore: score });
  };

  this.render = function () {
    var _state = _this2.state,
        valid = _state.valid,
        loading = _state.loading;

    var pshConfig = _this2.state.psh;
    var pScore = _this2.state.pscore;

    var passHandle = _this2.handlePass.bind(_this2);
    var pshhandle = _this2.handlePSH.bind(_this2);
    var action = _this2.handleSubmit.bind(_this2);
    var config = _this2.props.config;
    var option = _this2.props.option;
    var route = _this2.props.route;

    if (valid) return _react2.default.createElement(_reactRouterDom.Redirect, { to: route });
    if (loading) return _react2.default.createElement(_loading2.default, null);
    return _react2.default.createElement(_bundle2.default, { action: action, config: config, option: option, pshConfig: pshConfig, pshHandle: pshhandle, pScore: pScore, passHandle: passHandle });
  };
}, _temp);


TxLogin.propTypes = {
  api: _propTypes2.default.string.isRequired,
  route: _propTypes2.default.string.isRequired
};

TxLogin.defaultProps = {
  // config
  config: {
    name: {
      username: "username",
      password: "password"
    },
    label: {
      username: "Username",
      password: "Password",
      button: "Login"
    },
    types: {
      username: "text",
      password: "password",
      button: "submit"
    }
  },
  // option
  option: {
    placeholder: {
      username: "",
      password: ""
    },
    css_label: {
      username: "tx-login-label-style",
      password: "tx-login-label-style"
    },
    css_input: {
      username: "tx-login-input-style",
      password: "tx-login-input-style"
    },
    css_button: {
      button: "tx-login-button-style ",
      button_color: "primary"
    },
    css_wrapper: {
      username: "tx-login-input-wrapper-style",
      password: "tx-login-input-wrapper-style"
    }
  }

  /*
  const config = {
    "name": {"username": "email", "password": "password"},
    "label": {"username": "Email Address", "password": "Password", "button": "Login"},
    "types": {"username": "text", "password": "password", "button": "submit"},
  }
  
  const option = {
    "placeholder": {"username": "Username", "password": "Password"},
    "css_input": {"username": "xx", "password": "xx", "button": "xxx"},
  }
  */

};exports.default = TxLogin;