[Account Switching] Design changes to settings menu (#1244)

* Design changes to settings menu

* Remove black border on settings headers

* Pull in jslib

* Only load account related settings when authed

* Hide account related settings when not authed

* Change settings titles

* Changes discussed with Danielle

package-lock.json

@@ -3955,9 +3955,9 @@
       }
     },
     "node_modules/electron/node_modules/@types/node": {
-      "version": "14.18.0",
+      "version": "14.18.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.9.tgz",
-      "integrity": "sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ=="
+      "integrity": "sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -12804,9 +12804,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.18.0",
+          "version": "14.18.9",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.0.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.9.tgz",
-          "integrity": "sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ=="
+          "integrity": "sha512-j11XSuRuAlft6vLDEX4RvhqC0KxNxx6QIyMXNb0vHHSNPXTPeiy3algESWmOOIzEtiEL0qiowPU3ewW9hHVa7Q=="
         }
       }
     },

src/app/accounts/settings.component.html

@@ -2,11 +2,31 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-body form">
+        <ng-container *ngIf="currentUserEmail != null">
           <div class="box">
-          <div class="box-header">
+            <label class="settingsTitle">{{ "settingsTitle" | i18n: currentUserEmail }} </label>
-            {{ "security" | i18n }}
-          </div>
             <div class="box-content box-content-padded">
+              <h2>
+                <button
+                  type="button"
+                  class="box-header-expandable"
+                  (click)="showSecurity = !showSecurity"
+                  [attr.aria-expanded]="showSecurity"
+                >
+                  {{ "security" | i18n }}
+                  <i
+                    *ngIf="!showSecurity"
+                    class="fa fa-chevron-down fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                  <i
+                    *ngIf="showSecurity"
+                    class="fa fa-chevron-up fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                </button>
+              </h2>
+              <ng-container *ngIf="showSecurity">
                 <app-vault-timeout-input
                   [vaultTimeouts]="vaultTimeouts"
                   [formControl]="vaultTimeout"
@@ -86,13 +106,32 @@
                     </label>
                   </div>
                 </div>
+              </ng-container>
             </div>
           </div>
           <div class="box">
-          <div class="box-header">
-            {{ "options" | i18n }}
-          </div>
             <div class="box-content box-content-padded">
+              <h2>
+                <button
+                  type="button"
+                  class="box-header-expandable"
+                  (click)="showAccountPreferences = !showAccountPreferences"
+                  [attr.aria-expanded]="showAccountPreferences"
+                >
+                  {{ "accountPreferences" | i18n }}
+                  <i
+                    *ngIf="!showAccountPreferences"
+                    class="fa fa-chevron-down fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                  <i
+                    *ngIf="showAccountPreferences"
+                    class="fa fa-chevron-up fa-sm icon"
+                    aria-hidden="true"
+                  ></i>
+                </button>
+              </h2>
+              <ng-container *ngIf="showAccountPreferences">
                 <div class="form-group">
                   <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
                   <select
@@ -170,6 +209,33 @@
                     "enableBrowserIntegrationFingerprintDesc" | i18n
                   }}</small>
                 </div>
+              </ng-container>
+            </div>
+          </div>
+        </ng-container>
+        <div class="box">
+          <div class="box-content box-content-padded">
+            <h2>
+              <button
+                type="button"
+                class="box-header-expandable"
+                (click)="showAppPreferences = !showAppPreferences"
+                [attr.aria-expanded]="showAppPreferences"
+              >
+                {{ "appPreferences" | i18n }}
+                <i
+                  *ngIf="!showAppPreferences"
+                  class="fa fa-chevron-down fa-sm icon"
+                  aria-hidden="true"
+                ></i>
+                <i
+                  *ngIf="showAppPreferences"
+                  class="fa fa-chevron-up fa-sm icon"
+                  aria-hidden="true"
+                ></i>
+              </button>
+            </h2>
+            <ng-container *ngIf="showAppPreferences">
               <div class="form-group">
                 <div class="checkbox">
                   <label for="enableTray">
@@ -274,6 +340,7 @@
                 </select>
                 <small class="help-block">{{ "languageDesc" | i18n }}</small>
               </div>
+            </ng-container>
           </div>
         </div>
       </div>

src/app/accounts/settings.component.ts

