Set public path to be connectors. Fix webauthn-fallback styling

* [bug] Extend GlobalState to supply correct default theme

The default theme for most clients is System, but web uses Light.
We need to extend GlobalState in web to reflect this.

* [chore] Update jslib

.prettierignore

@@ -7,7 +7,6 @@ jslib
 # External libraries / auto synced locales
 src/locales
 src/404/*.min.css
-src/scripts/u2f.js
 
 # Github Workflows
-.github/workflows
+.github/workflows

Dockerfile

@@ -1,4 +1,4 @@
-FROM bitwarden/server
+FROM bitwarden/server:dev
 
 LABEL com.bitwarden.product="bitwarden"
 

bitwarden_license/src/app/organizations/manage/sso.component.html

@@ -3,7 +3,11 @@
 </div>
 
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -67,9 +71,9 @@
           target="_blank"
           rel="noopener"
           appA11yTitle="{{ 'learnMore' | i18n }}"
-          href="https://bitwarden.com/help/article/about-key-connector/"
+          href="https://bitwarden.com/help/about-key-connector/"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
         <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
       </label>
@@ -98,7 +102,7 @@
             [disabled]="!enableTestKeyConnector"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="keyConnectorUrl.pending"
@@ -111,11 +115,11 @@
       </div>
       <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
         <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
-          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+          <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
           {{ "keyConnectorTestFail" | i18n }}
         </div>
         <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
-          <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
           {{ "keyConnectorTestSuccess" | i18n }}
         </div>
       </ng-container>
@@ -146,7 +150,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(callbackPath)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -162,7 +166,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(signedOutCallbackPath)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -261,7 +265,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spEntityId)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -277,7 +281,7 @@
               appA11yTitle="{{ 'launch' | i18n }}"
               (click)="launchUri(spMetadataUrl)"
             >
-              <i class="fa fa-lg fa-external-link" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
             </button>
             <button
               type="button"
@@ -285,7 +289,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spMetadataUrl)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -301,7 +305,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spAcsUrl)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -439,7 +443,8 @@
           <option *ngFor="let o of samlSigningAlgorithms" [ngValue]="o">{{ o }}</option>
         </select>
       </div>
-      <div class="form-group">
+      <div class="form-group" [hidden]="true">
+        <!--TODO: Unhide once Unsolicited IdP Response is supported-->
         <div class="form-check">
           <input
             class="form-check-input"
@@ -482,7 +487,7 @@
   </div>
 
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>

bitwarden_license/src/app/providers/clients/add-organization.component.html

@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <ng-container *ngIf="!loading">

bitwarden_license/src/app/providers/clients/clients.component.html

@@ -13,7 +13,7 @@
       />
     </div>
     <a class="btn btn-sm btn-outline-primary ml-3" routerLink="create" *ngIf="manageOrganizations">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newClientOrganization" | i18n }}
     </a>
     <button
@@ -21,14 +21,18 @@
       (click)="addExistingOrganization()"
       *ngIf="manageOrganizations && showAddExisting"
     >
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "addExistingOrganization" | i18n }}
     </button>
   </div>
 </div>
 
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -67,11 +71,11 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(o)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>

bitwarden_license/src/app/providers/manage/accept-provider.component.html

@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>

bitwarden_license/src/app/providers/manage/events.component.html

@@ -32,9 +32,9 @@
         [disabled]="loaded && refreshForm.loading"
       >
         <i
-          class="fa fa-refresh fa-fw"
+          class="bwi bwi-refresh bwi-fw"
           aria-hidden="true"
-          [ngClass]="{ 'fa-spin': loaded && refreshForm.loading }"
+          [ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
         ></i>
         {{ "refresh" | i18n }}
       </button>
@@ -47,14 +47,18 @@
         (click)="exportEvents()"
         [disabled]="(loaded && exportForm.loading) || dirtyDates"
       >
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
         <span>{{ "export" | i18n }}</span>
       </button>
     </form>
   </div>
 </div>
 <ng-container *ngIf="!loaded">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
@@ -75,7 +79,7 @@
         <td>{{ e.date | date: "medium" }}</td>
         <td>
           <i
-            class="text-muted fa fa-lg {{ e.appIcon }}"
+            class="text-muted bwi bwi-lg {{ e.appIcon }}"
             title="{{ e.appName }}, {{ e.ip }}"
             aria-hidden="true"
           ></i>
@@ -97,7 +101,7 @@
     [disabled]="loaded && moreBtn.loading"
     *ngIf="continuationToken"
   >
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "loadMore" | i18n }}</span>
   </button>
 </ng-container>

bitwarden_license/src/app/providers/manage/people.component.html

@@ -52,11 +52,11 @@
         aria-expanded="false"
         appA11yTitle="{{ 'options' | i18n }}"
       >
-        <i class="fa fa-cog" aria-hidden="true"></i>
+        <i class="bwi bwi-cog" aria-hidden="true"></i>
       </button>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
         <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
-          <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
           {{ "reinviteSelected" | i18n }}
         </button>
         <button
@@ -65,32 +65,36 @@
           (click)="bulkConfirm()"
           *ngIf="showBulkConfirmUsers"
         >
-          <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
           {{ "confirmSelected" | i18n }}
         </button>
         <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
-          <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
           {{ "remove" | i18n }}
         </button>
         <div class="dropdown-divider"></div>
         <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-          <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
           {{ "selectAll" | i18n }}
         </button>
         <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-          <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
           {{ "unselectAll" | i18n }}
         </button>
       </div>
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "inviteUser" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -104,7 +108,7 @@
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
-      icon="fa-check-circle"
+      icon="bwi bwi-check-circle"
       *ngIf="showConfirmUsers"
     >
       {{ "providerUsersNeedConfirmed" | i18n }}
@@ -128,7 +132,8 @@
               size="25"
               [circle]="true"
               [fontSize]="14"
-            ></app-avatar>
+            >
+            </app-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
@@ -142,7 +147,11 @@
           </td>
           <td>
             <ng-container *ngIf="u.twoFactorEnabled">
-              <i class="fa fa-lock" title="{{ 'userUsingTwoStep' | i18n }}" aria-hidden="true"></i>
+              <i
+                class="bwi bwi-lock"
+                title="{{ 'userUsingTwoStep' | i18n }}"
+                aria-hidden="true"
+              ></i>
               <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
             </ng-container>
           </td>
@@ -161,7 +170,7 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a
@@ -171,7 +180,7 @@
                   (click)="reinvite(u)"
                   *ngIf="u.status === userStatusType.Invited"
                 >
-                  <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                   {{ "resendInvitation" | i18n }}
                 </a>
                 <a
@@ -181,7 +190,7 @@
                   (click)="confirm(u)"
                   *ngIf="u.status === userStatusType.Accepted"
                 >
-                  <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                   {{ "confirm" | i18n }}
                 </a>
                 <a
@@ -191,7 +200,7 @@
                   (click)="groups(u)"
                   *ngIf="accessGroups"
                 >
-                  <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
                   {{ "groups" | i18n }}
                 </a>
                 <a
@@ -201,11 +210,11 @@
                   (click)="events(u)"
                   *ngIf="accessEvents && u.status === userStatusType.Confirmed"
                 >
-                  <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                   {{ "eventLogs" | i18n }}
                 </a>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-remove" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>

bitwarden_license/src/app/providers/manage/user-add-edit.component.html

@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -52,9 +52,9 @@
             target="_blank"
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/article/user-types-access-control/#user-types"
+            href="https://bitwarden.com/help/provider-users/"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </h3>
         <div class="form-check mt-2 form-check-block">
@@ -88,7 +88,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -106,12 +106,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"

bitwarden_license/src/app/providers/providers-layout.component.html

@@ -10,7 +10,7 @@
         </div>
         <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!provider.enabled">
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "providerIsDisabled" | i18n }}
           </div>
         </div>
@@ -18,19 +18,19 @@
       <ul class="nav nav-tabs" *ngIf="showMenuBar">
         <li class="nav-item">
           <a class="nav-link" routerLink="clients" routerLinkActive="active">
-            <i class="fa fa-university" aria-hidden="true"></i>
+            <i class="bwi bwi-bank" aria-hidden="true"></i>
             {{ "clients" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showManageTab">
           <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="fa fa-sliders" aria-hidden="true"></i>
+            <i class="bwi bwi-sliders" aria-hidden="true"></i>
             {{ "manage" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showSettingsTab">
           <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="fa fa-cogs" aria-hidden="true"></i>
+            <i class="bwi bwi-cogs" aria-hidden="true"></i>
             {{ "settings" | i18n }}
           </a>
         </li>

bitwarden_license/src/app/providers/settings/account.component.html

@@ -2,7 +2,11 @@
   <h1>{{ "myProvider" | i18n }}</h1>
 </div>
 <div *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -42,7 +46,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>

bitwarden_license/src/app/providers/setup/setup-provider.component.html

@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>

bitwarden_license/src/app/providers/setup/setup.component.html

@@ -27,7 +27,7 @@
 
     <div class="mt-4">
       <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "submit" | i18n }}</span>
       </button>
       <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">

bitwarden_license/src/app/providers/setup/setup.component.ts

@@ -48,9 +48,7 @@ export class SetupComponent implements OnInit {
           "error",
           null,
           this.i18nService.t("emergencyInviteAcceptFailed"),
-          {
+          { timeout: 10000 }
-            timeout: 10000,
-          }
         );
         this.router.navigate(["/"]);
         return;

connectors/src/captcha-mobile.html

@@ -14,7 +14,7 @@
   <body class="layout_frontend">
     <div class="row justify-content-md-center mt-5">
       <div>
-        <img src="..//images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
+        <img src="../../src/images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
         <p id="captchaRequired" class="lead text-center mx-4 mb-4">Captcha Required</p>
         <div id="captcha"></div>
       </div>

connectors/src/captcha/captcha-mobile.scss

@@ -0,0 +1,46 @@
+@import "../common/styles.scss";
+
+.justify-content-md-center {
+  justify-content: center !important;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -10px;
+  margin-left: -10px;
+}
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.mb-2,
+.my-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-4,
+.mx-4 {
+  margin-left: 1.5rem !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.mr-4,
+.mx-4 {
+  margin-right: 1.5rem !important;
+}
+
+.lead {
+  font-size: 1.25rem;
+  font-weight: normal;
+}
+
+.text-center {
+  text-align: center !important;
+}

connectors/src/captcha/captcha.ts

@@ -1,4 +1,4 @@
-import { b64Decode, getQsParam } from "./common";
+import { b64Decode, getQsParam } from "../common";
 
 declare var hcaptcha: any;
 

connectors/src/common/styles.scss

@@ -0,0 +1,22 @@
+@import "~bootstrap/scss/_functions";
+@import "~bootstrap/scss/_variables";
+@import "~bootstrap/scss/_mixins";
+@import "~bootstrap/scss/_root";
+@import "~bootstrap/scss/_reboot";
+
+html {
+  font-size: 14px;
+}
+
+html.theme_light body.layout_frontend {
+  background-color: #ecf0f5;
+  color: #333;
+}
+
+img.logo {
+  display: block;
+  height: 43px;
+  margin: 0 auto;
+  margin-bottom: 0px;
+  width: 284px;
+}

connectors/src/duo/duo.scss

@@ -5,7 +5,7 @@ body {
 }
 
 body {
-  background: #efeff4 url("../images/loading.svg") 0 0 no-repeat;
+  background: #efeff4 url("../../../src/images/loading.svg") 0 0 no-repeat;
 }
 
 iframe {

connectors/src/duo/duo.ts

@@ -1,5 +1,5 @@
 import * as DuoWebSDK from "duo_web_sdk";
-import { getQsParam } from "./common";
+import { getQsParam } from "../common";
 
 // tslint:disable-next-line
 require("./duo.scss");

connectors/src/sso.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="theme_light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1010" />
+    <meta name="theme-color" content="#175DDC" />
+
+    <title>Bitwarden</title>
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="../../src/images/icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="../../src/images/icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../../src/images/icons/favicon-16x16.png"
+    />
+    <link rel="mask-icon" href="../../src/images/icons/safari-pinned-tab.svg" color="#175DDC" />
+    <link rel="manifest" href="../../src/manifest.json" />
+  </head>
+
+  <body class="layout_frontend">
+    <div class="mt-5 d-flex justify-content-center">
+      <div>
+        <img src="../../src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
+        <div id="content">
+          <p class="text-center">
+            <i
+              class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
+              title="Loading"
+              aria-hidden="true"
+            ></i>
+          </p>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

connectors/src/sso/sso.scss

@@ -0,0 +1,82 @@
+@import "../common/styles.scss";
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.d-flex {
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.justify-content-center {
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+$icomoon-font-family: "bwi-font" !default;
+$icomoon-font-path: "~@bitwarden/jslib-angular/src/scss/bwicons/fonts/" !default;
+
+@font-face {
+  font-family: "#{$icomoon-font-family}";
+  src: url($icomoon-font-path + "bwi-font.svg") format("svg"),
+    url($icomoon-font-path + "bwi-font.ttf") format("truetype"),
+    url($icomoon-font-path + "bwi-font.woff") format("woff"),
+    url($icomoon-font-path + "bwi-font.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+// Base Class
+.bwi {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "#{$icomoon-font-family}" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bwi-2x {
+  font-size: 2em;
+}
+
+// Spin Animations
+.bwi-spin {
+  animation: bwi-spin 2s infinite linear;
+}
+
+@keyframes bwi-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+// Rotation
+.bwi-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.bwi-spinner:before {
+  content: "\e937";
+}

connectors/src/sso/sso.ts

@@ -1,4 +1,4 @@
-import { getQsParam } from "./common";
+import { getQsParam } from "../common";
 
 // tslint:disable-next-line
 require("./sso.scss");

connectors/src/webauthn-fallback.html

@@ -9,11 +9,11 @@
     <div class="container">
       <div class="row justify-content-center mt-5">
         <div class="col-5">
-          <img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
+          <img src="../../src/images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
           <div id="spinner">
             <p class="text-center">
               <i
-                class="fa fa-spinner fa-spin fa-2x text-muted"
+                class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
                 title="Loading"
                 aria-hidden="true"
               ></i>

connectors/src/webauthn-mobile.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html class="theme_light">
   <head>
     <meta charset="utf-8" />
     <meta
@@ -14,12 +14,12 @@
   <body style="background: transparent">
     <div class="row justify-content-md-center mt-5">
       <div>
-        <img src="../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
+        <img src="../../src/images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
         <p id="webauthn-header" class="lead text-center mx-4 mb-4"></p>
         <picture>
-          <source srcset="../images/u2fkey-mobile.avif" type="image/avif" />
+          <source srcset="../../src/images/u2fkey-mobile.avif" type="image/avif" />
-          <source srcset="../images/u2fkey-mobile.webp" type="image/webp" />
+          <source srcset="../../src/images/u2fkey-mobile.webp" type="image/webp" />
-          <img src="../images/u2fkey-mobile.jpg" class="rounded img-fluid" />
+          <img src="../../src/images/u2fkey-mobile.jpg" class="rounded img-fluid" />
         </picture>
         <div class="text-center mt-4">
           <button id="webauthn-button" class="btn btn-primary btn-lg"></button>

connectors/src/webauthn.html

@@ -7,9 +7,9 @@
 
   <body style="background: transparent">
     <picture>
-      <source srcset="../images/u2fkey.avif" type="image/avif" />
+      <source srcset="../../src/images/u2fkey.avif" type="image/avif" />
-      <source srcset="../images/u2fkey.webp" type="image/webp" />
+      <source srcset="../../src/images/u2fkey.webp" type="image/webp" />
-      <img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3" />
+      <img src="../../src/images/u2fkey.jpg" class="rounded img-fluid mb-3" />
     </picture>
     <div class="text-center">
       <button id="webauthn-button" class="btn btn-primary"></button>

connectors/src/webauthn/webauthn-fallback.ts

@@ -1,4 +1,4 @@
-import { b64Decode, getQsParam } from "./common";
+import { b64Decode, getQsParam } from "../common";
 import { buildDataString, parseWebauthnJson } from "./common-webauthn";
 
 // tslint:disable-next-line
@@ -85,7 +85,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 });
 
 async function loadLocales(newLocale: string) {
-  const filePath = `locales/${newLocale}/messages.json?cache=${process.env.CACHE_TAG}`;
+  const filePath = `/locales/${newLocale}/messages.json?cache=${process.env.CACHE_TAG}`;
   const localesResult = await fetch(filePath);
   return await localesResult.json();
 }

connectors/src/webauthn/webauthn.scss

@@ -0,0 +1,197 @@
+@import "../common/styles.scss";
+
+body {
+  min-width: 0px !important;
+}
+
+.mb-3,
+.my-3 {
+  margin-bottom: 1rem !important;
+}
+
+.rounded {
+  border-radius: 0.25rem !important;
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #175ddc;
+  border-color: #175ddc;
+}
+
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+.btn:hover,
+.swal2-popup .swal2-actions button:hover {
+  color: #333;
+  text-decoration: none;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #134eb9;
+  border-color: #1249ae;
+}
+
+/** Mobile **/
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.justify-content-center,
+.justify-content-md-center {
+  justify-content: center !important;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -10px;
+  margin-left: -10px;
+}
+
+.mb-2,
+.my-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-4,
+.mx-4 {
+  margin-left: 1.5rem !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.mr-4,
+.mx-4 {
+  margin-right: 1.5rem !important;
+}
+
+.lead {
+  font-size: 1.25rem;
+  font-weight: normal;
+}
+
+/** Fallback **/
+
+.container {
+  margin: 0 auto;
+  max-width: 980px;
+}
+
+.col-5 {
+  position: relative;
+  width: 100%;
+  padding-right: 10px;
+  padding-left: 10px;
+  flex: 0 0 41.6666666667%;
+  max-width: 41.6666666667%;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.card-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 1.25rem;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-radius: 0.25rem;
+}
+
+.alert-danger {
+  color: #73271e;
+  background-color: #f8dbd7;
+  border-color: #f5cdc8;
+}
+
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: 1.25rem;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: 0.3rem;
+  margin-left: -1.25rem;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  border-top-color: currentcolor;
+  border-top-style: none;
+  border-top-width: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}

