PS-589 Added device verification enabling confirmation displaying the email being used to deliver the verification codes

* switch in-line plus add org button to more explicit version

* Add spaces to line up text better

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 }">
-            <p class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</p>
+            <h1 class="lead text-center mb-4" *ngIf="!layout">{{ "createAccount" | i18n }}</h1>
             <div class="card d-block">
               <div class="card-body">
                 <app-callout

src/app/common/base.events.component.ts

@@ -122,17 +122,20 @@ export abstract class BaseEventsComponent {
         const userId = r.actingUserId == null ? r.userId : r.actingUserId;
         const eventInfo = await this.eventService.getEventInfo(r);
         const user = this.getUserName(r, userId);
+        const userName = user != null ? user.name : this.i18nService.t("unknown");
+
         return new EventView({
           message: eventInfo.message,
           humanReadableMessage: eventInfo.humanReadableMessage,
           appIcon: eventInfo.appIcon,
           appName: eventInfo.appName,
           userId: userId,
-          userName: user != null ? user.name : this.i18nService.t("unknown"),
+          userName: r.installationId != null ? `Installation: ${r.installationId}` : userName,
           userEmail: user != null ? user.email : "",
           date: r.date,
           ip: r.ipAddress,
           type: r.type,
+          installationId: r.installationId,
         });
       })
     );

src/app/layouts/footer.component.html

@@ -1,6 +1,6 @@
 <div class="container footer text-muted">
   <div class="row">
-    <div class="col">&copy; {{ year }}, Bitwarden Inc.</div>
+    <div class="col">&copy; {{ year }} Bitwarden Inc.</div>
     <div class="col text-center"></div>
     <div class="col text-right">
       {{ "versionNumber" | i18n: version }}

src/app/layouts/frontend-layout.component.html

@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  &copy; {{ year }}, Bitwarden Inc. <br />
+  &copy; {{ year }} Bitwarden Inc. <br />
   {{ "versionNumber" | i18n: version }}
 </div>

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

@@ -114,7 +114,6 @@ 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";
@@ -223,7 +222,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,
@@ -383,7 +381,6 @@ import { OrganizationBadgeModule } from "./vault/modules/organization-badge/orga
     HintComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
-    LinkSsoComponent,
     LockComponent,
     LoginComponent,
     MasterPasswordPolicyComponent,

src/app/modules/shared.module.ts

@@ -53,13 +53,7 @@ import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterModule } from "@angular/router";
-import {
-  BadgeModule,
-  ButtonModule,
-  CalloutModule,
-  FormFieldModule,
-  MenuModule,
-} from "@bitwarden/components";
+import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
 import { InfiniteScrollModule } from "ngx-infinite-scroll";
 import { ToastrModule } from "ngx-toastr";
 
@@ -132,7 +126,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     BadgeModule,
     ButtonModule,
     MenuModule,
-    FormFieldModule,
   ],
   exports: [
     CommonModule,
@@ -143,7 +136,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     ReactiveFormsModule,
     RouterModule,
     BadgeModule,
-    FormFieldModule,
     ButtonModule,
     CalloutModule,
     ToastrModule,

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

@@ -16,7 +16,7 @@
         aria-hidden="true"
       ></i>
     </button>
-    <h3 class="filter-title">{{ collectionsGrouping.name | i18n }}</h3>
+    <h3 class="filter-title">&nbsp;{{ collectionsGrouping.name | i18n }}</h3>
   </div>
   <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
     <ng-template #recursiveCollections let-collections>
@@ -51,7 +51,7 @@
               class="bwi bwi-collection bwi-fw"
               aria-hidden="true"
             ></i
-            >{{ c.node.name }}
+            >&nbsp;{{ c.node.name }}
           </button>
         </span>
         <ul

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

@@ -16,9 +16,7 @@
         }"
       ></i>
     </button>
-    <h3 class="filter-title">
-      {{ "folders" | i18n }}
-    </h3>
+    <h3 class="filter-title">&nbsp;{{ "folders" | i18n }}</h3>
     <button
       class="text-muted ml-auto add-button"
       (click)="addFolder()"
