Password UI

src/containers/Configuration/ConfigurationItem/ConfigurationItem.js

@@ -4,13 +4,18 @@ import CheckBox from '../../../components/UI/CheckBox/CheckBox';
 import {connect} from 'react-redux';
 import {faInfoCircle} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {notifyInfo} from '../../../redux/actions/error_actions';
+import {
+  notifyError,
+  notifyInfo
+} from '../../../redux/actions/error_actions';
 import settings from '../../../assets/settings';
 import DropDown from '../../../components/UI/DropDown/DropDown';
+import Password from '../../../containers/UI/Password/Password';
 
 const mapDispatchToProps = dispatch => {
   return {
-    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg))
+    notifyError: msg => dispatch(notifyError(msg)),
+    notifyInfo: (title, msg) => dispatch(notifyInfo(title, msg)),
   }
 };
 
@@ -68,12 +73,29 @@ export default connect(null, mapDispatchToProps)(props => {
     break;
 
     case 'string':
-      data = <input onChange={e=>handleChanged(e)}
-                    autoFocus={props.autoFocus}
-                    className={'ConfigurationItemInput'}
+      if (props.template.subtype === 'password') {
+        data = (
+          <Password autoFocus={props.autoFocus}
+                    changed={s => handleChanged({
+                      target: {
+                        type: 'password',
+                        value: s,
+                      },
+                    })}
                     disabled={props.readOnly}
-                    type={'text'}
-                    value={props.value}/>;
+                    mismatchHandler={() => props.notifyError('Passwords do not match')}
+                    value={props.value} />
+        );
+      } else {
+        data =  (
+          <input onChange={e => handleChanged(e)}
+                 autoFocus={props.autoFocus}
+                 className={'ConfigurationItemInput'}
+                 disabled={props.readOnly}
+                 type={'text'}
+                 value={props.value}/>
+        );
+      }
     break;
 
     case 'uint8':
@@ -132,6 +154,21 @@ export default connect(null, mapDispatchToProps)(props => {
       );
     break;
 
+    case 'password':
+      data = (
+        <Password autoFocus={props.autoFocus}
+                  changed={s => handleChanged({
+                    target: {
+                      type: 'password',
+                      value: s,
+                    },
+                  })}
+                  disabled={props.readOnly}
+                  mismatchHandler={() => props.notifyError('Passwords do not match')}
+                  value={props.value} />
+      );
+    break;
+
     default:
       data = <div>{props.value}</div>;
   }