2 files changed, 114 insertions, 0 deletions

diff --git a/ui/app/components/addressbook/addressbook.less b/ui/app/components/addressbook/addressbook.less
new file mode 100644
index 00000000..53e505b6
--- /dev/null
+++ b/ui/app/components/addressbook/addressbook.less
@@ -0,0 +1,34 @@
+
+.body {
+  // background-color: #333;
+}
+
+.darkBg {
+  background-color: #333;
+  padding: 8px;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+
+  display: -webkit-flex;
+  display: flex;
+
+  .header {
+    .title {
+      font-weight: bold;
+      color: white;
+      display: inline-block;
+      //margin-left: 8px;
+      font-size: 120%;
+      h1 {
+        margin: 0px;
+      }
+    }
+  }
+}
+
+.lightFg {
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 15px;
+}
\ No newline at end of file
diff --git a/ui/app/components/addressbook/index.js b/ui/app/components/addressbook/index.js
new file mode 100644
index 00000000..74c119d3
--- /dev/null
+++ b/ui/app/components/addressbook/index.js
@@ -0,0 +1,80 @@
+//
+// Interface to the key manager
+//
+
+
+import React from 'react'
+import App from 'app'
+import { ButtonToolbar, Button, Glyphicon, Alert } from 'react-bootstrap'
+
+import {VerticalLayout, Row} from 'components/layout'
+import bitmask from 'lib/bitmask'
+import './addressbook.less'
+
+export default class Addressbook extends React.Component {
+
+  static get defaultProps() {return{
+    account: null
+  }}
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      keys: null,
+      errorMsg: ""
+    }
+    this.close = this.close.bind(this)
+  }
+
+  componentWillMount() {
+    bitmask.keys.list(true).then(keys => {
+      this.setState({keys: keys})
+    }, error => {
+      this.setState({errorMsg: error})
+    })
+  }
+
+  close() {
+    App.show('main', {initialAccount: this.props.account})
+  }
+
+  render() {
+    let alert = null
+    let keyList = null
+
+    if (this.state.errorMsg) {
+      alert = (
+        <Alert bsStyle="danger">{this.state.errorMsg}</Alert>
+      )
+    }
+
+    keyList = <b>list of keys goes here</b>
+
+    let buttons = (
+      <Button onClick={this.close} className="btn-inverse">
+        <Glyphicon glyph="remove" />&nbsp;
+        Close
+      </Button>
+    )
+
+    let page = (
+      <VerticalLayout className="darkBg">
+        <Row className="header" size="shrink" gutter="8px">
+          <div className="pull-right">
+            {buttons}
+          </div>
+          <div className="title">
+            {this.props.account.address}
+            <h1>Addressbook</h1>
+          </div>
+        </Row>
+        <Row className="lightFg" size="expand">
+          {alert}
+          {keyList}
+        </Row>
+      </VerticalLayout>
+    )
+    return page
+  }
+
+}