connectors/src/webauthn/webauthn.ts

@@ -1,4 +1,4 @@
-import { b64Decode, getQsParam } from "./common";
+import { b64Decode, getQsParam } from "../common";
 import { buildDataString, parseWebauthnJson } from "./common-webauthn";
 
 // tslint:disable-next-line

connectors/webpack.config.js

@@ -0,0 +1,150 @@
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackInjector = require("html-webpack-injector");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const NODE_ENV = process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
+
+const moduleRules = [
+  {
+    test: /\.ts$/,
+    enforce: "pre",
+    loader: "tslint-loader",
+  },
+  {
+    test: /\.tsx?$/,
+    use: [
+      {
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+        },
+      },
+    ],
+  },
+  {
+    test: /\.(html)$/,
+    loader: "html-loader",
+  },
+  {
+    test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+    exclude: /loading(|-white).svg/,
+    generator: {
+      filename: "fonts/[name].[contenthash][ext]",
+    },
+    type: "asset/resource",
+  },
+  {
+    test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
+    exclude: /.*(fontawesome-webfont)\.svg/,
+    generator: {
+      filename: "images/[name].[contenthash][ext]",
+    },
+    type: "asset/resource",
+  },
+  {
+    test: /\.scss$/,
+    use: [
+      {
+        loader: MiniCssExtractPlugin.loader,
+      },
+      "css-loader",
+      "sass-loader",
+    ],
+  },
+];
+
+const plugins = [
+  new HtmlWebpackInjector(),
+  new HtmlWebpackPlugin({
+    template: "./src/duo.html",
+    filename: "duo.html",
+    chunks: ["duo"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/webauthn.html",
+    filename: "webauthn.html",
+    chunks: ["webauthn"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/webauthn-mobile.html",
+    filename: "webauthn-mobile.html",
+    chunks: ["webauthn"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/webauthn-fallback.html",
+    filename: "webauthn-fallback.html",
+    chunks: ["webauthn-fallback"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/sso.html",
+    filename: "sso.html",
+    chunks: ["sso"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/captcha.html",
+    filename: "captcha.html",
+    chunks: ["captcha"],
+  }),
+  new HtmlWebpackPlugin({
+    template: "./src/captcha-mobile.html",
+    filename: "captcha-mobile.html",
+    chunks: ["captcha"],
+  }),
+  new MiniCssExtractPlugin({
+    filename: "assets/[name].[contenthash].css",
+    chunkFilename: "assets/[id].[contenthash].css",
+  }),
+  new webpack.EnvironmentPlugin({
+    CACHE_TAG: Math.random().toString(36).substring(7),
+  }),
+  new webpack.ProvidePlugin({
+    process: "process/browser",
+  }),
+];
+
+const webpackConfig = {
+  mode: NODE_ENV,
+  devtool: "source-map",
+  entry: {
+    webauthn: "./src/webauthn/webauthn.ts",
+    "webauthn-fallback": "./src/webauthn/webauthn-fallback.ts",
+    duo: "./src/duo/duo.ts",
+    sso: "./src/sso/sso.ts",
+    captcha: "./src/captcha/captcha.ts",
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "app/vendor",
+          chunks: (chunk) => {
+            return chunk.name === "app/main";
+          },
+        },
+      },
+    },
+  },
+  resolve: {
+    extensions: [".ts", ".js"],
+    symlinks: false,
+    modules: [path.resolve("../", "node_modules")],
+    fallback: {
+      buffer: false,
+      util: require.resolve("util/"),
+      assert: false,
+    },
+  },
+  output: {
+    filename: "assets/[name].[contenthash].js",
+    path: path.resolve(__dirname, "build"),
+    publicPath: "/connectors/",
+    clean: true,
+  },
+  module: { rules: moduleRules },
+  plugins: plugins,
+};
+
+module.exports = webpackConfig;

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "bitwarden-web",
+  "name": "@bitwarden/web-vault",
   "version": "2.25.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "bitwarden-web",
+      "name": "@bitwarden/web-vault",
       "version": "2.25.1",
       "hasInstallScript": true,
       "license": "GPL-3.0",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "bitwarden-web",
+  "name": "@bitwarden/web-vault",
   "version": "2.25.1",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",

src/404.html

@@ -9,13 +9,7 @@
       href="/404/bootstrap.min.css"
       rel="stylesheet"
       type="text/css"
-      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+      integrity="sha384-hA/ESrxp2b05ywLtD9YwM6m+pNyLRY4+ruk6dWK00SM4k6SQs0bfrITJVSf6uZyH"
-    />
-    <link
-      href="/404/font-awesome.min.css"
-      rel="stylesheet"
-      type="text/css"
-      integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
     />
     <link href="/404/styles.css" rel="stylesheet" type="text/css" />
 
@@ -33,7 +27,9 @@
     <div class="banner">
       <div class="container inner banner">
         <div class="row align-items-center">
-          <div class="col brand"><i class="fa fa-shield"></i>&nbsp; <strong>bit</strong>warden</div>
+          <div class="col brand">
+            <i class="bwi bwi-shield"></i>&nbsp; <strong>bit</strong>warden
+          </div>
         </div>
       </div>
     </div>

src/404/styles.css

@@ -119,3 +119,33 @@ h2 {
   padding: 40px 0 40px 0;
   border-top: 1px solid #dee2e6;
 }
+
+/* Bitwarden icons, manually copied */
+
+@font-face {
+  font-family: "bwi-font";
+  src: url(../images/bwi-font.svg) format("svg"), url(../fonts/bwi-font.ttf) format("truetype"),
+    url(../fonts/bwi-font.woff) format("woff"), url(../fonts/bwi-font.woff2) format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.bwi {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "bwi-font" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bwi-shield:before {
+  content: "\e932";
+}

src/app/accounts/accept-emergency.component.html

@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>

src/app/accounts/accept-organization.component.html

@@ -3,7 +3,7 @@
     <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>

src/app/accounts/hint.component.html

@@ -28,7 +28,7 @@
             >
               <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/lock.component.html

@@ -2,7 +2,7 @@
   <div class="row justify-content-md-center mt-5">
     <div class="col-5">
       <p class="text-center mb-4">
-        <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
+        <i class="bwi bwi-lock bwi-4x text-muted" aria-hidden="true"></i>
       </p>
       <p class="lead text-center mx-4 mb-4">{{ "yourVaultIsLocked" | i18n }}</p>
       <div class="card d-block">
@@ -27,9 +27,9 @@
                 (click)="togglePassword()"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -44,11 +44,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span>
+              <span> <i class="bwi bwi-unlock" aria-hidden="true"></i> {{ "unlock" | i18n }} </span>
-                <i class="fa fa-unlock-alt" aria-hidden="true"></i> {{ "unlock" | i18n }}
-              </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/login.component.html

@@ -44,9 +44,9 @@
                 (click)="togglePassword()"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -74,9 +74,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span> <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -86,12 +86,13 @@
               [queryParams]="{ email: email }"
               class="btn btn-outline-secondary btn-block ml-2 mt-0"
             >
-              <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{ "createAccount" | i18n }}
+              <i class="bwi bwi-pencil-square-o" aria-hidden="true"></i>
+              {{ "createAccount" | i18n }}
             </a>
           </div>
           <div class="d-flex">
             <a routerLink="/sso" class="btn btn-outline-secondary btn-block mt-2">
-              <i class="fa fa-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
+              <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
             </a>
           </div>
         </div>

src/app/accounts/recover-delete.component.html

@@ -28,7 +28,7 @@
             >
               <span>{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/recover-two-factor.component.html

@@ -7,7 +7,7 @@
           <p>
             {{ "recoverAccountTwoStepDesc" | i18n }}
             <a
-              href="https://help.bitwarden.com/article/lost-two-step-device/"
+              href="https://bitwarden.com/help/lost-two-step-device/"
               target="_blank"
               rel="noopener"
               >{{ "learnMore" | i18n }}</a
@@ -60,7 +60,7 @@
             >
               <span>{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/register.component.html

@@ -1,44 +1,100 @@
 <div class="layout" [ngClass]="['layout', layout]">
-  <header class="header" *ngIf="layout === 'enterprise2'">
+  <!-- TEAMS 1 Header -->
+  <header
+    class="header"
+    *ngIf="
+      layout === 'default' ||
+      layout === 'teams' ||
+      layout === 'teams1' ||
+      layout === 'teams2' ||
+      layout === 'enterprise' ||
+      layout === 'enterprise1' ||
+      layout === 'enterprise2' ||
+      layout === 'cnetcmpgnent' ||
+      layout === 'cnetcmpgnteams' ||
+      layout === 'cnetcmpgnind'
+    "
+  >
     <div class="container">
       <div class="row">
         <div class="col-7">
           <img
             alt="Bitwarden"
             class="logo mb-2"
-            src="../../images/register-layout/logo-horizontal-white.png"
+            src="../../images/register-layout/logo-horizontal-white.svg"
           />
         </div>
       </div>
     </div>
   </header>
+
   <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
     <div class="row">
       <div class="col-7" *ngIf="layout">
         <div class="mt-5">
-          <div *ngIf="layout === 'enterprise2'">
+          <!-- Default Body -->
-            <h2>Companies globally trust Bitwarden for password management.</h2>
+          <div
-            <p>Start your 7-day free trial!</p>
+            *ngIf="
-            <p class="highlight">Quickly deploy your <b>organization</b></p>
+              layout === 'teams' ||
-            <p>Use Bitwarden across all platforms</p>
+              layout === 'enterprise' ||
+              layout === 'enterprise1' ||
+              layout === 'default'
+            "
+          >
+            <h1>The Bitwarden Password Manager</h1>
+            <h2>
+              Trusted by millions of individuals, teams, and organizations worldwide for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
             <p>Collaborate and share securely</p>
-            <figure>
+            <p>Access anywhere on any device</p>
-              <figcaption>
+            <p>Create your account to get started</p>
-                <cite>
-                  <img src="../../images/register-layout/wired-logo.png" alt="Wired" />
-                </cite>
-              </figcaption>
-              <blockquote>
-                "Bitwarden has become a popular choice among open-source software advocates. After
-                using it for a few months, I can see why." - February 2020
-              </blockquote>
-            </figure>
           </div>
-          <div *ngIf="layout === 'enterprise3'">
+
-            <p>Enterprise 3 layout</p>
+          <!-- Teams & Enterprise Body -->
+          <div *ngIf="layout === 'teams1' || layout === 'teams2' || layout === 'enterprise2'">
+            <h1>
+              Start Your <span *ngIf="layout === 'teams1' || layout === 'teams1'">Teams<br /></span
+              ><span *ngIf="layout === 'enterprise2'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
           </div>
-          <div *ngIf="layout === 'enterprise4'">
+
-            <p>Enterprise 4 layout</p>
+          <!-- CNET Campaign Teams & Enterprise Body -->
+          <div *ngIf="layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnent'">
+            <h1>
+              Start Your <span *ngIf="layout === 'cnetcmpgnteams'">Teams<br /></span
+              ><span *ngIf="layout === 'cnetcmpgnent'">Enterprise</span> Free Trial Now
+            </h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Collaborate and share securely</p>
+            <p>Deploy and manage quickly and easily</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
+          </div>
+
+          <!-- CNET Campaign Premium Body -->
+          <div *ngIf="layout === 'cnetcmpgnind'">
+            <h1>Start Your Premium Account Now</h1>
+            <h2>
+              Millions of individuals, teams, and organizations worldwide trust Bitwarden for secure
+              password storage and sharing.
+            </h2>
+            <p>Store logins, secure notes, and more</p>
+            <p>Secure your account with advanced two-step login</p>
+            <p>Access anywhere on any device</p>
+            <p>Create your account to get started</p>
           </div>
         </div>
       </div>
@@ -51,7 +107,7 @@
                 <app-callout
                   title="{{ 'createOrganizationStep1' | i18n }}"
                   type="info"
-                  icon="fa-thumb-tack"
+                  icon="bwi bwi-thumb-tack"
                   *ngIf="showCreateOrgMessage"
                 >
                   {{ "createOrganizationCreatePersonalAccount" | i18n }}
@@ -114,11 +170,11 @@
                         (click)="togglePassword(false)"
                       >
                         <i
-                          class="fa fa-lg"
+                          class="bwi bwi-lg"
                           aria-hidden="true"
                           [ngClass]="{
-                            'fa-eye': !showPassword,
+                            'bwi-eye': !showPassword,
-                            'fa-eye-slash': showPassword
+                            'bwi-eye-slash': showPassword
                           }"
                         ></i>
                       </button>
@@ -146,9 +202,9 @@
                       (click)="togglePassword(true)"
                     >
                       <i
-                        class="fa fa-lg"
+                        class="bwi bwi-lg"
                         aria-hidden="true"
-                        [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                        [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                       ></i>
                     </button>
                   </div>
@@ -197,7 +253,7 @@
                   >
                     <span>{{ "submit" | i18n }}</span>
                     <i
-                      class="fa fa-spinner fa-spin"
+                      class="bwi bwi-spinner bwi-spin"
                       title="{{ 'loading' | i18n }}"
                       aria-hidden="true"
                     ></i>
@@ -212,5 +268,88 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="col-7 d-flex align-items-center">
+        <div
+          *ngIf="
+            layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/cnet-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="cnet logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              "No more excuses; start using Bitwarden today. The identity you save could be your
+              own. The money definitely will be."
+            </blockquote>
+          </figure>
+        </div>
+
+        <div
+          *ngIf="
+            layout === 'teams' ||
+            layout === 'teams1' ||
+            layout === 'teams2' ||
+            layout === 'enterprise' ||
+            layout === 'enterprise1' ||
+            layout === 'enterprise2' ||
+            layout === 'default'
+          "
+        >
+          <figure>
+            <figcaption>
+              <cite>
+                <img
+                  src="../../images/register-layout/forbes-logo.svg"
+                  class="w-25 d-block mx-auto"
+                  alt="Forbes Logo"
+                />
+              </cite>
+            </figcaption>
+            <blockquote class="mx-auto text-center px-4">
+              “Bitwarden boasts the backing of some of the world's best security experts and an
+              attractive, easy-to-use interface”
+            </blockquote>
+          </figure>
+        </div>
+      </div>
+      <div
+        *ngIf="
+          layout === 'cnetcmpgnent' || layout === 'cnetcmpgnteams' || layout === 'cnetcmpgnind'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+      <div
+        *ngIf="
+          layout === 'teams' ||
+          layout === 'teams1' ||
+          layout === 'teams2' ||
+          layout === 'enterprise' ||
+          layout === 'enterprise1' ||
+          layout === 'enterprise2' ||
+          layout === 'default'
+        "
+        class="col-5 d-flex align-items-center justify-content-center"
+      >
+        <img
+          src="../../images/register-layout/usnews-360-badge.svg"
+          class="w-50 d-block"
+          alt="US News 360 Reviews Best Password Manager"
+        />
+      </div>
+    </div>
   </form>
 </div>

src/app/accounts/remove-password.component.html

@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -27,7 +27,7 @@
             [disabled]="actionPromise"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="continuing"
@@ -41,7 +41,7 @@
             [disabled]="actionPromise"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="leaving"

src/app/accounts/set-password.component.html

@@ -4,7 +4,7 @@
       <p class="lead text-center mb-4">{{ "setMasterPassword" | i18n }}</p>
       <div class="card d-block">
         <div class="card-body text-center" *ngIf="syncLoading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <div class="card-body" *ngIf="!syncLoading">
@@ -47,9 +47,9 @@
                   (click)="togglePassword(false)"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <div class="progress-bar invisible"></div>
@@ -76,9 +76,9 @@
                 (click)="togglePassword(true)"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -96,7 +96,7 @@
               [disabled]="form.loading"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/sso.component.html

@@ -10,7 +10,7 @@
       <img class="logo mb-2 logo-themed" alt="Bitwarden" />
       <div class="card d-block mt-4">
         <div class="card-body" *ngIf="loggingIn">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <div class="card-body" *ngIf="!loggingIn">
@@ -34,9 +34,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span> <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/two-factor.component.html

@@ -94,7 +94,7 @@
             </div>
           </ng-container>
           <i
-            class="fa fa-spinner text-muted fa-spin pull-right"
+            class="bwi bwi-spinner text-muted bwi-spin pull-right"
             title="{{ 'loading' | i18n }}"
             *ngIf="form.loading && selectedProviderType === providerType.WebAuthn"
             aria-hidden="true"
@@ -127,10 +127,10 @@
               "
             >
               <span>
-                <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
               </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/update-temp-password.component.html

@@ -36,9 +36,9 @@
                   (click)="togglePassword(false)"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <div class="progress-bar invisible"></div>
@@ -64,9 +64,9 @@
                 (click)="togglePassword(true)"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -84,7 +84,7 @@
               [disabled]="form.loading"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/accounts/verify-email-token.component.html

@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>

src/app/accounts/verify-recover-delete.component.html

@@ -18,7 +18,7 @@
             >
               <span>{{ "deleteAccount" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/app.component.ts

@@ -153,7 +153,7 @@ export class AppComponent implements OnDestroy, OnInit {
             );
             if (emailVerificationConfirmed) {
               this.platformUtilsService.launchUri(
-                "https://bitwarden.com/help/article/create-bitwarden-account/"
+                "https://bitwarden.com/help/create-bitwarden-account/"
               );
             }
             break;
@@ -164,7 +164,6 @@ export class AppComponent implements OnDestroy, OnInit {
             this.setFullWidth();
             break;
           case "convertAccountToKeyConnector":
-            this.keyConnectorService.setConvertAccountRequired(true);
             this.router.navigate(["/remove-password"]);
             break;
           default:

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

@@ -60,9 +60,7 @@ export abstract class BaseAcceptComponent implements OnInit {
           errorMessage != null
             ? this.i18nService.t(this.failedShortMessage, errorMessage)
             : this.i18nService.t(this.failedMessage);
-        this.platformUtilService.showToast("error", null, message, {
+        this.platformUtilService.showToast("error", null, message, { timeout: 10000 });
-          timeout: 10000,
-        });
         this.router.navigate(["/"]);
       }
 

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

@@ -110,13 +110,7 @@ export abstract class BaseEventsComponent {
     endDate: string,
     continuationToken: string
   ): Promise<ListResponse<EventResponse>>;
-  protected abstract getUserName(
+  protected abstract getUserName(r: EventResponse, userId: string): { name: string; email: string };
-    r: EventResponse,
-    userId: string
-  ): {
-    name: string;
-    email: string;
-  };
 
   protected async loadAndParseEvents(
     startDate: string,
@@ -144,10 +138,7 @@ export abstract class BaseEventsComponent {
         });
       })
     );
-    return {
+    return { continuationToken: response.continuationToken, events: events };
-      continuationToken: response.continuationToken,
-      events: events,
-    };
   }
 
   protected parseDates() {
@@ -181,13 +172,6 @@ export abstract class BaseEventsComponent {
 
     const data = await this.exportService.getEventExport(events);
     const fileName = this.exportService.getFileName(this.exportFileName, "csv");
-    this.platformUtilsService.saveFile(
+    this.platformUtilsService.saveFile(window, data, { type: "text/plain" }, fileName);
-      window,
-      data,
-      {
-        type: "text/plain",
-      },
-      fileName
-    );
   }
 }

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

@@ -35,10 +35,7 @@ const MaxCheckedCount = 500;
 export abstract class BasePeopleComponent<
   UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse
 > {
-  @ViewChild("confirmTemplate", {
+  @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
-    read: ViewContainerRef,
-    static: true,
-  })
   confirmModalRef: ViewContainerRef;
 
   get allCount() {

src/app/components/nested-checkbox.component.ts

@@ -6,18 +6,10 @@ import { Utils } from "jslib-common/misc/utils";
   templateUrl: "nested-checkbox.component.html",
 })
 export class NestedCheckboxComponent {
-  @Input()
+  @Input() parentId: string;
-  parentId: string;
+  @Input() checkboxes: { id: string; get: () => boolean; set: (v: boolean) => void }[];
-  @Input()
+  @Output() onSavedUser = new EventEmitter();
-  checkboxes: {
+  @Output() onDeletedUser = new EventEmitter();
-    id: string;
-    get: () => boolean;
-    set: (v: boolean) => void;
-  }[];
-  @Output()
-  onSavedUser = new EventEmitter();
-  @Output()
-  onDeletedUser = new EventEmitter();
 
   get parentIndeterminate() {
     return !this.parentChecked && this.checkboxes.some((c) => c.get());

src/app/components/password-reprompt.component.html

@@ -32,12 +32,9 @@
               (click)="togglePassword()"
             >
               <i
-                class="fa fa-lg"
+                class="bwi bwi-lg"
                 aria-hidden="true"
-                [ngClass]="{
+                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-                  'fa-eye': !showPassword,
-                  'fa-eye-slash': showPassword
-                }"
               ></i>
             </button>
           </div>

src/app/components/password-strength.component.html

@@ -2,9 +2,7 @@
   <div
     class="progress-bar {{ color }}"
     role="progressbar"
-    [ngStyle]="{
+    [ngStyle]="{ width: scoreWidth + '%' }"
-      width: scoreWidth + '%'
-    }"
     attr.aria-valuenow="{{ scoreWidth }}"
     aria-valuemin="0"
     aria-valuemax="100"

src/app/components/password-strength.component.ts

@@ -7,10 +7,8 @@ import { I18nService } from "jslib-common/abstractions/i18n.service";
   templateUrl: "password-strength.component.html",
 })
 export class PasswordStrengthComponent implements OnChanges {
-  @Input()
+  @Input() score?: number;
-  score?: number;
+  @Input() showText = false;
-  @Input()
-  showText = false;
 
   scoreWidth = 0;
   color = "bg-danger";

src/app/layouts/footer.component.html

@@ -1,9 +1,6 @@
 <div class="container footer text-muted">
   <div class="row">
-    <div class="col">
+    <div class="col">&copy; {{ year }}, Bitwarden Inc.</div>
-      &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,7 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  &copy;
+  &copy; {{ year }}, Bitwarden Inc. <br />
-  {{ year }}, Bitwarden Inc.
-  <br />
   {{ "versionNumber" | i18n: version }}
 </div>

src/app/layouts/navbar.component.html

@@ -1,12 +1,7 @@
-<nav
+<nav class="navbar navbar-expand navbar-dark" [ngClass]="{ 'nav-background-alt': selfHosted }">
-  class="navbar navbar-expand navbar-dark"
-  [ngClass]="{
-    'nav-background-alt': selfHosted
-  }"
->
   <div class="container">
     <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'pageTitle' | i18n: 'Bitwarden' }}">
-      <i class="fa fa-shield" aria-hidden="true"></i>
+      <i class="bwi bwi-shield" aria-hidden="true"></i>
     </a>
     <div class="collapse navbar-collapse">
       <ul class="navbar-nav">
@@ -44,7 +39,7 @@
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i>
+          <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
         </a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
           <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
@@ -62,11 +57,11 @@
           </div>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#" routerLink="/settings/account">
-            <i class="fa fa-fw fa-user" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
             {{ "myAccount" | i18n }}
           </a>
           <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
-            <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
             {{ "getHelp" | i18n }}
           </a>
           <a
@@ -75,16 +70,16 @@
             target="_blank"
             rel="noopener"
           >
-            <i class="fa fa-fw fa-download" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
             {{ "getApps" | i18n }}
           </a>
           <div class="dropdown-divider"></div>
           <button type="button" class="dropdown-item" (click)="lock()">
-            <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
             {{ "lockNow" | i18n }}
           </button>
           <button type="button" class="dropdown-item" (click)="logOut()">
-            <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
             {{ "logOut" | i18n }}
           </button>
         </div>

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

@@ -13,7 +13,7 @@
           *ngIf="!organization.enabled"
         >
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "organizationIsDisabled" | i18n }}
           </div>
         </div>
