1 files changed, 119 insertions, 0 deletions
diff --git a/ui/app/components/addressbook/key_list_item.js b/ui/app/components/addressbook/key_list_item.js
new file mode 100644
index 00000000..b8bdad36
--- /dev/null
+++ b/ui/app/components/addressbook/key_list_item.js
@@ -0,0 +1,119 @@
+//
+// A key in the list of keys
+//
+
+import React from 'react'
+import { Glyphicon, Button, ButtonToolbar, Label } from 'react-bootstrap'
+import bitmask from 'lib/bitmask'
+
+export default class KeyListItem extends React.Component {
+
+  static get defaultProps() {return{
+    data: null,             // the key as an Object 
+    account: null           // the account as an Account
+  }}
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      expanded: false,
+      hidden: false,
+      deleting: false,
+      error: null
+    }
+    this.toggle = this.toggle.bind(this)
+    this.delete = this.delete.bind(this)
+  }
+
+  toggle() {
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  delete() {
+    if (this.props.account.address == this.props.data.address) {
+      return  // please do not delete your own key
+    }
+
+    bitmask.keys.del(this.props.account.id, this.props.data.address, false).then(
+      key => {
+        this.setState({hidden: true})
+      },
+      error => {
+        this.setState({error: error})
+      }
+    )
+  }
+
+  render() {
+    if (this.state.hidden) {
+      return <div></div>
+    } else if (!this.props.data) {
+      return (
+        <div className="key-list-item">
+          NO KEY
+        </div>
+      )
+    }
+
+    let details = null
+    let expander = null
+    let alert = null
+    let deleteButton = null
+    let labelArray = []
+    let labels = null
+    let glyph = this.state.expanded ? 'triangle-bottom' : 'triangle-right'
+
+    if (this.state.error) {
+      alert = (
+        <Alert bsStyle="danger">{this.state.error}</Alert>
+      )
+    }
+
+    if (this.props.account.address != this.props.data.address) {
+      deleteButton = <Button onClick={this.delete}>Delete</Button>
+    } else {
+      labelArray.push(<Label key="owner" bsStyle="primary">Mine</Label>)
+      labelArray.push(<Label key="level" bsStyle="success">Verified</Label>)
+    }
+
+    if (!this.props.data.encr_used) {
+      labelArray.push(<Label key="used" bsStyle="default">Never Used</Label>)
+    }
+
+    if (this.state.expanded) {
+      details = (
+        <div className="details">
+          {alert}
+          Security Identifier: {this.props.data.fingerprint}<br />
+          Last Updated: {this.props.data.refreshed_at}<br />
+          Expires On: {this.props.data.expiry_date}<br />
+          <ButtonToolbar>
+            <Button onClick={this.toggle}>Close</Button>
+            {deleteButton}
+          </ButtonToolbar>
+        </div>
+      )
+    }
+
+    expander = (
+      <div className="expander">
+        <Glyphicon glyph={glyph} />
+      </div>
+    )
+
+    return (
+      <div className="key-list-item">
+        <div className="top-row clickable" onClick={this.toggle} >
+          <div className="labels pull-right">
+            {labelArray}
+          </div>
+          {expander}
+          <div className="address">
+            {this.props.data.address}
+          </div>
+        </div>
+        {details}
+      </div>
+    )
+  }
+}