Add ToggleVisibility Component

ui/src/component/ToggleVisibility.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import Typography from 'material-ui/Typography';
+import IconButton from 'material-ui/IconButton';
+import VisibilityOff from 'material-ui-icons/VisibilityOff';
+import Visibility from 'material-ui-icons/Visibility';
+import PropTypes from 'prop-types';
+
+class ToggleVisibility extends Component {
+    static propTypes = {
+        value: PropTypes.string.isRequired,
+        style: PropTypes.object,
+    };
+
+    constructor() {
+        super();
+        this.state = {visible: false};
+    }
+
+    toggleVisibility = () => this.setState({visible: !this.state.visible});
+
+    render() {
+        const {value, style} = this.props;
+        const text = this.state.visible ? value : '•••••••••••••••';
+        return (
+            <div style={style}>
+                <IconButton onClick={this.toggleVisibility}>
+                    {this.state.visible ? <VisibilityOff/> : <Visibility/>}
+                </IconButton>
+                <Typography style={{fontFamily: '\'Roboto Mono\', monospace'}}>
+                    {text}
+                </Typography>
+            </div>
+        );
+    }
+}
+
+
+export default ToggleVisibility;