@@ -22,7 +22,7 @@
           *ngIf="organization.isProviderUser"
         >
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "accessingUsingProvider" | i18n: organization.providerName }}
           </div>
         </div>
@@ -30,25 +30,25 @@
       <ul class="nav nav-tabs" *ngIf="showMenuBar">
         <li class="nav-item">
           <a class="nav-link" routerLink="vault" routerLinkActive="active">
-            <i class="fa fa-lock" aria-hidden="true"></i>
+            <i class="bwi bwi-lock" aria-hidden="true"></i>
             {{ "vault" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showManageTab">
           <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="fa fa-sliders" aria-hidden="true"></i>
+            <i class="bwi bwi-sliders" aria-hidden="true"></i>
             {{ "manage" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showToolsTab">
           <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
-            <i class="fa fa-wrench" aria-hidden="true"></i>
+            <i class="bwi bwi-wrench" aria-hidden="true"></i>
             {{ "tools" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="organization.isOwner">
           <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="fa fa-cogs" aria-hidden="true"></i>
+            <i class="bwi bwi-cogs" aria-hidden="true"></i>
             {{ "settings" | i18n }}
           </a>
         </li>

src/app/organizations/manage/bulk/bulk-confirm.component.html

@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
@@ -28,11 +28,7 @@
         <ng-container *ngIf="!loading && !done">
           <p>
             {{ "fingerprintEnsureIntegrityVerify" | i18n }}
-            <a
+            <a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noopener">
-              href="https://help.bitwarden.com/article/fingerprint-phrase/"
-              target="_blank"
-              rel="noopener"
-            >
               {{ "learnMore" | i18n }}</a
             >
           </p>
@@ -51,7 +47,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -69,7 +66,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -97,7 +95,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -121,7 +120,7 @@
           [disabled]="loading"
           (click)="submit()"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "confirm" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/bulk/bulk-remove.component.html

@@ -39,7 +39,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -64,7 +65,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -88,7 +90,7 @@
           [disabled]="loading"
           (click)="submit()"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "removeUsers" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/bulk/bulk-status.component.html

@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <table class="table table-hover table-list" *ngIf="!loading">

src/app/organizations/manage/collection-add-edit.component.html

@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -91,7 +91,7 @@
                   {{ g.name }}
                   <ng-container *ngIf="g.accessAll">
                     <i
-                      class="fa fa-th text-muted fa-fw"
+                      class="bwi bwi-filter text-muted bwi-fw"
                       title="{{ 'groupAccessAllItems' | i18n }}"
                       aria-hidden="true"
                     ></i>
@@ -126,7 +126,7 @@
           [disabled]="form.loading"
           *ngIf="this.canSave"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -144,12 +144,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"

src/app/organizations/manage/collections.component.html

@@ -17,13 +17,17 @@
       class="btn btn-sm btn-outline-primary ml-3"
       (click)="add()"
     >
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newCollection" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -58,7 +62,7 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <a
@@ -68,7 +72,7 @@
                 *ngIf="this.canEdit(c)"
                 (click)="users(c)"
               >
-                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
                 {{ "users" | i18n }}
               </a>
               <a
@@ -78,7 +82,7 @@
                 *ngIf="this.canDelete(c)"
                 (click)="delete(c)"
               >
-                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ "delete" | i18n }}
               </a>
             </div>

src/app/organizations/manage/entity-events.component.html

@@ -17,7 +17,7 @@
       </div>
       <div class="modal-body" *ngIf="!loaded">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -55,8 +55,8 @@
             [disabled]="loaded && refreshBtn.loading"
           >
             <i
-              class="fa fa-refresh fa-fw"
+              class="bwi bwi-refresh bwi-fw"
-              [ngClass]="{ 'fa-spin': loaded && refreshBtn.loading }"
+              [ngClass]="{ 'bwi-spin': loaded && refreshBtn.loading }"
               aria-hidden="true"
             ></i>
             {{ "refresh" | i18n }}
@@ -82,7 +82,7 @@
               <td>{{ e.date | date: "medium" }}</td>
               <td>
                 <i
-                  class="text-muted fa fa-lg {{ e.appIcon }}"
+                  class="text-muted bwi bwi-lg {{ e.appIcon }}"
                   title="{{ e.appName }}, {{ e.ip }}"
                   aria-hidden="true"
                 ></i>
@@ -104,7 +104,7 @@
           [disabled]="loaded && moreBtn.loading"
           *ngIf="continuationToken"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "loadMore" | i18n }}</span>
         </button>
       </div>

src/app/organizations/manage/entity-users.component.html

@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading || !users">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -109,7 +109,8 @@
                     size="25"
                     [circle]="true"
                     [fontSize]="14"
-                  ></app-avatar>
+                  >
+                  </app-avatar>
                 </td>
                 <td>
                   {{ u.email }}
@@ -128,7 +129,7 @@
                 <td *ngIf="entity === 'collection'">
                   <ng-container *ngIf="u.accessAll">
                     <i
-                      class="fa fa-th"
+                      class="bwi bwi-filter"
                       title="{{ 'userAccessAllItems' | i18n }}"
                       aria-hidden="true"
                     ></i>
@@ -167,7 +168,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/events.component.html

@@ -32,9 +32,9 @@
         [disabled]="loaded && refreshForm.loading"
       >
         <i
-          class="fa fa-refresh fa-fw"
+          class="bwi bwi-refresh bwi-fw"
           aria-hidden="true"
-          [ngClass]="{ 'fa-spin': loaded && refreshForm.loading }"
+          [ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
         ></i>
         {{ "refresh" | i18n }}
       </button>
@@ -47,14 +47,18 @@
         (click)="exportEvents()"
         [disabled]="(loaded && exportForm.loading) || dirtyDates"
       >
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
         <span>{{ "export" | i18n }}</span>
       </button>
     </form>
   </div>
 </div>
 <ng-container *ngIf="!loaded">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
@@ -75,7 +79,7 @@
         <td>{{ e.date | date: "medium" }}</td>
         <td>
           <i
-            class="text-muted fa fa-lg {{ e.appIcon }}"
+            class="text-muted bwi bwi-lg {{ e.appIcon }}"
             title="{{ e.appName }}, {{ e.ip }}"
             aria-hidden="true"
           ></i>
@@ -97,7 +101,7 @@
     [disabled]="loaded && moreBtn.loading"
     *ngIf="continuationToken"
   >
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "loadMore" | i18n }}</span>
   </button>
 </ng-container>

src/app/organizations/manage/group-add-edit.component.html

@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -56,9 +56,9 @@
               target="_blank"
               rel="noopener"
               appA11yTitle="{{ 'learnMore' | i18n }}"
-              href="https://bitwarden.com/help/article/user-types-access-control/#access-control"
+              href="https://bitwarden.com/help/user-types-access-control/#access-control"
             >
-              <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </div>
           <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
@@ -150,7 +150,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -168,12 +168,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               aria-hidden="true"
               title="{{ 'loading' | i18n }}"

src/app/organizations/manage/groups.component.html

@@ -12,13 +12,17 @@
       />
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newGroup" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -51,15 +55,15 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
-                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
                 {{ "users" | i18n }}
               </a>
               <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
-                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ "delete" | i18n }}
               </a>
             </div>

