Password UI

src/containers/UI/Password/Password.css

@@ -0,0 +1,33 @@
+.PasswordOwner {
+  padding: 0;
+  width: auto;
+  height: auto;
+  display: flex;
+  justify-content: left;
+  align-content: center;
+  flex-direction: row;
+}
+
+input.PasswordInput {
+  display: block;
+  margin-right: var(--default_spacing);
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: rgba(160, 160, 160, 0.1);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+}
+
+.PasswordShowHide {
+  padding-top: 2px;
+  cursor: pointer;
+  min-width: 20px;
+}
+
+.PasswordLink {
+  margin-right: var(--default_spacing);
+  cursor: pointer;
+}

src/containers/UI/Password/Password.js

@@ -0,0 +1,133 @@
+import React, {Component} from 'react';
+import './Password.css';
+import {faEye, faEyeSlash} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+export default class extends Component {
+  state = {
+    button_text: 'clear',
+    password: '',
+    password2: '',
+    show_password: false,
+  };
+
+  componentDidMount() {
+    if (!this.props.value || (this.props.value.length === 0)) {
+      this.setState({
+        ...this.state,
+        button_text: 'set',
+        password: '',
+        password2: '',
+        show_password: false,
+      })
+    } else {
+      this.setState({
+        ...this.state,
+        button_text: 'clear',
+        password: this.props.value,
+        password2: '',
+        show_password: false,
+      })
+    }
+  }
+
+  handleActionClick = () => {
+    if (!this.props.disabled) {
+      switch (this.state.button_text) {
+        case 'clear':
+          this.setState({
+            ...this.state,
+            button_text: 'set',
+            password: '',
+            password2: '',
+          });
+          break;
+
+        case 'confirm':
+          if (this.state.password === this.state.password2) {
+            this.props.changed(this.state.password);
+            this.setState({
+              ...this.state,
+              button_text: 'clear',
+              password2: '',
+            });
+          } else {
+            this.setState({
+              ...this.state,
+              button_text: 'set',
+              password: '',
+              password2: '',
+            }, () => {
+              if (this.props.mismatchHandler) {
+                this.props.mismatchHandler();
+              }
+            });
+          }
+          break;
+
+        case 'set':
+          this.setState({
+            ...this.state,
+            button_text: 'confirm',
+            password2: '',
+          });
+          break;
+
+        default:
+          return;
+      }
+    }
+  };
+
+  handlePasswordChanged = e => {
+    if (this.state.button_text === 'set') {
+      this.setState({
+        ...this.state,
+        password: e.target.value,
+      });
+    } else if (this.state.button_text === 'confirm') {
+      this.setState({
+        ...this.state,
+        password2: e.target.value,
+      });
+    }
+  };
+
+  handlePasswordKeyUp = e => {
+    if ((e.keyCode === 13) && ((this.state.button_text === 'confirm') || (this.state.button_text === 'set'))) {
+      this.handleActionClick();
+    }
+  };
+
+  handleShowHideClick = () => {
+    this.setState({
+      ...this.state,
+      show_password: !this.state.show_password,
+    });
+  };
+
+  render() {
+    return (
+      <div className={'PasswordOwner'}>
+        <a href={'#'}
+           className={'PasswordLink'}
+           onClick={this.handleActionClick}>
+          <u>{this.state.button_text}</u>
+        </a>
+        <input
+          onChange={this.handlePasswordChanged}
+          onKeyUp={this.handlePasswordKeyUp}
+          autoFocus={this.props.autoFocus}
+          className={'PasswordInput'}
+          disabled={this.props.readOnly || (this.state.button_text === 'clear')}
+          type={this.state.show_password ? 'text' : 'password'}
+          value={(this.state.button_text === 'confirm') ? this.state.password2 : this.state.password} />
+        <a href={'#'}
+           className={'PasswordShowHide'}
+           onClick={this.handleShowHideClick}>
+          <FontAwesomeIcon icon={this.state.show_password ? faEye : faEyeSlash} />
+        </a>
+      </div>
+    );
+  }
+};