From b0ec2c13d8eef4ab722d6993907151b50bbf0ba6 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 03:11:46 -0700
Subject: [PATCH 1/9] Added edit profile modal

---
 app/components/components.js                  |  2 ++
 .../edit-profile-modal-directive.js           | 16 +++++++++
 .../edit-profile-modal.html                   | 34 +++++++++++++++++++
 .../edit-profile-modal/edit-profile-modal.js  |  6 ++++
 4 files changed, 58 insertions(+)
 create mode 100644 app/components/edit-profile-modal/edit-profile-modal-directive.js
 create mode 100644 app/components/edit-profile-modal/edit-profile-modal.html
 create mode 100644 app/components/edit-profile-modal/edit-profile-modal.js

diff --git a/app/components/components.js b/app/components/components.js
index 5bec6192..5a8f3af5 100644
--- a/app/components/components.js
+++ b/app/components/components.js
@@ -3,6 +3,7 @@ import angular from 'angular';
 import autoFocus from './auto-focus/auto-focus';
 import autoSelect from './auto-select/auto-select';
 import equalTo from './equal-to/equal-to';
+import editProfileModal from './edit-profile-modal/edit-profile-modal';
 import beginConversationModal from
   './begin-conversation-modal/begin-conversation-modal';
 import passwordPromptModal from
@@ -24,6 +25,7 @@ export default angular.module('toc.components', [
   autoFocus.name,
   autoSelect.name,
   equalTo.name,
+  editProfileModal.name,
   beginConversationModal.name,
   passwordPromptModal.name,
   channelCard.name,
diff --git a/app/components/edit-profile-modal/edit-profile-modal-directive.js b/app/components/edit-profile-modal/edit-profile-modal-directive.js
new file mode 100644
index 00000000..aeff8910
--- /dev/null
+++ b/app/components/edit-profile-modal/edit-profile-modal-directive.js
@@ -0,0 +1,16 @@
+import template from './edit-profile-modal.html!text';
+
+export let directiveName = 'tocEditProfileModal';
+export default /*@ngInject*/ function tocEditProfileModal() {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+      removeModal: '&'
+    },
+    controllerAs: 'editProfileModal',
+    controller: /*@ngInject*/ function EditProfileModalController(
+    ) {
+    }
+  };
+}
diff --git a/app/components/edit-profile-modal/edit-profile-modal.html b/app/components/edit-profile-modal/edit-profile-modal.html
new file mode 100644
index 00000000..3478863a
--- /dev/null
+++ b/app/components/edit-profile-modal/edit-profile-modal.html
@@ -0,0 +1,34 @@
+<ion-modal-view>
+  <ion-header-bar class="bar-royal">
+    <h1 class="title">Start a Conversation</h1>
+  </ion-header-bar>
+  <ion-content class="has-subfooter">
+    <div class="list">
+      <div class="item item-divider item-calm item-clear">
+        How would you like to start?
+      </div>
+    </div>
+  </ion-content>
+  <div class="bar bar-subfooter">
+    <div class="col">
+      <button type="button" ng-click="::beginConversationModal.showIdPopup()"
+        class="button button-outline button-block button-royal">
+        Show your own ID
+      </button>
+    </div>
+  </div>
+  <ion-footer-bar>
+    <div class="col">
+      <button class="button button-block button-outline button-calm"
+        ng-click="::beginConversationModal.hideModal()">
+        Cancel
+      </button>
+    </div>
+    <div class="col">
+      <button class="button button-block button-outline button-balanced"
+        ng-click="::beginConversationModal.doInvite()">
+        Start
+      </button>
+    </div>
+  </ion-footer-bar>
+</ion-modal-view>
diff --git a/app/components/edit-profile-modal/edit-profile-modal.js b/app/components/edit-profile-modal/edit-profile-modal.js
new file mode 100644
index 00000000..cf93b0a9
--- /dev/null
+++ b/app/components/edit-profile-modal/edit-profile-modal.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+
+import directive, { directiveName } from './edit-profile-modal-directive';
+
+export default angular.module('toc.components.edit-profile-modal', [])
+  .directive(directiveName, directive);

From fae25c84639f395331e159b61a86da750302c963 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 17:07:11 -0700
Subject: [PATCH 2/9] Added side options menu

Renamed edit profile modal
---
 app/app-menu.html                             |  6 ++-
 app/components/components.js                  |  6 ++-
 .../edit-profile-modal-directive.js           | 16 ------
 .../edit-profile-modal/edit-profile-modal.js  |  6 ---
 .../options-menu/options-menu-directive.js    | 51 +++++++++++++++++++
 app/components/options-menu/options-menu.html | 18 +++++++
 app/components/options-menu/options-menu.js   |  6 +++
 .../password-prompt-modal.html                | 11 ++--
 .../update-profile-modal-directive.js         | 16 ++++++
 .../update-profile-modal.html}                | 16 +++---
 .../update-profile-modal.js                   |  6 +++
 app/views/home/home-controller.js             | 25 ++++-----
 app/views/home/home.html                      | 12 +++--
 13 files changed, 139 insertions(+), 56 deletions(-)
 delete mode 100644 app/components/edit-profile-modal/edit-profile-modal-directive.js
 delete mode 100644 app/components/edit-profile-modal/edit-profile-modal.js
 create mode 100644 app/components/options-menu/options-menu-directive.js
 create mode 100644 app/components/options-menu/options-menu.html
 create mode 100644 app/components/options-menu/options-menu.js
 create mode 100644 app/components/update-profile-modal/update-profile-modal-directive.js
 rename app/components/{edit-profile-modal/edit-profile-modal.html => update-profile-modal/update-profile-modal.html} (71%)
 create mode 100644 app/components/update-profile-modal/update-profile-modal.js

diff --git a/app/app-menu.html b/app/app-menu.html
index 75deb4c0..23c9b3bc 100644
--- a/app/app-menu.html
+++ b/app/app-menu.html
@@ -10,7 +10,8 @@
         </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="right">
-        <button class="button button-icon button-clear ion-navicon">
+        <button menu-toggle="right"
+          class="button button-icon button-clear ion-navicon">
         </button>
       </ion-nav-buttons>
     </ion-nav-bar>
@@ -20,4 +21,7 @@
   <ion-side-menu side="left" expose-aside-when="large">
     <toc-conversations-menu></toc-conversations-menu>
   </ion-side-menu>
+  <ion-side-menu side="right" expose-aside-when="large">
+    <toc-options-menu></toc-options-menu>
+  </ion-side-menu>
 </ion-side-menus>
diff --git a/app/components/components.js b/app/components/components.js
index 5a8f3af5..6c72bf4e 100644
--- a/app/components/components.js
+++ b/app/components/components.js
@@ -3,7 +3,7 @@ import angular from 'angular';
 import autoFocus from './auto-focus/auto-focus';
 import autoSelect from './auto-select/auto-select';
 import equalTo from './equal-to/equal-to';
-import editProfileModal from './edit-profile-modal/edit-profile-modal';
+import updateProfileModal from './update-profile-modal/update-profile-modal';
 import beginConversationModal from
   './begin-conversation-modal/begin-conversation-modal';
 import passwordPromptModal from
@@ -18,6 +18,7 @@ import notificationList from './notification-list/notification-list';
 import notificationOverlay from './notification-overlay/notification-overlay';
 import qrImage from './qr-image/qr-image';
 import conversationsMenu from './conversations-menu/conversations-menu';
+import optionsMenu from './options-menu/options-menu';
 import spinnerButton from './spinner-button/spinner-button';
 import userCard from './user-card/user-card';
 