src/app/organizations/manage/people.component.html

@@ -52,11 +52,11 @@
         aria-expanded="false"
         appA11yTitle="{{ 'options' | i18n }}"
       >
-        <i class="fa fa-cog" aria-hidden="true"></i>
+        <i class="bwi bwi-cog" aria-hidden="true"></i>
       </button>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
         <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
-          <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
           {{ "reinviteSelected" | i18n }}
         </button>
         <button
@@ -65,32 +65,36 @@
           (click)="bulkConfirm()"
           *ngIf="showBulkConfirmUsers"
         >
-          <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
           {{ "confirmSelected" | i18n }}
         </button>
         <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
-          <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
           {{ "remove" | i18n }}
         </button>
         <div class="dropdown-divider"></div>
         <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-          <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
           {{ "selectAll" | i18n }}
         </button>
         <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-          <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
           {{ "unselectAll" | i18n }}
         </button>
       </div>
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "inviteUser" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -104,7 +108,7 @@
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
-      icon="fa-check-circle"
+      icon="bwi bwi-check-circle"
       *ngIf="showConfirmUsers"
     >
       {{ "usersNeedConfirmed" | i18n }}
@@ -128,7 +132,8 @@
               size="25"
               [circle]="true"
               [fontSize]="14"
-            ></app-avatar>
+            >
+            </app-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
@@ -142,12 +147,16 @@
           </td>
           <td>
             <ng-container *ngIf="u.twoFactorEnabled">
