MUX-45 As User I want to see the mailvelope main dashboard

.gitignore

@@ -1,16 +1,26 @@
-*~
-.directory
-*.sublime*
-.svn
+# dependencies
+/node_modules
 bower_components
-/node_modules/
-tmp/
-build/
+
+# testing
+/coverage
+/tmp
+.travis/crx_signing.pem
+
+# build
+/build
 apidoc/
-.idea/
-atlassian-ide-plugin.xml
-mailvelope.iml
 cert/
-.DS_Store
-.travis/crx_signing.pem
 .eslintcache
+
+# editors
+*.sublime*
+atlassian-ide-plugin.xml
+.idea/
+
+# misc
+.DS_Store
+.svn
+*~
+.directory
+mailvelope.iml

Readme.md

@@ -57,15 +57,23 @@ Update your local repository:
     git pull origin dev && grunt
     # continue with 'grunt dist-cr' or 'grunt dist-ff'
 
-There are a few more tasks available through grunt:
+There are a few more tasks/tools available:
 
-* watch source code for changes and recompile if needed:
+* watch source code for changes and recompile if needed
 
-    grunt watch
+    `grunt watch`
+
+* test the firefox plugin
+
+  ```
+  node_modules/web-ext/bin/web-ext run --source-dir=./build/firefox
+  ```
+
+  It is possible to reload the plugin on changes, run the `grunt watch` task on another console terminal
 
 * reset repository
 
-    grunt clean
+    `grunt clean`
 
 ## Website
 

config/webpack.common.js

@@ -40,6 +40,20 @@ function react() {
           url: false
         }
       }]
+    },
+    {
+      test: /\.less$/,
+      use: [{
+        loader: "style-loader"
+      }, {
+        loader: "css-loader"
+      }, {
+        loader: "less-loader"
+      }]
+    },
+    {
+      test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+      loader: 'file-loader'
     }]
   };
 }

config/webpack.test.js

@@ -48,6 +48,20 @@ module.exports = {
           url: false
         }
       }]
+    },
+    {
+      test: /\.less$/,
+      use: [{
+        loader: "style-loader"
+      }, {
+        loader: "css-loader"
+      }, {
+        loader: "less-loader"
+      }]
+    },
+    {
+      test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
+      loader: 'file-loader'
     }]
   },
 

locales/en/messages.json

@@ -27,6 +27,26 @@
     "description": "Cleartext message read error message: $1: error message.",
     "message": "Could not read this cleartext message: $1"
   },
