POC

TODO:
* encrypt key information with symm key
* store symm key with server next to api key
* Add toggle for enc access yes/no
* build out storing multiple API keys
* Add quick copy button to api key field
* See about a more user-friendly api key encoding

src/app/accounts/register.component.html

@@ -101,7 +101,7 @@
       <div [ngClass]="{ 'col-5': layout, 'col-12': !layout }">
         <div class="row justify-content-md-center mt-5">
           <div [ngClass]="{ 'col-5': !layout, 'col-12': layout }">
-            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
+            <p class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</p>
             <div class="card d-block">
               <div class="card-body">
                 <app-callout

src/app/modules/loose-components.module.ts

@@ -114,6 +114,7 @@ import { EmergencyAccessTakeoverComponent } from "../settings/emergency-access-t
 import { EmergencyAccessViewComponent } from "../settings/emergency-access-view.component";
 import { EmergencyAccessComponent } from "../settings/emergency-access.component";
 import { EmergencyAddEditComponent } from "../settings/emergency-add-edit.component";
+import { LinkSsoComponent } from "../settings/link-sso.component";
 import { OrganizationPlansComponent } from "../settings/organization-plans.component";
 import { PaymentMethodComponent } from "../settings/payment-method.component";
 import { PaymentComponent } from "../settings/payment.component";
@@ -222,6 +223,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -381,6 +383,7 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
+    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,

src/app/modules/vault-filter/components/organization-filter.component.html

@@ -14,7 +14,7 @@
           <span class="filter-buttons">
             <a href="#" routerLink="/create-organization" class="filter-button">
               <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