-              <i class="fa fa-lock" title="{{ 'userUsingTwoStep' | i18n }}" aria-hidden="true"></i>
+              <i
+                class="bwi bwi-lock"
+                title="{{ 'userUsingTwoStep' | i18n }}"
+                aria-hidden="true"
+              ></i>
               <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="showEnrolledStatus(u)">
               <i
-                class="fa fa-key"
+                class="bwi bwi-key"
                 title="{{ 'enrolledPasswordReset' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -171,7 +180,7 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a
@@ -181,7 +190,7 @@
                   (click)="reinvite(u)"
                   *ngIf="u.status === userStatusType.Invited"
                 >
-                  <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                   {{ "resendInvitation" | i18n }}
                 </a>
                 <a
@@ -191,7 +200,7 @@
                   (click)="confirm(u)"
                   *ngIf="u.status === userStatusType.Accepted"
                 >
-                  <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                   {{ "confirm" | i18n }}
                 </a>
                 <a
@@ -201,7 +210,7 @@
                   (click)="groups(u)"
                   *ngIf="accessGroups"
                 >
-                  <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
                   {{ "groups" | i18n }}
                 </a>
                 <a
@@ -211,7 +220,7 @@
                   (click)="events(u)"
                   *ngIf="accessEvents && u.status === userStatusType.Confirmed"
                 >