@@ -65,6 +65,12 @@ export class SettingsComponent implements OnInit {
 
   vaultTimeout: FormControl = new FormControl(null);
 
+  showSecurity: boolean = true;
+  showAccountPreferences: boolean = true;
+  showAppPreferences: boolean = true;
+
+  currentUserEmail: string;
+
   constructor(
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
@@ -151,21 +157,36 @@ export class SettingsComponent implements OnInit {
   }
 
   async ngOnInit() {
+    // App preferences
     this.showMinToTray = this.platformUtilsService.getDevice() !== DeviceType.LinuxDesktop;
-    this.vaultTimeout.setValue(await this.stateService.getVaultTimeout());
-    this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
-    const pinSet = await this.vaultTimeoutService.isPinLockSet();
-    this.pin = pinSet[0] || pinSet[1];
-    this.disableFavicons = await this.stateService.getDisableFavicon();
-    this.enableBrowserIntegration = await this.stateService.getEnableBrowserIntegration();
-    this.enableBrowserIntegrationFingerprint =
-      await this.stateService.getEnableBrowserIntegrationFingerprint();
     this.enableMinToTray = await this.stateService.getEnableMinimizeToTray();
     this.enableCloseToTray = await this.stateService.getEnableCloseToTray();
     this.enableTray = await this.stateService.getEnableTray();
     this.startToTray = await this.stateService.getEnableStartToTray();
+
+    this.alwaysShowDock = await this.stateService.getAlwaysShowDock();
+    this.showAlwaysShowDock = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
+    this.openAtLogin = await this.stateService.getOpenAtLogin();
+
     this.locale = await this.stateService.getLocale();
     this.theme = await this.stateService.getTheme();
+
+    if ((await this.stateService.getUserId()) == null) {
+      return;
+    }
+    this.currentUserEmail = await this.stateService.getEmail();
+
+    // Security
+    this.vaultTimeout.setValue(await this.stateService.getVaultTimeout());
+    this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
+    const pinSet = await this.vaultTimeoutService.isPinLockSet();
+    this.pin = pinSet[0] || pinSet[1];
+
+    // Account preferences
+    this.disableFavicons = await this.stateService.getDisableFavicon();
+    this.enableBrowserIntegration = await this.stateService.getEnableBrowserIntegration();
+    this.enableBrowserIntegrationFingerprint =
+      await this.stateService.getEnableBrowserIntegrationFingerprint();
     this.clearClipboard = await this.stateService.getClearClipboard();
     this.minimizeOnCopyToClipboard = await this.stateService.getMinimizeOnCopyToClipboard();
     this.supportsBiometric = await this.platformUtilsService.supportsBiometric();
@@ -173,9 +194,6 @@ export class SettingsComponent implements OnInit {
     this.biometricText = await this.stateService.getBiometricText();
     this.noAutoPromptBiometrics = await this.stateService.getNoAutoPromptBiometrics();
     this.noAutoPromptBiometricsText = await this.stateService.getNoAutoPromptBiometricsText();
-    this.alwaysShowDock = await this.stateService.getAlwaysShowDock();
-    this.showAlwaysShowDock = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
-    this.openAtLogin = await this.stateService.getOpenAtLogin();
   }
 
   async saveVaultTimeoutOptions() {

src/locales/en/messages.json

@@ -457,9 +457,6 @@
   "updateKey": {
     "message": "You cannot use this feature until you update your encryption key."
   },
-  "options": {
-    "message": "Options"
-  },
   "editedFolder": {
     "message": "Edited folder"
   },
@@ -1793,7 +1790,22 @@
   "accountLimitReached": {
     "message": "No more than 5 accounts may be logged in at the same time."
   },
+  "accountPreferences": {
+    "message": "Preferences"
+  },
+  "appPreferences": {
+    "message": "App Settings (All Accounts)"
+  },
   "accountSwitcherLimitReached": {
     "message": "Account limit reached. Log out of an account to add another."
+  },
+  "settingsTitle": {
+    "message": "App settings for $EMAIL$",
+    "placeholders": {
+      "email": {
+        "content": "$1",
+        "example": "jdoe@example.com"
+      }
+    }
   }
 }

src/scss/box.scss

@@ -4,6 +4,15 @@
   position: relative;
   width: 100%;
 
+  .settingsTitle {
+    margin: 0 10px 5px 10px;
+    display: flex;
+
+    @include themify($themes) {
+      color: themed("headingColor");
+    }
+  }
+
   .box-header {
     margin: 0 10px 5px 10px;
     text-transform: uppercase;
@@ -33,6 +42,38 @@
     }
   }
 
+  .box-header-expandable {
+    border: none;
+    padding: 5px 0px;
+    text-transform: uppercase;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+
+    @include themify($themes) {
+      color: themed("headingColor");
+      background-color: themed("boxBackgroundColor");
+    }
+
+    &:hover,
+    &:focus,
+    &.active {
+      @include themify($themes) {
+        background-color: themed("boxBackgroundHoverColor");
+      }
+    }
+
+    .icon {
+      display: flex;
+      align-items: flex-end;
+      margin-left: 5px;
+
+      @include themify($themes) {
+        color: themed("headingColor");
+      }
+    }
+  }
+
   .box-content {
     border-radius: $border-radius;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),