From bdf4109a8f9f7a4e3fc4e740e8c8a4d1658e66f5 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Thu, 15 Mar 2018 20:26:30 +0100
Subject: [PATCH] Add ToggleVisibility Component

---
 ui/src/component/ToggleVisibility.js | 38 ++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 ui/src/component/ToggleVisibility.js

diff --git a/ui/src/component/ToggleVisibility.js b/ui/src/component/ToggleVisibility.js
new file mode 100644
index 0000000..a75d52f
--- /dev/null
+++ b/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;