-                  <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                   {{ "eventLogs" | i18n }}
                 </a>
                 <a
@@ -221,11 +230,11 @@
                   (click)="resetPassword(u)"
                   *ngIf="allowResetPassword(u)"
                 >
-                  <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
                   {{ "resetPassword" | i18n }}
                 </a>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>

src/app/organizations/manage/policies.component.html

@@ -2,7 +2,11 @@
   <h1>{{ "policies" | i18n }}</h1>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <table class="table table-hover table-list" *ngIf="!loading">

src/app/organizations/manage/policy-edit.component.html

@@ -24,7 +24,7 @@
       <div class="modal-body">
         <div class="modal-body" *ngIf="loading">
           <i
-            class="fa fa-spinner fa-spin text-muted"
+            class="bwi bwi-spinner bwi-spin text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -37,7 +37,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/reset-password.component.html

@@ -33,12 +33,12 @@
               <div class="ml-auto d-flex">
                 <a
                   href="#"
-                  class="d-block mr-2 fa-icon-above-input"
+                  class="d-block mr-2 bwi-icon-above-input"
                   appStopClick
                   appA11yTitle="{{ 'generatePassword' | i18n }}"
                   (click)="generatePassword()"
                 >
-                  <i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
+                  <i class="bwi bwi-lg bwi-fw bwi-refresh" aria-hidden="true"></i>
                 </a>
               </div>
             </div>
@@ -63,9 +63,9 @@
                   (click)="togglePassword()"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <button
@@ -74,7 +74,7 @@
                   appA11yTitle="{{ 'copyPassword' | i18n }}"
                   (click)="copy(newPassword)"
                 >
-                  <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
@@ -85,7 +85,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/user-add-edit.component.html

@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -52,9 +52,9 @@
             target="_blank"
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/article/user-types-access-control/#user-types"
+            href="https://bitwarden.com/help/provider-users/"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </h3>
         <div class="form-check mt-2 form-check-block">
@@ -277,9 +277,9 @@
               target="_blank"
               rel="noopener"
               appA11yTitle="{{ 'learnMore' | i18n }}"
-              href="https://bitwarden.com/help/article/user-types-access-control/#access-control"
+              href="https://bitwarden.com/help/user-types-access-control/#access-control"
             >
-              <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </div>
           <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
@@ -371,7 +371,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -389,12 +389,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"

src/app/organizations/manage/user-confirm.component.html

@@ -18,11 +18,7 @@
       <div class="modal-body">
         <p>
           {{ "fingerprintEnsureIntegrityVerify" | i18n }}
-          <a
+          <a href="https://bitwarden.com/help/fingerprint-phrase/" target="_blank" rel="noopener">
-            href="https://help.bitwarden.com/article/fingerprint-phrase/"
-            target="_blank"
-            rel="noopener"
-          >
             {{ "learnMore" | i18n }}</a
           >
         </p>
@@ -44,7 +40,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "confirm" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/manage/user-groups.component.html

@@ -17,7 +17,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -48,7 +48,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

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

@@ -2,7 +2,11 @@
   <h1>{{ "myOrganization" | i18n }}</h1>
 </div>
 <div *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -63,7 +67,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
@@ -89,7 +93,11 @@
 </div>
 <p>{{ "taxInformationDesc" | i18n }}</p>
 <div *ngIf="!org || loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -101,7 +109,7 @@
 >
   <app-tax-info></app-tax-info>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>

src/app/organizations/settings/adjust-subscription.component.html

@@ -57,7 +57,7 @@
       </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "save" | i18n }}</span>
     </button>
   </div>

src/app/organizations/settings/delete-organization.component.html

@@ -26,7 +26,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "deleteOrganization" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">

src/app/organizations/settings/download-license.component.html

@@ -13,9 +13,9 @@
             target="_blank"
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing"
+            href="https://bitwarden.com/help/licensing-on-premise/#organization-account-sharing"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <input
@@ -29,7 +29,7 @@
       </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">

src/app/organizations/settings/organization-subscription.component.html

