sort components into widgets and views

src/widgets/visible-password.jsx

@@ -0,0 +1,80 @@
+// Password with a visiblity toggle.
+import React from 'react';
+
+export default class VisiblePassword extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: this.props.value,
+      visible: false
+    };
+
+    this.handleVisibility = this.handleVisibility.bind(this);
+    this.handeTextChange = this.handeTextChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleEditingFinished = this.handleEditingFinished.bind(this);
+  }
+
+  handeTextChange(e) {
+    this.setState({value: e.target.value});
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
+  }
+
+  handleVisibility(e) {
+    e.preventDefault();
+    this.setState({visible: !this.state.visible});
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode == 27) {
+      // Escape pressed
+      this.setState({value: this.props.value, visible: false});
+      if (this.props.onFinished) {
+        this.props.onFinished();
+      }
+    } else if (e.keyCode == 13) {
+      // Enter pressed
+      this.handleEditingFinished();
+    }
+  }
+
+  handleEditingFinished(e) {
+    if (e) {
+      let currentTarget = e.currentTarget;
+      setTimeout(() => {
+        if (!currentTarget.contains(document.activeElement)) {
+          if (this.props.onFinished) {
+            this.props.onFinished(this.state.value);
+          }
+        }
+      }, 0);
+    } else if (this.props.onFinished) {
+      this.props.onFinished(this.state.value.trim());
+    }
+  }
+
+  render() {
+    return (
+      <div tabIndex="-1" className="group-focus"
+        onBlur={this.handleEditingFinished}>
+        <input className="with-visibility"
+          type={this.state.visible ? "text" : "password"}
+          value={this.state.value}
+          placeholder={this.props.placeholder}
+          required={this.props.required ? 'required' : ''}
+          autoFocus={this.props.autoFocus ? 'autoFocus' : ''}
+          autoComplete={this.props.autoComplete}
+          onChange={this.handeTextChange}
+          onKeyDown={this.handleKeyDown} />
+        <span onClick={this.handleVisibility}>
+          <i className="material-icons clickable light-gray">
+            {this.state.visible ? 'visibility' : 'visibility_off'}
+          </i>
+        </span>
+      </div>
+    );
+  }
+}