UI: Add hide/show component for credentials

monkey/monkey_island/cc/services/config_schema/basic.py

@@ -48,7 +48,9 @@ BASIC = {
                     "title": "Exploit password list",
                     "type": "array",
                     "uniqueItems": True,
-                    "items": {"type": "string"},
+                    "items": {
+                        "type": "string",
+                    },
                     "default": [
                         "root",
                         "123456",

monkey/monkey_island/cc/ui/src/components/configuration-components/UiSchema.js

@@ -3,6 +3,7 @@ import PbaInput from './PbaInput';
 import {API_PBA_LINUX, API_PBA_WINDOWS} from '../pages/ConfigurePage';
 import InfoBox from './InfoBox';
 import TextBox from './TextBox';
+import HideInput from '../ui-components/HideInput';
 
 export default function UiSchema(props) {
   const UiSchema = {
@@ -13,6 +14,13 @@ export default function UiSchema(props) {
           classNames: 'config-template-no-header',
           'ui:widget': AdvancedMultiSelect
         }
+      },
+      credentials : {
+        exploit_password_list: {
+            items: {
+            'ui:widget': HideInput
+            }
+         }
       }
     },
     basic_network: {

monkey/monkey_island/cc/ui/src/components/ui-components/HideInput.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {InputGroup, FormControl} from 'react-bootstrap';
+import '../../styles/components/HideInput.scss'
+
+class HideInput extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hidden: false
+    };
+    this.toggleShow = this.toggleShow.bind(this);
+  }
+
+  toggleShow() {
+    this.setState({hidden: ! this.state.hidden});
+  }
+
+  onChange(e) {
+    var value = e.target.value;
+    return this.props.onChange(value === '' ? this.props.options.emptyValue : value);
+  }
+
+  render() {
+    return (
+    <div>
+      <InputGroup className='mb-3'>
+        <FormControl
+            value={this.props.value || ''}
+            type={this.state.hidden ? 'text' : 'password'}
+            onChange={(event) => this.onChange(event)}
+        />
+        <InputGroup.Append>
+          <InputGroup.Text>
+            <i onClick={this.toggleShow} className={this.state.hidden ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
+          </InputGroup.Text>
+        </InputGroup.Append>
+      </InputGroup>
+    </div>
+    );
+  }
+}
+
+export default HideInput;

monkey/monkey_island/cc/ui/src/styles/components/HideInput.scss

@@ -0,0 +1,3 @@
+.eye-button{
+  padding: 5px !important;
+}