+  "dashboard_link_encrypt_decrypt_files": {
+    "description": "Dashboard encrypt decrypt files link",
+    "message": "Encrypt and decrypt files"
+  },
+  "dashboard_link_help": {
+    "description": "Dashboard help link",
+    "message": "Help"
+  },
+  "dashboard_link_manage_email_providers": {
+    "description": "Dashboard manage email providers link",
+    "message": "Manage email providers"
+  },
+  "dashboard_link_manage_keys": {
+    "description": "Dashboard manage keys link",
+    "message": "Manage keys"
+  },
+  "dashboard_link_view_security_log": {
+    "description": "Dashboard view security logs link",
+    "message": "View security logs"
+  },
   "decrypt_digital_signature": {
     "description": "Caption digital signature",
     "message": "Signed digitally"

package.json

@@ -20,6 +20,7 @@
     "dompurify": "^0.9.0",
     "emailjs-mime-builder": "^1.0.1",
     "emailjs-mime-codec": "github:mailvelope/emailjs-mime-codec#v1.0.2m",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
     "mailreader": "^1.0.0",
     "moment": "^2.18.1",
@@ -42,6 +43,7 @@
     "chai": "^4.1.1",
     "css-loader": "^0.28.4",
     "eslint-plugin-react": "^7.1.0",
+    "file-loader": "^0.11.2",
     "grunt": "^1.0.0",
     "grunt-bump": "^0.8.0",
     "grunt-contrib-clean": "^1.1.0",
@@ -57,6 +59,8 @@
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.5",
     "mocha": "^3.4.2",
     "sinon": "^3.2.1",
     "string-replace-loader": "^1.2.0",

src/app/app.js

@@ -17,10 +17,11 @@
 
 import mvelo from '../mvelo';
 import React from 'react';
-import {Route, Redirect} from 'react-router-dom';
+import {Route, Redirect, Link} from 'react-router-dom';
 import * as l10n from '../lib/l10n';
 import {NavLink, ProviderLogo} from './util/util';
 
+import Dashboard from './dashboard/Dashboard';
 import KeyringSelect from './keyring/components/KeyringSelect';
 import KeyGrid from './keyring/KeyGrid';
 import ImportKey from './keyring/importKey';
@@ -35,6 +36,7 @@ import WatchList from './settings/watchList';
 import SecurityLog from './settings/securityLog';
 import KeyServer from './settings/keyserver';
 
+import 'font-awesome/less/font-awesome.less';
 import './app.css';
 
 l10n.register([
@@ -200,7 +202,7 @@ export class App extends React.Component {
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
               </button>
-              <div className="navbar-brand settings-logo"></div>
+              <Link to="/dashboard" className="navbar-brand settings-logo"></Link>
             </div>
             <div className="collapse navbar-collapse bs-navbar-collapse">
               <ul className="nav navbar-nav" role="menu" aria-label="primary menu">
@@ -217,6 +219,7 @@ export class App extends React.Component {
         </nav>
         <div className="container" role="main">
           <div className="row">
+            <Route path='/dashboard' component={Dashboard}/>
             <Route path='/keyring' render={() => (
               <div>
                 <div className="col-md-3">

src/app/dashboard/Dashboard.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (C) 2017 Mailvelope GmbH
+ * Licensed under the GNU Affero General Public License version 3
+ */
+
+import React from 'react';
+import * as l10n from '../../lib/l10n';
+import {Link} from 'react-router-dom';
+import './Dashboard.less';
+
+l10n.register([
+  'dashboard_link_manage_keys',
+  'dashboard_link_encrypt_decrypt_files',
+  'dashboard_link_view_security_log',
+  'dashboard_link_manage_email_providers',
+  'dashboard_link_help'
+]);
+
+export default class Dashboard extends React.Component {
+  render() {
+    const mailvelopeHelpUrl = "https://www.mailvelope.com/en/help";
+    return (
+      <div className="container">
+        <div className="dashboard">
+          <div className="col-md-12">
+            <h3>Dashboard</h3>
+          </div>
+          <div className="col-md-3">
+            <Link to="/keyring/display" className="dashboard-item">
+              <i className="fa fa-key"></i>
+              <span>{l10n.map.dashboard_link_manage_keys}</span>
+            </Link>
+          </div>
+          <div className="col-md-3">
+            <Link to="/encryption/file-encrypt" className="dashboard-item">
+              <i className="fa fa-files-o"></i>
+              <span>{l10n.map.dashboard_link_encrypt_decrypt_files}</span>
+            </Link>
+          </div>
+          <div className="col-md-3">
+            <Link to="/settings/security-log" className="dashboard-item">
+              <i className="fa fa-eye"></i>
+              <span>{l10n.map.dashboard_link_view_security_log}</span>
+            </Link>
+          </div>
+          <div className="col-md-3">
+            <Link to="/settings/watchlist" className="dashboard-item">
+              <i className="fa fa-server"></i>
+              <span>{l10n.map.dashboard_link_manage_email_providers}</span>
+            </Link>
+          </div>
+          <div className="col-md-3">
+            <a href={mailvelopeHelpUrl} className="dashboard-item" target="_blank">
+              <i className="fa fa-question-circle"></i>
+              <span>{l10n.map.dashboard_link_help}</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/app/dashboard/Dashboard.less

@@ -0,0 +1,46 @@
+@import "../../res/less/colors";
+
+@dashboard-item-title-bg-color: @grey-light;
+@dashboard-item-title-bg-color-hover: darken(rgb(red(@grey-light), green(@grey-light), blue(@grey-light)), 2%);
+@dashboard-item-bg-color: rgb(255, 255, 255);
+@dashboard-item-bg-color-hover: darken(rgb(255, 255, 255), 2%);
+
+.dashboard {
+  a.dashboard-item {
+    display: block;
+    text-align: center;
+    margin-bottom: 2em;
+    background-color: @dashboard-item-bg-color;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    padding:1em 0 0 0;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: @dashboard-item-bg-color-hover;
+      text-decoration: none;
+      span {
+        background-color: @dashboard-item-title-bg-color-hover;
+      }
+      i.fa {
+        color: @grey-dark;
+      }
+    }
+
+    i.fa {
+      font-size: 5em;
+      margin:.25em;
+      color: @grey;
+    }
+    span {
+      display: block;
+      margin-top:1em;
+      color: @grey-dark;
+      padding: 0.5em;
+      background-color: @dashboard-item-title-bg-color;
+      transition: background-color 0.3s ease;
+    }
+  }
+}

src/controller/menu.controller.js

@@ -31,7 +31,7 @@ export default class MenuController extends sub.SubController {
         this.addToWatchList();
         break;
       case 'options':
-        this.loadOptions('#/keyring');
+        this.loadOptions('#/dashboard');
         break;
       case 'showlog':
         this.loadOptions('#/settings/security-log');

src/res/less/colors.less

@@ -0,0 +1,5 @@
+@grey-light: #f8f8f8;
+@grey-selected: #e7e7e7;
+@grey:#888;
+@grey-dark: #555555;
+@grey-darker: #333333;