From 5ba120030a7641a0404252fb7d8b05fced8ede30 Mon Sep 17 00:00:00 2001 From: elijah Date: Mon, 7 Nov 2016 22:23:42 -0800 Subject: ui: add initial addressbook panel --- ui/app/components/addressbook/addressbook.less | 34 ++++++++++ ui/app/components/addressbook/index.js | 80 +++++++++++++++++++++++ ui/app/components/layout/index.js | 62 ++++++++++++++++-- ui/app/components/layout/layout.less | 32 +++++++++- ui/app/components/main_panel/email_section.js | 26 +++++--- ui/app/components/main_panel/main_panel.less | 1 + ui/app/components/panel_switcher.js | 2 + ui/app/lib/event_logger.js | 87 ++++++++++++++------------ 8 files changed, 271 insertions(+), 53 deletions(-) create mode 100644 ui/app/components/addressbook/addressbook.less create mode 100644 ui/app/components/addressbook/index.js 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 = ( + {this.state.errorMsg} + ) + } + + keyList = list of keys goes here + + let buttons = ( + + ) + + let page = ( + + +
+ {buttons} +
+
+ {this.props.account.address} +

Addressbook

+
+ + + {alert} + {keyList} + + + ) + return page + } + +} diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js index 8e7c4b58..b32961a7 100644 --- a/ui/app/components/layout/index.js +++ b/ui/app/components/layout/index.js @@ -4,7 +4,8 @@ import './layout.less' class HorizontalLayout extends React.Component { static get defaultProps() {return{ - equalWidths: false + equalWidths: false, + className: '' }} constructor(props) { @@ -12,7 +13,7 @@ class HorizontalLayout extends React.Component { } render() { - let className = "horizontal-layout" + let className = "horizontal-layout " + this.props.className if (this.props.equalWidths) { className = className + " equal" + this.props.children.length } @@ -25,17 +26,70 @@ class HorizontalLayout extends React.Component { } class Column extends React.Component { + static get defaultProps() {return{ + className: '' + }} + + constructor(props) { + super(props) + } + + render() { + let className = "layout-column " + this.props.className + return ( +
+ {this.props.children} +
+ ) + } +} + +class VerticalLayout extends React.Component { + static get defaultProps() {return{ + equalWidths: false, + className: '' + }} + constructor(props) { super(props) } render() { + let className = "vertical-layout " + this.props.className + if (this.props.equalWidths) { + className = className + " equal" + this.props.children.length + } + return ( +
+ {this.props.children} +
+ ) + } +} + +class Row extends React.Component { + static get defaultProps() {return{ + className: '', + size: 'expand', + gutter: '' + }} + + constructor(props) { + super(props) + } + + render() { + let style = {} + if (this.props.gutter) { + style = {marginBottom: this.props.gutter} + } + let className = ["layout-row", this.props.className, this.props.size].join(" ") return ( -
+
{this.props.children}
) } } -export {HorizontalLayout, Column} \ No newline at end of file +export {HorizontalLayout, VerticalLayout, Column, Row} \ No newline at end of file diff --git a/ui/app/components/layout/layout.less b/ui/app/components/layout/layout.less index dae99aa3..81e61afb 100644 --- a/ui/app/components/layout/layout.less +++ b/ui/app/components/layout/layout.less @@ -22,4 +22,34 @@ .horizontal-layout.equal1 > .layout-column {width: 100%;} .horizontal-layout.equal2 > .layout-column {width: 50%;} .horizontal-layout.equal3 > .layout-column {width: 33.33%;} -.horizontal-layout.equal4 > .layout-column {width: 25%;} \ No newline at end of file +.horizontal-layout.equal4 > .layout-column {width: 25%;} + +.vertical-layout { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + > .layout-row { + //display: -webkit-flex; + //display: flex; + margin-bottom: @gutter; + &.expand { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + &.shrink { + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + } + } + > .layout-row:last-child { + margin-bottom: 0px; + } +} + +.vertical-layout.equal1 > .layout-row {width: 100%;} +.vertical-layout.equal2 > .layout-row {width: 50%;} +.vertical-layout.equal3 > .layout-row {width: 33.33%;} +.vertical-layout.equal4 > .layout-row {width: 25%;} diff --git a/ui/app/components/main_panel/email_section.js b/ui/app/components/main_panel/email_section.js index 2bb5865d..c86188eb 100644 --- a/ui/app/components/main_panel/email_section.js +++ b/ui/app/components/main_panel/email_section.js @@ -1,5 +1,5 @@ import React from 'react' -import { Button, Glyphicon, Alert } from 'react-bootstrap' +import { Button, Glyphicon, Alert, ButtonToolbar } from 'react-bootstrap' import SectionLayout from './section_layout' import IMAPButton from './imap_button' @@ -7,6 +7,7 @@ import IMAPButton from './imap_button' import Account from 'models/account' import Spinner from 'components/spinner' import bitmask from 'lib/bitmask' +import App from 'app' const GENERAL_NOTICES = [ "KEYMANAGER_KEY_FOUND", // (address) @@ -66,17 +67,17 @@ export default class EmailSection extends React.Component { expanded: true } this.expand = this.expand.bind(this) - this.openKeys = this.openKeys.bind(this) + this.openKeys = this.openKeys.bind(this) this.openApp = this.openApp.bind(this) this.openPrefs = this.openPrefs.bind(this) this.logEvent = this.logEvent.bind(this) } componentWillMount() { - let events = [].concat(GENERAL_NOTICES, ACCOUNT_NOTICES, STATUSES, STATUS_ERRORS) - for (let event of events) { - bitmask.events.register(event, this.logEvent) - } + //let events = [].concat(GENERAL_NOTICES, ACCOUNT_NOTICES, STATUSES, STATUS_ERRORS) + //for (let event of events) { + // bitmask.events.register(event, this.logEvent) + //} bitmask.mail.status().then(status => { // either 'running' or 'disabled' let newstatus = 'error' @@ -93,8 +94,12 @@ export default class EmailSection extends React.Component { console.log("EVENT: " + event, msg) } - openKeys() {} + openKeys() { + App.show('addressbook', {account: this.props.account}) + } + openApp() {} + openPrefs() {} expand() { @@ -113,14 +118,17 @@ export default class EmailSection extends React.Component { let body = null let header =

Mail

if (this.state.status == 'on') { - button = + // button = } if (this.state.status == 'disabled') { header =

Mail Disabled

} if (this.state.expanded) { body = ( - + + + + ) } return ( diff --git a/ui/app/components/main_panel/main_panel.less b/ui/app/components/main_panel/main_panel.less index 7383a6c8..2f4156a0 100644 --- a/ui/app/components/main_panel/main_panel.less +++ b/ui/app/components/main_panel/main_panel.less @@ -241,6 +241,7 @@ padding: 0; font-size: @icon-size - 10; line-height: @icon-size; + word-break: break-all; } } .buttons { diff --git a/ui/app/components/panel_switcher.js b/ui/app/components/panel_switcher.js index 2746f005..0e3f0dcd 100644 --- a/ui/app/components/panel_switcher.js +++ b/ui/app/components/panel_switcher.js @@ -6,6 +6,7 @@ import Splash from './splash' import GreeterPanel from './greeter_panel' import MainPanel from './main_panel' import Wizard from './wizard' +import Addressbook from './addressbook' import App from 'app' import 'lib/common' @@ -55,5 +56,6 @@ export default class PanelSwitcher extends React.Component { render_wizard(props) {return elem(Wizard, props)} render_greeter(props) {return elem(GreeterPanel, props)} render_main(props) {return elem(MainPanel, props)} + render_addressbook(props) {return elem(Addressbook, props)} } diff --git a/ui/app/lib/event_logger.js b/ui/app/lib/event_logger.js index 368b5cec..fac1a510 100644 --- a/ui/app/lib/event_logger.js +++ b/ui/app/lib/event_logger.js @@ -1,54 +1,63 @@ import bitmask from 'lib/bitmask' -const GENERAL_NOTICES = [ - "KEYMANAGER_KEY_FOUND", // (address) - "KEYMANAGER_KEY_NOT_FOUND", // (address) - "KEYMANAGER_LOOKING_FOR_KEY", // (address) - "KEYMANAGER_DONE_UPLOADING_KEYS", // (address) - - "SMTP_START_ENCRYPT_AND_SIGN", // (from_addr) - "SMTP_END_ENCRYPT_AND_SIGN", // (from_addr) - "SMTP_START_SIGN", // (from_addr) - "SMTP_END_SIGN", // (from_addr) - "SMTP_SEND_MESSAGE_START", // (from_addr) - "SMTP_SEND_MESSAGE_SUCCESS" // (from_addr) -] +const EVENTS = [ + "CLIENT_SESSION_ID", + "CLIENT_UID", + "RAISE_WINDOW", + "UPDATER_DONE_UPDATING", + "UPDATER_NEW_UPDATES", -const ACCOUNT_NOTICES = [ - "IMAP_CLIENT_LOGIN", // (username) + "KEYMANAGER_DONE_UPLOADING_KEYS", // (address) + "KEYMANAGER_FINISHED_KEY_GENERATION", // (address) + "KEYMANAGER_KEY_FOUND", // (address) + "KEYMANAGER_KEY_NOT_FOUND", // (address) + "KEYMANAGER_LOOKING_FOR_KEY", // (address) + "KEYMANAGER_STARTED_KEY_GENERATION", // (address) - "MAIL_FETCHED_INCOMING", // (userid) - "MAIL_MSG_DECRYPTED", // (userid) - "MAIL_MSG_DELETED_INCOMING", // (userid) - "MAIL_MSG_PROCESSING", // (userid) - "MAIL_MSG_SAVED_LOCALLY", // (userid) + "SOLEDAD_CREATING_KEYS", // {uuid, userid} + "SOLEDAD_DONE_CREATING_KEYS", // {uuid, userid} + "SOLEDAD_DONE_DATA_SYNC", // {uuid, userid} + "SOLEDAD_DONE_DOWNLOADING_KEYS", // {uuid, userid} + "SOLEDAD_DONE_UPLOADING_KEYS", // {uuid, userid} + "SOLEDAD_DOWNLOADING_KEYS", // {uuid, userid} + "SOLEDAD_INVALID_AUTH_TOKEN", // {uuid, userid} + "SOLEDAD_SYNC_RECEIVE_STATUS", // {uuid, userid} + "SOLEDAD_SYNC_SEND_STATUS", // {uuid, userid} + "SOLEDAD_UPLOADING_KEYS", // {uuid, userid} + "SOLEDAD_NEW_DATA_TO_SYNC", - "SMTP_RECIPIENT_ACCEPTED_ENCRYPTED", // (userid, dest) - "SMTP_RECIPIENT_ACCEPTED_UNENCRYPTED", // (userid, dest) - "SMTP_RECIPIENT_REJECTED", // (userid, dest) - "SMTP_SEND_MESSAGE_ERROR" // (userid, dest) -] + "MAIL_FETCHED_INCOMING", // (userid) + "MAIL_MSG_DECRYPTED", // (userid) + "MAIL_MSG_DELETED_INCOMING", // (userid) + "MAIL_MSG_PROCESSING", // (userid) + "MAIL_MSG_SAVED_LOCALLY", // (userid) + "MAIL_UNREAD_MESSAGES", // (userid, number) -const STATUSES = [ - "KEYMANAGER_FINISHED_KEY_GENERATION", // (address) - "KEYMANAGER_STARTED_KEY_GENERATION", // (address) - "SMTP_SERVICE_STARTED", - "MAIL_UNREAD_MESSAGES", // (userid, number) - "IMAP_SERVICE_STARTED" -] + "IMAP_SERVICE_STARTED", + "IMAP_SERVICE_FAILED_TO_START", + "IMAP_UNHANDLED_ERROR", + "IMAP_CLIENT_LOGIN", // (username) -const STATUS_ERRORS = [ - "IMAP_SERVICE_FAILED_TO_START", - "IMAP_UNHANDLED_ERROR", - "SMTP_SERVICE_FAILED_TO_START", - "SMTP_CONNECTION_LOST", // (userid, dest) + "SMTP_SERVICE_STARTED", + "SMTP_SERVICE_FAILED_TO_START", + "SMTP_START_ENCRYPT_AND_SIGN", // (from_addr) + "SMTP_END_ENCRYPT_AND_SIGN", // (from_addr) + "SMTP_START_SIGN", // (from_addr) + "SMTP_END_SIGN", // (from_addr) + "SMTP_SEND_MESSAGE_START", // (from_addr) + "SMTP_SEND_MESSAGE_SUCCESS", // (from_addr) + "SMTP_RECIPIENT_ACCEPTED_ENCRYPTED", // (userid, dest) + "SMTP_RECIPIENT_ACCEPTED_UNENCRYPTED", // (userid, dest) + "SMTP_CONNECTION_LOST", // (userid, dest) + "SMTP_RECIPIENT_REJECTED", // (userid, dest) + "SMTP_SEND_MESSAGE_ERROR" // (userid, dest) ] + export default class EventLogger { constructor() { this.logEvent = this.logEvent.bind(this) - let events = [].concat(GENERAL_NOTICES, ACCOUNT_NOTICES, STATUSES, STATUS_ERRORS) - for (let event of events) { + for (let event of EVENTS) { console.log('register event ' + event) bitmask.events.register(event, this.logEvent) } -- cgit v1.2.3