0.6.0

* Use extra route for disconnected/initial state
* Style connect screen properly
* Hide widget when connected in favor of custom UI
* Show account info in sidebar header

.scss-lint.yml

@@ -199,7 +199,7 @@ linters:
     style: one_space # or 'at_least_one_space', or 'no_space'
 
   SpaceBeforeBrace:
-    enabled: true
+    enabled: false
     style: space # or 'new_line'
     allow_single_line_padding: false
 

app/components/account-info/component.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+
+  classNames: ['account-info'],
+
+  userAddress: null,
+
+  username: computed('userAddress', function() {
+    return this.get('userAddress').split('@')[0];
+  }),
+
+  host: computed('userAddress', function() {
+    return '@' + this.get('userAddress').split('@')[1];
+  })
+
+});

app/components/account-info/template.hbs

@@ -0,0 +1,4 @@
+<span class="username">{{username}}</span>
+<br><span class="host">{{host}}</span>
+
+{{#link-to "disconnect" class="disconnect"}}disconnect{{/link-to}}

app/controllers/application.js

@@ -1,6 +1,6 @@
 import Controller from '@ember/controller';
 import EmberObject from '@ember/object';
-import { observer } from '@ember/object';
+import { computed, observer } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';
@@ -11,9 +11,14 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
+  userAddress: alias('storage.userAddress'),
   rootListing: alias('storage.rootListing'),
   currentDirPath: null,
 
+  connectedClass: computed('connected', function() {
+    return this.get('connected') ? 'connected' : 'disconnected';
+  }),
+
   categories: function() {
     let categories = [];
     let rootListing = this.get('rootListing');

app/controllers/inspect.js

@@ -12,4 +12,21 @@ export default Controller.extend({
 
   queryParams: ['path'],
 
+  actions: {
+
+    deleteItem () {
+      if (window.confirm('Sure?')) {
+        this.get('storage.client')
+            .remove(this.get('path')).then(() => {
+              this.transitionToRoute('index', {
+                queryParams: {
+                  path: this.get('currentDirPath')
+                }
+              });
+            });
+      }
+    }
+
+  }
+
 });

app/router.js

@@ -8,6 +8,8 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('inspect');
+  this.route('connect');
+  this.route('disconnect');
 });
 
 export default Router;

app/routes/application.js

@@ -1,5 +1,36 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import BodyClassMixin from 'ember-body-class/mixins/body-class';
 
-export default Route.extend({
+export default Route.extend(BodyClassMixin, {
+
+  storage: service(),
+
+  beforeModel () {
+    this.get('storage.rs').on('error', (error) => {
+      console.debug('rs.on error', error);
+      if (error.name === 'Unauthorized') {
+        this.handleUnauthorized();
+      } else {
+        alert('An unknown error occured. Please check the browser console for details.');
+      }
+    });
+  },
+
+  // We need to handle this here, so we can transitionTo
+  // the connect route
+  handleUnauthorized () {
+    // Ignore additional unauthorized events after the
+    // first one
+    if (this.get('storage.unauthorized')) { return; }
+
+    this.get('storage').setProperties({
+      unauthorized: true,
+      connecting: false,
+      connected: false
+    });
+
+    this.transitionTo('connect');
+  }
 
 });

app/routes/connect.js

@@ -0,0 +1,33 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { later } from '@ember/runloop';
+import { Promise } from 'rsvp';
+
+export default Route.extend({
+
+  storage: service(),
+
+  beforeModel() {
+    return this.waitForConnectionState().then(() => {
+      if (this.get('storage.connected')) {
+        this.transitionTo('index');
+      }
+    });
+  },
+
+  waitForConnectionState() {
+    let self = this;
+
+    return new Promise(resolve => {
+      function checkConnectingDone() {
+        if (self.get('storage.connecting')) {
+          later(checkConnectingDone, 20);
+        } else {
+          resolve();
+        }
+      }
+      checkConnectingDone();
+    });
+  }
+
+});

app/routes/disconnect.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+
+  storage: service(),
+
+  beforeModel() {
+    this.get('storage.rs').disconnect();
+    this.transitionTo('connect');
+  }
+
+});

app/routes/index.js

@@ -15,12 +15,14 @@ export default Route.extend({
   },
 
   beforeModel() {
-    return this.waitForConnectionState();
+    return this.waitForConnectionState().then(() => {
+      if (this.get('storage.disconnected')) {
+        this.transitionTo('connect');
+      }
+    });
   },
 
   model(params) {
-    if (this.get('storage.disconnected')) { return null; }
-
     let path = params.path;
 
     if (isEmpty(params.path)) { return null; }
@@ -35,7 +37,6 @@ export default Route.extend({
 
   setupController(controller, model) {
     this._super(controller, model);
-    if (this.get('storage.disconnected')) { return true; }
 
     if (isEmpty(this.get('storage.categories')) && this.get('storage.connected')) {
       this.get('storage').fetchRootListing();

app/services/storage.js

@@ -1,6 +1,7 @@
 import EmberObject from '@ember/object';
-import { computed, observer } from '@ember/object';
 import Service from '@ember/service';
+import { computed, observer } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 import RemoteStorage from 'npm:remotestoragejs';
 import Widget from 'npm:remotestorage-widget';
 import simpleContentType from 'inspektor/utils/simple-content-type';
@@ -11,6 +12,8 @@ export default Service.extend({
   widget: null,
   connecting: true,
   connected: false,
+  unauthorized: false,
+  userAddress: null,
   disconnected: computed.not('connected'),
   client: null,
   rootListing: null,
@@ -28,7 +31,7 @@ export default Service.extend({
     // });
 
     const widget = new Widget(rs, {
-      // leaveOpen: true
+      skipInitial: true
     });
 
     // Attach widget to DOM
@@ -43,6 +46,7 @@ export default Service.extend({
       console.debug('rs.on connected');
       this.set('connecting', false);
       this.set('connected', true);
+      this.set('userAddress', this.get('rs').remote.userAddress);
     });
 
     rs.on('not-connected', () => {
@@ -78,10 +82,17 @@ export default Service.extend({
     if (this.get('connected')) {
       this.fetchRootListing();
     } else {
-      this.set('rootListing', null);
+      this.clearLocalData();
     }
   }),
 
+  clearLocalData() {
+    this.setProperties({
+      userAddress: null,
+      rootListing: null
+    });
+  },
+
   fetchRootListing() {
     this.fetchListing('').then(items => {
       this.set('rootListing', items.sortBy('name'));
@@ -92,6 +103,8 @@ export default Service.extend({
     let items = [];
 
     return this.get('client').getListing(path).then(listing => {
+      if (isEmpty(listing)) { return []; }
+
       Object.keys(listing).forEach(name => {
         let item = listing[name];
         let type = item['Content-Type'] || 'folder';

app/styles/_colors.scss

@@ -4,7 +4,14 @@ $dark-grey-3: #aaa;
 $light-grey-1: #b5c3d1;
 $light-grey-2: #ececec;
 
+body {
+  background-color: #fff;
+  transition: background-color 0.2s linear;
+}
+
 #app-container {
+  background-color: #fff;
+
   > aside {
     background-color: $dark-grey-1;
     color: $light-grey-1;
@@ -19,7 +26,6 @@ $light-grey-2: #ececec;
   }
 
   > main {
-    // background-color: $dark-grey-2;
     background-color: #fff;
 
     > header {
@@ -32,4 +38,8 @@ $light-grey-2: #ececec;
       }
     }
   }
+
+  &.disconnected main {
+    background-color: $light-grey-2;
+  }
 }

app/styles/_layout.scss

@@ -3,12 +3,24 @@
 }
 
 #remotestorage-widget {
-  position: fixed;
-  top: 1rem;
-  right: 3rem;
-  z-index: 1;
+  display: none;
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  margin-left: -200px;
+  z-index: 23;
 }
 
+.connect #remotestorage-widget {
+  display: block;
+}
+
+// .index #remotestorage-widget {
+//   position: fixed;
+//   top: 1rem;
+//   right: 3rem;
+// }
+
 #app-container {
   position: absolute;
   top: 0;
@@ -21,24 +33,52 @@
   justify-content: flex-start;
   align-items: stretch;
 
-  > aside {
-    flex: 0 0 16rem;
-    overflow: auto;
-    padding: 2rem;
-
-    nav {
-      margin-top: 5rem;
-      margin-bottom: 4rem;
+  &.disconnected {
+    > aside {
+      flex: 0;
+      overflow: hidden;
     }
   }
 
+  &.connected {
+    > aside {
+      flex: 0 0 16rem;
+      overflow: auto;
+      padding: 2rem;
+    }
+  }
+
+  > aside {
+    transition: flex 0.2s ease-in;
+
+    .account-info {
+      height: 5rem;
+    }
+
+    // nav {
+    //   margin-top: 5rem;
+    //   margin-bottom: 4rem;
+    // }
+  }
+
   > main {
     flex: 1;
     overflow: auto;
     padding: 3rem 4rem;
 
     > header {
-      height: 4em;
+      height: 4rem;
+      display: flex;
+      flex-direction: row;
+
+      nav.breadcrumb-nav {
+        flex: 1;
+      }
+
+      nav.actions {
+        flex: 1;
+        text-align: right;
+      }
     }
   }
 }
@@ -53,11 +93,12 @@
     padding: 1.5rem 1px;
 
     &.content {
-      // foo
+      overflow: hidden;
     }
 
     &.meta {
       grid-column-start: 3;
+      overflow: hidden;
 
       dl {
         margin: 0;

app/styles/app.scss

@@ -16,6 +16,7 @@ body {
   padding: 0;
 }
 
+@import "components/account-info";
 @import "components/breadcrumb-nav";
 @import "components/categories-nav";
 @import "components/directory-listing";

app/styles/components/_account-info.scss

@@ -0,0 +1,28 @@
+.account-info {
+  position: relative;
+
+  .username {
+    font-size: 1.4rem;
+  }
+
+  .host {
+    font-size: 0.8rem;
+    opacity: 0.7;
+  }
+
+  .disconnect {
+    display: inline-block;
+    margin-left: 0.5rem;
+    font-size: 0.8rem;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+  }
+
+  &:hover {
+    .disconnect {
+      font-size: 0.8rem;
+      opacity: 1;
+    }
+  }
+
+}

app/styles/components/_file-preview.scss

@@ -1,8 +1,10 @@
 .file-preview {
 
   code {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
     word-break: break-all;
-    line-height: 1.5rem;
+    hyphens: none;
   }
 
   img {

app/templates/application.hbs

@@ -1,22 +1,11 @@
-<div id="app-container">
+<div id="app-container" class={{connectedClass}}>
   <aside>
     {{#if connected}}
+      {{account-info userAddress=userAddress}}
       {{categories-nav categories=categories}}
     {{/if}}
   </aside>
   <main>
-    <header>
-      {{#if connecting}}
-      <!-- Connecting... -->
-      {{else}}
-        {{#if connected}}
-          {{breadcrumb-nav currentDirPath=currentDirPath}}
-        {{else}}
-          Not connected.
-        {{/if}}
-      {{/if}}
-    </header>
-
     {{outlet}}
   </main>
 </div>

app/templates/disconnect.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/index.hbs

@@ -1,3 +1,7 @@
+<header>
+  {{breadcrumb-nav currentDirPath=currentDirPath}}
+</header>
+
 {{#if currentListing}}
   {{directory-listing items=currentListing}}
 {{/if}}

app/templates/inspect.hbs

@@ -1,3 +1,10 @@
+<header>
+  {{breadcrumb-nav currentDirPath=currentDirPath}}
+  <nav class="actions">
+    <button class="delete" {{action "deleteItem"}}>delete</button>
+  </nav>
+</header>
+
 <div class="inspect-details">
   <section class="content">
     {{file-preview metaData=model.documentMetaData

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inspektor",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": true,
   "description": "Inspect the contents of your remote storage",
   "license": "MIT",
@@ -21,6 +21,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
+    "ember-body-class": "^0.4.0",
     "ember-browserify": "^1.2.0",
     "ember-cli": "~2.16.2",
     "ember-cli-app-version": "^3.0.0",

tests/integration/components/account-info/component-test.js

@@ -0,0 +1,14 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('account-info', 'Integration | Component | account info', {
+  integration: true
+});
+
+test('it splits the user address into username and host', function(assert) {
+  this.set('userAddress', 'michielbdejong@unhosted.org');
+  this.render(hbs`{{account-info userAddress=userAddress}}`);
+
+  assert.equal(this.$('.username').text().trim(), 'michielbdejong');
+  assert.equal(this.$('.host').text().trim(), '@unhosted.org');
+});

tests/unit/routes/connect-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:connect', 'Unit | Route | connect', {
+  needs: ['service:storage']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

tests/unit/routes/disconnect-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:disconnect', 'Unit | Route | disconnect', {
+  needs: ['service:storage']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});