More connect improvements

* 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

app/routes/application.js

@@ -1,5 +1,5 @@
 import Route from '@ember/routing/route';
+import BodyClassMixin from 'ember-body-class/mixins/body-class';
 
-export default Route.extend({
-
+export default Route.extend(BodyClassMixin, {
 });

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/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();