@@ -25,7 +26,7 @@ export default angular.module('toc.components', [
   autoFocus.name,
   autoSelect.name,
   equalTo.name,
-  editProfileModal.name,
+  updateProfileModal.name,
   beginConversationModal.name,
   passwordPromptModal.name,
   channelCard.name,
@@ -38,6 +39,7 @@ export default angular.module('toc.components', [
   notificationOverlay.name,
   qrImage.name,
   conversationsMenu.name,
+  optionsMenu.name,
   spinnerButton.name,
   userCard.name
 ]);
diff --git a/app/components/edit-profile-modal/edit-profile-modal-directive.js b/app/components/edit-profile-modal/edit-profile-modal-directive.js
deleted file mode 100644
index aeff8910..00000000
--- a/app/components/edit-profile-modal/edit-profile-modal-directive.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import template from './edit-profile-modal.html!text';
-
-export let directiveName = 'tocEditProfileModal';
-export default /*@ngInject*/ function tocEditProfileModal() {
-  return {
-    restrict: 'E',
-    template: template,
-    scope: {
-      removeModal: '&'
-    },
-    controllerAs: 'editProfileModal',
-    controller: /*@ngInject*/ function EditProfileModalController(
-    ) {
-    }
-  };
-}
diff --git a/app/components/edit-profile-modal/edit-profile-modal.js b/app/components/edit-profile-modal/edit-profile-modal.js
deleted file mode 100644
index cf93b0a9..00000000
--- a/app/components/edit-profile-modal/edit-profile-modal.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import angular from 'angular';
-
-import directive, { directiveName } from './edit-profile-modal-directive';
-
-export default angular.module('toc.components.edit-profile-modal', [])
-  .directive(directiveName, directive);
diff --git a/app/components/options-menu/options-menu-directive.js b/app/components/options-menu/options-menu-directive.js
new file mode 100644
index 00000000..0d3b2ab1
--- /dev/null
+++ b/app/components/options-menu/options-menu-directive.js
@@ -0,0 +1,51 @@
+import template from './options-menu.html!text';
+
+export let directiveName = 'tocOptionsMenu';
+export default /*@ngInject*/ function tocOptionsMenu() {
+  return {
+    restrict: 'E',
+    template: template,
+    controllerAs: 'optionsMenu',
+    controller: /*@ngInject*/ function OptionsMenuController(
+      $ionicPopup,
+      session,
+      state
+    ) {
+      this.showDeleteDataConfirm = function showDeleteDataConfirm() {
+        let deleteDataPopup = $ionicPopup.confirm({
+          title: 'Delete Data',
+          template: 'Absolutely sure you\'d like to delete all local data?',
+          okText: 'Delete local data',
+          okType: 'button-assertive button-outline',
+          cancelType: 'button-calm button-outline'
+        });
+
+        deleteDataPopup.then((response) => {
+          if (!response) {
+            return;
+          }
+
+          return state.destroy();
+        });
+      };
+
+      this.showSignoutConfirm = function showSignoutConfirm() {
+        let signoutPopup = $ionicPopup.confirm({
+          title: 'Sign Out',
+          template: 'Are you sure you\'d like to sign out of Toc?',
+          okText: 'Sign out',
+          okType: 'button-assertive button-outline',
+          cancelType: 'button-calm button-outline'
+        });
+
+        signoutPopup.then((response) => {
+          if (!response) {
+            return;
+          }
+
+          return session.destroy();
+        });
+      };
+    }
+  };
+}
diff --git a/app/components/options-menu/options-menu.html b/app/components/options-menu/options-menu.html
new file mode 100644
index 00000000..27411d6e
--- /dev/null
+++ b/app/components/options-menu/options-menu.html
@@ -0,0 +1,18 @@
+<ion-header-bar class="bar-positive">
+  <h1 class="title">Options</h1>
+</ion-header-bar>
+<ion-content>
+  <div class="list">
+    <div class="item" ng-click="optionsMenu.showDeleteDataConfirm()">
+      Delete local data
+    </div>
+  </div>
+</ion-content>
+<ion-footer-bar>
+  <div class="col">
+    <button class="button button-block button-outline button-balanced"
+      ng-click="optionsMenu.showSignoutConfirm()">
+      Sign out
+    </button>
+  </div>
+</ion-footer-bar>
diff --git a/app/components/options-menu/options-menu.js b/app/components/options-menu/options-menu.js
new file mode 100644
index 00000000..0ad7c535
--- /dev/null
+++ b/app/components/options-menu/options-menu.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+
+import directive, { directiveName } from './options-menu-directive';
+
+export default angular.module('toc.components.options-menu', [])
+  .directive(directiveName, directive);
diff --git a/app/components/password-prompt-modal/password-prompt-modal.html b/app/components/password-prompt-modal/password-prompt-modal.html
index e7fb85a6..056ebe24 100644
--- a/app/components/password-prompt-modal/password-prompt-modal.html
+++ b/app/components/password-prompt-modal/password-prompt-modal.html
@@ -10,7 +10,7 @@ <h1 class="title">
       }}
     </h1>
   </ion-header-bar>
-  <ion-content ng-class="{'has-subfooter': !passwordPromptModal.userExists}">
+  <ion-content class="has-subfooter">
     <div class="list">
       <div class="item item-divider item-calm item-clear">
         {{
@@ -80,11 +80,16 @@ <h1 class="title">
       </button>
     </div> -->
   </ion-content>
-  <div class="bar bar-subfooter" ng-if="!passwordPromptModal.userExists">
+  <div class="bar bar-subfooter">
     <div class="col">
       <button type="button"
         class="button button-outline button-block button-royal">
-        Already have a Toc account?
+        <!-- TODO: connect to different account if already connected -->
+        {{
+          passwordPromptModal.userExists ?
+            'Use this account on other devices?' :
+            'Already have a Toc account?'
+        }}
         <!-- modal title: let's get you connected! -->
       </button>
     </div>
diff --git a/app/components/update-profile-modal/update-profile-modal-directive.js b/app/components/update-profile-modal/update-profile-modal-directive.js
new file mode 100644
index 00000000..a158422d
--- /dev/null
+++ b/app/components/update-profile-modal/update-profile-modal-directive.js
@@ -0,0 +1,16 @@
+import template from './update-profile-modal.html!text';
+
+export let directiveName = 'tocUpdateProfileModal';
+export default /*@ngInject*/ function tocUpdateProfileModal() {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+      removeModal: '&'
+    },
+    controllerAs: 'updateProfileModal',
+    controller: /*@ngInject*/ function UpdateProfileModalController(
+    ) {
+    }
+  };
+}
diff --git a/app/components/edit-profile-modal/edit-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
similarity index 71%
rename from app/components/edit-profile-modal/edit-profile-modal.html
rename to app/components/update-profile-modal/update-profile-modal.html
index 3478863a..4cdca3f9 100644
--- a/app/components/edit-profile-modal/edit-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -1,33 +1,33 @@
 <ion-modal-view>
   <ion-header-bar class="bar-royal">
-    <h1 class="title">Start a Conversation</h1>
+    <h1 class="title">Update Profile</h1>
   </ion-header-bar>
-  <ion-content class="has-subfooter">
+  <ion-content>
     <div class="list">
       <div class="item item-divider item-calm item-clear">
-        How would you like to start?
+        What would you like to change?
       </div>
     </div>
   </ion-content>
-  <div class="bar bar-subfooter">
+  <!-- <div class="bar bar-subfooter">
     <div class="col">
       <button type="button" ng-click="::beginConversationModal.showIdPopup()"
         class="button button-outline button-block button-royal">
         Show your own ID
       </button>
     </div>
-  </div>
+  </div> -->
   <ion-footer-bar>
     <div class="col">
       <button class="button button-block button-outline button-calm"
-        ng-click="::beginConversationModal.hideModal()">
+        ng-click="::updateProfileModal.removeModal()">
         Cancel
       </button>
     </div>
     <div class="col">
       <button class="button button-block button-outline button-balanced"
-        ng-click="::beginConversationModal.doInvite()">
-        Start
+        ng-click="::updateProfileModal.updateProfile()">
+        Update
       </button>
     </div>
   </ion-footer-bar>