@@ -3,7 +3,7 @@
     {{ "subscription" | i18n }}
     <small *ngIf="firstLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -12,7 +12,7 @@
   </h1>
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}"></i>
+  <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -38,7 +38,7 @@
       [appApiAction]="reinstatePromise"
       [disabled]="reinstateBtn.loading"
     >
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "reinstateSubscription" | i18n }}</span>
     </button>
   </app-callout>
@@ -138,7 +138,7 @@
       [disabled]="removeSponsorshipBtn.loading"
       *ngIf="isSponsoredSubscription"
     >
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "removeSponsorship" | i18n }}</span>
     </button>
     <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
@@ -204,7 +204,7 @@
         [disabled]="cancelBtn.loading"
         *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
       >
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "cancelSubscription" | i18n }}</span>
       </button>
     </div>
@@ -224,7 +224,7 @@
       <dd *ngIf="sub.expiration">
         {{ sub.expiration | date: "mediumDate" }}
         <span *ngIf="isExpired" class="text-danger ml-2">
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+          <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
           {{ "licenseIsExpired" | i18n }}
         </span>
       </dd>

src/app/organizations/sponsorships/families-for-enterprise-setup.component.html

@@ -4,7 +4,7 @@
   </div>
   <div *ngIf="loading" class="mt-5 d-flex justify-content-center">
     <i
-      class="fa fa-spinner fa-spin fa-2x text-muted"
+      class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -42,7 +42,7 @@
     </div>
     <div class="form-group col-6" *ngIf="!showNewOrganization">
       <button class="btn btn-primary mt-2 btn-submit" [disabled]="form.loading" type="submit">
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "acceptOffer" | i18n }}</span>
       </button>
     </div>

src/app/organizations/tools/tools.component.html

@@ -1,7 +1,7 @@
 <div class="container page-content">
   <ng-container *ngIf="loading">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>

src/app/organizations/vault/vault.component.html

@@ -20,7 +20,7 @@
           <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
-                class="fa fa-spinner fa-spin text-muted"
+                class="bwi bwi-spinner bwi-spin text-muted"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -41,11 +41,11 @@
             (click)="addCipher()"
             *ngIf="!deleted"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
           </button>
         </div>
       </div>
-      <app-callout type="warning" *ngIf="deleted" icon="fa-warning">
+      <app-callout type="warning" *ngIf="deleted" icon="bwi bwi-exclamation-triangle">
         {{ trashCleanupWarning }}
       </app-callout>
       <app-org-vault-ciphers

src/app/providers/providers.component.html

@@ -1,16 +1,16 @@
 <ng-container *ngIf="vault">
   <p *ngIf="!loaded" class="text-muted">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </p>
   <ng-container *ngIf="loaded">
-    <ul class="fa-ul card-ul carets" *ngIf="providers && providers.length">
+    <ul class="bwi-ul card-ul carets" *ngIf="providers && providers.length">
       <li *ngFor="let p of providers">
         <a [routerLink]="['/providers', p.id]" class="text-body">
-          <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{ p.name }}
+          <i class="bwi bwi-li bwi-caret-right" aria-hidden="true"></i> {{ p.name }}
           <ng-container *ngIf="!p.enabled">
             <i
-              class="fa fa-exclamation-triangle text-danger"
+              class="bwi bwi-exclamation-triangle text-danger"
               title="{{ 'providerIsDisabled' | i18n }}"
               aria-hidden="true"
             ></i>
@@ -28,7 +28,7 @@
       <h1>{{ "providers" | i18n }}</h1>
     </div>
     <p *ngIf="!loaded" class="text-muted">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </p>
     <ng-container *ngIf="loaded">
@@ -42,7 +42,7 @@
               <a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>
               <ng-container *ngIf="!p.enabled">
                 <i
-                  class="fa fa-exclamation-triangle text-danger"
+                  class="bwi bwi-exclamation-triangle text-danger"
                   title="{{ 'providerIsDisabled' | i18n }}"
                   aria-hidden="true"
                 ></i>

src/app/send/access.component.html

@@ -9,7 +9,7 @@
     <div class="col-8" *ngIf="hideEmail">
       <app-callout type="warning" title="{{ 'warning' | i18n }}">
         {{ "viewSendHiddenEmailWarning" | i18n }}
