3 files changed, 315 insertions, 0 deletions

diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
new file mode 100644
index 000000000..107335573
--- /dev/null
+++ b/packages/forms/src/input/index.tsx
@@ -0,0 +1,175 @@
+import { mdiEye, mdiEyeOff } from '@mdi/js';
+import Icon from '@mdi/react';
+import classnames from 'classnames';
+import pick from 'lodash/pick';
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import htmlElementAttributes from 'react-html-attributes';
+import injectSheet from 'react-jss';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+import Error from '../error';
+import Label from '../label';
+import Wrapper from '../wrapper';
+import scorePasswordFunc from './scorePassword';
+
+import styles from './styles';
+
+interface IProps extends IFormField, React.InputHTMLAttributes<HTMLInputElement>, IWithStyle {
+  label: string;
+  focus?: boolean;
+  prefix?: string;
+  suffix?: string;
+  scorePassword?: boolean;
+  showPasswordToggle?: boolean;
+  error?: string;
+}
+
+interface IState {
+  showPassword: boolean;
+  passwordScore: number;
+}
+
+@observer
+class Input extends Component<IProps, IState> {
+  public static defaultProps = {
+    classes: {},
+    focus: false,
+    onChange: () => {},
+    scorePassword: false,
+    showLabel: true,
+    showPasswordToggle: false,
+    type: 'text',
+  };
+
+  state = {
+    passwordScore: 0,
+    showPassword: false,
+  };
+
+  private inputRef = React.createRef<HTMLInputElement>();
+
+  componentDidMount() {
+    const { focus } = this.props;
+
+    if (focus && this.inputRef && this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
+  }
+
+  onChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {
+      scorePassword,
+      onChange,
+    } = this.props;
+
+    if (onChange) {
+      onChange(e);
+    }
+
+    if (this.inputRef && this.inputRef.current && scorePassword) {
+      this.setState({ passwordScore: scorePasswordFunc(this.inputRef.current.value) });
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      disabled,
+      error,
+      id,
+      label,
+      prefix,
+      scorePassword,
+      suffix,
+      showLabel,
+      showPasswordToggle,
+      type,
+    } = this.props;
+
+    const {
+      showPassword,
+      passwordScore,
+    } = this.state;
+
+    const inputProps = pick(this.props, htmlElementAttributes['input']);
+
+    if (type === 'password' && showPassword) {
+      inputProps.type = 'text';
+    }
+
+    inputProps.onChange = this.onChange.bind(this);
+
+    const cssClasses = classnames({
+      [`${inputProps.className}`]: inputProps.className,
+      [`${classes.input}`]: true,
+    });
+
+    return (
+      <Wrapper>
+        <Label
+          title={label}
+          showLabel={showLabel}
+          htmlFor={id}
+        >
+          <div
+            className={classnames({
+              [`${classes.hasPasswordScore}`]: showPasswordToggle,
+              [`${classes.wrapper}`]: true,
+              [`${classes.disabled}`]: disabled,
+              [`${classes.hasError}`]: error,
+            })}>
+            {prefix && (
+              <span className={classes.prefix}>
+                {prefix}
+              </span>
+            )}
+            <input
+              {...inputProps}
+              className={cssClasses}
+              ref={this.inputRef}
+            />
+            {suffix && (
+              <span className={classes.suffix}>
+                {suffix}
+              </span>
+            )}
+            {showPasswordToggle && (
+              <button
+                type="button"
+                className={classes.formModifier}
+                onClick={() => this.setState(prevState => ({ showPassword: !prevState.showPassword }))}
+                tabIndex={-1}
+              >
+                <Icon
+                  path={!showPassword ? mdiEye : mdiEyeOff}
+                  size={1}
+                />
+              </button>
+            )}
+          </div>
+          {scorePassword && (
+            <div className={classnames({
+              [`${classes.passwordScore}`]: true,
+              [`${classes.hasError}`]: error,
+            })}>
+              <meter
+                value={passwordScore < 5 ? 5 : passwordScore}
+                low={30}
+                high={75}
+                optimum={100}
+                max={100}
+              />
+            </div>
+          )}
+        </Label>
+        {error && (
+          <Error message={error} />
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+export default injectSheet(styles)(Input);
diff --git a/packages/forms/src/input/scorePassword.ts b/packages/forms/src/input/scorePassword.ts
new file mode 100644
index 000000000..bdad7aa28
--- /dev/null
+++ b/packages/forms/src/input/scorePassword.ts
@@ -0,0 +1,42 @@
+interface ILetters {
+  [key: string]: number;
+}
+
+interface IVariations {
+  [index: string]: boolean;
+  digits: boolean;
+  lower: boolean;
+  nonWords: boolean;
+  upper: boolean;
+}
+
+export default function scorePasswordFunc(password: string): number {
+  let score: number = 0;
+  if (!password) {
+    return score;
+  }
+
+  // award every unique letter until 5 repetitions
+  const letters: ILetters = {};
+  for (let i = 0; i < password.length; i += 1) {
+    letters[password[i]] = (letters[password[i]] || 0) + 1;
+    score += 5.0 / letters[password[i]];
+  }
+
+  // bonus points for mixing it up
+  const variations: IVariations = {
+    digits: /\d/.test(password),
+    lower: /[a-z]/.test(password),
+    nonWords: /\W/.test(password),
+    upper: /[A-Z]/.test(password),
+  };
+
+  let variationCount = 0;
+  Object.keys(variations).forEach((key) => {
+    variationCount += (variations[key] === true) ? 1 : 0;
+  });
+
+  score += (variationCount - 1) * 10;
+
+  return Math.round(score);
+}
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
new file mode 100644
index 000000000..46c0ef701
--- /dev/null
+++ b/packages/forms/src/input/styles.ts
@@ -0,0 +1,98 @@
+import * as CSS from 'csstype';
+import { Theme } from '../../../theme/lib';
+
+const prefixStyles = (theme: Theme) => ({
+  background: theme.inputPrefixBackground,
+  color: theme.inputPrefixColor,
+  lineHeight: theme.inputHeight,
+  padding: '0 10px',
+});
+
+export default (theme: Theme) => ({
+  container: {
+    // display: 'flex',
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  formModifier: {
+    background: 'none',
+    border: 0,
+    borderLeft: theme.inputBorder,
+    padding: '4px 20px 0',
+    outline: 'none',
+
+    '&:active': {
+      opacity: 0.5,
+    },
+
+    '& svg': {
+      fill: theme.inputModifierColor,
+    },
+  },
+  input: {
+    background: 'none',
+    border: 0,
+    fontSize: theme.inputFontSize,
+    outline: 'none',
+    padding: 8,
+    width: '100%',
+    color: theme.inputColor,
+
+    '&::placeholder': {
+      color: theme.inputPlaceholderColor,
+    },
+  },
+  passwordScore: {
+    background: theme.inputScorePasswordBackground,
+    border: theme.inputBorder,
+    borderTopWidth: 0,
+    borderBottomLeftRadius: theme.borderRadiusSmall,
+    borderBottomRightRadius: theme.borderRadiusSmall,
+    display: 'block',
+    flexBasis: '100%',
+    height: 5,
+    overflow: 'hidden',
+
+    '& meter': {
+      display: 'block',
+      height: '100%',
+      width: '100%',
+
+      '&::-webkit-meter-bar': {
+        background: 'none',
+      },
+
+      '&::-webkit-meter-even-less-good-value': {
+        background: theme.brandDanger,
+      },
+
+      '&::-webkit-meter-suboptimum-value': {
+        background: theme.brandWarning,
+      },
+
+      '&::-webkit-meter-optimum-value': {
+        background: theme.brandSuccess,
+      },
+    },
+  },
+  prefix: prefixStyles(theme),
+  suffix: prefixStyles(theme),
+  wrapper: {
+    background: theme.inputBackground,
+    border: theme.inputBorder,
+    borderRadius: theme.borderRadiusSmall,
+    boxSizing: 'border-box' as CSS.BoxSizingProperty,
+    display: 'flex',
+    height: theme.inputHeight,
+    order: 1,
+    width: '100%',
+  },
+  hasPasswordScore: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  hasError: {
+    borderColor: theme.brandDanger,
+  },
+});