account menu sections

app/assets/javascripts/app/services/directives/accountDataMenu.js

@@ -7,11 +7,10 @@ class AccountDataMenu {
     };
   }
 
-  controller($scope, apiController, modelManager, keyManager, syncManager) {
+  controller($scope, apiController, modelManager, keyManager) {
     'ngInject';
 
     $scope.keys = keyManager.keys;
-    $scope.syncProviders = syncManager.syncProviders;
 
     $scope.destroyLocalData = function() {
       if(!confirm("Are you sure you want to end your session? This will delete all local items, sync providers, keys, and extensions.")) {

app/assets/javascripts/app/services/directives/accountExportSection.js

@@ -1,8 +1,8 @@
-class ImportExportMenu {
+class AccountExportSection {
 
   constructor() {
     this.restrict = "E";
-    this.templateUrl = "frontend/directives/import-export-menu.html";
+    this.templateUrl = "frontend/directives/account-menu/account-export-section.html";
     this.scope = {
     };
   }
@@ -76,4 +76,4 @@ class ImportExportMenu {
 
 }
 
-angular.module('app.frontend').directive('importExportMenu', () => new ImportExportMenu);
+angular.module('app.frontend').directive('accountExportSection', () => new AccountExportSection);

app/assets/javascripts/app/services/directives/accountKeysSection.js

@@ -2,7 +2,7 @@ class AccountKeysSection {
 
   constructor() {
     this.restrict = "E";
-    this.templateUrl = "frontend/directives/account-keys-section.html";
+    this.templateUrl = "frontend/directives/account-menu/account-keys-section.html";
     this.scope = {
     };
   }

app/assets/javascripts/app/services/directives/accountNewAccountSection.js

@@ -1,8 +1,8 @@
-class AccountVendorAccountSection {
+class AccountNewAccountSection {
 
   constructor() {
     this.restrict = "E";
-    this.templateUrl = "frontend/directives/account-vendor-account-section.html";
+    this.templateUrl = "frontend/directives/account-menu/account-new-account-section.html";
     this.scope = {
     };
   }
@@ -10,13 +10,20 @@ class AccountVendorAccountSection {
   controller($scope, apiController, modelManager, $timeout, dbManager, syncManager) {
     'ngInject';
 
-    $scope.loginData = {mergeLocal: true, url: syncManager.serverURL()};
+    $scope.formData = {mergeLocal: true, url: syncManager.serverURL()};
     $scope.user = apiController.user;
 
+    $scope.showForm = syncManager.syncProviders.length == 0;
+
     $scope.changePasswordPressed = function() {
       $scope.showNewPasswordForm = !$scope.showNewPasswordForm;
     }
 
+    $scope.submitExternalSyncURL = function() {
+      syncManager.addSyncProviderFromURL($scope.newSyncData.url);
+      $scope.newSyncData.showAddSyncForm = false;
+    }
+
     $scope.signOutPressed = function() {
       $scope.showAccountMenu = false;
       apiController.signoutOfStandardFile(false, function(){
@@ -45,21 +52,21 @@ class AccountVendorAccountSection {
     }
 
     $scope.mergeLocalChanged = function() {
-      if(!$scope.loginData.mergeLocal) {
+      if(!$scope.formData.mergeLocal) {
         if(!confirm("Unchecking this option means any of the notes you have written while you were signed out will be deleted. Are you sure you want to discard these notes?")) {
-          $scope.loginData.mergeLocal = true;
+          $scope.formData.mergeLocal = true;
         }
       }
     }
 
     $scope.loginSubmitPressed = function() {
-      $scope.loginData.status = "Generating Login Keys...";
+      $scope.formData.status = "Generating Login Keys...";
-      console.log("logging in with url", $scope.loginData.url);
+      console.log("logging in with url", $scope.formData.url);
       $timeout(function(){
-        apiController.login($scope.loginData.url, $scope.loginData.email, $scope.loginData.user_password, function(response){
+        apiController.login($scope.formData.url, $scope.formData.email, $scope.formData.user_password, function(response){
           if(!response || response.error) {
             var error = response ? response.error : {message: "An unknown error occured."}
-            $scope.loginData.status = null;
+            $scope.formData.status = null;
             if(!response || (response && !response.didDisplayAlert)) {
               alert(error.message);
             }
@@ -71,13 +78,13 @@ class AccountVendorAccountSection {
     }
 
     $scope.submitRegistrationForm = function() {
-      $scope.loginData.status = "Generating Account Keys...";
+      $scope.formData.status = "Generating Account Keys...";
 
       $timeout(function(){
-        apiController.register($scope.loginData.url, $scope.loginData.email, $scope.loginData.user_password, function(response){
+        apiController.register($scope.formData.url, $scope.formData.email, $scope.formData.user_password, function(response){
           if(!response || response.error) {
             var error = response ? response.error : {message: "An unknown error occured."}
-            $scope.loginData.status = null;
+            $scope.formData.status = null;
             alert(error.message);
           } else {
             $scope.onAuthSuccess(response.user);
@@ -98,7 +105,7 @@ class AccountVendorAccountSection {
         $scope.showRegistration = false;
       };
 
-      if(!$scope.loginData.mergeLocal) {
+      if(!$scope.formData.mergeLocal) {
           dbManager.clearAllItems(function(){
             block();
           });
@@ -110,4 +117,4 @@ class AccountVendorAccountSection {
   }
 }
 
-angular.module('app.frontend').directive('accountVendorAccountSection', () => new AccountVendorAccountSection);
+angular.module('app.frontend').directive('accountNewAccountSection', () => new AccountNewAccountSection);

app/assets/javascripts/app/services/directives/accountSyncSection.js

@@ -2,7 +2,7 @@ class AccountSyncSection {
 
   constructor() {
     this.restrict = "E";
-    this.templateUrl = "frontend/directives/account-sync-section.html";
+    this.templateUrl = "frontend/directives/account-menu/account-sync-section.html";
     this.scope = {
     };
   }
@@ -11,13 +11,8 @@ class AccountSyncSection {
     'ngInject';
 
       $scope.syncProviders = syncManager.syncProviders;
-      $scope.newSyncData = {showAddSyncForm: false}
       $scope.keys = keyManager.keys;
-
+      $scope.showSection = $scope.syncProviders.length > 0;
-      $scope.submitExternalSyncURL = function() {
-        syncManager.addSyncProviderFromURL($scope.newSyncData.url);
-        $scope.newSyncData.showAddSyncForm = false;
-      }
 
       $scope.enableSyncProvider = function(provider, primary) {
         if(!provider.keyName) {

app/assets/stylesheets/app/_header.scss

@@ -6,6 +6,18 @@
   float: right;
 }
 
+.mt-5 {
+  margin-top: 5px;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.faded {
+  opacity: 0.5;
+}
+
 .footer-bar {
   position: relative;
   width: 100%;
@@ -18,6 +30,10 @@
   color: $dark-gray;
   border-bottom: 1px solid rgba(#979799, 0.4);
 
+  .medium-text {
+    font-size: 14px;
+  }
+
   a {
     font-weight: bold;
     cursor: pointer;
@@ -49,7 +65,7 @@
   h3 {
     font-size: 14px !important;
     margin-top: 4px !important;
-    margin-bottom: 0px !important;
+    margin-bottom: 3px !important;
   }
 
   h4 {
@@ -70,6 +86,15 @@
     border-radius: 0px;
   }
 
+  .center-align {
+    text-align: center;
+  }
+
+  .center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .block {
     display: block;
   }

app/assets/templates/frontend/directives/account-data-menu.html.haml

@@ -2,24 +2,16 @@
   .panel-body
 
     %section.gray-bg.medium-padding{"ng-init" => "showSN = true"}
-      %h3{"ng-click" => "showSN = !showSN"} Standard Notes Account
+      %account-new-account-section
-      .small-v-space
-      %account-vendor-account-section{"ng-if" => "showSN"}
 
-    %h4
+    %section.gray-bg.medium-padding
-      %a{"ng-click" => "showIO = !showIO"} Import/Export
+      %account-sync-section
-    %section.gray-bg{"ng-if" => "showIO"}
-      %import-export-menu{"ng-if" => "showIO"}
 
-    %h4
+    %section.gray-bg.medium-padding
-      %a{"ng-click" => "showAdvanced = !showAdvanced"} Advanced
+      %account-export-section
-    %div{"ng-if" => "showAdvanced"}
+
-      %section.gray-bg.medium-padding
+    %section.gray-bg.medium-padding
-        %h3 Sync Locations ({{syncProviders.length}})
+      %account-keys-section
-        %account-sync-section
       
-      %section.gray-bg.medium-padding
-        %h3 Encryption Keys ({{keys.length}})
-        %account-keys-section
     %h4
       %a{"ng-click" => "destroyLocalData()"} Destroy all local data

app/assets/templates/frontend/directives/account-keys-section.html.haml

@@ -1,9 +0,0 @@
-%section.white-bg{"ng-repeat" => "key in keys track by key.name"}
-  %label {{key.name}}
-  %p.wrap {{key.key}}
-
-%a{"ng-click" => "newKeyData.showForm = !newKeyData.showForm"} Add New Key
-%form{"ng-if" => "newKeyData.showForm"}
-  %input{"ng-model" => "newKeyData.name", "placeholder" => "Name your key"}
-  %input{"ng-model" => "newKeyData.key", "placeholder" => "Key"}
-  %button.light{"ng-click" => "submitNewKeyForm()"} Add Key

app/assets/templates/frontend/directives/account-menu/account-export-section.html.haml

@@ -0,0 +1,31 @@
+%h3{"ng-click" => "showSection = !showSection"}
+  %a Import or export data
+
+%div{"ng-if" => "showSection"}
+  .options{"style" => "font-size: 12px; margin-top: 4px;"}
+    %label{"ng-if" => "user"}
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"}
+      Encrypted with Standard File key
+    %label
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"}
+      {{user ? 'Encrypted with custom key' : 'Encrypted' }}
+    %div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"}
+      %input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"}
+    %label
+      %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"}
+      Decrypted
+
+  %a{"ng-click" => "downloadDataArchive()"} Download Data Archive
+
+  %div{"ng-if" => "!importData.loading"}
+    %label#import-archive
+      %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
+      %a.disabled
+        %span
+          Import Data from Archive
+    %div{"ng-if" => "importData.requestPassword"}
+      Enter the account password associated with the import file.
+      %input{"type" => "text", "ng-model" => "importData.password"}
+      %button{"ng-click" => "submitImportPassword()"} Decrypt & Import
+
+  .spinner{"ng-if" => "importData.loading"}

app/assets/templates/frontend/directives/account-menu/account-keys-section.html.haml

@@ -0,0 +1,18 @@
+%h3{"ng-click" => "showSection = !showSection"}
+  %a Manage keys
+
+%div{"ng-if" => "showSection"}
+  %h4 Encryption Keys
+
+  %div{"ng-if" => "showSection"}
+    %p Keys are used to encrypt and decrypt your data.
+    .mt-10
+      %section.white-bg{"ng-repeat" => "key in keys track by key.name"}
+        %label {{key.name}}
+        %p.wrap {{key.key}}
+
+      %a.block.mt-10{"ng-click" => "newKeyData.showForm = !newKeyData.showForm"} Add New Key
+      %form{"ng-if" => "newKeyData.showForm"}
+        %input{"ng-model" => "newKeyData.name", "placeholder" => "Name your key"}
+        %input{"ng-model" => "newKeyData.key", "placeholder" => "Key"}
+        %button.light{"ng-click" => "submitNewKeyForm()"} Add Key

app/assets/templates/frontend/directives/account-menu/account-new-account-section.html.haml

@@ -1,23 +1,15 @@
-%div{"ng-if" => "user"}
+%h3{"ng-click" => "showForm = !showForm"}
-  %h3 {{user.email}}
+  %a Add a sync account
-  %p {{serverURL}}
+%div{"ng-if" => "showForm"}
-  %div{"ng-if" => "user"}
+  %p Enter your <a href="https://standardnotes.org" target="_blank">Standard File</a> account information.
-    %a{"ng-click" => "signOutPressed()"} Sign out
+  .small-v-space
-    %p Note: Signing out does not delete your local items, extensions, and keys.
-  %label Local Encryption
-  %p Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes.
-  %label Status:
-  {{encryptionStatusForNotes()}}
-%div{"ng-if" => "!user"}
-  %label Sign in or Register (optional)
-  %p Enter your <a href="https://standardnotes.org" target="_blank">Standard Notes</a> account information.
   %form.account-form{'name' => "loginForm"}
-    %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'}
+    %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
-    %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'}
+    %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'formData.email'}
-    %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'}
+    %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'formData.user_password'}
     .checkbox{"ng-if" => "localNotesCount() > 0"}
       %label
-        %input{"type" => "checkbox", "ng-model" => "loginData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
+        %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
           Merge local notes ({{localNotesCount()}} notes)
     %button.btn.dark-button.half-button{"ng-click" => "loginSubmitPressed()", "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
       %span Sign In
@@ -26,7 +18,15 @@
     %br
     .block{"style" => "margin-top: 10px; font-size: 14px; font-weight: bold; text-align: center;"}
       %a.btn{"ng-click" => "showResetForm = !showResetForm"} Passwords cannot be forgotten.
-    %em{"ng-if" => "loginData.status", "style" => "font-size: 14px;"} {{loginData.status}}
+    %em{"ng-if" => "formData.status", "style" => "font-size: 14px;"} {{formData.status}}
+
+  %label.center-align.block.faded — OR —
+  %a.block.center-align.medium-text{"ng-if" => "!formData.showAddLinkForm", "ng-click" => "formData.showAddLinkForm = true"} Add sync using secret link
+  %form{"ng-if" => "formData.showAddLinkForm"}
+    %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Secret URL', :required => true, :type => 'url', 'ng-model' => 'formData.url'}
+    %button.btn.dark-button.btn-block{"ng-click" => "submitExternalSyncURL()"}
+      Add Sync Account
+    %a.block.center-align.mt-5{"ng-click" => "formData.showAddLinkForm = false"} Cancel
 
   %div{"ng-if" => "showResetForm"}
     %p{"style" => "font-size: 13px; text-align: center;"}

app/assets/templates/frontend/directives/account-menu/account-sync-section.html.haml

@@ -0,0 +1,26 @@
+%h3{"ng-click" => "showSection = !showSection"}
+  %a Your sync accounts ({{syncProviders.length}})
+
+%div{"ng-if" => "showSection"}
+  .small-v-space
+  %section.white-bg{"ng-repeat" => "provider in syncProviders"}
+    %label {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}}
+    %em{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
+    %p {{provider.url}}
+    %section.inline-h
+      %div{"ng-if" => "!provider.keyName || provider.showKeyForm"}
+        %p
+          %strong Choose encryption key:
+        %select{"ng-model" => "provider.formData.keyName"}
+          %option{"ng-repeat" => "key in keys", "ng-selected" => "{{key.name == provider.formData.keyName}}", "value" => "{{key.name}}"}
+            {{key.name}}
+        %button{"ng-click" => "saveKey(provider)"} Set
+
+      %div{"ng-if" => "!provider.enabled"}
+        %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main
+        %button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary
+      %button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key
+      %button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Provider
+      %div{"style" => "height: 30px;", "delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}
+        %strong{"style" => "float: left;"} Syncing: {{provider.syncStatus.statusString}}
+        .spinner{"style" => "float: right"}

app/assets/templates/frontend/directives/account-sync-section.html.haml

@@ -1,27 +0,0 @@
-%section.white-bg{"ng-repeat" => "provider in syncProviders"}
-  %label {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}}
-  %em{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
-  %p {{provider.url}}
-  %section.inline-h
-    %div{"ng-if" => "!provider.keyName || provider.showKeyForm"}
-      %p
-        %strong Choose encryption key:
-      %select{"ng-model" => "provider.formData.keyName"}
-        %option{"ng-repeat" => "key in keys", "ng-selected" => "{{key.name == provider.formData.keyName}}", "value" => "{{key.name}}"}
-          {{key.name}}
-      %button{"ng-click" => "saveKey(provider)"} Set
-
-    %div{"ng-if" => "!provider.enabled"}
-      %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main
-      %button.light{"ng-if" => "syncProviders.length > 1", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary
-    %button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key
-    %button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Provider
-    %div{"style" => "height: 30px;", "delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}
-      %strong{"style" => "float: left;"} Syncing: {{provider.syncStatus.statusString}}
-      .spinner{"style" => "float: right"}
-
-%a{"ng-click" => "newSyncData.showAddSyncForm = !newSyncData.showAddSyncForm"} Add external sync with Secret URL
-%form{"ng-if" => "newSyncData.showAddSyncForm"}
-  %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Secret URL', :required => true, :type => 'url', 'ng-model' => 'newSyncData.url'}
-  %button.btn.dark-button.btn-block{"ng-click" => "submitExternalSyncURL()"}
-    Add External Sync

app/assets/templates/frontend/directives/import-export-menu.html.haml

@@ -1,27 +0,0 @@
-.options{"style" => "font-size: 12px; margin-top: 4px;"}
-  %label{"ng-if" => "user"}
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'mk'", "ng-change" => "archiveFormData.encryption_type = 'mk'"}
-    Encrypted with Standard File key
-  %label
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'ek'", "ng-change" => "archiveFormData.encryption_type = 'ek'"}
-    {{user ? 'Encrypted with custom key' : 'Encrypted' }}
-  %div{"ng-if" => "!user || (user && archiveFormData.encryption_type == 'ek')"}
-    %input{"ng-model" => "archiveFormData.ek", "placeholder" => "Encryption key"}
-  %label
-    %input{"type" => "radio", "ng-model" => "archiveFormData.encryption_type", "ng-value" => "'none'", "ng-change" => "archiveFormData.encryption_type = 'none'"}
-    Decrypted
-
-%a{"ng-click" => "downloadDataArchive()"} Download Data Archive
-
-%div{"ng-if" => "!importData.loading"}
-  %label#import-archive
-    %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
-    %a.disabled
-      %span
-        Import Data from Archive
-  %div{"ng-if" => "importData.requestPassword"}
-    Enter the account password associated with the import file.
-    %input{"type" => "text", "ng-model" => "importData.password"}
-    %button{"ng-click" => "submitImportPassword()"} Decrypt & Import
-
-.spinner{"ng-if" => "importData.loading"}