Fixing conflict

app/components/Health/Health.jsx

@@ -1,44 +1,79 @@
 import React, { PropTypes } from 'react'
 import styles from './health.css';
 import Paper from 'material-ui/Paper';
+import { green500, red500, yellow500 } from 'material-ui/styles/colors.js'
+import _ from 'lodash';
 
 class Health extends React.Component {
     constructor(props) {
       super(props);
       this.renderCluster = this.renderCluster.bind(this);
       this.state = {
-          cluster: {
-            cluster_id: "c9abceea-4f46-4dab-a688-5ce55f89e228",
-            cluster_name: "vault-cluster-5515c810",
-            version: "0.6.1-dev",
-            server_time_utc: 1469555798,
-            standby: false,
-            sealed: false,
-            initialized: true
-          }
+        cluster : [
+            {
+                id: "c9abceea-4f46-4dab-a688-5ce55f89e227",
+                name: "vault-cluster-5515c810",
+                version: "0.6.1-dev",
+                level: 0,
+                message: 'blah'
+            }, {
+                id: "c9abceea-4f46-4dab-a688-5ce55f89e228",
+                name: "vault-cluster-5515c810",
+                version: "0.6.1-dev",
+                level: 1,
+                message: 'boh'
+            }, {
+                id: "c9abceea-4f46-4dab-a688-5ce55f89e229",
+                name: "vault-cluster-5515c810",
+                version: "0.6.1-dev",
+                level: 2,
+                message: 'argh'
+            }, {
+                id: "c9abceea-4f46-4dab-a688-5ce55f89e230",
+                name: "vault-cluster-5515c810",
+                version: "0.6.1-dev",
+                level: 0,
+                message: 'la'
+            }
+        ]
       }
     }
 
     renderCluster() {
-        return (
-            <div className="col-xs-12 col-sm-6 col-md-4 col-lg-3 center-xs">
-            <Paper zDepth={1}>
-                <div className={styles.cluster}>
-                    <div>{this.state.cluster.cluster_id}</div>
-                    <div>{this.state.cluster.cluster_name}</div>
-                    <div>{this.state.cluster.version}</div>
-                </div>
-            </Paper>
-        </div>
-        );
+        let chooseColor = (level) => {
+            switch (level) {
+                case 1:
+                    return yellow500;
+                case 2:
+                    return red500;
+                default:
+                    return green500;
+            }
+        }
+        return _.map(this.state.cluster, box => {
+            return (
+                <div key={box.id} className="col-xs-12 col-sm-6 col-md-4 col-lg-3 center-xs">
+                <Paper zDepth={1}>
+                    <div className={styles.cluster}>
+                        <div className={styles.status} style={{backgroundColor: chooseColor(box.level)}}></div>
+                        <div>{box.id}</div>
+                        <div>{box.name}</div>
+                        <div>{box.version}</div>
+                        <div>{box.message}</div>
+                    </div>
+                </Paper>
+            </div>
+            );
+        })
+
     }
 
     render () {
         return (
             <div>
                 <h1 id={styles.welcomeHeadline}>Health</h1>
                 <p>Here you can view the health of your Vault cluster.</p>
-                <div className="row space-around-xs">{this.renderCluster()}{this.renderCluster()}{this.renderCluster()}{this.renderCluster()}</div>
+                <div className="row space-around-xs">{this.renderCluster()}</div>
             </div>
         )
     }

app/components/Health/health.css

@@ -4,6 +4,16 @@
 }
 
 .cluster {
-    padding: 10px;
+    padding: 20px;
+    position: relative;
     margin-bottom: 10px;
 }
+
+.status {
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    border-radius: 50%;
+}

app/components/Home/Home.jsx

@@ -4,6 +4,7 @@ import Menu from '../shared/Menu/Menu.jsx';
 import styles from './home.css';
 import Secrets from '../Secrets/Secrets.jsx';
 import Health from '../Health/Health.jsx';
+import Settings from '../Settings/Settings.jsx';
 import Snackbar from 'material-ui/Snackbar';
 import { green500, red500, yellow500 } from 'material-ui/styles/colors.js'
 import axios from 'axios';
