Initial commit

node_modules/react-password-mask/src/index.js

@@ -0,0 +1,181 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { containerStyles, inputStyles, buttonStyles } from './styles.js';
+
+export default class PasswordMask extends Component {
+  static propTypes = {
+    value: PropTypes.any.isRequired,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    className: PropTypes.string,
+    inputClassName: PropTypes.string,
+    buttonClassName: PropTypes.string,
+    placeholder: PropTypes.string,
+    autoFocus: PropTypes.bool,
+    minLength: PropTypes.number,
+    maxLength: PropTypes.number,
+    onChange: PropTypes.func,
+    onBlur: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onShow: PropTypes.func,
+    onHide: PropTypes.func,
+    onToggle: PropTypes.func,
+    useVendorStyles: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    inputStyles: PropTypes.any,
+    buttonStyles: PropTypes.any,
+    showButtonContent: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string
+    ]),
+    hideButtonContent: PropTypes.oneOfType([
+      PropTypes.element,
+      PropTypes.string
+    ])
+  }
+
+  static defaultProps = {
+    inputClassName: '',
+    buttonClassName: '',
+    placeholder: '',
+    useVendorStyles: true,
+    onChange() {},
+    onBlur() {},
+    onKeyDown() {}
+  }
+
+  state = {
+    passwordShown: false,
+    hasBeenFocused: false
+  }
+
+  invokeCallbacks(value, passwordShown) {
+    const { onShow, onHide, onToggle } = this.props;
+
+    if (onToggle) {
+      onToggle(value);
+    }
+
+    if (onShow && passwordShown) {
+      onShow(value);
+    }
+
+    if (onHide && !passwordShown) {
+      onHide(value);
+    }
+  }
+
+  focusVisibleInput() {
+    const { passwordShown } = this.state;
+    const visibleInput = passwordShown ? this.textInput : this.passwordInput;
+
+    visibleInput.focus();
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    const { passwordShown } = this.state;
+
+    if (nextState.passwordShown !== passwordShown) {
+      this.invokeCallbacks(nextProps.value, nextState.passwordShown);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { passwordShown, hasBeenFocused } = this.state;
+
+    if (hasBeenFocused && prevState.passwordShown !== passwordShown) {
+      this.focusVisibleInput();
+    }
+  }
+
+  togglePasswordMask() {
+    this.setState({ passwordShown: !this.state.passwordShown });
+  }
+
+  render() {
+    const { value, id, name, className, inputClassName, buttonClassName, placeholder, autoFocus, minLength, maxLength, onChange, onBlur, onKeyDown, showButtonContent, hideButtonContent, useVendorStyles, readOnly, disabled, required } = this.props;
+    const { passwordShown } = this.state;
+
+    const vendorContainerCss = useVendorStyles ? containerStyles : {};
+    const vendorInputCss = useVendorStyles ? inputStyles : {};
+    const vendorButtonCss = useVendorStyles ? buttonStyles : {};
+
+    return (
+      <div
+        className={className}
+        style={vendorContainerCss}
+      >
+        <input
+          type="password"
+          ref={input => this.passwordInput = input}
+          value={value}
+          id={!passwordShown ? id : `_${id}`}
+          name={!passwordShown ? name : ''}
+          className={inputClassName}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          minLength={minLength}
+          maxLength={maxLength}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          style={{
+            ...vendorInputCss,
+            ...this.props.inputStyles,
+            display: !passwordShown ? 'block' : 'none'
+          }}
+          onChange={onChange}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          onFocus={() => this.setState({ hasBeenFocused: true })}
+        />
+
+        <input
+          type="text"
+          ref={input => this.textInput = input}
+          value={value}
+          id={passwordShown ? id : `_${id}`}
+          name={passwordShown ? name : ''}
+          className={inputClassName}
+          placeholder={placeholder}
+          minLength={minLength}
+          maxLength={maxLength}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          style={{
+            ...vendorInputCss,
+            ...this.props.inputStyles,
+            display: passwordShown ? 'block' : 'none'
+          }}
+          onChange={onChange}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          onFocus={() => this.setState({ hasBeenFocused: true })}
+        />
+
+        <a
+          href=""
+          className={buttonClassName}
+          style={{
+            ...vendorButtonCss,
+            ...this.props.buttonStyles
+          }}
+          onMouseDown={e => e.preventDefault()}
+          onClick={e => {
+            e.preventDefault();
+            this.togglePasswordMask();
+          }}
+          tabIndex={-1}
+        >
+          {passwordShown ?
+            hideButtonContent || 'Hide' :
+            showButtonContent || 'Show'
+          }
+        </a>
+      </div>
+    );
+  }
+}