diff --git a/app/components/update-profile-modal/update-profile-modal.js b/app/components/update-profile-modal/update-profile-modal.js
new file mode 100644
index 00000000..777d8d68
--- /dev/null
+++ b/app/components/update-profile-modal/update-profile-modal.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+
+import directive, { directiveName } from './update-profile-modal-directive';
+
+export default angular.module('toc.components.update-profile-modal', [])
+  .directive(directiveName, directive);
diff --git a/app/views/home/home-controller.js b/app/views/home/home-controller.js
index ddb469b1..fab5924a 100644
--- a/app/views/home/home-controller.js
+++ b/app/views/home/home-controller.js
@@ -16,21 +16,16 @@ export default /*@ngInject*/ function HomeController(
   //FIXME: this should probably go into state.memory if possible
   this.isStorageConnected = storage.isConnected;
 
-  this.showSignoutConfirm = function showSignoutConfirm() {
-    let signoutPopup = $ionicPopup.confirm({
-      title: 'Sign Out',
-      template: 'Are you sure?',
-      okText: 'Sign out',
-      okType: 'button-assertive button-outline',
-      cancelType: 'button-calm button-outline'
-    });
+  this.updateProfileModal = $ionicModal.fromTemplate(
+    `
+    <toc-update-profile-modal class="toc-modal-container"
+      remove-modal="homeView.updateProfileModal.remove()">
+    </toc-update-profile-modal>
+    `,
+    { scope: $scope }
+  );
 
-    signoutPopup.then((response) => {
-      if (!response) {
-        return;
-      }
-
-      return session.destroy();
-    });
+  this.showUpdateProfileModal = function showUpdateProfileModal() {
+    this.updateProfileModal.show();
   };
 }
diff --git a/app/views/home/home.html b/app/views/home/home.html
index 36fb1bbd..f4d2eeea 100644
--- a/app/views/home/home.html
+++ b/app/views/home/home.html
@@ -3,7 +3,8 @@
     <toc-user-card enable-dismiss-notifications>
     </toc-user-card>
   </div>
-  <ion-content class="has-subheader has-subfooter">
+  <ion-content class="has-subheader"
+    ng-class="{'has-subfooter': !homeView.isStorageConnected()}">
     <toc-notification-list></toc-notification-list>
 
       <!-- <label class="item item-input item-stacked-label">
@@ -18,16 +19,17 @@
   </ion-content>
   <div class="bar bar-subfooter" ng-if="!homeView.isStorageConnected()">
     <div class="col">
-      <button ui-sref="app.private.cloud" class="button button-block button-outline button-royal">
+      <button class="button button-block button-outline button-royal"
+        ng-click="homeView.showCloudConnectModal()">
         Connect a cloud account
       </button>
     </div>
   </div>
   <ion-footer-bar>
     <div class="col">
-      <button class="button button-block button-outline button-assertive"
-        ng-click="homeView.showSignoutConfirm()">
-        Sign out
+      <button class="button button-block button-outline button-balanced"
+        ng-click="homeView.showUpdateProfileModal()">
+        Update your profile
       </button>
     </div>
   </ion-footer-bar>

From fccd8c8f1032158fbff1e78604a0aeced1cc4281 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 18:02:48 -0700
Subject: [PATCH 3/9] Changed options menu to a popover

Added remove local data option
---
 app/app-config.js                               |  2 ++
 app/app-controller.js                           | 16 ++++++++++++++++
 app/app-menu.html                               | 11 ++++++-----
 app/app.js                                      |  4 +++-
 app/app.scss                                    |  5 +++++
 .../options-menu/options-menu-directive.js      | 14 ++++++++++----
 app/components/options-menu/options-menu.html   |  7 +++++--
 .../update-profile-modal-directive.js           |  4 +++-
 .../update-profile-modal.html                   |  2 +-
 app/views/home/home-controller.js               | 17 +++++++++++++++--
 app/views/home/home.html                        | 13 ++++++-------
 11 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 app/app-controller.js

diff --git a/app/app-config.js b/app/app-config.js
index a5e0e528..964821e1 100644
--- a/app/app-config.js
+++ b/app/app-config.js
@@ -1,5 +1,6 @@
 import template from 'app.html!text';
 import menuTemplate from 'app-menu.html!text';
+import controller, { controllerName } from 'app-controller';
 
 export default /*@ngInject*/ function configApp(
   $ionicConfigProvider,
@@ -28,6 +29,7 @@ export default /*@ngInject*/ function configApp(
   $stateProvider.state('app.private', {
     url: '/private',
     abstract: true,
+    controller: controllerName + ' as appView',
     template: menuTemplate
   });
 }
diff --git a/app/app-controller.js b/app/app-controller.js
new file mode 100644
index 00000000..740e47e5
--- /dev/null
+++ b/app/app-controller.js
@@ -0,0 +1,16 @@
+export let controllerName = 'AppController';
+export default /*@ngInject*/ function AppController(
+  $ionicPopover
+) {
+  this.optionsMenuPopover = $ionicPopover.fromTemplate(
+    `
+    <ion-popover-view>
+      <toc-options-menu></toc-options-menu>
+    </ion-popover-view>
+    `
+  );
+
+  this.openOptionsMenuPopover = function openOptionsMenuPopover($event) {
+    this.optionsMenuPopover.show($event);
+  };
+}
diff --git a/app/app-menu.html b/app/app-menu.html
index 23c9b3bc..f054cccd 100644
--- a/app/app-menu.html
+++ b/app/app-menu.html
@@ -1,4 +1,7 @@
 <ion-side-menus enable-menu-with-back-views="false">
+  <ion-side-menu side="left" expose-aside-when="large">
+    <toc-conversations-menu></toc-conversations-menu>
+  </ion-side-menu>
   <ion-side-menu-content>
     <ion-nav-bar class="bar-positive">
       <ion-nav-back-button class="button-clear">
@@ -10,7 +13,8 @@
         </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="right">
-        <button menu-toggle="right"
+        <button
+          ng-click="appView.openOptionsMenuPopover($event)"
           class="button button-icon button-clear ion-navicon">
         </button>
       </ion-nav-buttons>
@@ -18,10 +22,7 @@
     <toc-notification-overlay></toc-notification-overlay>
     <ion-nav-view></ion-nav-view>
   </ion-side-menu-content>
-  <ion-side-menu side="left" expose-aside-when="large">
-    <toc-conversations-menu></toc-conversations-menu>
-  </ion-side-menu>
-  <ion-side-menu side="right" expose-aside-when="large">
+  <ion-side-menu side="right">
     <toc-options-menu></toc-options-menu>
   </ion-side-menu>
 </ion-side-menus>
diff --git a/app/app.js b/app/app.js
index e2bd8a59..88abd63d 100644
--- a/app/app.js
+++ b/app/app.js
@@ -7,6 +7,7 @@ import views from './views/views';
 
 import run from './app-run';
 import config from './app-config';
+import controller, { controllerName } from './app-controller';
 
 let appName = 'toc';
 
@@ -17,7 +18,8 @@ export default angular.module(appName, [
     views.name,
   ])
   .config(config)
-  .run(run);
+  .run(run)
+  .controller(controllerName, controller);
 
 export function initialize() {
   angular.element(document)
diff --git a/app/app.scss b/app/app.scss
index f4d0b3c6..c91889de 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -17,6 +17,7 @@ $button-border-radius: 0 !default;
 $button-bar-button-font-size: 15px !default;
 
 $card-border-radius: 0 !default;
+$popover-border-radius: 0 !default;
 
 $popup-button-border-radius: 0 !default;
 $popup-background-color: #fff !default;
@@ -44,6 +45,10 @@ form.ng-pristine button[type='submit'] {
   opacity: 1;
 }
 
+.popup-body {
+  text-align: center;
+}
+
 .item-input-wrapper {
   border-radius: 0;
 }
diff --git a/app/components/options-menu/options-menu-directive.js b/app/components/options-menu/options-menu-directive.js
index 0d3b2ab1..7e8849b5 100644
--- a/app/components/options-menu/options-menu-directive.js
+++ b/app/components/options-menu/options-menu-directive.js
@@ -13,9 +13,12 @@ export default /*@ngInject*/ function tocOptionsMenu() {
     ) {
       this.showDeleteDataConfirm = function showDeleteDataConfirm() {
         let deleteDataPopup = $ionicPopup.confirm({
-          title: 'Delete Data',
-          template: 'Absolutely sure you\'d like to delete all local data?',
-          okText: 'Delete local data',
+          title: 'Remove Data',
+          template: `
+            <p>All local data will be gone.</p>
+            <p>Are you absolutely sure?</p>
+          `,
+          okText: 'Remove',
           okType: 'button-assertive button-outline',
           cancelType: 'button-calm button-outline'
         });
@@ -32,7 +35,10 @@ export default /*@ngInject*/ function tocOptionsMenu() {
       this.showSignoutConfirm = function showSignoutConfirm() {
         let signoutPopup = $ionicPopup.confirm({
           title: 'Sign Out',
-          template: 'Are you sure you\'d like to sign out of Toc?',
+          template: `
+            <p>You'll have to sign in again.</p>
+            <p>Are you sure?</p>
+          `,
           okText: 'Sign out',
           okType: 'button-assertive button-outline',
           cancelType: 'button-calm button-outline'
diff --git a/app/components/options-menu/options-menu.html b/app/components/options-menu/options-menu.html
index 27411d6e..ea333f50 100644
--- a/app/components/options-menu/options-menu.html
+++ b/app/components/options-menu/options-menu.html
@@ -3,14 +3,17 @@ <h1 class="title">Options</h1>
 </ion-header-bar>
 <ion-content>
   <div class="list">
+    <div class="item" ng-click="optionsMenu.showCloudConnectModal()">
+      Connect a cloud account
+    </div>
     <div class="item" ng-click="optionsMenu.showDeleteDataConfirm()">
-      Delete local data
+      Remove your data from this device
     </div>
   </div>
 </ion-content>
 <ion-footer-bar>
   <div class="col">
-    <button class="button button-block button-outline button-balanced"
+    <button class="button button-block button-outline button-assertive"
       ng-click="optionsMenu.showSignoutConfirm()">
       Sign out
     </button>
diff --git a/app/components/update-profile-modal/update-profile-modal-directive.js b/app/components/update-profile-modal/update-profile-modal-directive.js
index a158422d..0bedb4d6 100644
--- a/app/components/update-profile-modal/update-profile-modal-directive.js
+++ b/app/components/update-profile-modal/update-profile-modal-directive.js
@@ -6,11 +6,13 @@ export default /*@ngInject*/ function tocUpdateProfileModal() {
     restrict: 'E',
     template: template,
     scope: {
-      removeModal: '&'
+      hideModal: '&'
     },
     controllerAs: 'updateProfileModal',
     controller: /*@ngInject*/ function UpdateProfileModalController(
+      $scope
     ) {
+      this.hideModal = $scope.hideModal;
     }
   };
 }
diff --git a/app/components/update-profile-modal/update-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
index 4cdca3f9..13659a6a 100644
--- a/app/components/update-profile-modal/update-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -20,7 +20,7 @@ <h1 class="title">Update Profile</h1>
   <ion-footer-bar>
     <div class="col">
       <button class="button button-block button-outline button-calm"
-        ng-click="::updateProfileModal.removeModal()">
+        ng-click="::updateProfileModal.hideModal()">
         Cancel
       </button>
     </div>
diff --git a/app/views/home/home-controller.js b/app/views/home/home-controller.js
index fab5924a..b7814acb 100644
--- a/app/views/home/home-controller.js
+++ b/app/views/home/home-controller.js
@@ -1,6 +1,6 @@
 export let controllerName = 'HomeController';
 export default /*@ngInject*/ function HomeController(
-  $ionicPopup,
+  $ionicModal,
   $scope,
   session,
   state,
@@ -16,10 +16,23 @@ export default /*@ngInject*/ function HomeController(
   //FIXME: this should probably go into state.memory if possible
   this.isStorageConnected = storage.isConnected;
 
+  this.beginConversationModal = $ionicModal.fromTemplate(
+    `
+    <toc-begin-conversation-modal class="toc-modal-container"
+      hide-modal="homeView.beginConversationModal.hide()">
+    </toc-begin-conversation-modal>
+    `,
+    { scope: $scope }
+  );
+
+  this.openBeginConversationModal = function openBeginConversationModal() {
+    this.beginConversationModal.show();
+  };
+
   this.updateProfileModal = $ionicModal.fromTemplate(
     `
     <toc-update-profile-modal class="toc-modal-container"
-      remove-modal="homeView.updateProfileModal.remove()">
+      hide-modal="homeView.updateProfileModal.hide()">
     </toc-update-profile-modal>
     `,
     { scope: $scope }
diff --git a/app/views/home/home.html b/app/views/home/home.html
index f4d2eeea..65d78eb1 100644
--- a/app/views/home/home.html
+++ b/app/views/home/home.html
@@ -3,8 +3,7 @@
     <toc-user-card enable-dismiss-notifications>
     </toc-user-card>
   </div>
-  <ion-content class="has-subheader"
-    ng-class="{'has-subfooter': !homeView.isStorageConnected()}">
+  <ion-content class="has-subheader has-subfooter">
     <toc-notification-list></toc-notification-list>
 
       <!-- <label class="item item-input item-stacked-label">
@@ -17,19 +16,19 @@
         </toc-qr-image>
       </div> -->
   </ion-content>
-  <div class="bar bar-subfooter" ng-if="!homeView.isStorageConnected()">
+  <div class="bar bar-subfooter">
     <div class="col">
       <button class="button button-block button-outline button-royal"
-        ng-click="homeView.showCloudConnectModal()">
-        Connect a cloud account
+        ng-click="homeView.showUpdateProfileModal()">
+        Update your profile
       </button>
     </div>
   </div>
   <ion-footer-bar>
     <div class="col">
       <button class="button button-block button-outline button-balanced"
-        ng-click="homeView.showUpdateProfileModal()">
-        Update your profile
+        ng-click="homeView.openBeginConversationModal()">
+        Start a conversation
       </button>
     </div>
   </ion-footer-bar>

From a38799d76abf652fcd883a03fdd62645b65ff2d8 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 18:38:27 -0700
Subject: [PATCH 4/9] Added update profile modal contents

Removing modals instead of hiding
---
 .../begin-conversation-modal-directive.js     |  8 ++---
 .../begin-conversation-modal.html             |  2 +-
 .../conversations-menu-directive.js           | 18 +++++-----
 .../update-profile-modal-directive.js         |  4 +--
 .../update-profile-modal.html                 | 25 ++++++++++---
 app/views/home/home-controller.js             | 36 +++++++++----------
 app/views/welcome/welcome-controller.js       | 26 +++++++-------
 7 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/app/components/begin-conversation-modal/begin-conversation-modal-directive.js b/app/components/begin-conversation-modal/begin-conversation-modal-directive.js
index 05ee90b2..125c65a3 100644
--- a/app/components/begin-conversation-modal/begin-conversation-modal-directive.js
+++ b/app/components/begin-conversation-modal/begin-conversation-modal-directive.js
@@ -6,7 +6,7 @@ export default /*@ngInject*/ function tocBeginConversationModal() {
     restrict: 'E',
     template: template,
     scope: {
-      hideModal: '&'
+      removeModal: '&'
     },
     controllerAs: 'beginConversationModal',
     controller: /*@ngInject*/ function BeginConversationModalController(
@@ -21,7 +21,7 @@ export default /*@ngInject*/ function tocBeginConversationModal() {
       identity,
       state
     ) {
-      this.hideModal = $scope.hideModal;
+      this.removeModal = $scope.removeModal;
       this.userInfo = state.cloud.identity.get().userInfo;
       this.userId = this.userInfo.id;
       this.isCordovaApp = devices.isCordovaApp();
@@ -40,7 +40,7 @@ export default /*@ngInject*/ function tocBeginConversationModal() {
           0
         ))
         .then(() => {
-          this.hideModal();
+          this.removeModal();
           return $q.when();
         });
       };
@@ -133,7 +133,7 @@ export default /*@ngInject*/ function tocBeginConversationModal() {
               '_system'
             );
 
-            this.hideModal();
+            this.removeModal();
           }
         }
       };
diff --git a/app/components/begin-conversation-modal/begin-conversation-modal.html b/app/components/begin-conversation-modal/begin-conversation-modal.html
index c12bf1f6..4b9d4486 100644
--- a/app/components/begin-conversation-modal/begin-conversation-modal.html
+++ b/app/components/begin-conversation-modal/begin-conversation-modal.html
@@ -28,7 +28,7 @@ <h1 class="title">Start a Conversation</h1>
   <ion-footer-bar>
     <div class="col">
       <button class="button button-block button-outline button-calm"
-        ng-click="::beginConversationModal.hideModal()">
+        ng-click="::beginConversationModal.removeModal()">
         Cancel
       </button>
     </div>
diff --git a/app/components/conversations-menu/conversations-menu-directive.js b/app/components/conversations-menu/conversations-menu-directive.js
index 4accab19..a264fde7 100644
--- a/app/components/conversations-menu/conversations-menu-directive.js
+++ b/app/components/conversations-menu/conversations-menu-directive.js
@@ -25,16 +25,16 @@ export default /*@ngInject*/ function tocConversationsMenu() {
         return navigation.navigate('home');
       };
 
-      this.beginConversationModal = $ionicModal.fromTemplate(
-        `
-        <toc-begin-conversation-modal class="toc-modal-container"
-          hide-modal="conversationsMenu.beginConversationModal.hide()">
-        </toc-begin-conversation-modal>
-        `,
-        { scope: $scope }
-      );
-
       this.openBeginConversationModal = function openBeginConversationModal() {
+        this.beginConversationModal = $ionicModal.fromTemplate(
+          `
+          <toc-begin-conversation-modal class="toc-modal-container"
+            remove-modal="conversationsMenu.beginConversationModal.remove()">
+          </toc-begin-conversation-modal>
+          `,
+          { scope: $scope }
+        );
+
         this.beginConversationModal.show();
       };
     }
diff --git a/app/components/update-profile-modal/update-profile-modal-directive.js b/app/components/update-profile-modal/update-profile-modal-directive.js
index 0bedb4d6..ad938641 100644
--- a/app/components/update-profile-modal/update-profile-modal-directive.js
+++ b/app/components/update-profile-modal/update-profile-modal-directive.js
@@ -6,13 +6,13 @@ export default /*@ngInject*/ function tocUpdateProfileModal() {
     restrict: 'E',
     template: template,
     scope: {
-      hideModal: '&'
+      removeModal: '&'
     },
     controllerAs: 'updateProfileModal',
     controller: /*@ngInject*/ function UpdateProfileModalController(
       $scope
     ) {
-      this.hideModal = $scope.hideModal;
+      this.removeModal = $scope.removeModal;
     }
   };
 }
diff --git a/app/components/update-profile-modal/update-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
index 13659a6a..4ac98f9f 100644
--- a/app/components/update-profile-modal/update-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -2,25 +2,40 @@
   <ion-header-bar class="bar-royal">
     <h1 class="title">Update Profile</h1>
   </ion-header-bar>
-  <ion-content>
+  <ion-content class="has-subfooter">
     <div class="list">
       <div class="item item-divider item-calm item-clear">
         What would you like to change?
       </div>
+      <div class="item item-avatar">
+        <img ng-src="{{updateProfileModal.getNewAvatar()}}" alt="New avatar"/>
+        <h2>{{updateProfileModal.newUserInfo.displayName}}</h2>
+        <p>Your new user card will look like this</p>
+      </div>
+      <div class="item item-input item-stacked-label">
+        <span class="input-label">Your name</span>
+        <input type="text" ng-model="updateProfileModal.newUserInfo.displayName"
+          placeholder="The name that will appear in contact lists">
+      </div>
+      <div class="item item-input item-stacked-label">
+        <span class="input-label">Your email</span>
+        <input type="email" ng-model="updateProfileModal.newUserInfo.email"
+          placeholder="Your avatar is generated from this email">
+      </div>
     </div>
   </ion-content>
-  <!-- <div class="bar bar-subfooter">
+  <div class="bar bar-subfooter">
     <div class="col">
       <button type="button" ng-click="::beginConversationModal.showIdPopup()"
         class="button button-outline button-block button-royal">
-        Show your own ID
+        Update your email avatar
       </button>
     </div>
-  </div> -->
+  </div>
   <ion-footer-bar>
     <div class="col">
       <button class="button button-block button-outline button-calm"
-        ng-click="::updateProfileModal.hideModal()">
+        ng-click="::updateProfileModal.removeModal()">
         Cancel
       </button>
     </div>
diff --git a/app/views/home/home-controller.js b/app/views/home/home-controller.js
index b7814acb..8e574545 100644
--- a/app/views/home/home-controller.js
+++ b/app/views/home/home-controller.js
@@ -16,29 +16,29 @@ export default /*@ngInject*/ function HomeController(
   //FIXME: this should probably go into state.memory if possible
   this.isStorageConnected = storage.isConnected;
 
-  this.beginConversationModal = $ionicModal.fromTemplate(
-    `
-    <toc-begin-conversation-modal class="toc-modal-container"
-      hide-modal="homeView.beginConversationModal.hide()">
-    </toc-begin-conversation-modal>
-    `,
-    { scope: $scope }
-  );
-
   this.openBeginConversationModal = function openBeginConversationModal() {
+    this.beginConversationModal = $ionicModal.fromTemplate(
+      `
+      <toc-begin-conversation-modal class="toc-modal-container"
+        remove-modal="homeView.beginConversationModal.remove()">
+      </toc-begin-conversation-modal>
+      `,
+      { scope: $scope }
+    );
+
     this.beginConversationModal.show();
   };
 
-  this.updateProfileModal = $ionicModal.fromTemplate(
-    `
-    <toc-update-profile-modal class="toc-modal-container"
-      hide-modal="homeView.updateProfileModal.hide()">
-    </toc-update-profile-modal>
-    `,
-    { scope: $scope }
-  );
-
   this.showUpdateProfileModal = function showUpdateProfileModal() {
+    this.updateProfileModal = $ionicModal.fromTemplate(
+      `
+      <toc-update-profile-modal class="toc-modal-container"
+        remove-modal="homeView.updateProfileModal.remove()">
+      </toc-update-profile-modal>
+      `,
+      { scope: $scope }
+    );
+
     this.updateProfileModal.show();
   };
 }
diff --git a/app/views/welcome/welcome-controller.js b/app/views/welcome/welcome-controller.js
index d3b888cd..2a17484e 100644
--- a/app/views/welcome/welcome-controller.js
+++ b/app/views/welcome/welcome-controller.js
@@ -9,20 +9,20 @@ export default /*@ngInject*/ function WelcomeController(
 ) {
   session.preparePublic()
     .then(() => {
-      this.passwordPromptModal = $ionicModal.fromTemplate(
-        `
-        <toc-password-prompt-modal class="toc-modal-container"
-          remove-modal="welcomeView.passwordPromptModal.remove()">
-        </toc-password-prompt-modal>
-        `,
-        {
-          scope: $scope,
-          backdropClickToClose: false,
-          hardwareBackButtonToClose: false
-        }
-      );
-
       this.openPasswordPromptModal = function openPasswordPromptModal() {
+        this.passwordPromptModal = $ionicModal.fromTemplate(
+          `
+          <toc-password-prompt-modal class="toc-modal-container"
+            remove-modal="welcomeView.passwordPromptModal.remove()">
+          </toc-password-prompt-modal>
+          `,
+          {
+            scope: $scope,
+            backdropClickToClose: false,
+            hardwareBackButtonToClose: false
+          }
+        );
+
         this.passwordPromptModal.show();
       };
 

From 0f7324f3a39e2e49fee093f700e90e4a11686814 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 18:59:38 -0700
Subject: [PATCH 5/9] Added dynamically updating email avatar

Changing display logic to show 'Anonymous' when no displayName exists
---
 app/components/channel-card/channel-card.html  |  2 +-
 .../channel-list/channel-list-directive.js     |  2 +-
 app/components/message-list/message-list.html  |  2 +-
 .../notification-card-directive.js             |  4 ++--
 .../update-profile-modal-directive.js          |  7 ++++++-
 .../update-profile-modal.html                  | 18 ++++++++++++------
 .../user-card/user-card-directive.js           |  4 ++--
 app/services/network/network-service.js        |  7 +------
 8 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/app/components/channel-card/channel-card.html b/app/components/channel-card/channel-card.html
index c65d0cd0..3c517873 100644
--- a/app/components/channel-card/channel-card.html
+++ b/app/components/channel-card/channel-card.html
@@ -8,7 +8,7 @@
   <div class="toc-channel-card-status-indicator"
     ng-class="'toc-contact-status-' + channelCard.contact.statusId">
   </div>
-  <h2>{{channelCard.contact.userInfo.displayName}}</h2>
+  <h2>{{channelCard.contact.userInfo.displayName || 'Anonymous'}}</h2>
   <p class="toc-channel-card-quote" ng-class="{
       'toc-channel-card-quote-unread': channelCard.channel.unreadMessageId
     }">
diff --git a/app/components/channel-list/channel-list-directive.js b/app/components/channel-list/channel-list-directive.js
index 8a475a5f..086cbe5d 100644
--- a/app/components/channel-list/channel-list-directive.js
+++ b/app/components/channel-list/channel-list-directive.js
@@ -44,7 +44,7 @@ export default /*@ngInject*/ function tocChannelList() {
           let contact =
             state.cloud.contacts.get([channel.channelInfo.contactIds[0]]);
           return $ionicPopup.show({
-            template: `Accept invite from ${contact.userInfo.displayName}?`,
+            template: `Accept invite from ${contact.userInfo.displayName || 'Anonymous'}?`,
             title: 'Accept Invite',
             buttons: [
               {
diff --git a/app/components/message-list/message-list.html b/app/components/message-list/message-list.html
index 698fd528..5d50f88c 100644
--- a/app/components/message-list/message-list.html
+++ b/app/components/message-list/message-list.html
@@ -15,7 +15,7 @@
     <div ng-if="messageList.isUnread(message)"
       class="toc-message-unread-marker">
     </div>
-    <h2>{{messageList.getUserInfo(message).displayName}}</h2>
+    <h2>{{messageList.getUserInfo(message).displayName || 'Anonymous'}}</h2>
     <p class="toc-message-content">{{::message.messageInfo.content}}</p>
     <div ng-if="::messageList.isMinuteSeparator(message)"
       class="toc-message-timestamp">
diff --git a/app/components/notification-card/notification-card-directive.js b/app/components/notification-card/notification-card-directive.js
index 3200b86d..16ea7207 100644
--- a/app/components/notification-card/notification-card-directive.js
+++ b/app/components/notification-card/notification-card-directive.js
@@ -46,8 +46,8 @@ export default /*@ngInject*/ function tocNotificationCard() {
       let updateContactInfo = () => {
         let contactInfo = contactInfoCursor.get();
         this.icon = identity.getAvatar(contactInfo);
-        this.iconText = `Avatar for ${contactInfo.displayName}`;
-        this.title = contactInfo.displayName;
+        this.iconText = `Avatar for ${contactInfo.displayName || 'Anonymous'}`;
+        this.title = contactInfo.displayName || 'Anonymous';
       };
       state.addListener(contactInfoCursor, updateContactInfo, $scope);
     }
diff --git a/app/components/update-profile-modal/update-profile-modal-directive.js b/app/components/update-profile-modal/update-profile-modal-directive.js
index ad938641..7db97305 100644
--- a/app/components/update-profile-modal/update-profile-modal-directive.js
+++ b/app/components/update-profile-modal/update-profile-modal-directive.js
@@ -10,9 +10,14 @@ export default /*@ngInject*/ function tocUpdateProfileModal() {
     },
     controllerAs: 'updateProfileModal',
     controller: /*@ngInject*/ function UpdateProfileModalController(
-      $scope
+      $scope,
+      identity,
+      state
     ) {
       this.removeModal = $scope.removeModal;
+
+      this.getAvatar = identity.getAvatar;
+      this.userInfo = state.cloud.identity.get(['userInfo']);
     }
   };
 }
diff --git a/app/components/update-profile-modal/update-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
index 4ac98f9f..eeba47c5 100644
--- a/app/components/update-profile-modal/update-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -8,19 +8,25 @@ <h1 class="title">Update Profile</h1>
         What would you like to change?
       </div>
       <div class="item item-avatar">
-        <img ng-src="{{updateProfileModal.getNewAvatar()}}" alt="New avatar"/>
-        <h2>{{updateProfileModal.newUserInfo.displayName}}</h2>
+        <img alt="New avatar"
+          ng-src="{{updateProfileModal.getAvatar(updateProfileModal.userInfo)}}"
+          />
+        <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
         <p>Your new user card will look like this</p>
       </div>
       <div class="item item-input item-stacked-label">
         <span class="input-label">Your name</span>
-        <input type="text" ng-model="updateProfileModal.newUserInfo.displayName"
-          placeholder="The name that will appear in contact lists">
+        <input type="text" ng-model="updateProfileModal.userInfo.displayName"
+          placeholder="Your friends will see this in their contact lists">
       </div>
       <div class="item item-input item-stacked-label">
         <span class="input-label">Your email</span>
-        <input type="email" ng-model="updateProfileModal.newUserInfo.email"
-          placeholder="Your avatar is generated from this email">
+        <input type="email" ng-model="updateProfileModal.userInfo.email"
+          placeholder="Your avatar will be generated from this email"
+          ng-model-options="{
+            updateOn: 'default blur',
+            debounce: { default: 1000, blur: 0}
+          }">
       </div>
     </div>
   </ion-content>
diff --git a/app/components/user-card/user-card-directive.js b/app/components/user-card/user-card-directive.js
index aa38460c..80e97d4e 100644
--- a/app/components/user-card/user-card-directive.js
+++ b/app/components/user-card/user-card-directive.js
@@ -25,8 +25,8 @@ export default /*@ngInject*/ function tocUserCard(
       let updateUserInfo = () => {
         let userInfo = userInfoCursor.get();
         this.avatar = identity.getAvatar(userInfo);
-        this.avatarText = `Avatar for ${userInfo.displayName}`;
-        this.name = userInfoCursor.get(['displayName']);
+        this.avatarText = `Avatar for ${userInfo.displayName || 'Anonymous'}`;
+        this.name = userInfoCursor.get(['displayName']) || 'Anonymous';
       };
       state.addListener(userInfoCursor, updateUserInfo, $scope);
 
diff --git a/app/services/network/network-service.js b/app/services/network/network-service.js
index e6119cf6..3f3b7932 100644
--- a/app/services/network/network-service.js
+++ b/app/services/network/network-service.js
@@ -142,10 +142,6 @@ export default /*@ngInject*/ function network(
           return $q.when();
         }
 
-        let contactName = state.cloud.contacts.get(
-          [senderId, 'userInfo', 'displayName']
-        );
-
         let updatingUnreadPointer =
           !channelCursor.get(['unreadMessageId']) ?
             state.save(
@@ -373,8 +369,7 @@ export default /*@ngInject*/ function network(
 
     let saveUserInfo = (networkInfo) => {
       let userInfo = {
-        id: networkInfo.id,
-        displayName: 'Anonymous'
+        id: networkInfo.id
       };
 
       return state.save(state.cloud.identity, ['userInfo'], userInfo);

From 3896f2a38ce93603b5ee0be18cb7eb09627c55dc Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 19:20:26 -0700
Subject: [PATCH 6/9] Added validation for email in update profile

Added link to libravatar for changing avatars
---
 .../update-profile-modal/update-profile-modal.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/components/update-profile-modal/update-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
index eeba47c5..a79dbe19 100644
--- a/app/components/update-profile-modal/update-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -1,4 +1,6 @@
 <ion-modal-view>
+  <form name="tocUpdateProfileForm" id="toc-update-profile-form"
+    ng-submit="updateProfileModal.updateProfile()" novalidate>
   <ion-header-bar class="bar-royal">
     <h1 class="title">Update Profile</h1>
   </ion-header-bar>
@@ -17,11 +19,13 @@ <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
       <div class="item item-input item-stacked-label">
         <span class="input-label">Your name</span>
         <input type="text" ng-model="updateProfileModal.userInfo.displayName"
+          form="toc-update-profile-form"
           placeholder="Your friends will see this in their contact lists">
       </div>
       <div class="item item-input item-stacked-label">
         <span class="input-label">Your email</span>
         <input type="email" ng-model="updateProfileModal.userInfo.email"
+          form="toc-update-profile-form"
           placeholder="Your avatar will be generated from this email"
           ng-model-options="{
             updateOn: 'default blur',
@@ -32,10 +36,10 @@ <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
   </ion-content>
   <div class="bar bar-subfooter">
     <div class="col">
-      <button type="button" ng-click="::beginConversationModal.showIdPopup()"
+      <a onclick="window.open('https://www.libravatar.org/', '_system');"
         class="button button-outline button-block button-royal">
         Update your email avatar
-      </button>
+      </a>
     </div>
   </div>
   <ion-footer-bar>
@@ -46,10 +50,12 @@ <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
       </button>
     </div>
     <div class="col">
-      <button class="button button-block button-outline button-balanced"
-        ng-click="::updateProfileModal.updateProfile()">
+      <button type="submit" form="toc-update-profile-form"
+        class="button button-block button-outline button-balanced"
+        ng-disabled="tocUpdateProfileForm.$invalid">
         Update
       </button>
     </div>
   </ion-footer-bar>
+  </form>
 </ion-modal-view>

From 72baaad0e7291d518b7bc17dd4df1ffe4e5d3c0d Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 19:30:59 -0700
Subject: [PATCH 7/9] Implemented profile updating

---
 .../update-profile-modal-directive.js          | 18 +++++++++++++++++-
 .../update-profile-modal.html                  |  9 ++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/components/update-profile-modal/update-profile-modal-directive.js b/app/components/update-profile-modal/update-profile-modal-directive.js
index 7db97305..90a3168d 100644
--- a/app/components/update-profile-modal/update-profile-modal-directive.js
+++ b/app/components/update-profile-modal/update-profile-modal-directive.js
@@ -11,13 +11,29 @@ export default /*@ngInject*/ function tocUpdateProfileModal() {
     controllerAs: 'updateProfileModal',
     controller: /*@ngInject*/ function UpdateProfileModalController(
       $scope,
+      $q,
       identity,
       state
     ) {
       this.removeModal = $scope.removeModal;
 
-      this.getAvatar = identity.getAvatar;
       this.userInfo = state.cloud.identity.get(['userInfo']);
+
+      this.getNewAvatar = function getNewAvatar() {
+        return identity.getAvatar(this.userInfo);
+      };
+
+      this.updateProfile = function updateProfile() {
+        return state.save(
+            state.cloud.identity,
+            ['userInfo'],
+            this.userInfo
+          )
+          .then(() => {
+            this.removeModal();
+            return $q.when();
+          });
+      };
     }
   };
 }
diff --git a/app/components/update-profile-modal/update-profile-modal.html b/app/components/update-profile-modal/update-profile-modal.html
index a79dbe19..9c58db58 100644
--- a/app/components/update-profile-modal/update-profile-modal.html
+++ b/app/components/update-profile-modal/update-profile-modal.html
@@ -10,9 +10,7 @@ <h1 class="title">Update Profile</h1>
         What would you like to change?
       </div>
       <div class="item item-avatar">
-        <img alt="New avatar"
-          ng-src="{{updateProfileModal.getAvatar(updateProfileModal.userInfo)}}"
-          />
+        <img alt="New avatar" ng-src="{{updateProfileModal.getNewAvatar()}}" />
         <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
         <p>Your new user card will look like this</p>
       </div>
@@ -38,13 +36,14 @@ <h2>{{updateProfileModal.userInfo.displayName || 'Anonymous'}}</h2>
     <div class="col">
       <a onclick="window.open('https://www.libravatar.org/', '_system');"
         class="button button-outline button-block button-royal">
-        Update your email avatar
+        Change your email avatar
       </a>
     </div>
   </div>
   <ion-footer-bar>
     <div class="col">
-      <button class="button button-block button-outline button-calm"
+      <button type="button"
+        class="button button-block button-outline button-calm"
         ng-click="::updateProfileModal.removeModal()">
         Cancel
       </button>

From c8a3a3a36f28e96c4ae91d46762fdb6c526fcbc2 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 19:59:51 -0700
Subject: [PATCH 8/9] Shorted channel id's to truncated sha256 hash

---
 app/services/channels/channels-service.js         | 10 ++++++++--
 app/services/cryptography/cryptography-service.js | 15 ++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/services/channels/channels-service.js b/app/services/channels/channels-service.js
index 5a78e8ca..50f33f5f 100644
--- a/app/services/channels/channels-service.js
+++ b/app/services/channels/channels-service.js
@@ -2,7 +2,8 @@ export let serviceName = 'channels';
 export default /*@ngInject*/ function channels(
   $q,
   R,
-  state
+  state,
+  cryptography
 ) {
   const CHANNEL_ID_PREFIX = 'toc-';
   const INVITE_CHANNEL_ID = CHANNEL_ID_PREFIX + 'invite';
@@ -13,7 +14,12 @@ export default /*@ngInject*/ function channels(
         userId + '-' + contactId :
         contactId + '-' + userId;
 
-      return CHANNEL_ID_PREFIX + channelId;
+      //channel ids need to be somewhat short because they're prefixed on
+      // most storage keys (including on every message), so there are huge
+      // storage usage implications
+      let shortChannelId = cryptography.getSha256(channelId).substr(0, 32);
+
+      return CHANNEL_ID_PREFIX + shortChannelId;
     };
 
   let generateGroupChannelId =
diff --git a/app/services/cryptography/cryptography-service.js b/app/services/cryptography/cryptography-service.js
index 5cb233b0..2a17a5a3 100644
--- a/app/services/cryptography/cryptography-service.js
+++ b/app/services/cryptography/cryptography-service.js
@@ -1,6 +1,7 @@
 export let serviceName = 'cryptography';
 export default /*@ngInject*/ function cryptography(
   $q,
+  $window,
   forge
 ) {
   //TODO: add user setting to disable encryption
@@ -132,6 +133,13 @@ export default /*@ngInject*/ function cryptography(
     return md5.digest().toHex();
   };
 
+  let getSha256 = function getSha256(plaintext) {
+    let sha256 = forge.md.sha256.create();
+    sha256.update(plaintext);
+
+    return sha256.digest().toHex();
+  };
+
   let encryptBase =
     function encryptBase(object, ivBytes, credentials = cachedCredentials) {
       checkCredentials(credentials);
@@ -248,7 +256,7 @@ export default /*@ngInject*/ function cryptography(
     return $q.when();
   };
 
-  return {
+  let cryptographyService = {
     ENCRYPTED_OBJECT,
     UNENCRYPTED_OBJECT,
     escapeBase64,
@@ -258,6 +266,7 @@ export default /*@ngInject*/ function cryptography(
     getRandomBase64,
     getHmac,
     getMd5,
+    getSha256,
     encryptDeterministic,
     encrypt,
     decrypt,
@@ -268,4 +277,8 @@ export default /*@ngInject*/ function cryptography(
     initialize,
     destroy
   };
+
+  $window.tocCrypto = cryptographyService;
+
+  return cryptographyService;
 }

From d60a6735c2041e0f7e55dedcd30f51785b74f964 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sun, 30 Aug 2015 21:38:40 -0700
Subject: [PATCH 9/9] Changed cloud connect form into modal

Added warning on connecting existing data to cloud
---
 .../cloud-connect-form-directive.js           |  95 --------------
 .../cloud-connect-form.html                   |  42 -------
 .../cloud-connect-form/cloud-connect-form.js  |   6 -
 .../cloud-connect-modal-directive.js          | 116 ++++++++++++++++++
 .../cloud-connect-modal.html                  |  53 ++++++++
 .../cloud-connect-modal.js                    |   6 +
 .../cloud-manage-form-directive.js            |  13 --
 .../cloud-manage-form/cloud-manage-form.html  |  36 ------
 .../cloud-manage-form/cloud-manage-form.js    |   6 -
 app/components/components.js                  |   6 +-
 .../options-menu/options-menu-directive.js    |  15 +++
 app/components/options-menu/options-menu.html |   2 +-
 .../password-prompt-modal-directive.js        |  17 ++-
 .../password-prompt-modal.html                |   1 +
 app/services/identity/identity-service.js     |   6 +-
 15 files changed, 215 insertions(+), 205 deletions(-)
 delete mode 100644 app/components/cloud-connect-form/cloud-connect-form-directive.js
 delete mode 100644 app/components/cloud-connect-form/cloud-connect-form.html
 delete mode 100644 app/components/cloud-connect-form/cloud-connect-form.js
 create mode 100644 app/components/cloud-connect-modal/cloud-connect-modal-directive.js
 create mode 100644 app/components/cloud-connect-modal/cloud-connect-modal.html
 create mode 100644 app/components/cloud-connect-modal/cloud-connect-modal.js
 delete mode 100644 app/components/cloud-manage-form/cloud-manage-form-directive.js
 delete mode 100644 app/components/cloud-manage-form/cloud-manage-form.html
 delete mode 100644 app/components/cloud-manage-form/cloud-manage-form.js

diff --git a/app/components/cloud-connect-form/cloud-connect-form-directive.js b/app/components/cloud-connect-form/cloud-connect-form-directive.js
deleted file mode 100644
index 756d2f18..00000000
--- a/app/components/cloud-connect-form/cloud-connect-form-directive.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import template from './cloud-connect-form.html!text';
-
-export let directiveName = 'tocCloudConnectForm';
-export default /*@ngInject*/ function tocCloudConnectForm() {
-  return {
-    restrict: 'E',
-    template: template,
-    controllerAs: 'cloudConnectForm',
-    controller: /*@ngInject*/ function CloudConnectFormController(
-      $ionicHistory,
-      $ionicPopup,
-      $scope,
-      storage
-    ) {
-      this.goBack = function goBack() {
-        $ionicHistory.goBack();
-      };
-
-      this.selectedService = 'remotestorage';
-
-      $scope.remoteStorage = {
-        email: ''
-      };
-
-      $scope.submitRemoteStorageEmail = (email) => {
-        if (!email) {
-          //TODO: actually do validation here
-          // return notification.error('Please enter a valid email.', 'Validation Error');
-        }
-
-        storage.connect(email);
-      };
-
-      this.services = {
-        'remotestorage': {
-          id: 'remotestorage',
-          name: 'remoteStorage',
-          description: 'Use remoteStorage to store your data.',
-          img: 'remotestorage.svg',
-          connect: () => {
-            let remoteStoragePopup = $ionicPopup.show({
-              template: `
-                <form ng-submit="submitRemoteStorageEmail(remoteStorage.email)"
-                  novalidate>
-                  <input type="email" placeholder="Your remoteStorage email."
-                    ng-model="remoteStorage.email" toc-auto-focus>
-                </form>`,
-              title: 'RemoteStorage Email',
-              scope: $scope,
-              buttons: [
-                {
-                  text: 'Cancel',
-                  type: 'button-outline button-calm'
-                },
-                {
-                  text: 'Connect',
-                  type: 'button-outline button-balanced',
-                  onTap: (event) => {
-                    if (!$scope.remoteStorage.email) {
-                      event.preventDefault();
-                    }
-
-                    $scope.submitRemoteStorageEmail($scope.remoteStorage.email);
-                  }
-                }
-              ]
-            });
-          }
-        },
-        'dropbox': {
-          id: 'dropbox',
-          name: 'Dropbox',
-          description: '(Coming soon) Use Dropbox to store your data.',
-          img: 'dropbox.svg',
-          connect: function connectDropbox() {
-
-          }
-        },
-        'googledrive': {
-          id: 'googledrive',
-          name: 'Google Drive',
-          description: '(Coming soon) Use Google Drive to store your data.',
-          img: 'googledrive.svg',
-          connect: function connectGoogledrive() {
-
-          }
-        }
-      };
-
-      this.connect = () => {
-        this.services[this.selectedService].connect();
-      }
-    }
-  };
-}
diff --git a/app/components/cloud-connect-form/cloud-connect-form.html b/app/components/cloud-connect-form/cloud-connect-form.html
deleted file mode 100644
index 18b51bc7..00000000
--- a/app/components/cloud-connect-form/cloud-connect-form.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<ion-content class="has-subfooter">
-  <div class="list">
-    <div class="item item-divider item-calm item-clear">
-      Select a cloud storage service
-    </div>
-    <ion-radio class="item item-avatar toc-square-avatar"
-      ng-repeat="(id, service) in ::cloudConnectForm.services track by id"
-      ng-model="cloudConnectForm.selectedService" ng-value="::id">
-      <img ng-src="assets/images/{{::service.img}}"
-        alt="Avatar for {{::service.name}}" />
-      <h2>{{::service.name}}</h2>
-      <p>{{::service.description}}</p>
-    </ion-radio>
-    <!-- <label class="item item-input item-stacked-label">
-      <span class="input-label">Email</span>
-      <input type="password" placeholder="Your remoteStorage.io email."
-        ng-model="cloudConnectForm.email" toc-auto-focus>
-    </label> -->
-  </div>
-</ion-content>
-<div class="bar bar-subfooter">
-  <div class="col">
-    <a onclick="window.open('https://remotestorage.io/get/', '_system');"
-      class="button button-block button-outline button-royal">
-      Get a storage account
-    </a>
-  </div>
-</div>
-<ion-footer-bar>
-  <div class="col">
-    <button class="button button-block button-outline button-calm"
-      ng-click="::cloudConnectForm.goBack()">
-      Back
-    </button>
-  </div>
-  <div class="col">
-    <button class="button button-block button-outline button-balanced"
-      ng-click="::cloudConnectForm.connect()">
-      Connect
-    </button>
-  </div>
-</ion-footer-bar>
diff --git a/app/components/cloud-connect-form/cloud-connect-form.js b/app/components/cloud-connect-form/cloud-connect-form.js
deleted file mode 100644
index 899ab2f3..00000000
--- a/app/components/cloud-connect-form/cloud-connect-form.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import angular from 'angular';
-
-import directive, { directiveName } from './cloud-connect-form-directive';
-
-export default angular.module('toc.components.cloud-connect-form', [])
-  .directive(directiveName, directive);
diff --git a/app/components/cloud-connect-modal/cloud-connect-modal-directive.js b/app/components/cloud-connect-modal/cloud-connect-modal-directive.js
new file mode 100644
index 00000000..d235f297
--- /dev/null
+++ b/app/components/cloud-connect-modal/cloud-connect-modal-directive.js
@@ -0,0 +1,116 @@
+import template from './cloud-connect-modal.html!text';
+
+export let directiveName = 'tocCloudConnectModal';
+export default /*@ngInject*/ function tocCloudConnectModal() {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+      removeModal: '&'
+    },
+    controllerAs: 'cloudConnectModal',
+    controller: /*@ngInject*/ function CloudConnectModalController(
+      $ionicPopup,
+      $scope,
+      identity,
+      storage
+    ) {
+      this.removeModal = $scope.removeModal;
+      this.selectedService = 'remotestorage';
+      this.userExists = identity.getUserExists();
+
+      this.remoteStorageEmail = '';
+
+      this.submitRemoteStorageEmail = () => {
+        if (!this.remoteStorageEmail) {
+          //validation is already done by angular form's email input
+          // email will be undefined if it didn't pass validation
+          return;
+        }
+
+        if (this.userExists) {
+          return $ionicPopup.confirm({
+              title: 'Preparing to Upload Data',
+              template: `
+                <p>Toc will try to upload your local data into this cloud account.</p>
+                <p>Please confirm this cloud account hasn't been used with Toc before.</p>
+              `,
+              cancelType: 'button-outline button-calm',
+              okText: 'Confirm',
+              okType: 'button-outline button-assertive'
+            })
+            .then((response) => {
+              if (!response) {
+                return;
+              }
+              storage.connect(this.remoteStorageEmail);
+            });
+        }
+
+        storage.connect(this.remoteStorageEmail);
+      };
+
+      this.services = {
+        'remotestorage': {
+          id: 'remotestorage',
+          name: 'remoteStorage',
+          description: 'An open protocol for web storage.',
+          img: 'remotestorage.svg',
+          connect: () => {
+            let remoteStoragePopup = $ionicPopup.show({
+              template: `
+                <form ng-submit="cloudConnectModal.submitRemoteStorageEmail()"
+                  novalidate>
+                  <input type="email" placeholder="Your remoteStorage email."
+                    ng-model="cloudConnectModal.remoteStorageEmail" toc-auto-focus>
+                </form>
+                `,
+              title: 'Connect remoteStorage',
+              scope: $scope,
+              buttons: [
+                {
+                  text: 'Cancel',
+                  type: 'button-outline button-calm'
+                },
+                {
+                  text: 'Connect',
+                  type: 'button-outline button-balanced',
+                  onTap: (event) => {
+                    if (!this.remoteStorageEmail) {
+                      event.preventDefault();
+                      return;
+                    }
+
+                    this.submitRemoteStorageEmail();
+                  }
+                }
+              ]
+            });
+          }
+        },
+        'dropbox': {
+          id: 'dropbox',
+          name: 'Dropbox',
+          description: '(Coming soon)',
+          img: 'dropbox.svg',
+          connect: function connectDropbox() {
+
+          }
+        },
+        'googledrive': {
+          id: 'googledrive',
+          name: 'Google Drive',
+          description: '(Coming soon)',
+          img: 'googledrive.svg',
+          connect: function connectGoogledrive() {
+
+          }
+        }
+      };
+
+      this.connect = () => {
+        this.services[this.selectedService].connect();
+      }
+    }
+  };
+}
diff --git a/app/components/cloud-connect-modal/cloud-connect-modal.html b/app/components/cloud-connect-modal/cloud-connect-modal.html
new file mode 100644
index 00000000..37080aa5
--- /dev/null
+++ b/app/components/cloud-connect-modal/cloud-connect-modal.html
@@ -0,0 +1,53 @@
+<ion-modal-view>
+  <ion-header-bar class="bar-royal">
+    <h1 class="title">Connect a Cloud Service</h1>
+  </ion-header-bar>
+  <ion-content class="has-subfooter">
+    <div class="list">
+      <div class="item item-divider item-calm item-clear">
+        Where would you like to store your data?
+      </div>
+      <ion-radio class="item item-avatar toc-square-avatar"
+        ng-repeat="(id, service) in ::cloudConnectModal.services track by id"
+        ng-model="cloudConnectModal.selectedService" ng-value="::id">
+        <img ng-src="assets/images/{{::service.img}}"
+          alt="Icon for {{::service.name}}" />
+        <h2>{{::service.name}}</h2>
+        <p>{{::service.description}}</p>
+      </ion-radio>
+      <!-- <label class="item item-input item-stacked-label">
+        <span class="input-label">Email</span>
+        <input type="password" placeholder="Your remoteStorage.io email."
+          ng-model="cloudConnectModal.email" toc-auto-focus>
+      </label> -->
+    </div>
+    <div class="card">
+      <div class="item item-text-wrap">
+        <p>Your data will stay private even on the cloud.</p>
+        <p>No one can access it without your password.</p>
+      </div>
+    </div>
+  </ion-content>
+  <div class="bar bar-subfooter">
+    <div class="col">
+      <a onclick="window.open('https://remotestorage.io/get/', '_system');"
+        class="button button-block button-outline button-royal">
+        Get a storage account
+      </a>
+    </div>
+  </div>
+  <ion-footer-bar>
+    <div class="col">
+      <button class="button button-block button-outline button-calm"
+        ng-click="::cloudConnectModal.removeModal()">
+        Cancel
+      </button>
+    </div>
+    <div class="col">
+      <button class="button button-block button-outline button-balanced"
+        ng-click="::cloudConnectModal.connect()">
+        Connect
+      </button>
+    </div>
+  </ion-footer-bar>
+</ion-modal-view>
diff --git a/app/components/cloud-connect-modal/cloud-connect-modal.js b/app/components/cloud-connect-modal/cloud-connect-modal.js
new file mode 100644
index 00000000..396d1ffd
--- /dev/null
+++ b/app/components/cloud-connect-modal/cloud-connect-modal.js
@@ -0,0 +1,6 @@
+import angular from 'angular';
+
+import directive, { directiveName } from './cloud-connect-modal-directive';
+
+export default angular.module('toc.components.cloud-connect-modal', [])
+  .directive(directiveName, directive);
diff --git a/app/components/cloud-manage-form/cloud-manage-form-directive.js b/app/components/cloud-manage-form/cloud-manage-form-directive.js
deleted file mode 100644
index 5c2ce623..00000000
--- a/app/components/cloud-manage-form/cloud-manage-form-directive.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import template from './cloud-manage-form.html!text';
-
-export let directiveName = 'tocCloudManageForm';
-export default /*@ngInject*/ function tocCloudManageForm() {
-  return {
-    restrict: 'E',
-    template: template,
-    controllerAs: 'cloudManageForm',
-    controller: /*@ngInject*/ function CloudManageFormController() {
-
-    }
-  };
-}
diff --git a/app/components/cloud-manage-form/cloud-manage-form.html b/app/components/cloud-manage-form/cloud-manage-form.html
deleted file mode 100644
index 8b5e92da..00000000
--- a/app/components/cloud-manage-form/cloud-manage-form.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="toc-flex-container">
-  <ion-scroll class="toc-flex-content">
-    <div class="list">
-      <div class="item item-divider item-calm item-clear">
-        Cloud accounts
-      </div>
-      <ion-radio class="item item-avatar"
-        ng-repeat="user in model.userList track by user.userInfo.id"
-        ng-model="model.selectedUser" ng-value="'{{user.userInfo.id}}'"
-        ng-click="userListModal.hide()"
-        icon="ion-checkmark">
-        <img ng-src="http://cdn.libravatar.org/avatar/{{user.userInfo.id | limitTo:32}}?d=identicon" alt="Avatar for {{user.userInfo.email}}" />
-        <h2>{{user.userInfo.displayName}}</h2>
-        <p>{{user.userInfo.id}}</p>
-      </ion-radio>
-    </div>
-  </ion-scroll>
-  <div class="toc-flex-footer">
-    <div class="row">
-      <div class="col">
-        <button ui-sref="app.public.signup"
-          class="button button-block button-outline button-calm">
-          Create an account
-        </button>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <button class="button button-block button-outline button-assertive"
-          ng-click="userListModal.hide()">
-          Cancel
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/app/components/cloud-manage-form/cloud-manage-form.js b/app/components/cloud-manage-form/cloud-manage-form.js
deleted file mode 100644
index b0b6d11f..00000000
--- a/app/components/cloud-manage-form/cloud-manage-form.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import angular from 'angular';
-
-import directive, { directiveName } from './cloud-manage-form-directive';
-
-export default angular.module('toc.components.cloud-manage-form', [])
-  .directive(directiveName, directive);
diff --git a/app/components/components.js b/app/components/components.js
index 6c72bf4e..db3bdd56 100644
--- a/app/components/components.js
+++ b/app/components/components.js
@@ -10,8 +10,7 @@ import passwordPromptModal from
   './password-prompt-modal/password-prompt-modal';
 import channelCard from './channel-card/channel-card';
 import channelList from './channel-list/channel-list';
-import cloudConnectForm from './cloud-connect-form/cloud-connect-form';
-import cloudManageForm from './cloud-manage-form/cloud-manage-form';
+import cloudConnectModal from './cloud-connect-modal/cloud-connect-modal';
 import messageList from './message-list/message-list';
 import notificationCard from './notification-card/notification-card';
 import notificationList from './notification-list/notification-list';
@@ -31,8 +30,7 @@ export default angular.module('toc.components', [
   passwordPromptModal.name,
   channelCard.name,
   channelList.name,
-  cloudConnectForm.name,
-  cloudManageForm.name,
+  cloudConnectModal.name,
   messageList.name,
   notificationCard.name,
   notificationList.name,
diff --git a/app/components/options-menu/options-menu-directive.js b/app/components/options-menu/options-menu-directive.js
index 7e8849b5..82e2a1b2 100644
--- a/app/components/options-menu/options-menu-directive.js
+++ b/app/components/options-menu/options-menu-directive.js
@@ -8,9 +8,24 @@ export default /*@ngInject*/ function tocOptionsMenu() {
     controllerAs: 'optionsMenu',
     controller: /*@ngInject*/ function OptionsMenuController(
       $ionicPopup,
+      $ionicModal,
+      $scope,
       session,
       state
     ) {
+      this.showCloudConnectModal = function showCloudConnectModal() {
+        this.cloudConnectModal = $ionicModal.fromTemplate(
+          `
+          <toc-cloud-connect-modal class="toc-modal-container"
+            remove-modal="optionsMenu.cloudConnectModal.remove()">
+          </toc-cloud-connect-modal>
+          `,
+          { scope: $scope }
+        );
+
+        this.cloudConnectModal.show();
+      };
+
       this.showDeleteDataConfirm = function showDeleteDataConfirm() {
         let deleteDataPopup = $ionicPopup.confirm({
           title: 'Remove Data',
diff --git a/app/components/options-menu/options-menu.html b/app/components/options-menu/options-menu.html
index ea333f50..673922bc 100644
--- a/app/components/options-menu/options-menu.html
+++ b/app/components/options-menu/options-menu.html
@@ -4,7 +4,7 @@ <h1 class="title">Options</h1>
 <ion-content>
   <div class="list">
     <div class="item" ng-click="optionsMenu.showCloudConnectModal()">
-      Connect a cloud account
+      Use this account on other devices
     </div>
     <div class="item" ng-click="optionsMenu.showDeleteDataConfirm()">
       Remove your data from this device
diff --git a/app/components/password-prompt-modal/password-prompt-modal-directive.js b/app/components/password-prompt-modal/password-prompt-modal-directive.js
index c46e8e78..03a1ef21 100644
--- a/app/components/password-prompt-modal/password-prompt-modal-directive.js
+++ b/app/components/password-prompt-modal/password-prompt-modal-directive.js
@@ -12,15 +12,17 @@ export default /*@ngInject*/ function tocPasswordPromptModal() {
     controller: /*@ngInject*/ function PasswordPromptModalController(
       $scope,
       $ionicLoading,
+      $ionicModal,
       $log,
       $timeout,
       $q,
       session,
+      identity,
       state
     ) {
       this.removeModal = $scope.removeModal;
 
-      this.userExists = state.cloudUnencrypted.cryptography.get() !== undefined;
+      this.userExists = identity.getUserExists();
 
       let staySignedIn = state.local.session.get(['staySignedIn']);
       this.staySignedIn = staySignedIn === undefined ? true : staySignedIn;
@@ -42,6 +44,19 @@ export default /*@ngInject*/ function tocPasswordPromptModal() {
           .catch($log.error);
           // .then(() => $ionicLoading.hide());
       };
+
+      this.showCloudConnectModal = function showCloudConnectModal() {
+        this.cloudConnectModal = $ionicModal.fromTemplate(
+          `
+          <toc-cloud-connect-modal class="toc-modal-container"
+            remove-modal="passwordPromptModal.cloudConnectModal.remove()">
+          </toc-cloud-connect-modal>
+          `,
+          { scope: $scope }
+        );
+
+        this.cloudConnectModal.show();
+      };
     }
   };
 }
diff --git a/app/components/password-prompt-modal/password-prompt-modal.html b/app/components/password-prompt-modal/password-prompt-modal.html
index 056ebe24..fb8a6143 100644
--- a/app/components/password-prompt-modal/password-prompt-modal.html
+++ b/app/components/password-prompt-modal/password-prompt-modal.html
@@ -83,6 +83,7 @@ <h1 class="title">
   <div class="bar bar-subfooter">
     <div class="col">
       <button type="button"
+        ng-click="passwordPromptModal.showCloudConnectModal()"
         class="button button-outline button-block button-royal">
         <!-- TODO: connect to different account if already connected -->
         {{
diff --git a/app/services/identity/identity-service.js b/app/services/identity/identity-service.js
index 4276a20f..408b3631 100644
--- a/app/services/identity/identity-service.js
+++ b/app/services/identity/identity-service.js
@@ -6,6 +6,9 @@ export default /*@ngInject*/ function identity(
   R,
   state
 ) {
+  let getUserExists = () =>
+    state.cloudUnencrypted.cryptography.get() !== undefined;
+
   let getAvatarBase = R.memoize(function getAvatarBase(identifier) {
     let identifierHash = cryptography.getMd5(identifier);
 
@@ -60,7 +63,7 @@ export default /*@ngInject*/ function identity(
       if (existingCredentials) {
         return $q.when();
       }
-      
+
       return state.save(
         state.local.cryptography,
         ['derivedCredentials'],
@@ -120,6 +123,7 @@ export default /*@ngInject*/ function identity(
   };
 
   return {
+    getUserExists,
     getAvatar,
     validateId,
     authenticate,