+              {{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,6 +45,14 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li
@@ -67,14 +75,6 @@
             </ng-container>
           </span>
         </li>
-        <li class="filter-option">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
       </ul>
     </ng-container>
     <ng-container *ngSwitchCase="'singleOrganizationAndPersonalOwnershipPolicies'">
@@ -110,6 +110,15 @@
         >
           &nbsp;{{ organizationGrouping.name | i18n }}
         </button>
+        <a
+          href="#"
+          routerLink="/create-organization"
+          class="text-muted ml-auto create-organization-link"
+          appA11yTitle="{{ 'newOrganization' | i18n }}"
+          *ngIf="!(displayMode === 'singleOrganizationPolicy')"
+        >
+          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        </a>
       </div>
       <ul id="organization-filters" *ngIf="!isCollapsed" class="filter-options">
         <li class="filter-option" [ngClass]="{ active: activeFilter.myVaultOnly }">
@@ -140,14 +149,6 @@
             </ng-container>
           </span>
         </li>
-        <li class="filter-option" *ngIf="!(displayMode === 'singleOrganizationPolicy')">
-          <span class="filter-buttons">
-            <a href="#" routerLink="/create-organization" class="filter-button">
-              <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-              &nbsp;{{ "newOrganization" | i18n }}
-            </a>
-          </span>
-        </li>
       </ul>
     </ng-container>
   </ng-container>

src/app/modules/vault-filter/vault-filter.module.ts

@@ -12,7 +12,6 @@ import { SharedModule } from "../shared.module";
 
 import { CollectionFilterComponent } from "./components/collection-filter.component";
 import { FolderFilterComponent } from "./components/folder-filter.component";
-import { LinkSsoComponent } from "./components/link-sso.component";
 import { OrganizationFilterComponent } from "./components/organization-filter.component";
 import { OrganizationOptionsComponent } from "./components/organization-options.component";
 import { StatusFilterComponent } from "./components/status-filter.component";
@@ -29,7 +28,6 @@ import { VaultFilterComponent } from "./vault-filter.component";
     OrganizationOptionsComponent,
     StatusFilterComponent,
     TypeFilterComponent,
-    LinkSsoComponent,
   ],
   exports: [VaultFilterComponent],
   providers: [

src/app/modules/vault/modules/individual-vault/individual-vault.component.ts

@@ -58,6 +58,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
   updateKeyModalRef: ViewContainerRef;
 
   favorites = false;
+  type: CipherType = null;
   folderId: string = null;
   collectionId: string = null;
   organizationId: string = null;
@@ -326,7 +327,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
 
   async addCipher() {
     const component = await this.editCipher(null);
-    component.type = this.activeFilter.cipherType;
+    component.type = this.type;
     component.folderId = this.folderId === "none" ? null : this.folderId;
     if (this.activeFilter.selectedCollectionId != null) {
       const collection = this.filterComponent.collections.fullList.filter(
@@ -398,7 +399,7 @@ export class IndividualVaultComponent implements OnInit, OnDestroy {
     if (queryParams == null) {
       queryParams = {
         favorites: this.favorites ? true : null,
-        type: this.activeFilter.cipherType,
+        type: this.type,
         folderId: this.folderId,
         collectionId: this.collectionId,
         deleted: this.deleted ? true : null,

src/app/organizations/settings/two-factor-setup.component.ts

@@ -3,10 +3,7 @@ import { ActivatedRoute } from "@angular/router";
 
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
-import { I18nService } from "jslib-common/abstractions/i18n.service";
-import { LogService } from "jslib-common/abstractions/log.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
-import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
@@ -25,21 +22,9 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     messagingService: MessagingService,
     policyService: PolicyService,
     private route: ActivatedRoute,
-    stateService: StateService,
-    platformUtilsService: PlatformUtilsService,
-    i18nService: I18nService,
-    logService: LogService
+    stateService: StateService
   ) {
-    super(
-      apiService,
-      modalService,
-      messagingService,
-      policyService,
-      stateService,
-      platformUtilsService,
-      i18nService,
-      logService
-    );
+    super(apiService, modalService, messagingService, policyService, stateService);
   }
 
   async ngOnInit() {

src/app/send/access.component.html

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="load()" [appApiAction]="formPromise" class="container" ngNativeValidate>
   <div class="row justify-content-center mt-5">
     <div class="col-12">
-      <h1 class="lead text-center mb-4">Bitwarden Send</h1>
+      <p class="lead text-center mb-4">Bitwarden Send</p>
     </div>
     <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
       <p>{{ "sendCreatorIdentifier" | i18n: creatorIdentifier }}</p>

src/app/settings/api-key.component.html

@@ -35,6 +35,10 @@
           icon="bwi bwi-key"
           *ngIf="clientSecret"
         >
+          <p class="mb-1">
+            <strong>combined:</strong>
+            <code>{{ combinedApiKey }}</code>
+          </p>
           <p class="mb-1">
             <strong>client_id:</strong><br />
             <code>{{ clientId }}</code>

src/app/settings/api-key.component.ts

@@ -1,7 +1,9 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
+import { CryptoService } from "jslib-common/abstractions/crypto.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { UserVerificationService } from "jslib-common/abstractions/userVerification.service";
+import { Utils } from "jslib-common/misc/utils";
 import { SecretVerificationRequest } from "jslib-common/models/request/secretVerificationRequest";
 import { ApiKeyResponse } from "jslib-common/models/response/apiKeyResponse";
 import { Verification } from "jslib-common/types/verification";
@@ -10,7 +12,7 @@ import { Verification } from "jslib-common/types/verification";
   selector: "app-api-key",
   templateUrl: "api-key.component.html",
 })
-export class ApiKeyComponent {
+export class ApiKeyComponent implements OnInit {
   keyType: string;
   isRotation: boolean;
   postKey: (entityId: string, request: SecretVerificationRequest) => Promise<ApiKeyResponse>;
@@ -25,12 +27,20 @@ export class ApiKeyComponent {
   formPromise: Promise<ApiKeyResponse>;
   clientId: string;
   clientSecret: string;
+  clientKey: string;
+  clientLocalKeyHash: string;
 
   constructor(
+    private cryptoService: CryptoService,
     private userVerificationService: UserVerificationService,
     private logService: LogService
   ) {}
 
+  async ngOnInit(): Promise<void> {
+    this.clientKey = Utils.fromBufferToB64((await this.cryptoService.getKey()).key);
+    this.clientLocalKeyHash = await this.cryptoService.getKeyHash();
+  }
+
   async submit() {
     try {
       this.formPromise = this.userVerificationService
@@ -43,4 +53,17 @@ export class ApiKeyComponent {
       this.logService.error(e);
     }
   }
+
+  get combinedApiKey() {
+    return Utils.fromUtf8ToB64(
+      JSON.stringify({
+        clientId: this.clientId,
+        clientSecret: this.clientSecret,
+        encClientEncInfo: JSON.stringify({
+          clientEncKey: this.clientKey,
+          clientLocalKeyHash: this.clientLocalKeyHash,
+        }),
+      })
+    );
+  }
 }

src/app/settings/two-factor-setup.component.html

@@ -55,40 +55,6 @@
     </div>
   </li>
 </ul>
-<form *ngIf="!loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div class="row">
-    <div class="col-12">
-      <h2 class="mt-5 spaced-header">
-        {{ "deviceVerification" | i18n }}
-      </h2>
-      <div class="form-group">
-        <div class="form-check">
-          <input
-            class="form-check-input"
-            type="checkbox"
-            id="enableDeviceVerification"
-            name="enableDeviceVerification"
-            disabled="{{ !isDeviceVerificationSectionEnabled }}"
-            [(ngModel)]="enableDeviceVerification"
-          />
-          <label class="form-check-label" for="enableDeviceVerification">
-            {{ "enableDeviceVerification" | i18n }}
-          </label>
-        </div>
-        <small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
-      </div>
-      <button
-        type="submit"
-        class="btn btn-primary btn-submit"
-        [disabled]="form.loading"
-        *ngIf="isDeviceVerificationSectionEnabled"
-      >
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <span>{{ "save" | i18n }}</span>
-      </button>
-    </div>
-  </div>
-</form>
 
 <ng-template #authenticatorTemplate></ng-template>
 <ng-template #recoveryTemplate></ng-template>

src/app/settings/two-factor-setup.component.ts

@@ -3,15 +3,11 @@ import { Component, OnInit, Type, ViewChild, ViewContainerRef } from "@angular/c
 import { ModalRef } from "jslib-angular/components/modal/modal.ref";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { ApiService } from "jslib-common/abstractions/api.service";
-import { I18nService } from "jslib-common/abstractions/i18n.service";
-import { LogService } from "jslib-common/abstractions/log.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
-import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { PolicyService } from "jslib-common/abstractions/policy.service";
 import { StateService } from "jslib-common/abstractions/state.service";
 import { PolicyType } from "jslib-common/enums/policyType";
 import { TwoFactorProviderType } from "jslib-common/enums/twoFactorProviderType";
-import { DeviceVerificationRequest } from "jslib-common/models/request/DeviceVerificationRequest";
 import { TwoFactorProviders } from "jslib-common/services/twoFactor.service";
 
 import { TwoFactorAuthenticatorComponent } from "./two-factor-authenticator.component";
@@ -43,32 +39,18 @@ export class TwoFactorSetupComponent implements OnInit {
   canAccessPremium: boolean;
   showPolicyWarning = false;
   loading = true;
-  enableDeviceVerification: boolean;
-  isDeviceVerificationSectionEnabled: boolean;
   modal: ModalRef;
-  formPromise: Promise<any>;
 
   constructor(
     protected apiService: ApiService,
     protected modalService: ModalService,
     protected messagingService: MessagingService,
     protected policyService: PolicyService,
-    private stateService: StateService,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService,
-    private logService: LogService
+    private stateService: StateService
   ) {}
 
   async ngOnInit() {
     this.canAccessPremium = await this.stateService.getCanAccessPremium();
-    try {
-      const deviceVerificationSettings = await this.apiService.getDeviceVerificationSettings();
-      this.isDeviceVerificationSectionEnabled =
-        deviceVerificationSettings.isDeviceVerificationSectionEnabled;
-      this.enableDeviceVerification = deviceVerificationSettings.unknownDeviceVerificationEnabled;
-    } catch (e) {
-      this.logService.error(e);
-    }
 
     for (const key in TwoFactorProviders) {
       // eslint-disable-next-line
@@ -204,37 +186,4 @@ export class TwoFactorSetupComponent implements OnInit {
       this.showPolicyWarning = false;
     }
   }
-
-  async submit() {
-    try {
-      if (this.enableDeviceVerification) {
-        const email = await this.stateService.getEmail();
-        const confirmed = await this.platformUtilsService.showDialog(
-          this.i18nService.t(
-            "areYouSureYouWantToEnableDeviceVerificationTheVerificationCodeEmailsWillArriveAtX",
-            email
-          ),
-          this.i18nService.t("deviceVerification"),
-          this.i18nService.t("yes"),
-          this.i18nService.t("no"),
-          "warning"
-        );
-        if (!confirmed) {
-          return;
-        }
-      }
-
-      this.formPromise = this.apiService.putDeviceVerificationSettings(
-        new DeviceVerificationRequest(this.enableDeviceVerification)
-      );
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("updatedDeviceVerification")
-      );
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }

src/locales/en/messages.json

@@ -5069,26 +5069,5 @@
   },
   "apiAccessToken": {
     "message": "API Access Token"
-  },
-  "deviceVerification": {
-    "message": "Device Verification"
-  },
-  "enableDeviceVerification": {
-    "message": "Enable Device Verification"
-  },
-  "deviceVerificationDesc": {
-    "message": "When enabled, verification codes are sent to your email address when logging in from an unrecognized device"
-  },
-  "updatedDeviceVerification": {
-    "message": "Updated Device Verification"
-  },
-  "areYouSureYouWantToEnableDeviceVerificationTheVerificationCodeEmailsWillArriveAtX": {
-    "message": "Are you sure you want to enable Device Verification? The verification code emails will arrive at: $EMAIL$",
-    "placeholders": {
-      "email": {
-        "content": "$1",
-        "example": "My Email"
-      }
-    }
   }
 }

src/scss/vault-filters.scss

@@ -14,6 +14,14 @@
     font-size: $font-size-base;
   }
 
+  a.create-organization-link {
+    &:hover {
+      @include themify($themes) {
+        color: themed("iconHover") !important;
+      }
+    }
+  }
+
   button {
     @extend .no-btn;
   }