V2

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

@@ -6,7 +6,7 @@
       .mb-10
 
         .step-one{"ng-if" => "!formData.showLogin && !formData.showRegister"}
-          %h3 Sign in or register to enable sync and encryption.
+          %h3 Sign in or register to enable sync and end-to-end encryption.
           .small-v-space
 
           .button-group.mt-5
@@ -31,10 +31,14 @@
                 %label.pull-left Sync Server Domain
               %input.form-control.mt-5{:name => 'server', :placeholder => 'Server URL', :required => true, :type => 'text', 'ng-model' => 'formData.url'}
 
-            .checkbox.mt-10{"ng-if" => "localNotesCount() > 0"}
+            .checkbox.mt-10
+              %p
+                %input{"type" => "checkbox", "ng-model" => "formData.ephemeral", "ng-true-value" => "false", "ng-false-value" => "true"}
+                  Stay signed in
+            .checkbox.mt-10{"ng-if" => "notesAndTagsCount() > 0"}
               %p
                 %input{"type" => "checkbox", "ng-model" => "formData.mergeLocal", "ng-bind" => "true", "ng-change" => "mergeLocalChanged()"}
-                  Merge local notes ({{localNotesCount()}} notes)
+                  Merge local data ({{notesAndTagsCount()}} notes and tags)
             %button.ui-button.block.mt-10{"ng-click" => "submitAuthForm()"} {{formData.showLogin ? "Sign In" : "Register"}}
 
         .mt-15{"ng-if" => "formData.showRegister"}
@@ -48,8 +52,8 @@
     %div{"ng-if" => "user"}
       %h2 {{user.email}}
       %p {{server}}
