Update 2017-02-15T15:15:05.952Z

app/tools/views/tools.html

@@ -5,5 +5,43 @@
     </h1>
 </section>
 <section class="content">
-    Several tools are available in the menu to the left. More tools coming soon...
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Import</h3>
+        </div>
+        <div class="box-body">
+            Quickly import your logins and other data from a previous bitwarden export or from another
+            password manager application.
+        </div>
+        <div class="box-footer">
+            <button class="btn btn-default btn-flat" type="button" ng-click="import()">Import Data</button>
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Export</h3>
+        </div>
+        <div class="box-body">
+            Export all of your vault data in <code>.csv</code> format.
+        </div>
+        <div class="box-footer">
+            <button class="btn btn-default btn-flat" type="button" ng-click="export()">Export Data</button>
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Password Generator</h3>
+        </div>
+        <div class="box-body">
+            Coming soon!
+        </div>
+    </div>
+    <div class="box box-default">
+        <div class="box-header with-border">
+            <h3 class="box-title">Audits</h3>
+        </div>
+        <div class="box-body">
+            Coming soon!
+        </div>
+    </div>
 </section>

app/tools/views/toolsExport.html

@@ -4,7 +4,12 @@
 </div>
 <form name="exportForm" ng-submit="exportForm.$valid && export(model)" api-form="exportPromise" ng-show="!startedExport">
     <div class="modal-body">
-        <p>Export all of your vault data in <code>.csv</code> format. Enter your master password to continue.</p>
+        <p>Enter your master password to continue.</p>
+        <div class="callout callout-warning">
+            <h4><i class="fa fa-warning"></i> Warning</h4>
+            This export contains your <u>unencrypted</u> data in <code>.csv</code> format. You should not store or send it
+            over unsecure channels (such as email). Delete it immediately after your are done using it.
+        </div>
         <div class="callout callout-danger validation-errors" ng-show="exportForm.$errors">
             <h4>Errors have occured</h4>
             <ul>

app/tools/views/toolsImport.html

@@ -5,7 +5,7 @@
 <form name="importForm" ng-submit="importForm.$valid && import(model)" ng-show="!processing">
     <div class="modal-body">
         <div class="form-group">
-            <label for="source">Source</label>
+            <label for="source">1. Select the source of this import file</label>
             <select id="source" name="source" class="form-control" ng-model="model.source" ng-change="setSource()">
                 <option ng-repeat="option in options" value="{{option.id}}">{{option.name}}</option>
             </select>
@@ -15,7 +15,7 @@
             <div ng-bind-html="source.instructions"></div>
         </div>
         <div class="form-group">
-            <label for="file">File</label>
+            <label for="file">2. Select the import file</label>
             <input type="file" id="file" name="file" required />
         </div>
     </div>

app/views/backendLayout.html

@@ -69,23 +69,6 @@
                 </li>
                 <li class="treeview" ng-class="{active: $state.includes('backend.tools')}">
                     <a ui-sref="backend.tools"><i class="fa fa-wrench"></i> <span>Tools</span></a>
-                    <ul class="treeview-menu">
-                        <li>
-                            <a href="javascript:void(0)" ng-click="import()">
-                                <i class="fa fa-circle-o"></i> Import
-                            </a>
-                        </li>
-                        <li>
-                            <a href="javascript:void(0)" ng-click="export()">
-                                <i class="fa fa-circle-o"></i> Export
-                            </a>
-                        </li>
-                        <li>
-                            <a href="javascript:void(0)" ng-click="audits()">
-                                <i class="fa fa-circle-o"></i> Audits
-                            </a>
-                        </li>
-                    </ul>
                 </li>
                 <li>
                     <a href="https://help.bitwarden.com/" target="_blank"

index.html

@@ -9,28 +9,28 @@
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
     <meta name="x-stylesheet-test-bs" content="" class="invisible" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('visibility','hidden',['lib\/bootstrap\/css\/bootstrap.min.css?v=s8hrfqolxr']);</script>
+    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('visibility','hidden',['lib\/bootstrap\/css\/bootstrap.min.css?v=xkidbanstt9']);</script>
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
     <meta name="x-stylesheet-test-fa" content="" class="fa" />
-    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('font-family','FontAwesome',['lib\/font-awesome\/css\/font-awesome.min.css?v=s8hrfqolxr']);</script>
+    <script>!function(a,b,c){var d,e=document,f=e.getElementsByTagName('SCRIPT'),g=f[f.length-1].previousElementSibling,h=e.defaultView&&e.defaultView.getComputedStyle?e.defaultView.getComputedStyle(g):g.currentStyle;if(h&&h[a]!==b)for(d=0;d<c.length;d++)e.write('<link rel="stylesheet" href="'+c[d]+'"/>')}('font-family','FontAwesome',['lib\/font-awesome\/css\/font-awesome.min.css?v=xkidbanstt9']);</script>
 
-    <link rel="stylesheet" href="css/vault.min.css?v=s8hrfqolxr" />
+    <link rel="stylesheet" href="css/vault.min.css?v=xkidbanstt9" />
 </head>
 <body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}">
     <div ui-view></div>
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
-    <script>(window.jQuery||document.write('<script src="lib\/jquery\/jquery.min.js?v=s8hrfqolxr"><\/script>'));</script>
+    <script>(window.jQuery||document.write('<script src="lib\/jquery\/jquery.min.js?v=xkidbanstt9"><\/script>'));</script>
 
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
-    <script>((window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal)||document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v=s8hrfqolxr"><\/script>'));</script>
+    <script>((window.jQuery&&window.jQuery.fn&&window.jQuery.fn.modal)||document.write('<script src="lib\/bootstrap\/js\/bootstrap.min.js?v=xkidbanstt9"><\/script>'));</script>
 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
-    <script>(window.angular||document.write('<script src="lib\/angular\/angular.min.js?v=s8hrfqolxr"><\/script>'));</script>
+    <script>(window.angular||document.write('<script src="lib\/angular\/angular.min.js?v=xkidbanstt9"><\/script>'));</script>
 
-    <script src="js/lib.min.js?v=s8hrfqolxr"></script>
+    <script src="js/lib.min.js?v=xkidbanstt9"></script>
-    <script src="js/app.min.js?v=s8hrfqolxr"></script>
+    <script src="js/app.min.js?v=xkidbanstt9"></script>
 
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){