@@ -56,7 +54,7 @@
           </button>
           <button class="filter-button" (click)="applyFilter(f.node)">
             <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i
-            >{{ f.node.name }}
+            >&nbsp;{{ f.node.name }}
           </button>
           <button
             class="edit-button"

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>
-              {{ "newOrganization" | i18n }}
+              &nbsp;{{ "newOrganization" | i18n }}
             </a>
           </span>
         </li>
@@ -45,14 +45,6 @@
         >
           &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
@@ -75,6 +67,14 @@
             </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,15 +110,6 @@
         >
           &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 }">
@@ -149,6 +140,14 @@
             </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/components/type-filter.component.html

@@ -15,9 +15,7 @@
       }"
     ></i>
   </button>
-  <h3>
-    {{ "types" | i18n }}
-  </h3>
+  <h3>&nbsp;{{ "types" | i18n }}</h3>
 </div>
 <ul id="type-filters" *ngIf="!isCollapsed" class="filter-options">
   <li
@@ -26,14 +24,14 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Login)">
-        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>{{ "typeLogin" | i18n }}
+        <i class="bwi bwi-fw bwi-globe" aria-hidden="true"></i>&nbsp;{{ "typeLogin" | i18n }}
       </button>
     </span>
   </li>
   <li class="filter-option" [ngClass]="{ active: activeFilter.cipherType === cipherTypeEnum.Card }">
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Card)">
-        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>{{ "typeCard" | i18n }}
+        <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i>&nbsp;{{ "typeCard" | i18n }}
       </button>
     </span>
   </li>
@@ -43,7 +41,7 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.Identity)">
-        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>{{ "typeIdentity" | i18n }}
+        <i class="bwi bwi-fw bwi-id-card" aria-hidden="true"></i>&nbsp;{{ "typeIdentity" | i18n }}
       </button>
     </span>
   </li>
@@ -53,7 +51,9 @@
   >
     <span class="filter-buttons">
       <button class="filter-button" (click)="applyFilter(cipherTypeEnum.SecureNote)">
-        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>{{ "typeSecureNote" | i18n }}
+        <i class="bwi bwi-fw bwi-sticky-note" aria-hidden="true"></i>&nbsp;{{
+          "typeSecureNote" | i18n
+        }}
       </button>
     </span>
   </li>

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