-        <a href="https://bitwarden.com/help/article/receive-send/" target="_blank">{{
+        <a href="https://bitwarden.com/help/receive-send/" target="_blank">{{
           "learnMore" | i18n
         }}</a
         >.
@@ -21,7 +21,7 @@
       <div class="card d-block">
         <div class="card-body" *ngIf="loading" class="text-center">
           <i
-            class="fa fa-spinner fa-spin fa-2x text-muted"
+            class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -50,10 +50,10 @@
               [disabled]="form.loading"
             >
               <span>
-                <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
               </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -93,14 +93,14 @@
               *ngIf="send.text.hidden"
             >
               <i
-                class="fa fa-lg"
+                class="bwi bwi-lg"
                 aria-hidden="true"
-                [ngClass]="{ 'fa-eye': !showText, 'fa-eye-slash': showText }"
+                [ngClass]="{ 'bwi-eye': !showText, 'bwi-eye-slash': showText }"
               ></i>
               {{ "toggleVisibility" | i18n }}
             </button>
             <button class="btn btn-block btn-link" type="button" (click)="copyText()">
-              <i class="fa fa-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
+              <i class="bwi bwi-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
             </button>
           </ng-container>
           <!-- File -->
@@ -112,7 +112,7 @@
               (click)="download()"
               *ngIf="!downloading"
             >
-              <i class="fa fa-download" aria-hidden="true"></i>
+              <i class="bwi bwi-download" aria-hidden="true"></i>
               {{ "downloadFile" | i18n }} ({{ send.file.sizeName }})
             </button>
             <button
@@ -122,7 +122,7 @@
               disabled="true"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>

src/app/send/add-edit.component.html

@@ -151,9 +151,9 @@
           <h3 class="mb-0 mr-2">{{ "options" | i18n }}</h3>
           <a class="mb-1" href="#" appStopClick role="button">
             <i
-              class="fa"
+              class="bwi"
               aria-hidden="true"
-              [ngClass]="{ 'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions }"
+              [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
             ></i>
           </a>
         </div>
@@ -213,9 +213,9 @@
                     (click)="togglePasswordVisible()"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                      [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                     ></i>
                   </button>
                 </div>
@@ -272,7 +272,7 @@
           [ngClass]="{ loading: form.loading }"
           [disabled]="form.loading || disableSend"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -290,12 +290,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"

src/app/send/send.component.html

@@ -19,23 +19,23 @@
             autocomplete="off"
             appAutofocus
           />
-          <ul class="fa-ul card-ul">
+          <ul class="bwi-ul card-ul">
             <li [ngClass]="{ active: selectedAll }">
               <a href="#" appStopClick (click)="selectAll()">
-                <i class="fa-li fa fa-fw fa-th"></i>{{ "allSends" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-filter"></i>{{ "allSends" | i18n }}
               </a>
             </li>
           </ul>
           <h3>{{ "types" | i18n }}</h3>
-          <ul class="fa-ul card-ul">
+          <ul class="bwi-ul card-ul">
             <li [ngClass]="{ active: selectedType === sendType.Text }">
               <a href="#" appStopClick (click)="selectType(sendType.Text)">
-                <i class="fa-li fa fa-fw fa-file-text-o"></i>{{ "sendTypeText" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-file-text"></i>{{ "sendTypeText" | i18n }}
               </a>
             </li>
             <li [ngClass]="{ active: selectedType === sendType.File }">
               <a href="#" appStopClick (click)="selectType(sendType.File)">
-                <i class="fa-li fa fa-fw fa-file-o"></i>{{ "sendTypeFile" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-file"></i>{{ "sendTypeFile" | i18n }}
               </a>
             </li>
           </ul>
@@ -49,7 +49,7 @@
           <small #actionSpinner [appApiAction]="actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
-                class="fa fa-spinner fa-spin text-muted"
+                class="bwi bwi-spinner bwi-spin text-muted"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -64,7 +64,7 @@
             (click)="addSend()"
             [disabled]="disableSend"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{ "createSend" | i18n }}
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "createSend" | i18n }}
           </button>
         </div>
       </div>
@@ -74,15 +74,15 @@
           <tr *ngFor="let s of filteredSends">
             <td class="table-list-icon">
               <div class="icon" aria-hidden="true">
-                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type == sendType.File"></i>
-                <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type == sendType.Text"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type == sendType.Text"></i>
               </div>
             </td>
             <td class="reduced-lh wrap">
               <a href="#" appStopClick appStopProp (click)="editSend(s)">{{ s.name }}</a>
               <ng-container *ngIf="s.disabled">
                 <i
-                  class="fa fa-warning"
+                  class="bwi bwi-exclamation-triangle"
                   appStopProp
                   title="{{ 'disabled' | i18n }}"
                   aria-hidden="true"
@@ -91,7 +91,7 @@
               </ng-container>
               <ng-container *ngIf="s.password">
                 <i
-                  class="fa fa-key"
+                  class="bwi bwi-key"
                   appStopProp
                   title="{{ 'password' | i18n }}"
                   aria-hidden="true"
@@ -100,7 +100,7 @@
               </ng-container>
               <ng-container *ngIf="s.maxAccessCountReached">
                 <i
-                  class="fa fa-ban"
+                  class="bwi bwi-ban"
                   appStopProp
                   title="{{ 'maxAccessCountReached' | i18n }}"
                   aria-hidden="true"
@@ -109,7 +109,7 @@
               </ng-container>
               <ng-container *ngIf="s.expired">
                 <i
-                  class="fa fa-clock-o"
+                  class="bwi bwi-clock"
                   appStopProp
                   title="{{ 'expired' | i18n }}"
                   aria-hidden="true"
@@ -118,7 +118,7 @@
               </ng-container>
               <ng-container *ngIf="s.pendingDelete">
                 <i
-                  class="fa fa-trash"
+                  class="bwi bwi-trash"
                   appStopProp
                   title="{{ 'pendingDeletion' | i18n }}"
                   aria-hidden="true"
@@ -139,11 +139,11 @@
                   aria-expanded="false"
                   appA11yTitle="{{ 'options' | i18n }}"
                 >
-                  <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                  <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                   <a class="dropdown-item" href="#" appStopClick (click)="copy(s)">
-                    <i class="fa fa-fw fa-copy" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                     {{ "copySendLink" | i18n }}
                   </a>
                   <a
@@ -153,11 +153,11 @@
                     (click)="removePassword(s)"
                     *ngIf="s.password && !disableSend"
                   >
-                    <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                     {{ "removePassword" | i18n }}
                   </a>
                   <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(s)">
-                    <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                     {{ "delete" | i18n }}
                   </a>
                 </div>
@@ -169,7 +169,7 @@
       <div class="no-items" *ngIf="filteredSends && !filteredSends.length">
         <ng-container *ngIf="!loaded">
           <i
-            class="fa fa-spinner fa-spin text-muted"
+            class="bwi bwi-spinner bwi-spin text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -178,7 +178,7 @@
         <ng-container *ngIf="loaded">
           <p>{{ "noSendsInList" | i18n }}</p>
           <button (click)="addSend()" class="btn btn-outline-primary" [disabled]="disableSend">
-            <i class="fa fa-plus fa-fw"></i>{{ "createSend" | i18n }}
+            <i class="bwi bwi-plus bwi-fw"></i>{{ "createSend" | i18n }}
           </button>
         </ng-container>
       </div>

src/app/services/event.service.ts

@@ -382,47 +382,50 @@ export class EventService {
   private getAppInfo(deviceType: DeviceType): [string, string] {
     switch (deviceType) {
       case DeviceType.Android:
-        return ["fa-android", this.i18nService.t("mobile") + " - Android"];
+        return ["bwi-android", this.i18nService.t("mobile") + " - Android"];
       case DeviceType.iOS:
-        return ["fa-apple", this.i18nService.t("mobile") + " - iOS"];
+        return ["bwi-apple", this.i18nService.t("mobile") + " - iOS"];
       case DeviceType.UWP:
-        return ["fa-windows", this.i18nService.t("mobile") + " - Windows"];
+        return ["bwi-windows", this.i18nService.t("mobile") + " - Windows"];
       case DeviceType.ChromeExtension:
-        return ["fa-chrome", this.i18nService.t("extension") + " - Chrome"];
+        return ["bwi-chrome", this.i18nService.t("extension") + " - Chrome"];
       case DeviceType.FirefoxExtension:
-        return ["fa-firefox", this.i18nService.t("extension") + " - Firefox"];
+        return ["bwi-firefox", this.i18nService.t("extension") + " - Firefox"];
       case DeviceType.OperaExtension:
-        return ["fa-opera", this.i18nService.t("extension") + " - Opera"];
+        return ["bwi-opera", this.i18nService.t("extension") + " - Opera"];
       case DeviceType.EdgeExtension:
-        return ["fa-edge", this.i18nService.t("extension") + " - Edge"];
+        return ["bwi-edge", this.i18nService.t("extension") + " - Edge"];
       case DeviceType.VivaldiExtension:
-        return ["fa-puzzle-piece", this.i18nService.t("extension") + " - Vivaldi"];
+        return ["bwi-puzzle", this.i18nService.t("extension") + " - Vivaldi"];
       case DeviceType.SafariExtension:
-        return ["fa-safari", this.i18nService.t("extension") + " - Safari"];
+        return ["bwi-safari", this.i18nService.t("extension") + " - Safari"];
       case DeviceType.WindowsDesktop:
-        return ["fa-windows", this.i18nService.t("desktop") + " - Windows"];
+        return ["bwi-windows", this.i18nService.t("desktop") + " - Windows"];
       case DeviceType.MacOsDesktop:
-        return ["fa-apple", this.i18nService.t("desktop") + " - macOS"];
+        return ["bwi-apple", this.i18nService.t("desktop") + " - macOS"];
       case DeviceType.LinuxDesktop:
-        return ["fa-linux", this.i18nService.t("desktop") + " - Linux"];
+        return ["bwi-linux", this.i18nService.t("desktop") + " - Linux"];
       case DeviceType.ChromeBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Chrome"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Chrome"];
       case DeviceType.FirefoxBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Firefox"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Firefox"];
       case DeviceType.OperaBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Opera"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Opera"];
       case DeviceType.SafariBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Safari"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Safari"];
       case DeviceType.VivaldiBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Vivaldi"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Vivaldi"];
       case DeviceType.EdgeBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Edge"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Edge"];
       case DeviceType.IEBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - IE"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - IE"];
       case DeviceType.UnknownBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - " + this.i18nService.t("unknown")];
+        return [
+          "bwi-globe",
+          this.i18nService.t("webVault") + " - " + this.i18nService.t("unknown"),
+        ];
       default:
-        return ["fa-globe", this.i18nService.t("unknown")];
+        return ["bwi-globe", this.i18nService.t("unknown")];
     }
   }
 

src/app/services/services.module.ts

@@ -24,6 +24,7 @@ import { ContainerService } from "jslib-common/services/container.service";
 import { CryptoService } from "jslib-common/services/crypto.service";
 import { EventService as EventLoggingService } from "jslib-common/services/event.service";
 import { ImportService } from "jslib-common/services/import.service";
+import { StateMigrationService } from "jslib-common/services/stateMigration.service";
 import { VaultTimeoutService } from "jslib-common/services/vaultTimeout.service";
 
 import { ApiService as ApiServiceAbstraction } from "jslib-common/abstractions/api.service";
@@ -52,9 +53,14 @@ import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from "jslib-com
 
 import { ThemeType } from "jslib-common/enums/themeType";
 
+import { Account } from "../../models/account";
+import { GlobalState } from "../../models/globalState";
+
+import { GlobalStateFactory } from "jslib-common/factories/globalStateFactory";
+import { StateFactory } from "jslib-common/factories/stateFactory";
+
 export function initFactory(
   window: Window,
-  storageService: StorageServiceAbstraction,
   environmentService: EnvironmentServiceAbstraction,
   notificationsService: NotificationsServiceAbstraction,
   vaultTimeoutService: VaultTimeoutService,
@@ -66,12 +72,11 @@ export function initFactory(
   cryptoService: CryptoServiceAbstraction
 ): Function {
   return async () => {
-    await (storageService as HtmlStorageService).init();
     await stateService.init();
 
     const urls = process.env.URLS as Urls;
     urls.base ??= window.location.origin;
-    environmentService.setUrls(urls, false);
+    environmentService.setUrls(urls);
 
     setTimeout(() => notificationsService.init(), 3000);
 
@@ -106,7 +111,6 @@ export function initFactory(
       useFactory: initFactory,
       deps: [
         "WINDOW",
-        StorageServiceAbstraction,
         EnvironmentServiceAbstraction,
         NotificationsServiceAbstraction,
         VaultTimeoutServiceAbstraction,
@@ -176,9 +180,34 @@ export function initFactory(
         StateServiceAbstraction,
       ],
     },
+    {
+      provide: StateMigrationServiceAbstraction,
+      useFactory: (
+        storageService: StorageServiceAbstraction,
+        secureStorageService: StorageServiceAbstraction
+      ) =>
+        new StateMigrationService(
+          storageService,
+          secureStorageService,
+          new GlobalStateFactory(GlobalState)
+        ),
+      deps: [StorageServiceAbstraction, "SECURE_STORAGE"],
+    },
     {
       provide: StateServiceAbstraction,
-      useClass: StateService,
+      useFactory: (
+        storageService: StorageServiceAbstraction,
+        secureStorageService: StorageServiceAbstraction,
+        logService: LogService,
+        stateMigrationService: StateMigrationServiceAbstraction
+      ) =>
+        new StateService(
+          storageService,
+          secureStorageService,
+          logService,
+          stateMigrationService,
+          new StateFactory(GlobalState, Account)
+        ),
       deps: [
         StorageServiceAbstraction,
         "SECURE_STORAGE",

src/app/settings/add-credit.component.html

@@ -15,7 +15,7 @@
           [(ngModel)]="method"
         />
         <label class="form-check-label" for="credit-method-paypal">
-          <i class="fa fa-fw fa-paypal" aria-hidden="true"></i> PayPal</label
+          <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</label
         >
       </div>
       <div class="form-check form-check-inline">
@@ -28,7 +28,7 @@
           [(ngModel)]="method"
         />
         <label class="form-check-label" for="credit-method-bitcoin">
-          <i class="fa fa-fw fa-bitcoin" aria-hidden="true"></i> Bitcoin</label
+          <i class="bwi bwi-fw bwi-bitcoin" aria-hidden="true"></i> Bitcoin</label
         >
       </div>
     </div>
@@ -53,7 +53,7 @@
       <small class="form-text text-muted">{{ "creditDelayed" | i18n }}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading || ppLoading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">