hide redacted value unless user wants to edit it

ui/src/kapacitor/components/config/AlertaConfig.js

@@ -1,5 +1,7 @@
 import React, {PropTypes} from 'react'
 
+import RedactedInput from './RedactedInput'
+
 const {bool, func, shape, string} = PropTypes
 
 const AlertaConfig = React.createClass({
@@ -57,20 +59,11 @@ const AlertaConfig = React.createClass({
 
         <div className="form-group col-xs-12">
           <label htmlFor="token">Token</label>
-          <input
-            className="form-control"
+          <RedactedInput
+            defaultValue={token}
             id="token"
-            type="text"
-            ref={r => this.token = r}
-            defaultValue={token || ''}
+            refFunc={r => this.token = r}
           />
-          <label className="form-helper">
-            Note: a value of
-            {' '}
-            <code>true</code>
-            {' '}
-            indicates the Alerta Token has been set
-          </label>
         </div>
 
         <div className="form-group col-xs-12">

ui/src/kapacitor/components/config/RedactedInput.js

@@ -0,0 +1,62 @@
+import React, {Component, PropTypes} from 'react'
+
+class RedactedInput extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      editing: false,
+    }
+  }
+
+  render() {
+    const {defaultValue, id, refFunc} = this.props
+    const {editing} = this.state
+
+    let component = null
+    if (defaultValue === true && !editing) {
+      component = (
+        <div>
+          <span>
+            Value set
+            <a
+              href="#"
+              onClick={() => {
+                this.setState({editing: true})
+              }}
+            >
+              (change it)
+            </a>
+          </span>
+          <input
+            className="form-control"
+            id={id}
+            type="hidden"
+            ref={refFunc}
+            defaultValue={defaultValue || ''}
+          />
+        </div>
+      )
+    } else {
+      component = (
+        <input
+          className="form-control"
+          id={id}
+          type="text"
+          ref={refFunc}
+          defaultValue={''}
+        />
+      )
+    }
+    return component
+  }
+}
+
+const {bool, func, string} = PropTypes
+
+RedactedInput.propTypes = {
+  id: string.isRequired,
+  defaultValue: bool.isRequired,
+  refFunc: func.isRequired,
+}
+
+export default RedactedInput