diff --git a/app/assets/javascripts/app/services/directives/accountDataMenu.js b/app/assets/javascripts/app/services/directives/accountDataMenu.js index 3a34027de..2d5c5fedf 100644 --- a/app/assets/javascripts/app/services/directives/accountDataMenu.js +++ b/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.")) { diff --git a/app/assets/javascripts/app/services/directives/importExportMenu.js b/app/assets/javascripts/app/services/directives/accountExportSection.js similarity index 90% rename from app/assets/javascripts/app/services/directives/importExportMenu.js rename to app/assets/javascripts/app/services/directives/accountExportSection.js index fe96806e1..335ae347b 100644 --- a/app/assets/javascripts/app/services/directives/importExportMenu.js +++ b/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); diff --git a/app/assets/javascripts/app/services/directives/accountKeysSection.js b/app/assets/javascripts/app/services/directives/accountKeysSection.js index 0f2566729..db9526488 100644 --- a/app/assets/javascripts/app/services/directives/accountKeysSection.js +++ b/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 = { }; } @@ -19,7 +19,7 @@ class AccountKeysSection { alert("This key name is already in use. Please use a different name."); return; } - + $scope.newKeyData.showForm = false; } } diff --git a/app/assets/javascripts/app/services/directives/accountVendorAccountSection.js b/app/assets/javascripts/app/services/directives/accountNewAccountSection.js similarity index 69% rename from app/assets/javascripts/app/services/directives/accountVendorAccountSection.js rename to app/assets/javascripts/app/services/directives/accountNewAccountSection.js index 789078619..fceb4e092 100644 --- a/app/assets/javascripts/app/services/directives/accountVendorAccountSection.js +++ b/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..."; - console.log("logging in with url", $scope.loginData.url); + $scope.formData.status = "Generating Login Keys..."; + 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); diff --git a/app/assets/javascripts/app/services/directives/accountSyncSection.js b/app/assets/javascripts/app/services/directives/accountSyncSection.js index bccec8351..c9009d772 100644 --- a/app/assets/javascripts/app/services/directives/accountSyncSection.js +++ b/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.submitExternalSyncURL = function() { - syncManager.addSyncProviderFromURL($scope.newSyncData.url); - $scope.newSyncData.showAddSyncForm = false; - } + $scope.showSection = $scope.syncProviders.length > 0; $scope.enableSyncProvider = function(provider, primary) { if(!provider.keyName) { diff --git a/app/assets/stylesheets/app/_header.scss b/app/assets/stylesheets/app/_header.scss index db519ee40..a69286884 100644 --- a/app/assets/stylesheets/app/_header.scss +++ b/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; } diff --git a/app/assets/templates/frontend/directives/account-data-menu.html.haml b/app/assets/templates/frontend/directives/account-data-menu.html.haml index a778bdb31..2b5128125 100644 --- a/app/assets/templates/frontend/directives/account-data-menu.html.haml +++ b/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 - .small-v-space - %account-vendor-account-section{"ng-if" => "showSN"} + %account-new-account-section - %h4 - %a{"ng-click" => "showIO = !showIO"} Import/Export - %section.gray-bg{"ng-if" => "showIO"} - %import-export-menu{"ng-if" => "showIO"} + %section.gray-bg.medium-padding + %account-sync-section - %h4 - %a{"ng-click" => "showAdvanced = !showAdvanced"} Advanced - %div{"ng-if" => "showAdvanced"} - %section.gray-bg.medium-padding - %h3 Sync Locations ({{syncProviders.length}}) - %account-sync-section + %section.gray-bg.medium-padding + %account-export-section - %section.gray-bg.medium-padding - %h3 Encryption Keys ({{keys.length}}) - %account-keys-section + %section.gray-bg.medium-padding + %account-keys-section + %h4 %a{"ng-click" => "destroyLocalData()"} Destroy all local data diff --git a/app/assets/templates/frontend/directives/account-keys-section.html.haml b/app/assets/templates/frontend/directives/account-keys-section.html.haml deleted file mode 100644 index a82336b9c..000000000 --- a/app/assets/templates/frontend/directives/account-keys-section.html.haml +++ /dev/null @@ -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 diff --git a/app/assets/templates/frontend/directives/account-menu/account-export-section.html.haml b/app/assets/templates/frontend/directives/account-menu/account-export-section.html.haml new file mode 100644 index 000000000..b22b6d178 --- /dev/null +++ b/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"} diff --git a/app/assets/templates/frontend/directives/account-menu/account-keys-section.html.haml b/app/assets/templates/frontend/directives/account-menu/account-keys-section.html.haml new file mode 100644 index 000000000..7295cb611 --- /dev/null +++ b/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 diff --git a/app/assets/templates/frontend/directives/account-vendor-account-section.html.haml b/app/assets/templates/frontend/directives/account-menu/account-new-account-section.html.haml similarity index 57% rename from app/assets/templates/frontend/directives/account-vendor-account-section.html.haml rename to app/assets/templates/frontend/directives/account-menu/account-new-account-section.html.haml index f3dcf5993..758c4b570 100644 --- a/app/assets/templates/frontend/directives/account-vendor-account-section.html.haml +++ b/app/assets/templates/frontend/directives/account-menu/account-new-account-section.html.haml @@ -1,23 +1,15 @@ -%div{"ng-if" => "user"} - %h3 {{user.email}} - %p {{serverURL}} - %div{"ng-if" => "user"} - %a{"ng-click" => "signOutPressed()"} Sign out - %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 Standard Notes account information. +%h3{"ng-click" => "showForm = !showForm"} + %a Add a sync account +%div{"ng-if" => "showForm"} + %p Enter your Standard File account information. + .small-v-space %form.account-form{'name' => "loginForm"} - %input.form-control{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'loginData.url'} - %input.form-control{:autofocus => 'autofocus', :name => 'email', :placeholder => 'Email', :required => true, :type => 'email', 'ng-model' => 'loginData.email'} - %input.form-control{:placeholder => 'Password', :name => 'password', :required => true, :type => 'password', 'ng-model' => 'loginData.user_password'} + %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' => 'formData.email'} + %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;"} diff --git a/app/assets/templates/frontend/directives/account-menu/account-sync-section.html.haml b/app/assets/templates/frontend/directives/account-menu/account-sync-section.html.haml new file mode 100644 index 000000000..6d430bd91 --- /dev/null +++ b/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"} diff --git a/app/assets/templates/frontend/directives/account-sync-section.html.haml b/app/assets/templates/frontend/directives/account-sync-section.html.haml deleted file mode 100644 index 1e7e5f7cb..000000000 --- a/app/assets/templates/frontend/directives/account-sync-section.html.haml +++ /dev/null @@ -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 diff --git a/app/assets/templates/frontend/directives/import-export-menu.html.haml b/app/assets/templates/frontend/directives/import-export-menu.html.haml deleted file mode 100644 index f20e60863..000000000 --- a/app/assets/templates/frontend/directives/import-export-menu.html.haml +++ /dev/null @@ -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"}