@@ -21,6 +22,9 @@ export default class Home extends React.Component {
     }
 
     componentDidMount() {
+        if (!window.localStorage.getItem('showDeleteModal')) {
+            window.localStorage.setItem('showDeleteModal', 'true');
+        }
         document.addEventListener("snackbar", (e) => {
             this.setState({
                 snackbarMessage: e.detail.message,
@@ -77,7 +81,9 @@ export default class Home extends React.Component {
             case '/secrets':
                 return <Secrets secrets={this.state.secrets} />
             case '/health':
-                return <Health />
+                return <Health/>
+            case '/settings':
+                return <Settings/>
             default:
                 return (
                     <div>

app/components/Login/Login.jsx

@@ -36,6 +36,7 @@ export default class Login extends React.Component {
             });
         }
 
+
         this.setState({ show: true});
     }
 
@@ -125,7 +126,7 @@ export default class Login extends React.Component {
                             />
                         </div>
                         <div className="col-xs-1">
-                            <IconButton tooltip="Settings" onClick={() => this.setState({promptForVaultUrl: true})}>
+                            <IconButton tooltip="Settings" onTouchTap={() => this.setState({promptForVaultUrl: true})}>
                                 <Settings/>
                             </IconButton>
                         </div>

app/components/Secrets/Secrets.jsx

@@ -1,16 +1,17 @@
 import React, { PropTypes } from 'react';
 import IconButton from 'material-ui/IconButton';
+import FontIcon from 'material-ui/FontIcon';
 import { List, ListItem } from 'material-ui/List';
 import Edit from 'material-ui/svg-icons/editor/mode-edit';
 import Copy from 'material-ui/svg-icons/action/assignment';
-import Delete from 'material-ui/svg-icons/action/delete';
+import Checkbox from 'material-ui/Checkbox';
 import styles from './secrets.css';
 import _ from 'lodash';
 import copy from 'copy-to-clipboard';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import TextField from 'material-ui/TextField';
-import { green500, green400, red500, yellow500, white } from 'material-ui/styles/colors.js'
+import { green500, green400, red500, red300, yellow500, white } from 'material-ui/styles/colors.js'
 
 const copyEvent = new CustomEvent("snackbar", {
   detail: {
@@ -25,11 +26,14 @@ class Secrets extends React.Component {
           openEditModal: false,
           openNewKeyModal: false,
           newKeyErrorMessage: '',
-          editingKey: -1
+          openDeleteModal: false,
+          editingKey: -1,
+          deletingKey: ''
       }
       this.renderSecrets = this.renderSecrets.bind(this);
       this.renderEditDialog = this.renderEditDialog.bind(this);
       this.renderNewKeyDialog = this.renderNewKeyDialog.bind(this);
+      this.renderDeleteConfirmationDialog = this.renderDeleteConfirmationDialog.bind(this);
       this.copyText = this.copyText.bind(this);
       this.deleteKey = this.deleteKey.bind(this);
     }
@@ -45,6 +49,10 @@ class Secrets extends React.Component {
             key: key
           }
         }));
+        this.setState({
+            deletingKey: '',
+            openDeleteModal: false
+        });
     }
 
     renderEditDialog() {
@@ -78,6 +86,27 @@ class Secrets extends React.Component {
         );
     }
 
+    renderDeleteConfirmationDialog() {
+        const actions = [
+            <FlatButton label="Cancel" primary={true} onTouchTap={() => this.setState({ openDeleteModal: false, deletingKey: '' })}/>,
+            <FlatButton label="Delete" style={{color: white}} hoverColor={red300} backgroundColor={red500} primary={true} onTouchTap={() => this.deleteKey(this.state.deletingKey)}/>
+        ];
+
+        return (
+            <Dialog
+                title={`Delete Confirmation`}
+                modal={false}
+                actions={actions}
+                open={this.state.openDeleteModal}
+                onRequestClose={() => this.setState({openDeleteModal: false, newKeyErrorMessage: ''})}
+            >
+
+            <p>You are about to permanently delete {this.state.deletingKey}.  Are you sure?</p>
+            <em>To disable this prompt, visit the settings page.</em>
+            </Dialog>
+        )
+    }
+
     renderNewKeyDialog() {
         const MISSING_KEY_ERROR = "Key cannot be empty.";
         const DUPLICATE_KEY_ERROR = `Key ${this.state.newKey.key} already exists.`;
@@ -160,14 +189,22 @@ class Secrets extends React.Component {
         return _.map(this.props.secrets, (secret) => {
             return (
                 <ListItem
+                    style={{marginLeft: -17}}
                     key={secret.key}
-                    onClick={() => this.setState({ openEditModal: true, editingKey: secret.key })}
+                    onTouchTap={() => this.setState({ openEditModal: true, editingKey: secret.key })}
                     primaryText={<div className={styles.key}>{secret.key}</div>}
                     secondaryText={<div className={styles.key}>{secret.value}</div>}
                     rightIconButton={<IconButton
                         tooltip="Delete"
-                        onTouchTap={() => this.deleteKey(secret.key)}>
-                            <Delete/>
+                        onTouchTap={() => {
+                            if (window.localStorage.getItem("showDeleteModal") === 'false') {
+                                this.deleteKey(secret.key);
+                            } else {
+                                this.setState({ deletingKey: secret.key, openDeleteModal: true })
+                            }
+                        }}
+                            >
+                            <FontIcon className="fa fa-times-circle" color={red500}/>
                         </IconButton>}>
                 </ListItem>
             );
@@ -179,6 +216,7 @@ class Secrets extends React.Component {
             <div>
                 {this.state.openEditModal && this.renderEditDialog()}
                 {this.state.openNewKeyModal && this.renderNewKeyDialog()}
+                {this.state.openDeleteModal && this.renderDeleteConfirmationDialog()}
                 <h1 id={styles.welcomeHeadline}>Secrets</h1>
                 <p>Here you can view, update, and delete keys stored in your Vault.  Just remember, <span className={styles.error}>deleting keys cannot be undone!</span></p>
                 <FlatButton

app/components/Settings/Settings.jsx

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react';
+import TextField from 'material-ui/TextField';
+import Checkbox from 'material-ui/Checkbox';
+import styles from './settings.css';
+
+class Settings extends React.Component {
+    constructor(props) {
+      super(props);
+      this.setDeleteDialogPreference = this.setDeleteDialogPreference.bind(this);
+    }
+
+    setDeleteDialogPreference(e, isChecked) {
+        if (isChecked) {
+            window.localStorage.setItem('showDeleteModal','true');
+        } else {
+            window.localStorage.setItem('showDeleteModal', 'false')
+        }
+    }
+
+    render () {
+        return (
+            <div>
+                <h1 id={styles.welcomeHeadline}>Settings</h1>
+                <p>Customize your settings here.</p>
+                <p>You are currently connected to the Vault cluster on
+                    <span className={styles.code}>{window.localStorage.getItem('vaultUrl')}</span>.
+                To switch this, you will need to logout.</p>
+            <Checkbox
+                label="Warn Dialog Before Delete"
+                onCheck={this.setDeleteDialogPreference}
+                defaultChecked={window.localStorage.getItem('showDeleteModal') === 'true'}/>
+            </div>
+        )
+    }
+}
+
+export default Settings;

app/components/Settings/settings.css

@@ -0,0 +1,12 @@
+#welcomeHeadline {
+    font-size: 60px;
+    font-weight: 200;
+}
+
+.code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+}

app/components/shared/Header/Header.jsx

@@ -20,7 +20,7 @@ class Header extends React.Component {
                 title={<span id={styles.title}>Vault</span>}
                 onTitleTouchTap={() => browserHistory.push('/')}
                 iconElementLeft={<IconButton href={'https://github.com/Lucretius/vault_ui'}><FontIcon className="fa fa-github"></FontIcon></IconButton>}
-                iconElementRight={<FlatButton onClick={logout} label="Logout" />}
+                iconElementRight={<FlatButton onTouchTap={logout} label="Logout" />}
               />
           </div>
         )

app/components/shared/Menu/Menu.jsx

@@ -23,6 +23,9 @@ class Menu extends React.Component {
                 <div>
                     <p className={`${styles.link}  ${this.applyActiveLink('/health')}`} onClick={() => browserHistory.push('/health')}>Health</p>
                 </div>
+                <div>
+                    <p className={`${styles.link}  ${this.applyActiveLink('/settings')}`} onClick={() => browserHistory.push('/settings')}>Settings</p>
+                </div>
             </div>
         );
     }