-      %div.bold.mt-10.blue{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
-        .spinner.inline.mr-5.blue
+      %div.bold.mt-10.tinted{"delay-hide" => "true", "show" => "syncStatus.syncOpInProgress || syncStatus.needsMoreSync", "delay" => "1000"}
+        .spinner.inline.mr-5.tinted
         {{"Syncing" + (syncStatus.total > 0 ? ":" : "")}}
         %span{"ng-if" => "syncStatus.total > 0"} {{syncStatus.current}}/{{syncStatus.total}}
       %p.bold.mt-10.red.block{"ng-if" => "syncStatus.error"} Error syncing: {{syncStatus.error.message}}
@@ -104,20 +108,37 @@
               %input.form-control{:type => 'password', "ng-model" => "securityUpdateData.password", "placeholder" => "Enter password"}
               %button.ui-button.block{"ng-click" => "submitSecurityUpdateForm()"} Update
           %div.mt-5{"ng-if" => "securityUpdateData.processing"}
-            %p.blue Processing...
+            %p.tinted Processing...
 
 
+    .mt-25
+      %h4 Encryption Status
+      %p
+        {{encryptionStatusString()}}
+      %div.mt-5{"ng-if" => "encryptionEnabled()"}
+        %i {{encryptionStatusForNotes()}}
+
+    .mt-25
+      %h4 Passcode Lock
+      %div{"ng-if" => "!hasPasscode() && passcodeOptionAvailable()"}
+        %p Add an app passcode to lock the app and encrypt on-device key storage.
+        %a.block.mt-5{"ng-click" => "addPasscodeClicked()", "ng-if" => "!formData.showPasscodeForm"} Add Passcode
+
+        .mt-5{"ng-if" => "formData.showPasscodeForm"}
+          %p.bold Choose a passcode:
+          %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.passcode", "placeholder" => "Passcode", "autofocus" => "true"}
+          %input.form-control.mt-10{:type => 'password', "ng-model" => "formData.confirmPasscode", "placeholder" => "Confirm Passcode"}
+          %button.standard.ui-button.block.tinted.mt-5{"ng-click" => "submitPasscodeForm()"} Set Passcode
+      %div{"ng-if" => "hasPasscode()"}
+        %p
+          Passcode lock is enabled.
+          %span{"ng-if" => "isDesktopApplication()"} Your passcode will be required on new sessions after app quit.
+        %a.block.mt-5{"ng-click" => "removePasscodePressed()"} Remove Passcode
+      %div{"ng-if" => "!passcodeOptionAvailable()"}
+        %p Passcode lock is only available to permanent sessions. (You chose not to stay signed in.)
 
 
 
-      .medium-v-space
-
-      %h4 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.
-      %div.mt-5
-        %label Status:
-        {{encryptionStatusForNotes()}}
-
     .mt-25{"ng-if" => "!importData.loading"}
       %h4 Data Archives
       .mt-5{"ng-if" => "user"}
@@ -132,25 +153,15 @@
 
       %label.block.mt-5
         %input{"type" => "file", "style" => "display: none;", "file-change" => "->", "handler" => "importFileSelected(files)"}
-        .fake-link Import Data from Archive
+        .fake-link.tinted Import Data from Archive
 
       %div{"ng-if" => "importData.requestPassword"}
         %p Enter the account password associated with the import file.
-        %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password"}
-        %button.standard.ui-button.block.blue.mt-5{"ng-click" => "submitImportPassword()"} Decrypt & Import
+        %input.form-control.mt-5{:type => 'password', "ng-model" => "importData.password", "autofocus" => "true"}
+        %button.standard.ui-button.block.tinted.mt-5{"ng-click" => "submitImportPassword()"} Decrypt & Import
 
       %p.mt-5{"ng-if" => "user"} Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose "Decrypted".
 
     .spinner.mt-10{"ng-if" => "importData.loading"}
 
-    .mt-25
-      %h4 Analytics
-      %p
-        Help Standard Notes improve by sending anonymous data on general usage.
-        %a{"href" => "https://standardnotes.org/privacy", "target" => "_blank"} Learn more.
-      %div.mt-5
-        %label Status:
-        {{analyticsManager.enabled ? "Enabled" : "Disabled"}}
-        %a{"ng-click" => "analyticsManager.toggleStatus()"} {{analyticsManager.enabled ? "Disable" : "Enable"}}
-
     %a.block.mt-25.red{"ng-click" => "destroyLocalData()"}  {{ user ? "Sign out and clear local data" : "Clear all local data" }}

app/assets/templates/frontend/directives/contextual-menu.html.haml

@@ -10,7 +10,7 @@
     %ul{"ng-if" => "!extension.hide"}
       %li.menu-item{"ng-repeat" => "action in extension.actionsWithContextForItem(item)", "ng-click" => "executeAction(action, extension);",
       "ng-class" => "{'faded' : !isActionEnabled(action, extension)}"}
-        .menu-item-title {{action.label}}
+        %label.menu-item-title {{action.label}}
         .menu-item-subtitle {{action.desc}}
 
         .small.normal{"ng-if" => "!isActionEnabled(action, extension)"}
@@ -19,7 +19,7 @@
         %div{"ng-if" => "action.showNestedActions"}
           %ul.mt-10
             %li.menu-item.white-bg.nested-hover{"ng-repeat" => "subaction in action.subactions", "ng-click" => "executeAction(subaction, extension, action); $event.stopPropagation();", "style" => "margin-top: -1px;"}
-              .menu-item-title {{subaction.label}}
+              %label.menu-item-title {{subaction.label}}
               .menu-item-subtitle {{subaction.desc}}
               %span{"ng-if" => "subaction.running"}
                 .spinner{"style" => "margin-top: 3px;"}

app/assets/templates/frontend/directives/editor-menu.html.haml

@@ -4,7 +4,7 @@
   %ul
     %li.menu-item{"ng-repeat" => "editor in editorManager.systemEditors", "ng-click" => "selectEditor($event, editor)"}
       %span.pull-left.mr-10{"ng-if" => "selectedEditor === editor"} ✓
-      .menu-item-title.pull-left {{editor.name}}
+      %label.menu-item-title.pull-left {{editor.name}}
 
   %div{"ng-if" => "editorManager.externalEditors.length > 0"}
     .header
@@ -13,6 +13,6 @@
     %ul
       %li.menu-item{"ng-repeat" => "editor in editorManager.externalEditors", "ng-click" => "selectEditor($event, editor)"}
         %strong.red.medium{"ng-if" => "editor.conflict_of"} Conflicted copy
-        .menu-item-title
+        %label.menu-item-title
           {{editor.name}}
-          %span.inline.blue{"style" => "margin-left: 8px;", "ng-if" => "selectedEditor === editor"} ✓
+          %span.inline.tinted{"style" => "margin-left: 8px;", "ng-if" => "selectedEditor === editor"} ✓

app/assets/templates/frontend/directives/global-extensions-menu.html.haml

@@ -2,15 +2,15 @@
   .panel-body
     .container
       .float-group.h20
-        %h1.blue.pull-left Extensions
+        %h1.tinted.pull-left Extensions
         %a.block.pull-right.dashboard-link{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"} Open Dashboard
       %div.clear{"ng-if" => "!extensionManager.extensions.length && !themeManager.themes.length && !editorManager.externalEditors.length"}
         %p Customize your experience with editors, themes, and actions.
-        .blue-box.mt-10
+        .tinted-box.mt-10
           %h3 Available as part of the Extended subscription.
           %p.mt-5 Note history
           %p.mt-5 Automated backups
-          %p.mt-5 All editors, themes, and actions
+          %p.mt-5 Editors, themes, and actions
           %a{"href" => "https://standardnotes.org/extensions", "target" => "_blank"}
             %button.mt-10
               %h3 Learn More
@@ -24,7 +24,7 @@
             %h3 {{theme.name}}
             %a{"ng-if" => "!themeManager.isThemeActive(theme)", "ng-click" => "themeManager.activateTheme(theme); $event.stopPropagation();"} Activate
             %a{"ng-if" => "themeManager.isThemeActive(theme)", "ng-click" => "themeManager.deactivateTheme(theme); $event.stopPropagation();"} Deactivate
-            %div{"ng-if" => "theme.showDetails"}
+            .mt-3{"ng-if" => "theme.showDetails"}
               .link-group
                 %a.red{"ng-click" => "deleteTheme(theme); $event.stopPropagation();"} Delete
                 %a{"ng-click" => "theme.showLink = !theme.showLink; $event.stopPropagation();"} Show Link
@@ -43,7 +43,7 @@
             %div.mt-5{"ng-if" => "editor.showDetails"}
               .link-group
                 %a{"ng-if" => "!editor.default", "ng-click" => "setDefaultEditor(editor); $event.stopPropagation();"} Make Default
-                %a.blue{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove as Default
+                %a.tinted{"ng-if" => "editor.default", "ng-click" => "removeDefaultEditor(editor); $event.stopPropagation();"} Remove as Default
                 %a{"ng-click" => "editor.showUrl = !editor.showUrl; $event.stopPropagation();"} Show Link
                 %a.red{ "ng-click" => "deleteEditor(editor); $event.stopPropagation();"} Delete
               .wrap.mt-5.selectable{"ng-if" => "editor.showUrl"} {{editor.url}}
@@ -86,8 +86,8 @@
 
                   %div
                     .mt-5{"ng-if" => "action.repeat_mode"}
-                      %button.light{"ng-if" => "extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.disableRepeatAction(action, extension); $event.stopPropagation();"} Disable
-                      %button.light{"ng-if" => "!extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.enableRepeatAction(action, extension); $event.stopPropagation();"} Enable
+                      %button.light.tinted{"ng-if" => "extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.disableRepeatAction(action, extension); $event.stopPropagation();"} Disable
+                      %button.light.tinted{"ng-if" => "!extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.enableRepeatAction(action, extension); $event.stopPropagation();"} Enable
                     %button.light.mt-10{"ng-if" => "!action.running && !action.repeat_mode", "ng-click" => "selectedAction(action, extension); $event.stopPropagation();"}
                       Perform Action
                     .spinner.mb-5.block{"ng-if" => "action.running"}
@@ -109,7 +109,7 @@
             %h3 {{component.name}}
             %a{"ng-if" => "!componentManager.isComponentActive(component)", "ng-click" => "componentManager.activateComponent(component); $event.stopPropagation();"} Activate
             %a{"ng-if" => "componentManager.isComponentActive(component)", "ng-click" => "componentManager.deactivateComponent(component); $event.stopPropagation();"} Deactivate
-            %div{"ng-if" => "component.showDetails"}
+            .mt-3{"ng-if" => "component.showDetails"}
               .link-group
                 %a.red{"ng-click" => "deleteComponent(component); $event.stopPropagation();"} Delete
                 %a{"ng-click" => "component.showLink = !component.showLink; $event.stopPropagation();"} Show Link
@@ -117,10 +117,24 @@
                 %p.small.selectable.wrap{"ng-if" => "component.showLink"}
                   {{component.url}}
 
+    %div{"ng-if" => "serverExtensions.length > 0"}
+      .container.no-bottom.section-margin
+        %h2 Server Extensions
+      %ul
+        %li{"ng-repeat" => "ext in serverExtensions", "ng-click" => "ext.showDetails = !ext.showDetails"}
+          .container
+            %strong.red.medium{"ng-if" => "ext.conflict_of"} Conflicted copy
+            %h3 {{nameForServerExtension(ext)}}
+            %div.mt-3{"ng-if" => "ext.showDetails"}
+              .link-group
+                %a{"ng-click" => "ext.showUrl = !ext.showUrl; $event.stopPropagation();"} Show Link
+                %a.red{ "ng-click" => "deleteServerExt(ext); $event.stopPropagation();"} Delete
+              .wrap.mt-5.selectable{"ng-if" => "ext.showUrl"} {{ext.url}}
+
     .container.section-margin
-      %h2.blue Install
+      %h2.tinted Install
       %p.faded Enter an install link
       %form.mt-10.mb-10
         %input.form-control{:autofocus => 'autofocus', :name => 'url', :required => true, :autocomplete => "off",
         :type => 'url', 'ng-model' => 'formData.installLink', "ng-keyup" => "$event.keyCode == 13 && submitInstallLink();"}
-      %p.blue{"ng-if" => "formData.successfullyInstalled"} Successfully installed extension.
+      %p.tinted{"ng-if" => "formData.successfullyInstalled"} Successfully installed extension.

app/assets/templates/frontend/directives/permissions-modal.html.haml

@@ -12,7 +12,7 @@
     %p {{permission}}
 
   %h4 Status
-  %p.status{"ng-class" => "{'trusted' : component.trusted}"} {{component.trusted ? 'Trusted' : 'Untrusted'}}
+  %p.status{"ng-class" => "{'trusted tinted' : component.trusted}"} {{component.trusted ? 'Trusted' : 'Untrusted'}}
 
   .learn-more
     %h4 Details
@@ -22,4 +22,4 @@
 
   .buttons
     %button.standard.white{"ng-click" => "deny()"} Deny
-    %button.standard.blue{"ng-click" => "accept()"} Accept
+    %button.standard.tinted{"ng-click" => "accept()"} Accept

app/assets/templates/frontend/editor.html.haml

@@ -16,11 +16,24 @@
     %li{"ng-class" => "{'selected' : ctrl.showMenu}", "click-outside" => "ctrl.showMenu = false;", "is-open" => "ctrl.showMenu"}
       %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;"} Menu
 
-      %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"}
+      %ul.dropdown-menu.sectioned-menu{"ng-if" => "ctrl.showMenu"}
         %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"} Toggle Fullscreen
+          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.togglePin()"}
+            %i.icon.ion-ios-flag
+            {{ctrl.note.pinned ? "Unpin" : "Pin"}}
         %li
-          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"} Delete Note
+          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleArchiveNote()"}
+            %i.icon.ion-ios-box
+            {{ctrl.note.archived ? "Unarcnive" : "Archive"}}
+        %li
+          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.deleteNote()"}
+            %i.icon.ion-trash-b
+            Delete
+        %li
+          %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()"}
+            %i.icon.ion-arrow-expand
+            Toggle Fullscreen
+
         %li{"ng-if" => "ctrl.hasDisabledComponents()"}
           %label{"ng-click" => "ctrl.selectedMenuItem($event); ctrl.restoreDisabledComponents()"} Restore Disabled Components
 

app/assets/templates/frontend/footer.html.haml

@@ -2,7 +2,7 @@
   .pull-left
     .footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
       %a{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
-      %account-menu{"ng-if" => "ctrl.showAccountMenu"}
+      %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
 
     .footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
       %a{"ng-click" => "ctrl.toggleExtensions()"} Extensions
@@ -15,7 +15,7 @@
   .pull-right
 
     .footer-bar-link{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
-      %span.blue.normal New update downloaded. Installs on app restart.
+      %span.tinted.normal New update downloaded. Installs on app restart.
 
     .footer-bar-link{"style" => "margin-right: 5px;"}
       %div{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
@@ -26,3 +26,6 @@
 
       %strong{"ng-if" => "ctrl.offline"} Offline
       %a{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
+
+      %span{"ng-if" => "ctrl.hasPasscode()"}
+        %i.icon.ion-locked{"ng-click" => "ctrl.lockApp()"}

app/assets/templates/frontend/home.html.haml

@@ -1,10 +1,11 @@
 .main-ui-view
-  .app
-    %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade", "all-tag" => "allTag",
-                    "tags" => "tags", "remove-tag" => "removeTag"}
+  %lock-screen{"ng-if" => "needsUnlock", "on-success" => "onSuccessfulUnlock"}
+  .app{"ng-if" => "!needsUnlock"}
+    %tags-section{"save" => "tagsSave", "add-new" => "tagsAddNew", "will-select" => "tagsWillMakeSelection", "selection-made" => "tagsSelectionMade",
+    "all-tag" => "allTag", "archive-tag" => "archiveTag", "tags" => "tags", "remove-tag" => "removeTag"}
 
     %notes-section{"add-new" => "notesAddNew", "selection-made" => "notesSelectionMade", "tag" => "selectedTag"}
 
     %editor-section{"note" => "selectedNote", "remove" => "deleteNote", "save" => "saveNote", "update-tags" => "updateTagsForNote"}
 
-  %footer
+  %footer{"ng-if" => "!needsUnlock"}

app/assets/templates/frontend/lock-screen.html.haml

@@ -0,0 +1,9 @@
+#lock-screen
+  .content
+    %h3.center-align Passcode Required
+
+    %form.mt-20{"ng-submit" => "submitPasscodeForm()"}
+      %input.form-control.mt-10{:type => 'password',
+      "ng-model" => "formData.passcode", "autofocus" => "true",
+      "placeholder" => "Enter Passcode", "autocomplete" => "new-password"}
+      %button.standard.ui-button.block.tinted.mt-5{"type" => "submit"} Unlock

app/assets/templates/frontend/notes.html.haml

@@ -9,7 +9,7 @@
           #search-clear-button{"ng-if" => "ctrl.noteFilter.text", "ng-click" => "ctrl.noteFilter.text = ''; ctrl.filterTextChanged()"} ✕
       %ul.section-menu-bar#tag-menu-bar
         %li{"ng-class" => "{'selected' : ctrl.showMenu}"}
-          %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} Sort
+          %label{"ng-click" => "ctrl.showMenu = !ctrl.showMenu"} {{ctrl.sortByTitle()}}
 
           %ul.dropdown-menu{"ng-if" => "ctrl.showMenu"}
             %li
@@ -27,12 +27,22 @@
 
     .scrollable
       .infinite-scroll{"infinite-scroll" => "ctrl.paginate()", "can-load" => "true", "threshold" => "200"}
-        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | orderBy: ctrl.sortBy:ctrl.sortDescending | limitTo:ctrl.notesToDisplay))",
+        .note{"ng-repeat" => "note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | sortBy: ctrl.sortBy| limitTo:ctrl.notesToDisplay))",
             "ng-click" => "ctrl.selectNote(note)", "ng-class" => "{'selected' : ctrl.selectedNote == note}"}
           %strong.red.medium{"ng-if" => "note.conflict_of"} Conflicted copy
           %strong.red.medium{"ng-if" => "note.errorDecrypting"} Error decrypting
+
+          .pinned.tinted{"ng-if" => "note.pinned", "ng-class" => "{'tinted-selected' : ctrl.selectedNote == note}"}
+            %i.icon.ion-ios-flag
+            %strong.medium Pinned
+
+          .tags-string{"ng-if" => "ctrl.tag.all"}
+            .faded {{note.tagsString()}}
+
           .name{"ng-if" => "note.title"}
             {{note.title}}
           .note-preview
             {{note.text}}
-          .date {{(note.created_at | appDateTime) || 'Now'}}
+          .date.faded
+            %span{"ng-if" => "ctrl.sortBy == 'updated_at'"} Modified {{note.updatedAtString() || 'Now'}}
+            %span{"ng-if" => "ctrl.sortBy != 'updated_at'"} {{note.createdAtString() || 'Now'}}

app/assets/templates/frontend/tags.html.haml

@@ -21,3 +21,6 @@
           %a.item{"ng-click" => "ctrl.selectedRenameTag($event, tag)", "ng-if" => "!ctrl.editingTag"} Rename
           %a.item{"ng-click" => "ctrl.saveTag($event, tag)", "ng-if" => "ctrl.editingTag"} Save
           %a.item{"ng-click" => "ctrl.selectedDeleteTag(tag)"} Delete
+      .tag.faded{"ng-if" => "ctrl.archiveTag", "ng-click" => "ctrl.selectTag(ctrl.archiveTag)", "ng-class" => "{'selected' : ctrl.selectedTag == ctrl.archiveTag}"}
+        .info
+          %input.title{"ng-disabled" => "true", "ng-model" => "ctrl.archiveTag.title"}