@@ -25,17 +25,7 @@ export class VaultFilterComponent extends BaseVaultFilterComponent {
   }
 
   searchTextChanged() {
-    this.onSearchTextChanged.emit(this.searchText);
-  }
-
-  // This method exists because the vault component gets its data mixed up during the initial sync on first login. It looks for data before the sync is complete.
-  // It should be removed as soon as doing so makes sense.
-  async reloadOrganizations() {
-    this.organizations = await this.vaultFilterService.buildOrganizations();
-    this.activePersonalOwnershipPolicy =
-      await this.vaultFilterService.checkForPersonalOwnershipPolicy();
-    this.activeSingleOrganizationPolicy =
-      await this.vaultFilterService.checkForSingleOrganizationPolicy();
+    this.onSearchTextChanged.emit(this.searchText.normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
   }
 
   async initCollections() {

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

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

src/app/organizations/settings/account.component.html

@@ -14,50 +14,62 @@
   #form
   (ngSubmit)="submit()"
   [appApiAction]="formPromise"
-  [formGroup]="formData"
+  ngNativeValidate
 >
   <div class="row">
     <div class="col-6">
-      <bit-form-field>
-        <bit-label>{{ "organizationName" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="name" />
-      </bit-form-field>
-
-      <bit-form-field>
-        <bit-label>{{ "billingEmail" | i18n }}</bit-label>
-        <input bitInput type="email" formControlName="billingEmail" />
-      </bit-form-field>
-
-      <bit-form-field>
-        <bit-label>{{ "businessName" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="businessName" />
-      </bit-form-field>
-
-      <bit-form-field>
-        <bit-label>{{ "identifier" | i18n }}</bit-label>
-        <input bitInput type="text" formControlName="identifier" />
-      </bit-form-field>
+      <div class="form-group">
+        <label for="name">{{ "organizationName" | i18n }}</label>
+        <input
+          id="name"
+          class="form-control"
+          type="text"
+          name="Name"
+          [(ngModel)]="org.name"
+          [disabled]="selfHosted"
+        />
+      </div>
+      <div class="form-group">
+        <label for="billingEmail">{{ "billingEmail" | i18n }}</label>
+        <input
+          id="billingEmail"
+          class="form-control"
+          type="text"
+          name="BillingEmail"
+          [(ngModel)]="org.billingEmail"
+          [disabled]="selfHosted || !canManageBilling"
+        />
+      </div>
+      <div class="form-group">
+        <label for="businessName">{{ "businessName" | i18n }}</label>
+        <input
+          id="businessName"
+          class="form-control"
+          type="text"
+          name="BusinessName"
+          [(ngModel)]="org.businessName"
+          [disabled]="selfHosted || !canManageBilling"
+        />
+      </div>
+      <div class="form-group">
+        <label for="identifier">{{ "identifier" | i18n }}</label>
+        <input
+          id="identifier"
+          class="form-control"
+          type="text"
+          name="Identifier"
+          [(ngModel)]="org.identifier"
+        />
+      </div>
     </div>
     <div class="col-6">
-      <app-avatar
-        [data]="formData.get('name').value"
-        dynamic="true"
-        size="75"
-        fontSize="35"
-      ></app-avatar>
+      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
     </div>
   </div>
-  <button
-    type="submit"
-    bit-button
-    buttonType="primary"
-    class="btn-submit"
-    [disabled]="form.loading"
-  >
+  <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
     <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
-  <bit-error-summary *ngIf="showErrorSummary" [formGroup]="formData"></bit-error-summary>
 </form>
 <ng-container *ngIf="canUseApi">
   <div class="secondary-header border-0 mb-0">

src/app/organizations/settings/account.component.ts

@@ -1,5 +1,4 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 
 import { ModalService } from "jslib-angular/services/modal.service";
@@ -42,19 +41,10 @@ export class AccountComponent {
   org: OrganizationResponse;
   formPromise: Promise<any>;
   taxFormPromise: Promise<any>;
-  showErrorSummary = false;
 
   private organizationId: string;
 
-  formData = this.formBuilder.group({
-    name: ["", [Validators.required]],
-    billingEmail: ["", [Validators.required, Validators.email]],
-    businessName: [],
-    identifier: [],
-  });
-
   constructor(
-    private formBuilder: FormBuilder,
     private modalService: ModalService,
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -70,12 +60,6 @@ export class AccountComponent {
   async ngOnInit() {
     this.selfHosted = this.platformUtilsService.isSelfHost();
 
-    if (this.selfHosted) {
-      this.formData.disable();
-    } else {
-      this.formData.enable();
-    }
-
     this.route.parent.parent.params.subscribe(async (params) => {
       this.organizationId = params.organizationId;
       this.canManageBilling = (
@@ -84,13 +68,6 @@ export class AccountComponent {
       try {
         this.org = await this.apiService.getOrganization(this.organizationId);
         this.canUseApi = this.org.useApi;
-
-        this.formData.setValue({
-          name: this.org.name,
-          billingEmail: this.org.billingEmail,
-          businessName: this.org.businessName,
-          identifier: this.org.identifier,
-        });
       } catch (e) {
         this.logService.error(e);
       }
@@ -99,19 +76,12 @@ export class AccountComponent {
   }
 
   async submit() {
-    this.formData.markAllAsTouched();
-    this.showErrorSummary = true;
-
-    if (!this.formData.valid) {
-      return;
-    }
-
     try {
       const request = new OrganizationUpdateRequest();
-      request.name = this.formData.get("name").value;
-      request.businessName = this.formData.get("businessName").value;
-      request.billingEmail = this.formData.get("billingEmail").value;
-      request.identifier = this.formData.get("identifier").value;
+      request.name = this.org.name;
+      request.businessName = this.org.businessName;
+      request.billingEmail = this.org.billingEmail;
+      request.identifier = this.org.identifier;
 
       // Backfill pub/priv key if necessary
       if (!this.org.hasPublicAndPrivateKeys) {

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

@@ -3,7 +3,10 @@ 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";
@@ -22,9 +25,21 @@ export class TwoFactorSetupComponent extends BaseTwoFactorSetupComponent {
     messagingService: MessagingService,
     policyService: PolicyService,
     private route: ActivatedRoute,
-    stateService: StateService
+    stateService: StateService,
+    platformUtilsService: PlatformUtilsService,
+    i18nService: I18nService,
+    logService: LogService
   ) {
-    super(apiService, modalService, messagingService, policyService, stateService);
+    super(
+      apiService,
+      modalService,
+      messagingService,
+      policyService,
+      stateService,
+      platformUtilsService,
+      i18nService,
+      logService
+    );
   }
 
   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">
-      <p class="lead text-center mb-4">Bitwarden Send</p>
+      <h1 class="lead text-center mb-4">Bitwarden Send</h1>
     </div>
     <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
       <p>{{ "sendCreatorIdentifier" | i18n: creatorIdentifier }}</p>

src/app/services/event.service.ts

@@ -307,6 +307,9 @@ export class EventService {
       case EventType.Organization_DisabledKeyConnector:
         msg = humanReadableMsg = this.i18nService.t("disabledKeyConnector");
         break;
+      case EventType.Organization_SponsorshipsSynced:
+        msg = humanReadableMsg = this.i18nService.t("sponsorshipsSynced");
+        break;
       // Policies
       case EventType.Policy_Updated: {
         msg = this.i18nService.t("modifiedPolicyId", this.formatPolicyId(ev));

src/app/settings/billing-sync-key.component.ts

@@ -3,7 +3,6 @@ import { Component } from "@angular/core";
 import { ApiService } from "jslib-common/abstractions/api.service";
 import { LogService } from "jslib-common/abstractions/log.service";
 import { OrganizationConnectionType } from "jslib-common/enums/organizationConnectionType";
-import { Utils } from "jslib-common/misc/utils";
 import { BillingSyncConfigApi } from "jslib-common/models/api/billingSyncConfigApi";
 import { BillingSyncConfigRequest } from "jslib-common/models/request/billingSyncConfigRequest";
 import { OrganizationConnectionRequest } from "jslib-common/models/request/organizationConnectionRequest";

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

@@ -55,6 +55,40 @@
     </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,11 +3,15 @@ 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";
@@ -39,18 +43,32 @@ 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 stateService: StateService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private logService: LogService
   ) {}
 
   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
@@ -186,4 +204,37 @@ 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

@@ -5041,6 +5041,9 @@
     "message": "Last Sync",
     "Description": "Used as a prefix to indicate the last time a sync occured. Example \"Last sync 1968-11-16 00:00:00\""
   },
+  "sponsorshipsSynced": {
+    "message": "Self-hosted sponsorships synced."
+  },
   "billingManagedByProvider": {
     "message": "Managed by $PROVIDER$",
     "placeholders": {
@@ -5067,18 +5070,24 @@
   "apiAccessToken": {
     "message": "API Access Token"
   },
-  "inputRequired": {
-    "message": "Input is required."
+  "deviceVerification": {
+    "message": "Device Verification"
   },
-  "inputEmail": {
-    "message": "Input is not an email-address."
+  "enableDeviceVerification": {
+    "message": "Enable Device Verification"
   },
-  "fieldsNeedAttention": {
-    "message": "$COUNT$ field(s) above need your attention.",
+  "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": {
-      "count": {
+      "email": {
         "content": "$1",
-        "example": "4"
+        "example": "My Email"
       }
     }
   }

src/scss/vault-filters.scss

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