feat: snjs app groups (#468)

* feat: snjs app groups * fix: update snjs version to point to wip commit * wip: account switcher * feat: rename lock manager to auto lock service * fix: more relevant sign out copy * chore(deps): update snjs * fix: use setTimeout instead of setImmediate * feat: make account switcher expiremental feature * chore(deps): upgrade snjs
2020-09-15 10:55:32 -05:00
parent ae6ef50f88
commit 2b6abeebfc
46 changed files with 590 additions and 375 deletions
--- a/app/assets/javascripts/views/account_switcher/account-switcher.pug
+++ b/app/assets/javascripts/views/account_switcher/account-switcher.pug
@@ -0,0 +1,32 @@
+.sk-modal-background(ng-click="ctrl.dismiss()")
+#account-switcher.sk-modal-content
+  .sn-component
+    .sk-menu-panel#menu-panel
+      .sk-menu-panel-header
+        .sk-menu-panel-column
+          .sk-menu-panel-header-title Account Switcher
+        .sk-menu-panel-column
+          a.sk-label.info(ng-click='ctrl.addNewApplication()') Add Account
+      .sk-menu-panel-row(
+        ng-repeat='descriptor in ctrl.state.descriptors track by descriptor.identifier'
+        ng-click='ctrl.selectDescriptor(descriptor)'
+        )
+        .sk-menu-panel-column.stretch
+          .left
+            .sk-menu-panel-column(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
+              .sk-circle.small.success
+            .sk-menu-panel-column.stretch
+              input.sk-label.clickable(
+                ng-model='descriptor.label'
+                ng-disabled='descriptor != ctrl.state.editingDescriptor'
+                ng-keyup='$event.keyCode == 13 && ctrl.submitRename($event)',
+                ng-attr-id='input-{{descriptor.identifier}}'
+                spellcheck="false"
+                )
+              .sk-sublabel(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
+                | Current Application
+            .sk-menu-panel-column(ng-if='descriptor.identifier == ctrl.activeApplication.identifier')
+              .sk-button.success(
+                ng-click='ctrl.renameDescriptor($event, descriptor)'
+                )
+                .sk-label Rename
--- a/app/assets/javascripts/views/account_switcher/account_switcher.ts
+++ b/app/assets/javascripts/views/account_switcher/account_switcher.ts
@@ -0,0 +1,105 @@
+import { ApplicationGroup } from '@/ui_models/application_group';
+import { WebApplication } from '@/ui_models/application';
+import template from './account-switcher.pug';
+import {
+  ApplicationDescriptor,
+} from 'snjs';
+import { PureViewCtrl } from '@Views/abstract/pure_view_ctrl';
+import { WebDirective } from '@/types';
+
+class AccountSwitcherCtrl extends PureViewCtrl<{}, {
+  descriptors: ApplicationDescriptor[];
+  editingDescriptor?: ApplicationDescriptor
+}> {
+  private $element: JQLite
+  application!: WebApplication
+  private removeAppGroupObserver: any;
+  /** @template */
+  activeApplication!: WebApplication
+
+  /* @ngInject */
+  constructor(
+    $element: JQLite,
+    $timeout: ng.ITimeoutService,
+    private mainApplicationGroup: ApplicationGroup
+  ) {
+    super($timeout);
+    this.$element = $element;
+    this.removeAppGroupObserver = mainApplicationGroup.addApplicationChangeObserver(() => {
+      this.activeApplication = mainApplicationGroup.primaryApplication as WebApplication;
+      this.reloadApplications();
+    });
+  }
+
+  $onInit() {
+    super.$onInit();
+  }
+
+  reloadApplications() {
+    this.setState({
+      descriptors: this.mainApplicationGroup.getDescriptors()
+    })
+  }
+
+  /** @template */
+  addNewApplication() {
+    this.dismiss();
+    this.mainApplicationGroup.addNewApplication();
+  }
+
+  /** @template */
+  selectDescriptor(descriptor: ApplicationDescriptor) {
+    this.dismiss();
+    this.mainApplicationGroup.loadApplicationForDescriptor(descriptor);
+  }
+
+  inputForDescriptor(descriptor: ApplicationDescriptor) {
+    return document.getElementById(`input-${descriptor.identifier}`);
+  }
+
+  /** @template */
+  renameDescriptor($event: Event, descriptor: ApplicationDescriptor) {
+    $event.stopPropagation();
+    this.setState({ editingDescriptor: descriptor }).then(() => {
+      const input = this.inputForDescriptor(descriptor);
+      input?.focus();
+    })
+  }
+
+  /** @template */
+  submitRename() {
+    this.mainApplicationGroup.renameDescriptor(
+      this.state.editingDescriptor!,
+      this.state.editingDescriptor!.label
+    )
+    this.setState({ editingDescriptor: undefined });
+  }
+
+  deinit() {
+    (this.application as any) = undefined;
+    super.deinit();
+    this.removeAppGroupObserver();
+    this.removeAppGroupObserver = undefined;
+  }
+
+  dismiss() {
+    const elem = this.$element;
+    const scope = elem.scope();
+    scope.$destroy();
+    elem.remove();
+  }
+}
+
+export class AccountSwitcher extends WebDirective {
+  constructor() {
+    super();
+    this.restrict = 'E';
+    this.template = template;
+    this.controller = AccountSwitcherCtrl;
+    this.controllerAs = 'ctrl';
+    this.bindToController = true;
+    this.scope = {
+      application: '='
+    };
+  }
+}