Reapply changes to refactored templates

Initial commit for responsive and dark mode updates
Further work maybe required on resolved merge conflicts

.github/workflows/build.yml

@@ -182,7 +182,7 @@ jobs:
           echo "GitHub event: $GITHUB_EVENT"
 
       - name: Setup DCT
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         id: setup-dct
         uses: bitwarden/gh-actions/setup-docker-trust@a8c384a05a974c05c48374c818b004be221d43ff
         with:
@@ -228,37 +228,26 @@ jobs:
         if: github.ref == 'refs/heads/master'
         run: docker tag bitwarden/web bitwarden/web:dev
 
-      - name: Tag release branch
-        if: github.ref == 'refs/heads/release'
-        run: docker tag bitwarden/web bitwarden/web:latest
-
       - name: List Docker images
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         run: docker images
 
-      - name: Push rc image
+      - name: Push rc images
         if: github.ref == 'refs/heads/rc'
         run: docker push bitwarden/web:rc
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
-      - name: Push dev image
+      - name: Push dev images
         if: github.ref == 'refs/heads/master'
         run: docker push bitwarden/web:dev
         env:
           DOCKER_CONTENT_TRUST: 1
           DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
 
-      - name: Push latest image
-        if: github.ref == 'refs/heads/release'
-        run: docker push bitwarden/web:latest
-        env:
-          DOCKER_CONTENT_TRUST: 1
-          DOCKER_CONTENT_TRUST_REPOSITORY_PASSPHRASE: ${{ steps.setup-dct.outputs.dct-delegate-repo-passphrase }}
-
       - name: Log out of Docker
-        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/release'
+        if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/rc'
         run: docker logout
 
 
@@ -414,3 +403,66 @@ jobs:
 
       - name: NPM build
         run: npm run build:bit:cloud
+
+
+  check-failures:
+    name: Check for failures
+    if: always()
+    runs-on: ubuntu-20.04
+    needs:
+      - cloc
+      - setup
+      - build-oss-selfhost
+      - build-cloud
+      - build-commercial-selfhost
+      - build-qa
+      - windows
+    steps:
+      - name: Check if any job failed
+        if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
+        env:
+          CLOC_STATUS: ${{ needs.cloc.result }}
+          SETUP_STATUS: ${{ needs.setup.result }}
+          BUILD_OSS_SELFHOST_STATUS: ${{ needs.build-oss-selfhost.result }}
+          BUILD_CLOUD_STATUS: ${{ needs.build-cloud.result }}
+          BUILD_COMMERCIAL_SELFHOST_STATUS: ${{ needs.build-commercial-selfhost.result }}
+          BUILD_QA: ${{ needs.build-qa.result }}
+          WINDOWS: ${{ needs.windows.result }}
+        run: |
+          if [ "$CLOC_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$SETUP_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_OSS_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_CLOUD_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_COMMERCIAL_SELFHOST_STATUS" = "failure" ]; then
+              exit 1
+          elif [ "$BUILD_QA" = "failure" ]; then
+              exit 1
+          elif [ "$WINDOWS" = "failure" ]; then
+              exit 1
+          fi
+
+      - name: Login to Azure - Prod Subscription
+        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
+        if: failure()
+        with:
+          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
+
+      - name: Retrieve secrets
+        id: retrieve-secrets
+        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
+        if: failure()
+        with:
+          keyvault: "bitwarden-prod-kv"
+          secrets: "devops-alerts-slack-webhook-url"
+
+      - name: Notify Slack on failure
+        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522  # v1.2.2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}
+        with:
+          status: ${{ job.status }}

.github/workflows/release.yml

@@ -15,9 +15,9 @@ jobs:
     steps:
       - name: Branch check
         run: |
-          if [[ "$GITHUB_REF" != "refs/heads/release" ]]; then
+          if [[ "$GITHUB_REF" != "refs/heads/rc" ]]; then
             echo "==================================="
-            echo "[!] Can only release from the 'release' branch"
+            echo "[!] Can only release from rc branch"
             echo "==================================="
             exit 1
           fi
@@ -43,7 +43,7 @@ jobs:
 
 
   self-host:
-    name: Release self-host docker
+    name: Build self-host docker
     runs-on: ubuntu-20.04
     needs: setup
     env:
@@ -66,18 +66,20 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
 
-      - name: Pull latest selfhost Release image
-        run: docker pull bitwarden/web:latest
+      - name: Pull latest selfhost rc image
+        run: docker pull bitwarden/web:rc
 
       - name: Tag version
         run: |
-          docker tag bitwarden/web:latest bitwarden/web:$_RELEASE_VERSION
+          docker tag bitwarden/web:rc bitwarden/web:latest
+          docker tag bitwarden/web:rc bitwarden/web:$_RELEASE_VERSION
 
       - name: List Docker images
         run: docker images
 
       - name: Push images
         run: |
+          docker push bitwarden/web:latest
           docker push bitwarden/web:$_RELEASE_VERSION
         env:
           DOCKER_CONTENT_TRUST: 1
@@ -106,11 +108,7 @@ jobs:
         run: |
           git switch -c deploy-$_TAG_VERSION
           git push -u origin deploy-$_TAG_VERSION
-
-      - name: Checkout Repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f  # v2.3.4
-        with:
-          ref: release
+          git switch rc
 
       - name: Setup git config
         run: |
@@ -124,7 +122,7 @@ jobs:
         with:
           workflow: build.yml
           workflow_conclusion: success
-          branch: release
+          branch: rc
           artifacts: web-*-cloud-COMMERCIAL.zip
 
       # This should result in a build directory in the current working directory
@@ -165,7 +163,7 @@ jobs:
         with:
           workflow: build.yml
           workflow_conclusion: success
-          branch: release
+          branch: rc
           artifacts: "web-*-selfhosted-COMMERCIAL.zip,
                       web-*-selfhosted-open-source.zip"
 
@@ -184,4 +182,3 @@ jobs:
           artifacts: "web-${{ needs.setup.outputs.release_version }}-selfhosted-COMMERCIAL.zip,
                       web-${{ needs.setup.outputs.release_version }}-selfhosted-open-source.zip"
           token: ${{ secrets.GITHUB_TOKEN }}
-          draft: true

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

@@ -7,6 +7,8 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
@@ -66,11 +68,8 @@ export class ClientsComponent implements OnInit {
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

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

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-3">
             <div class="card" *ngIf="provider">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -15,7 +15,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

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

@@ -7,6 +7,8 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
@@ -81,7 +83,7 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -89,9 +91,6 @@ export class PeopleComponent extends BasePeopleComponent<ProviderUserUserDetails
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

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

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { ProviderUserInviteRequest } from 'jslib-common/models/request/provider/providerUserInviteRequest';
@@ -43,7 +44,8 @@ export class UserAddEditComponent implements OnInit {
     userType = ProviderUserType;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService) { }
+        private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.providerUserId != null;
@@ -54,7 +56,9 @@ export class UserAddEditComponent implements OnInit {
             try {
                 const user = await this.apiService.getProviderUser(this.providerId, this.providerUserId);
                 this.type = user.type;
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('inviteUser');
         }
@@ -78,7 +82,9 @@ export class UserAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
             this.onSavedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -98,7 +104,9 @@ export class UserAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.name));
             this.onDeletedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
 }

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

@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="provider && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="provider.name"
@@ -19,7 +19,7 @@
                     [(ngModel)]="provider.billingEmail" [disabled]="selfHosted">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{provider.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>

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

@@ -8,11 +8,11 @@
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="loading">
         <h2 class="mt-5">{{'generalInformation' | i18n}}</h2>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="name">{{'providerName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="name" required>
             </div>
-            <div class="form-group col-6">
+            <div class="form-group col-md-6 mt-4 mt-md-0">
                 <label for="billingEmail">{{'billingEmail' | i18n}}</label>
                 <input id="billingEmail" class="form-control" type="text" name="BillingEmail" [(ngModel)]="billingEmail" required>
             </div>

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

@@ -11,6 +11,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 
@@ -41,12 +43,7 @@ export class SetupComponent implements OnInit {
 
     ngOnInit() {
         document.body.classList.remove('layout_frontend');
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             const error = qParams.providerId == null || qParams.email == null || qParams.token == null;
 
             if (error) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bitwarden-web",
-  "version": "2.24.4",
+  "version": "2.23.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "bitwarden-web",
-      "version": "2.24.4",
+      "version": "2.23.0",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitwarden-web",
-  "version": "2.24.4",
+  "version": "2.23.0",
   "license": "GPL-3.0",
   "repository": "https://github.com/bitwarden/web",
   "scripts": {

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

@@ -12,6 +12,7 @@ import {
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -36,7 +37,7 @@ export class AcceptOrganizationComponent extends BaseAcceptComponent {
         i18nService: I18nService, route: ActivatedRoute,
         private apiService: ApiService, userService: UserService,
         stateService: StateService, private cryptoService: CryptoService,
-        private policyService: PolicyService) {
+        private policyService: PolicyService, private logService: LogService) {
         super(router, toasterService, i18nService, route, userService, stateService);
     }
 
@@ -101,7 +102,9 @@ export class AcceptOrganizationComponent extends BaseAcceptComponent {
             const policies = await this.apiService.getPoliciesByToken(qParams.organizationId, qParams.token,
                 qParams.email, qParams.organizationUserId);
             policyList = this.policyService.mapPoliciesFromToken(policies);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
 
         if (policyList != null) {
             const result = this.policyService.getResetPasswordPolicyOptions(policyList, qParams.organizationId);

src/app/accounts/hint.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hint.component';
@@ -13,7 +14,8 @@ import { HintComponent as BaseHintComponent } from 'jslib-angular/components/hin
 })
 export class HintComponent extends BaseHintComponent {
     constructor(router: Router, i18nService: I18nService,
-        apiService: ApiService, platformUtilsService: PlatformUtilsService) {
-        super(router, i18nService, apiService, platformUtilsService);
+        apiService: ApiService, platformUtilsService: PlatformUtilsService,
+        logService: LogService) {
+        super(router, i18nService, apiService, platformUtilsService, logService);
     }
 }

src/app/accounts/lock.component.html

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <p class="text-center mb-4">
                 <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
             </p>

src/app/accounts/lock.component.ts

@@ -5,6 +5,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -26,9 +27,9 @@ export class LockComponent extends BaseLockComponent {
         userService: UserService, cryptoService: CryptoService,
         storageService: StorageService, vaultTimeoutService: VaultTimeoutService,
         environmentService: EnvironmentService, private routerService: RouterService,
-        stateService: StateService, apiService: ApiService) {
+        stateService: StateService, apiService: ApiService, logService: LogService) {
         super(router, i18nService, platformUtilsService, messagingService, userService, cryptoService,
-            storageService, vaultTimeoutService, environmentService, stateService, apiService);
+            storageService, vaultTimeoutService, environmentService, stateService, apiService, logService);
     }
 
     async ngOnInit() {

src/app/accounts/login.component.html

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
-    <div class="row justify-content-md-center mt-5">
-        <div class="col-5">
+    <div class="row justify-content-center mt-5">
+        <div class="col-10 col-md-5">
             <img class="mb-2 logo logo-themed" alt="Bitwarden">
             <p class="lead text-center mx-4 mb-4">{{'loginOrCreateNewAccount' | i18n}}</p>
             <div class="card d-block">

src/app/accounts/login.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
@@ -32,17 +35,17 @@ export class LoginComponent extends BaseLoginComponent {
         storageService: StorageService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
         passwordGenerationService: PasswordGenerationService, cryptoFunctionService: CryptoFunctionService,
-        private apiService: ApiService, private policyService: PolicyService) {
+        private apiService: ApiService, private policyService: PolicyService, logService: LogService) {
         super(authService, router,
             platformUtilsService, i18nService,
             stateService, environmentService,
             passwordGenerationService, cryptoFunctionService,
-            storageService);
+            storageService, logService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
             }
@@ -53,9 +56,6 @@ export class LoginComponent extends BaseLoginComponent {
                     { route: '/settings/create-organization', qParams: { plan: qParams.org } });
             }
             await super.ngOnInit();
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
 
         const invite = await this.stateService.get<any>('orgInvitation');
@@ -65,7 +65,9 @@ export class LoginComponent extends BaseLoginComponent {
                 const policies = await this.apiService.getPoliciesByToken(invite.organizationId, invite.token,
                     invite.email, invite.organizationUserId);
                 policyList = this.policyService.mapPoliciesFromToken(policies);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
 
             if (policyList != null) {
                 const result = this.policyService.getResetPasswordPolicyOptions(policyList, invite.organizationId);

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

@@ -5,6 +5,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { DeleteRecoverRequest } from 'jslib-common/models/request/deleteRecoverRequest';
 
@@ -17,7 +18,8 @@ export class RecoverDeleteComponent {
     formPromise: Promise<any>;
 
     constructor(private router: Router, private apiService: ApiService,
-        private toasterService: ToasterService, private i18nService: I18nService) {
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private logService: LogService) {
     }
 
     async submit() {
@@ -28,6 +30,8 @@ export class RecoverDeleteComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deleteRecoverEmailSent'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -7,6 +7,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { TwoFactorRecoveryRequest } from 'jslib-common/models/request/twoFactorRecoveryRequest';
 
@@ -22,7 +23,8 @@ export class RecoverTwoFactorComponent {
 
     constructor(private router: Router, private apiService: ApiService,
         private toasterService: ToasterService, private i18nService: I18nService,
-        private cryptoService: CryptoService, private authService: AuthService) { }
+        private cryptoService: CryptoService, private authService: AuthService,
+        private logService: LogService) { }
 
     async submit() {
         try {
@@ -35,6 +37,8 @@ export class RecoverTwoFactorComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('twoStepRecoverDisabled'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/accounts/register.component.html

@@ -2,7 +2,7 @@
     <header class="header" *ngIf="layout === 'enterprise2'">
         <div class="container">
             <div class="row">
-                <div class="col-7">
+                <div class="col-md-7">
                     <img alt="Bitwarden" class="logo mb-2" src="../../images/register-layout/logo-horizontal-white.png">
                 </div>
             </div>
@@ -10,7 +10,7 @@
     </header>
     <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
         <div class="row">
-            <div class="col-7" *ngIf="layout">
+            <div class="col-md-7" *ngIf="layout">
                 <div class="mt-5">
                     <div *ngIf="layout === 'enterprise2'">
                         <h2>Companies globally trust Bitwarden for password management.</h2>
@@ -38,9 +38,9 @@
                     </div>
                 </div>
             </div>
-            <div [ngClass]="{'col-5': layout, 'col-12': !layout}">
+            <div [ngClass]="{'col-md-6': layout, 'col-12': !layout}">
                 <div class="row justify-content-md-center mt-5">
-                    <div [ngClass]="{'col-5': !layout, 'col-12': layout}">
+                    <div [ngClass]="{'col-md-6': !layout, 'col-12': layout}">
                         <p class="lead text-center mb-4" *ngIf="!layout">{{'createAccount' | i18n}}</p>
                         <div class="card d-block">
                             <div class="card-body">

src/app/accounts/register.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
@@ -38,13 +41,13 @@ export class RegisterComponent extends BaseRegisterComponent {
         apiService: ApiService, private route: ActivatedRoute,
         stateService: StateService, platformUtilsService: PlatformUtilsService,
         passwordGenerationService: PasswordGenerationService, private policyService: PolicyService,
-        environmentService: EnvironmentService) {
+        environmentService: EnvironmentService, logService: LogService) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
-            passwordGenerationService, environmentService);
+            passwordGenerationService, environmentService, logService);
     }
 
     async ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(qParams => {
+        this.route.queryParams.pipe(first()).subscribe(qParams => {
             this.referenceData = new ReferenceEventRequest();
             if (qParams.email != null && qParams.email.indexOf('@') > -1) {
                 this.email = qParams.email;
@@ -68,9 +71,6 @@ export class RegisterComponent extends BaseRegisterComponent {
             if (this.referenceData.id === '') {
                 this.referenceData.id = null;
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
         const invite = await this.stateService.get<any>('orgInvitation');
         if (invite != null) {
@@ -81,7 +81,9 @@ export class RegisterComponent extends BaseRegisterComponent {
                     const policiesData = policies.data.map(p => new PolicyData(p));
                     this.policies = policiesData.map(p => new Policy(p));
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         }
 
         if (this.policies != null) {

src/app/accounts/sso.component.ts

@@ -4,11 +4,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { AuthService } from 'jslib-common/abstractions/auth.service';
 import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
@@ -28,16 +31,16 @@ export class SsoComponent extends BaseSsoComponent {
         storageService: StorageService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, apiService: ApiService,
         cryptoFunctionService: CryptoFunctionService, environmentService: EnvironmentService,
-        passwordGenerationService: PasswordGenerationService) {
+        passwordGenerationService: PasswordGenerationService, logService: LogService) {
         super(authService, router, i18nService, route, storageService, stateService, platformUtilsService,
-            apiService, cryptoFunctionService, environmentService, passwordGenerationService);
+            apiService, cryptoFunctionService, environmentService, passwordGenerationService, logService);
         this.redirectUri = window.location.origin + '/sso-connector.html';
         this.clientId = 'web';
     }
 
     async ngOnInit() {
         super.ngOnInit();
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.identifier != null) {
                 this.identifier = qParams.identifier;
             } else {
@@ -46,9 +49,6 @@ export class SsoComponent extends BaseSsoComponent {
                     this.identifier = storedIdentifier;
                 }
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }
 

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

@@ -1,7 +1,7 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-5"
-            [ngClass]="{'col-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
+        <div class="col-md-5"
+            [ngClass]="{'col-md-9': selectedProviderType === providerType.Duo || selectedProviderType === providerType.OrganizationDuo}">
             <p class="lead text-center mb-4">{{title}}</p>
             <div class="card d-block">
                 <div class="card-body">

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

@@ -23,6 +23,7 @@ import { TwoFactorProviderType } from 'jslib-common/enums/twoFactorProviderType'
 
 import { TwoFactorComponent as BaseTwoFactorComponent } from 'jslib-angular/components/two-factor.component';
 
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { TwoFactorOptionsComponent } from './two-factor-options.component';
 
 @Component({
@@ -36,9 +37,9 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
         i18nService: I18nService, apiService: ApiService,
         platformUtilsService: PlatformUtilsService, stateService: StateService,
         environmentService: EnvironmentService, private modalService: ModalService,
-        storageService: StorageService, route: ActivatedRoute) {
+        storageService: StorageService, route: ActivatedRoute, logService: LogService) {
         super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
-            stateService, storageService, route);
+            stateService, storageService, route, logService);
         this.onSuccessfulLoginNavigate = this.goAfterLogIn;
     }
 

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

@@ -1,6 +1,6 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row justify-content-md-center mt-5">
-        <div class="col-4">
+        <div class="col-md-4">
             <p class="lead text-center mb-4">{{'updateMasterPassword' | i18n}}</p>
             <div class="card d-block">
                 <div class="card-body">

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

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -22,8 +23,8 @@ export class UpdateTempPasswordComponent extends BaseUpdateTempPasswordComponent
         passwordGenerationService: PasswordGenerationService, policyService: PolicyService,
         cryptoService: CryptoService, userService: UserService,
         messagingService: MessagingService, apiService: ApiService,
-        syncService: SyncService) {
+        syncService: SyncService, logService: LogService) {
         super(i18nService, platformUtilsService, passwordGenerationService, policyService, cryptoService,
-            userService, messagingService, apiService, syncService);
+            userService, messagingService, apiService, syncService, logService);
     }
 }

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

@@ -7,10 +7,13 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailRequest';
@@ -22,15 +25,11 @@ import { VerifyEmailRequest } from 'jslib-common/models/request/verifyEmailReque
 export class VerifyEmailTokenComponent implements OnInit {
     constructor(private router: Router, private toasterService: ToasterService,
         private i18nService: I18nService, private route: ActivatedRoute,
-        private apiService: ApiService, private userService: UserService) { }
+        private apiService: ApiService, private userService: UserService,
+        private logService: LogService) { }
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.userId != null && qParams.token != null) {
                 try {
                     await this.apiService.postAccountVerifyEmailToken(
@@ -42,7 +41,9 @@ export class VerifyEmailTokenComponent implements OnInit {
                     this.toasterService.popAsync('success', null, this.i18nService.t('emailVerified'));
                     this.router.navigate(['/']);
                     return;
-                } catch { }
+                } catch (e) {
+                    this.logService.error(e);
+                }
             }
             this.toasterService.popAsync('error', null, this.i18nService.t('emailVerifiedFailed'));
             this.router.navigate(['/']);

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

@@ -7,10 +7,13 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { VerifyDeleteRecoverRequest } from 'jslib-common/models/request/verifyDeleteRecoverRequest';
 
@@ -27,16 +30,11 @@ export class VerifyRecoverDeleteComponent implements OnInit {
 
     constructor(private router: Router, private apiService: ApiService,
         private toasterService: ToasterService, private i18nService: I18nService,
-        private route: ActivatedRoute) {
+        private route: ActivatedRoute, private logService: LogService) {
     }
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.userId != null && qParams.token != null && qParams.email != null) {
                 this.userId = qParams.userId;
                 this.token = qParams.token;
@@ -55,6 +53,8 @@ export class VerifyRecoverDeleteComponent implements OnInit {
             this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
                 this.i18nService.t('accountDeletedDesc'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -12,6 +12,8 @@ import {
     ToasterService,
 } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -35,12 +37,7 @@ export abstract class BaseAcceptComponent implements OnInit {
     abstract unauthedHandler(qParams: any): Promise<void>;
 
     ngOnInit() {
-        let fired = false;
-        this.route.queryParams.subscribe(async qParams => {
-            if (fired) {
-                return;
-            }
-            fired = true;
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             await this.stateService.remove('loginRedirect');
 
             let error = this.requiredParameters.some(e => qParams?.[e] == null || qParams[e] === '');

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

@@ -94,7 +94,7 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
         protected toasterService: ToasterService, protected cryptoService: CryptoService,
         private storageService: StorageService, protected validationService: ValidationService,
         protected modalService: ModalService, private logService: LogService,
-        private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe) { }
+        private searchPipe: SearchPipe, protected userNamePipe: UserNamePipe ) { }
 
     abstract edit(user: UserType): void;
     abstract getUsers(): Promise<ListResponse<UserType>>;
@@ -256,7 +256,9 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
                             comp.formPromise = confirmUser(publicKey);
                             await comp.formPromise;
                             modal.close();
-                        } catch { }
+                        } catch (e) {
+                            this.logService.error(e);
+                        }
                     });
                 });
                 return;
@@ -265,7 +267,9 @@ export abstract class BasePeopleComponent<UserType extends ProviderUserUserDetai
             try {
                 const fingerprint = await this.cryptoService.getFingerprint(user.userId, publicKey.buffer);
                 this.logService.info(`User's fingerprint: ${fingerprint.join('-')}`);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
             await confirmUser(publicKey);
         } catch (e) {
             this.logService.error(`Handled exception: ${e}`);

src/app/components/avatar.component.ts

@@ -1,138 +0,0 @@
-import {
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-} from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-
-import { CryptoFunctionService } from 'jslib-common/abstractions/cryptoFunction.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
-
-import { Utils } from 'jslib-common/misc/utils';
-
-@Component({
-    selector: 'app-avatar',
-    template: '<img [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
-        '[ngClass]="{\'rounded-circle\': circle}">',
-})
-export class AvatarComponent implements OnChanges, OnInit {
-    @Input() data: string;
-    @Input() email: string;
-    @Input() size = 45;
-    @Input() charCount = 2;
-    @Input() textColor = '#ffffff';
-    @Input() fontSize = 20;
-    @Input() fontWeight = 300;
-    @Input() dynamic = false;
-    @Input() circle = false;
-
-    src: string;
-
-    constructor(public sanitizer: DomSanitizer, private cryptoFunctionService: CryptoFunctionService,
-        private stateService: StateService) { }
-
-    ngOnInit() {
-        if (!this.dynamic) {
-            this.generate();
-        }
-    }
-
-    ngOnChanges() {
-        if (this.dynamic) {
-            this.generate();
-        }
-    }
-
-    private async generate() {
-        const enableGravatars = await this.stateService.get<boolean>('enableGravatars');
-        if (enableGravatars && this.email != null) {
-            const hashBytes = await this.cryptoFunctionService.hash(this.email.toLowerCase().trim(), 'md5');
-            const hash = Utils.fromBufferToHex(hashBytes).toLowerCase();
-            this.src = 'https://www.gravatar.com/avatar/' + hash + '?s=' + this.size + '&r=pg&d=retro';
-        } else {
-            let chars: string = null;
-            const upperData = this.data.toUpperCase();
-
-            if (this.charCount > 1) {
-                chars = this.getFirstLetters(upperData, this.charCount);
-            }
-            if (chars == null) {
-                chars = this.unicodeSafeSubstring(upperData, this.charCount);
-            }
-
-            // If the chars contain an emoji, only show it.
-            if (chars.match(Utils.regexpEmojiPresentation)) {
-                chars = chars.match(Utils.regexpEmojiPresentation)[0];
-            }
-
-            const charObj = this.getCharText(chars);
-            const color = this.stringToColor(upperData);
-            const svg = this.getSvg(this.size, color);
-            svg.appendChild(charObj);
-            const html = window.document.createElement('div').appendChild(svg).outerHTML;
-            const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
-            this.src = 'data:image/svg+xml;base64,' + svgHtml;
-        }
-    }
-
-    private stringToColor(str: string): string {
-        let hash = 0;
-        for (let i = 0; i < str.length; i++) {
-            // tslint:disable-next-line
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-        }
-        let color = '#';
-        for (let i = 0; i < 3; i++) {
-            // tslint:disable-next-line
-            const value = (hash >> (i * 8)) & 0xFF;
-            color += ('00' + value.toString(16)).substr(-2);
-        }
-        return color;
-    }
-
-    private getFirstLetters(data: string, count: number): string {
-        const parts = data.split(' ');
-        if (parts.length > 1) {
-            let text = '';
-            for (let i = 0; i < count; i++) {
-                text += this.unicodeSafeSubstring(parts[i], 1);
-            }
-            return text;
-        }
-        return null;
-    }
-
-    private getSvg(size: number, color: string): HTMLElement {
-        const svgTag = window.document.createElement('svg');
-        svgTag.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        svgTag.setAttribute('pointer-events', 'none');
-        svgTag.setAttribute('width', size.toString());
-        svgTag.setAttribute('height', size.toString());
-        svgTag.style.backgroundColor = color;
-        svgTag.style.width = size + 'px';
-        svgTag.style.height = size + 'px';
-        return svgTag;
-    }
-
-    private getCharText(character: string): HTMLElement {
-        const textTag = window.document.createElement('text');
-        textTag.setAttribute('text-anchor', 'middle');
-        textTag.setAttribute('y', '50%');
-        textTag.setAttribute('x', '50%');
-        textTag.setAttribute('dy', '0.35em');
-        textTag.setAttribute('pointer-events', 'auto');
-        textTag.setAttribute('fill', this.textColor);
-        textTag.setAttribute('font-family', '"Open Sans","Helvetica Neue",Helvetica,Arial,' +
-            'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"');
-        textTag.textContent = character;
-        textTag.style.fontWeight = this.fontWeight.toString();
-        textTag.style.fontSize = this.fontSize + 'px';
-        return textTag;
-    }
-
-    private unicodeSafeSubstring(str: string, count: number) {
-        const characters = str.match(/./ug);
-        return characters != null ? characters.slice(0, count).join('') : '';
-    }
-}

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

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -48,7 +49,8 @@ export class CollectionAddEditComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
-        private cryptoService: CryptoService, private userService: UserService) { }
+        private cryptoService: CryptoService, private userService: UserService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         const organization = await this.userService.getOrganization(this.organizationId);
@@ -77,7 +79,9 @@ export class CollectionAddEditComponent implements OnInit {
                         }
                     });
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('addCollection');
         }
@@ -127,7 +131,9 @@ export class CollectionAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedCollectionId' : 'createdCollectionId', this.name));
             this.onSavedCollection.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -147,6 +153,8 @@ export class CollectionAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', this.name));
             this.onDeletedCollection.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -7,9 +7,12 @@ import {
 import { ActivatedRoute } from '@angular/router';
 import { ToasterService } from 'angular2-toaster';
 
+import { first } from 'rxjs/operators';
+
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -55,17 +58,14 @@ export class CollectionsComponent implements OnInit {
         private collectionService: CollectionService, private modalService: ModalService,
         private toasterService: ToasterService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private userService: UserService,
-        private searchService: SearchService) { }
+        private searchService: SearchService, private logService: LogService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
             this.organizationId = params.organizationId;
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
@@ -155,7 +155,8 @@ export class CollectionsComponent implements OnInit {
             await this.apiService.deleteCollection(this.organizationId, collection.id);
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedCollectionId', collection.name));
             this.removeCollection(collection);
-        } catch {
+        } catch (e) {
+            this.logService.error(e);
             this.toasterService.popAsync('error', null, this.i18nService.t('missingPermissions'));
         }
     }

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

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { EventService } from '../../services/event.service';
 
@@ -42,7 +43,7 @@ export class EntityEventsComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private eventService: EventService, private toasterService: ToasterService,
-        private userNamePipe: UserNamePipe) { }
+        private userNamePipe: UserNamePipe, private logService: LogService) { }
 
     async ngOnInit() {
         const defaultDates = this.eventService.getDefaultDateFilters();
@@ -98,7 +99,9 @@ export class EntityEventsComponent implements OnInit {
                 this.morePromise = promise;
             }
             response = await promise;
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
 
         this.continuationToken = response.continuationToken;
         const events = await Promise.all(response.data.map(async r => {

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

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { OrganizationUserStatusType } from 'jslib-common/enums/organizationUserStatusType';
 import { OrganizationUserType } from 'jslib-common/enums/organizationUserType';
@@ -41,7 +42,7 @@ export class EntityUsersComponent implements OnInit {
     private allUsers: OrganizationUserUserDetailsResponse[] = [];
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async ngOnInit() {
         await this.loadUsers();
@@ -130,6 +131,8 @@ export class EntityUsersComponent implements OnInit {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('updatedUsers'));
             this.onEditedUsers.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { CollectionData } from 'jslib-common/models/data/collectionData';
@@ -42,7 +43,7 @@ export class GroupAddEditComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private collectionService: CollectionService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private platformUtilsService: PlatformUtilsService, private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.groupId != null;
@@ -66,7 +67,9 @@ export class GroupAddEditComponent implements OnInit {
                         }
                     });
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('addGroup');
         }
@@ -112,7 +115,9 @@ export class GroupAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedGroupId' : 'createdGroupId', this.name));
             this.onSavedGroup.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -132,6 +137,8 @@ export class GroupAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', this.name));
             this.onDeletedGroup.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -9,10 +9,13 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { SearchService } from 'jslib-common/abstractions/search.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -49,7 +52,7 @@ export class GroupsComponent implements OnInit {
         private i18nService: I18nService, private modalService: ModalService,
         private toasterService: ToasterService, private platformUtilsService: PlatformUtilsService,
         private userService: UserService, private router: Router,
-        private searchService: SearchService) { }
+        private searchService: SearchService, private logService: LogService) { }
 
     async ngOnInit() {
         this.route.parent.parent.params.subscribe(async params => {
@@ -60,11 +63,8 @@ export class GroupsComponent implements OnInit {
                 return;
             }
             await this.load();
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }
@@ -125,7 +125,9 @@ export class GroupsComponent implements OnInit {
             await this.apiService.deleteGroup(this.organizationId, group.id);
             this.toasterService.popAsync('success', null, this.i18nService.t('deletedGroupId', group.name));
             this.removeGroup(group);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async users(group: GroupResponse) {

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

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card" *ngIf="organization">
                 <div class="card-header">{{'manage' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -31,7 +31,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

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

@@ -5,6 +5,8 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 
+import { first } from 'rxjs/operators';
+
 import {
     ActivatedRoute,
     Router,
@@ -120,7 +122,7 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
 
             await this.load();
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.searchText = qParams.search;
                 if (qParams.viewEvents != null) {
                     const user = this.users.filter(u => u.id === qParams.viewEvents);
@@ -128,9 +130,6 @@ export class PeopleComponent extends BasePeopleComponent<OrganizationUserUserDet
                         this.events(user[0]);
                     }
                 }
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

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

@@ -9,6 +9,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { PolicyType } from 'jslib-common/enums/policyType';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
@@ -58,7 +60,7 @@ export class PoliciesComponent implements OnInit {
             await this.load();
 
             // Handle policies component launch from Event message
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 if (qParams.policyId != null) {
                     const policyIdFromEvents: string = qParams.policyId;
                     for (const orgPolicy of this.orgPolicies) {
@@ -73,10 +75,6 @@ export class PoliciesComponent implements OnInit {
                         }
                     }
                 }
-
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
         });
     }

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

@@ -13,6 +13,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { PolicyType } from 'jslib-common/enums/policyType';
 
@@ -45,7 +46,7 @@ export class PolicyEditComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private componentFactoryResolver: ComponentFactoryResolver,
-        private cdr: ChangeDetectorRef) {
+        private cdr: ChangeDetectorRef, private logService: LogService) {
     }
 
     async ngAfterViewInit() {
@@ -86,6 +87,8 @@ export class PolicyEditComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('editedPolicyId', this.i18nService.t(this.policy.name)));
             this.onSavedPolicy.emit();
-        } catch {}
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -9,6 +9,7 @@ import {
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
@@ -39,7 +40,7 @@ export class ResetPasswordComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private platformUtilsService: PlatformUtilsService, private passwordGenerationService: PasswordGenerationService,
-        private policyService: PolicyService, private cryptoService: CryptoService) { }
+        private policyService: PolicyService, private cryptoService: CryptoService, private logService: LogService) { }
 
     async ngOnInit() {
         // Get Enforced Policy Options
@@ -143,7 +144,9 @@ export class ResetPasswordComponent implements OnInit {
             await this.formPromise;
             this.platformUtilsService.showToast('success', null, this.i18nService.t('resetPasswordSuccess'));
             this.onPasswordReset.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     updatePasswordStrength() {

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

@@ -76,7 +76,7 @@
                         {{'permissions' | i18n}}
                     </h3>
                     <div class="row">
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Manager Permissions</label>
                                 <hr class="my-0 mr-2" />
@@ -85,7 +85,7 @@
                                 </app-nested-checkbox>
                             </div>
                         </div>
-                        <div class="col-6">
+                        <div class="col-12 col-md-6 mt-4 mt-md-0">
                             <div class="mb-3">
                                 <label class="font-weight-bold mb-0">Admin Permissions</label>
                                 <hr class="my-0 mr-2" />

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

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { CollectionData } from 'jslib-common/models/data/collectionData';
@@ -85,7 +86,7 @@ export class UserAddEditComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private collectionService: CollectionService,
-        private platformUtilsService: PlatformUtilsService) { }
+        private platformUtilsService: PlatformUtilsService, private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.organizationUserId != null;
@@ -111,7 +112,9 @@ export class UserAddEditComponent implements OnInit {
                         }
                     });
                 }
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('inviteUser');
         }
@@ -180,7 +183,9 @@ export class UserAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
             this.onSavedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {
@@ -200,6 +205,8 @@ export class UserAddEditComponent implements OnInit {
             await this.deletePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('removedUserId', this.name));
             this.onDeletedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -9,6 +9,7 @@ import {
 import { ConstantsService } from 'jslib-common/services/constants.service';
 
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 
 @Component({
@@ -26,7 +27,8 @@ export class UserConfirmComponent implements OnInit {
     fingerprint: string;
     formPromise: Promise<any>;
 
-    constructor(private cryptoService: CryptoService, private storageService: StorageService) { }
+    constructor(private cryptoService: CryptoService, private storageService: StorageService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         try {
@@ -36,7 +38,9 @@ export class UserConfirmComponent implements OnInit {
                     this.fingerprint = fingerprint.join('-');
                 }
             }
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
         this.loading = false;
     }
 

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

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { OrganizationUserUpdateGroupsRequest } from 'jslib-common/models/request/organizationUserUpdateGroupsRequest';
 import { GroupResponse } from 'jslib-common/models/response/groupResponse';
@@ -31,7 +32,7 @@ export class UserGroupsComponent implements OnInit {
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async ngOnInit() {
         const groupsResponse = await this.apiService.getGroups(this.organizationId);
@@ -50,7 +51,9 @@ export class UserGroupsComponent implements OnInit {
                     }
                 });
             }
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
 
         this.loading = false;
     }
@@ -76,6 +79,8 @@ export class UserGroupsComponent implements OnInit {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('editedGroupsForUser', this.name));
             this.onSavedUser.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/organizations/policies/master-password.component.html

@@ -7,13 +7,13 @@
     </div>
 
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minComplexity">{{'minComplexityScore' | i18n}}</label>
             <select id="minComplexity" name="minComplexity" formControlName="minComplexity" class="form-control">
                 <option *ngFor="let o of passwordScores" [ngValue]="o.value">{{o.name}}</option>
             </select>
         </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minLength">{{'minLength' | i18n}}</label>
             <input id="minLength" class="form-control" type="number" min="8" name="minLength"
                 formControlName="minLength">

src/app/organizations/policies/password-generator.component.html

@@ -7,7 +7,7 @@
     </div>
 
     <div class="row">
-        <div class="col-6 form-group  mb-0">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group  mb-0">
             <label for="defaultType">{{'defaultType' | i18n}}</label>
             <select id="defaultType" name="defaultType" formControlName="defaultType" class="form-control">
                 <option *ngFor="let o of defaultTypes" [ngValue]="o.value">{{o.name}}</option>
@@ -16,19 +16,19 @@
     </div>
     <h3 class="mt-4">{{'password' | i18n}}</h3>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minLength">{{'minLength' | i18n}}</label>
             <input id="minLength" class="form-control" type="number" name="minLength" min="5" max="128"
                 formControlName="minLength">
         </div>
     </div>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minNumbers">{{'minNumbers' | i18n}}</label>
             <input id="minNumbers" class="form-control" type="number" name="minNumbers" min="0" max="9"
                 formControlName="minNumbers">
         </div>
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minSpecial">{{'minSpecial' | i18n}}</label>
             <input id="minSpecial" class="form-control" type="number" name="minSpecial" min="0" max="9"
                 formControlName="minSpecial">
@@ -53,7 +53,7 @@
     </div>
     <h3 class="mt-4">{{'passphrase' | i18n}}</h3>
     <div class="row">
-        <div class="col-6 form-group">
+        <div class="col-12 col-md-6 mt-4 mt-md-0 form-group">
             <label for="minNumberWords">{{'minimumNumberOfWords' | i18n}}</label>
             <input id="minNumberWords" class="form-control" type="number" name="minNumberWords" min="3" max="20"
                 formControlName="minNumberWords">

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

@@ -7,7 +7,7 @@
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="name">{{'organizationName' | i18n}}</label>
                 <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="org.name"
@@ -29,7 +29,7 @@
                     [(ngModel)]="org.identifier">
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <app-avatar data="{{org.name}}" dynamic="true" size="75" fontSize="35"></app-avatar>
         </div>
     </div>

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

@@ -12,6 +12,7 @@ import { ModalService } from 'jslib-angular/services/modal.service';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { SyncService } from 'jslib-common/abstractions/sync.service';
 
@@ -50,7 +51,7 @@ export class AccountComponent {
         private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private route: ActivatedRoute,
         private syncService: SyncService, private platformUtilsService: PlatformUtilsService,
-        private cryptoService: CryptoService) { }
+        private cryptoService: CryptoService, private logService: LogService) { }
 
     async ngOnInit() {
         this.selfHosted = this.platformUtilsService.isSelfHost();
@@ -59,7 +60,9 @@ export class AccountComponent {
             try {
                 this.org = await this.apiService.getOrganization(this.organizationId);
                 this.canUseApi = this.org.useApi;
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         });
         this.loading = false;
     }
@@ -84,7 +87,9 @@ export class AccountComponent {
             });
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('organizationUpdated'));
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async submitTaxInfo() {

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

@@ -5,12 +5,12 @@ import {
     Output,
 } from '@angular/core';
 
-import { Router } from '@angular/router';
-
 import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
+
 import { OrganizationSubscriptionUpdateRequest } from 'jslib-common/models/request/organizationSubscriptionUpdateRequest';
 
 @Component({
@@ -31,7 +31,7 @@ export class AdjustSubscription {
     newMaxSeats: number;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     ngOnInit() {
         this.limitSubscription = this.maxAutoscaleSeats != null;
@@ -48,7 +48,9 @@ export class AdjustSubscription {
             await this.formPromise;
 
             this.toasterService.popAsync('success', null, this.i18nService.t('subscriptionUpdated'));
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
         this.onAdjusted.emit();
     }
 

src/app/organizations/settings/change-plan.component.ts

@@ -5,8 +5,7 @@ import {
     Output,
 } from '@angular/core';
 
-import { ApiService } from 'jslib-common/abstractions/api.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { PlanType } from 'jslib-common/enums/planType';
 import { ProductType } from 'jslib-common/enums/productType';
@@ -24,12 +23,14 @@ export class ChangePlanComponent {
     defaultUpgradePlan: PlanType = PlanType.FamiliesAnnually;
     defaultUpgradeProduct: ProductType = ProductType.Families;
 
-    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+    constructor(private logService: LogService) { }
 
     async submit() {
         try {
             this.onChanged.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     cancel() {

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

@@ -6,6 +6,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
 
@@ -21,7 +22,7 @@ export class DeleteOrganizationComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
-        private router: Router) { }
+        private router: Router, private logService: LogService) { }
 
     async submit() {
         if (this.masterPassword == null || this.masterPassword === '') {
@@ -38,6 +39,8 @@ export class DeleteOrganizationComponent {
             this.toasterService.popAsync('success', this.i18nService.t('organizationDeleted'),
                 this.i18nService.t('organizationDeletedDesc'));
             this.router.navigate(['/']);
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

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

@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-12 col-md-6">
                 <div class="d-flex">
                     <label for="installationId">{{'enterInstallationId' | i18n}}</label>
                     <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"

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

@@ -6,6 +6,7 @@ import {
 } from '@angular/core';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 @Component({
@@ -20,7 +21,8 @@ export class DownloadLicenseComponent {
     installationId: string;
     formPromise: Promise<any>;
 
-    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService) { }
+    constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
+        private logService: LogService) { }
 
     async submit() {
         if (this.installationId == null || this.installationId === '') {
@@ -33,7 +35,9 @@ export class DownloadLicenseComponent {
             const licenseString = JSON.stringify(license, null, 2);
             this.platformUtilsService.saveFile(window, licenseString, null, 'bitwarden_organization_license.json');
             this.onDownloaded.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     cancel() {

src/app/organizations/settings/organization-billing.component.ts

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { UserBillingComponent } from '../../settings/user-billing.component';
@@ -18,8 +19,9 @@ import { UserBillingComponent } from '../../settings/user-billing.component';
 })
 export class OrganizationBillingComponent extends UserBillingComponent implements OnInit {
     constructor(apiService: ApiService, i18nService: I18nService, toasterService: ToasterService,
-        private route: ActivatedRoute, platformUtilsService: PlatformUtilsService) {
-        super(apiService, i18nService, toasterService, platformUtilsService);
+        private route: ActivatedRoute, platformUtilsService: PlatformUtilsService,
+        logService: LogService) {
+        super(apiService, i18nService, toasterService, platformUtilsService, logService);
     }
 
     async ngOnInit() {

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

@@ -45,7 +45,7 @@
                     </ng-container>
                     </dl>
                     </div>
-            <div class="col-8" *ngIf="subscription">
+            <div class="col-8">
                 <strong class="d-block mb-1">{{'details' | i18n}}</strong>
                 <table class="table">
                     <tbody>
@@ -70,13 +70,6 @@
                 </div>
             </ng-container>
         </div>
-        <ng-container>
-            <button type="button" class="btn btn-outline-secondary" (click)="changePlan()" *ngIf="showChangePlanButton">
-                {{'changeBillingPlan' | i18n}}
-            </button>
-            <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
-                (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
-        </ng-container>
         <h2 class="spaced-header">{{'manageSubscription' | i18n}}</h2>
         <p class="mb-4">{{subscriptionDesc}}</p>
         <ng-container *ngIf="subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel">
@@ -125,6 +118,8 @@
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
+        <app-change-plan [organizationId]="organizationId" (onChanged)="closeChangePlan(true)"
+            (onCanceled)="closeChangePlan(false)" *ngIf="showChangePlan"></app-change-plan>
         <div class="mt-3" *ngIf="showDownloadLicense">
             <app-download-license [organizationId]="organizationId" (onDownloaded)="closeDownloadLicense()"
                 (onCanceled)="closeDownloadLicense()"></app-download-license>

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

@@ -10,6 +10,7 @@ import { OrganizationSubscriptionResponse } from 'jslib-common/models/response/o
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -43,7 +44,7 @@ export class OrganizationSubscriptionComponent implements OnInit {
     constructor(private apiService: ApiService, private platformUtilsService: PlatformUtilsService,
         private i18nService: I18nService, private toasterService: ToasterService,
         private messagingService: MessagingService, private route: ActivatedRoute,
-        private userService: UserService) {
+        private userService: UserService, private logService: LogService) {
         this.selfHosted = platformUtilsService.isSelfHost();
     }
 
@@ -82,7 +83,9 @@ export class OrganizationSubscriptionComponent implements OnInit {
             await this.reinstatePromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('reinstated'));
             this.load();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async cancel() {
@@ -101,11 +104,21 @@ export class OrganizationSubscriptionComponent implements OnInit {
             await this.cancelPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('canceledSubscription'));
             this.load();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async changePlan() {
-        this.showChangePlan = !this.showChangePlan;
+        if (this.subscription == null && this.sub.planType === PlanType.Free) {
+            this.showChangePlan = !this.showChangePlan;
+            return;
+        }
+        const contactSupport = await this.platformUtilsService.showDialog(this.i18nService.t('changeBillingPlanDesc'),
+            this.i18nService.t('changeBillingPlan'), this.i18nService.t('contactSupport'), this.i18nService.t('close'));
+        if (contactSupport) {
+            this.platformUtilsService.launchUri('https://bitwarden.com/contact');
+        }
     }
 
     closeChangePlan(changed: boolean) {
@@ -208,11 +221,7 @@ export class OrganizationSubscriptionComponent implements OnInit {
     }
 
     get subscriptionDesc() {
-        if (this.sub.planType === PlanType.Free) {
-            return this.i18nService.t('subscriptionFreePlan', this.sub.seats.toString());
-        } else if (this.sub.planType === PlanType.FamiliesAnnually || this.sub.planType === PlanType.FamiliesAnnually2019) {
-            return this.i18nService.t('subscriptionFamiliesPlan', this.sub.seats.toString());
-        } else if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
+        if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
             return this.i18nService.t('subscriptionMaxReached', this.sub.seats.toString());
         } else if (this.sub.maxAutoscaleSeats == null) {
             return this.i18nService.t('subscriptionUserSeatsUnlimitedAutoscale');
@@ -220,8 +229,4 @@ export class OrganizationSubscriptionComponent implements OnInit {
             return this.i18nService.t('subscriptionUserSeatsLimitedAutoscale', this.sub.maxAutoscaleSeats.toString());
         }
     }
-
-    get showChangePlanButton() {
-        return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
-    }
 }

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

@@ -1,6 +1,6 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-md-4 col-lg-3 mt-4 mt-md-0">
             <div class="card">
                 <div class="card-header">{{'settings' | i18n}}</div>
                 <div class="list-group list-group-flush">
@@ -19,7 +19,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-md-8 col-lg-9 mt-4 mt-md-0">
             <router-outlet></router-outlet>
         </div>
     </div>

src/app/organizations/tools/export.component.ts

@@ -5,6 +5,7 @@ import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { EventService } from 'jslib-common/abstractions/event.service';
 import { ExportService } from 'jslib-common/abstractions/export.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 
@@ -17,8 +18,10 @@ import { ExportComponent as BaseExportComponent } from '../../tools/export.compo
 export class ExportComponent extends BaseExportComponent {
     constructor(cryptoService: CryptoService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, exportService: ExportService,
-        eventService: EventService, private route: ActivatedRoute, policyService: PolicyService) {
-        super(cryptoService, i18nService, platformUtilsService, exportService, eventService, policyService);
+        eventService: EventService, private route: ActivatedRoute, policyService: PolicyService,
+        logService: LogService) {
+        super(cryptoService, i18nService, platformUtilsService, exportService, eventService, policyService,
+            logService);
     }
 
     async ngOnInit() {

src/app/organizations/tools/import.component.ts

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { ImportService } from 'jslib-common/abstractions/import.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -24,8 +25,8 @@ export class ImportComponent extends BaseImportComponent {
     constructor(i18nService: I18nService, toasterService: ToasterService,
         importService: ImportService, router: Router, private route: ActivatedRoute,
         platformUtilsService: PlatformUtilsService, policyService: PolicyService,
-        private userService: UserService) {
-        super(i18nService, toasterService, importService, router, platformUtilsService, policyService);
+        private userService: UserService, logService: LogService) {
+        super(i18nService, toasterService, importService, router, platformUtilsService, policyService, logService);
     }
 
     async ngOnInit() {

src/app/organizations/tools/inactive-two-factor-report.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
@@ -20,9 +21,9 @@ import { CipherView } from 'jslib-common/models/view/cipherView';
 })
 export class InactiveTwoFactorReportComponent extends BaseInactiveTwoFactorReportComponent {
     constructor(cipherService: CipherService, modalService: ModalService,
-        messagingService: MessagingService, userService: UserService, passwordRepromptService: PasswordRepromptService,
-        private route: ActivatedRoute) {
-        super(cipherService, modalService, messagingService, userService, passwordRepromptService);
+        messagingService: MessagingService, userService: UserService,
+        private route: ActivatedRoute, logService: LogService, passwordRepromptService: PasswordRepromptService) {
+        super(cipherService, modalService, messagingService, userService, logService, passwordRepromptService);
     }
 
     async ngOnInit() {

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

@@ -5,7 +5,7 @@
     </ng-container>
     <ng-container *ngIf="!loading">
         <div class="row">
-            <div class="col-3">
+            <div class="col-12 col-md-4 col-lg-3">
                 <div class="card mb-4" *ngIf="organization.canAccessImportExport">
                     <div class="card-header">{{'tools' | i18n}}</div>
                     <div class="list-group list-group-flush">
@@ -46,7 +46,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-9">
+            <div class="col-12 col-md-8 col-lg-9">
                 <router-outlet></router-outlet>
             </div>
         </div>

src/app/organizations/vault/add-edit.component.ts

@@ -7,6 +7,7 @@ import { CollectionService } from 'jslib-common/abstractions/collection.service'
 import { EventService } from 'jslib-common/abstractions/event.service';
 import { FolderService } from 'jslib-common/abstractions/folder.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -37,10 +38,10 @@ export class AddEditComponent extends BaseAddEditComponent {
         userService: UserService, collectionService: CollectionService,
         totpService: TotpService, passwordGenerationService: PasswordGenerationService,
         private apiService: ApiService, messagingService: MessagingService,
-        eventService: EventService, policyService: PolicyService) {
+        eventService: EventService, policyService: PolicyService, logService: LogService) {
         super(cipherService, folderService, i18nService, platformUtilsService, auditService, stateService,
             userService, collectionService, totpService, passwordGenerationService, messagingService,
-            eventService, policyService);
+            eventService, policyService, logService);
     }
 
     protected allowOwnershipAssignment() {

src/app/organizations/vault/attachments.component.ts

@@ -4,6 +4,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -25,8 +26,10 @@ export class AttachmentsComponent extends BaseAttachmentsComponent {
 
     constructor(cipherService: CipherService, i18nService: I18nService,
         cryptoService: CryptoService, userService: UserService,
-        platformUtilsService: PlatformUtilsService, apiService: ApiService) {
-        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, apiService);
+        platformUtilsService: PlatformUtilsService, apiService: ApiService,
+        logService: LogService) {
+        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, apiService,
+            logService);
     }
 
     protected async reupload(attachment: AttachmentView) {

src/app/organizations/vault/ciphers.component.ts

@@ -10,6 +10,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { EventService } from 'jslib-common/abstractions/event.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PasswordRepromptService } from 'jslib-common/abstractions/passwordReprompt.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { SearchService } from 'jslib-common/abstractions/search.service';
@@ -36,9 +37,10 @@ export class CiphersComponent extends BaseCiphersComponent {
     constructor(searchService: SearchService, toasterService: ToasterService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, cipherService: CipherService,
         private apiService: ApiService, eventService: EventService, totpService: TotpService,
-        userService: UserService, passwordRepromptService: PasswordRepromptService) {
+        userService: UserService, passwordRepromptService: PasswordRepromptService,
+        logService: LogService) {
         super(searchService, toasterService, i18nService, platformUtilsService, cipherService,
-            eventService, totpService, userService, passwordRepromptService);
+            eventService, totpService, userService, passwordRepromptService, logService);
     }
 
     async load(filter: (cipher: CipherView) => boolean = null) {

src/app/organizations/vault/collections.component.ts

@@ -4,6 +4,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { CollectionService } from 'jslib-common/abstractions/collection.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 
 import { CipherData } from 'jslib-common/models/data/cipherData';
@@ -22,8 +23,8 @@ export class CollectionsComponent extends BaseCollectionsComponent {
 
     constructor(collectionService: CollectionService, platformUtilsService: PlatformUtilsService,
         i18nService: I18nService, cipherService: CipherService,
-        private apiService: ApiService) {
-        super(collectionService, platformUtilsService, i18nService, cipherService);
+        private apiService: ApiService, logService: LogService) {
+        super(collectionService, platformUtilsService, i18nService, cipherService, logService);
         this.allowSelectNone = true;
     }
 

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

@@ -1,13 +1,13 @@
 <div class="container page-content">
     <div class="row">
-        <div class="col-3">
+        <div class="col-12 col-md-4 col-lg-3">
             <app-org-vault-groupings [showFolders]="false" [showFavorites]="false" [showTrash]="true"
                 (onAllClicked)="clearGroupingFilters()" (onCipherTypeClicked)="filterCipherType($event)"
                 (onCollectionClicked)="filterCollection($event.id)" (onSearchTextChanged)="filterSearchText($event)"
                 (onTrashClicked)="filterDeleted()">
             </app-org-vault-groupings>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-8 col-lg-9">
             <div class="page-header d-flex">
                 <h1>
                     {{'vault' | i18n}}

src/app/organizations/vault/vault.component.ts

@@ -12,6 +12,8 @@ import {
     Router,
 } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -65,12 +67,12 @@ export class VaultComponent implements OnInit, OnDestroy {
             this.platformUtilsService.isSelfHost() ? 'trashCleanupWarningSelfHosted' : 'trashCleanupWarning'
         );
 
-        const queryParams = this.route.parent.params.subscribe(async params => {
+        this.route.parent.params.pipe(first()).subscribe(async params => {
             this.organization = await this.userService.getOrganization(params.organizationId);
             this.groupingsComponent.organization = this.organization;
             this.ciphersComponent.organization = this.organization;
 
-            const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+            this.route.queryParams.pipe(first()).subscribe(async qParams => {
                 this.ciphersComponent.searchText = this.groupingsComponent.searchText = qParams.search;
                 if (!this.organization.canViewAllCollections) {
                     await this.syncService.fullSync(false);
@@ -118,15 +120,7 @@ export class VaultComponent implements OnInit, OnDestroy {
                         this.viewEvents(cipher[0]);
                     }
                 }
-
-                if (queryParamsSub != null) {
-                    queryParamsSub.unsubscribe();
-                }
             });
-
-            if (queryParams != null) {
-                queryParams.unsubscribe();
-            }
         });
     }
 

src/app/oss.module.ts

@@ -11,7 +11,6 @@ import { RouterModule } from '@angular/router';
 import { ToasterModule } from 'angular2-toaster';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
-import { AvatarComponent } from './components/avatar.component';
 import { NestedCheckboxComponent } from './components/nested-checkbox.component';
 import { PasswordRepromptComponent } from './components/password-reprompt.component';
 import { PasswordStrengthComponent } from './components/password-strength.component';
@@ -175,6 +174,7 @@ import { VaultComponent } from './vault/vault.component';
 
 import { ProvidersComponent } from './providers/providers.component';
 
+import { AvatarComponent } from 'jslib-angular/components/avatar.component';
 import { CalloutComponent } from 'jslib-angular/components/callout.component';
 import { IconComponent } from 'jslib-angular/components/icon.component';
 

src/app/send/access.component.html

@@ -6,7 +6,7 @@
         <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
             <p>{{'sendCreatorIdentifier' | i18n: creatorIdentifier }}</p>
         </div>
-        <div class="col-8" *ngIf="hideEmail">
+        <div class="col-12 col-md-8" *ngIf="hideEmail">
             <app-callout type="warning" title="{{'warning' | i18n}}">
                 {{'viewSendHiddenEmailWarning' | i18n }} 
                 <a href="https://bitwarden.com/help/article/receive-send/" target="_blank">{{'learnMore' | i18n}}</a>.
@@ -14,7 +14,7 @@
         </div>
     </div>
     <div class="row justify-content-center">
-        <div class="col-5">
+        <div class="col-12 col-md-5">
             <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" title="{{'loading' | i18n}}"

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

@@ -19,7 +19,7 @@
                     </ul>
                 </app-callout>
                 <div class="row">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label for="name">{{'name' | i18n}}</label>
                         <input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
                             [readOnly]="disableSend">
@@ -27,7 +27,7 @@
                     </div>
                 </div>
                 <div class="row" *ngIf="!editMode">
-                    <div class="col-6 form-group">
+                    <div class="col-md-6 mt-4 mt-md-0 form-group">
                         <label>{{'whatTypeOfSend' | i18n}}</label>
                         <div class="form-check" *ngFor="let o of typeOptions">
                             <input class="form-check-input" type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}"
@@ -97,20 +97,20 @@
                         [editMode]="editMode" [disabled]="disableSend" (datesChanged)="setDates($event)">
                     </app-send-efflux-dates>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="maxAccessCount">{{'maxAccessCount' | i18n}}</label>
                             <input id="maxAccessCount" class="form-control" type="number" name="MaxAccessCount"
                                 [(ngModel)]="send.maxAccessCount" min="1" [readOnly]="disableSend">
                             <div class="form-text text-muted small">{{'maxAccessCountDesc' | i18n}}</div>
                         </div>
-                        <div class="col-6 form-group" *ngIf="editMode">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group" *ngIf="editMode">
                             <label for="accessCount">{{'currentAccessCount' | i18n}}</label>
                             <input id="accessCount" class="form-control" type="text" name="AccessCount" readonly
                                 [(ngModel)]="send.accessCount">
                         </div>
                     </div>
                     <div class="row">
-                        <div class="col-6 form-group">
+                        <div class="col-md-6 mt-4 mt-md-0 form-group">
                             <label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
                             <label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
                             <div class="input-group">

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

@@ -11,6 +11,7 @@ import { SendService } from 'jslib-common/abstractions/send.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
 import { AddEditComponent as BaseAddEditComponent } from 'jslib-angular/components/send/add-edit.component';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 @Component({
     selector: 'app-send-add-edit',
@@ -20,9 +21,10 @@ export class AddEditComponent extends BaseAddEditComponent {
     constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
         environmentService: EnvironmentService, datePipe: DatePipe,
         sendService: SendService, userService: UserService,
-        messagingService: MessagingService, policyService: PolicyService) {
+        messagingService: MessagingService, policyService: PolicyService,
+        logService: LogService) {
         super(i18nService, platformUtilsService, environmentService, datePipe, sendService, userService,
-            messagingService, policyService);
+            messagingService, policyService, logService);
     }
 
     async copyLinkToClipboard(link: string): Promise<void | boolean> {

src/app/send/efflux-dates.component.html

@@ -1,5 +1,5 @@
 <div class="row" [formGroup]="datesForm">
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <label for="deletionDate">{{'deletionDate' | i18n}}</label>
         <ng-template #deletionDateCustom>
             <ng-container [ngSwitch]="browserPath">
@@ -48,7 +48,7 @@
         </div>
         <div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
     </div>
-    <div class="col-6 form-group">
+    <div class="col-md-6 mt-4 mt-md-0 form-group">
         <div class="d-flex">
             <label for="expirationDate">{{'expirationDate' | i18n}}</label>
             <a href="#" appStopClick (click)="clearExpiration()" class="ml-auto"

src/app/send/send.component.html

@@ -3,7 +3,7 @@
         <span>{{'sendDisabledWarning' | i18n}}</span>
     </app-callout>
     <div class="row">
-        <div class="col-3 groupings">
+        <div class="col-12 col-md-3 groupings">
             <div class="card vault-filters">
                 <div class="card-header d-flex">
                     {{'filters' | i18n}}
@@ -35,7 +35,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-9">
+        <div class="col-12 col-md-9 mt-4 mt-md-0">
             <div class="page-header d-flex">
                 <h1>
                     {{'send' | i18n}}

src/app/send/send.component.ts

@@ -13,6 +13,7 @@ import { AddEditComponent } from './add-edit.component';
 
 import { EnvironmentService } from 'jslib-common/abstractions/environment.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { PolicyService } from 'jslib-common/abstractions/policy.service';
 import { SearchService } from 'jslib-common/abstractions/search.service';
@@ -34,9 +35,10 @@ export class SendComponent extends BaseSendComponent {
     constructor(sendService: SendService, i18nService: I18nService,
         platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
         ngZone: NgZone, searchService: SearchService, policyService: PolicyService, userService: UserService,
-        private modalService: ModalService, private broadcasterService: BroadcasterService) {
+        private modalService: ModalService, private broadcasterService: BroadcasterService,
+        logService: LogService) {
         super(sendService, i18nService, platformUtilsService, environmentService, ngZone, searchService,
-            policyService, userService);
+            policyService, userService, logService);
     }
 
     async ngOnInit() {

src/app/services/services.module.ts

@@ -116,7 +116,7 @@ const settingsService = new SettingsService(userService, storageService);
 export let searchService: SearchService = null;
 const fileUploadService = new FileUploadService(consoleLogService, apiService);
 const cipherService = new CipherService(cryptoService, userService, settingsService,
-    apiService, fileUploadService, storageService, i18nService, () => searchService);
+    apiService, fileUploadService, storageService, i18nService, () => searchService, consoleLogService);
 const folderService = new FolderService(cryptoService, userService, apiService, storageService,
     i18nService, cipherService);
 const collectionService = new CollectionService(cryptoService, userService, storageService, i18nService);
@@ -129,9 +129,9 @@ const vaultTimeoutService = new VaultTimeoutService(cipherService, folderService
     policyService, null, async () => messagingService.send('logout', { expired: false }));
 const syncService = new SyncService(userService, apiService, settingsService,
     folderService, cipherService, cryptoService, collectionService, storageService, messagingService, policyService,
-    sendService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));
+    sendService, consoleLogService, async (expired: boolean) => messagingService.send('logout', { expired: expired }));
 const passwordGenerationService = new PasswordGenerationService(cryptoService, storageService, policyService);
-const totpService = new TotpService(storageService, cryptoFunctionService);
+const totpService = new TotpService(storageService, cryptoFunctionService, consoleLogService);
 const containerService = new ContainerService(cryptoService);
 const authService = new AuthService(cryptoService, apiService,
     userService, tokenService, appIdService, i18nService, platformUtilsService, messagingService, vaultTimeoutService,
@@ -142,7 +142,7 @@ const importService = new ImportService(cipherService, folderService, apiService
 const notificationsService = new NotificationsService(userService, syncService, appIdService, apiService, vaultTimeoutService,
     environmentService, async () => messagingService.send('logout', { expired: true }), consoleLogService);
 const auditService = new AuditService(cryptoFunctionService, apiService);
-const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService);
+const eventLoggingService = new EventLoggingService(storageService, apiService, userService, cipherService, consoleLogService);
 
 containerService.attachToWindow(window);
 

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

@@ -19,7 +19,7 @@
         </div>
         <div class="form-group">
             <div class="row">
-                <div class="col-4">
+                <div class="col-12 col-md-4 mt-4 mt-md-0">
                     <label for="creditAmount">{{'amount' | i18n}}</label>
                     <div class="input-group">
                         <div class="input-group-prepend"><span class="input-group-text">$USD</span></div>

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

@@ -10,6 +10,7 @@ import {
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { PayPalConfig } from 'jslib-common/abstractions/environment.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -45,7 +46,7 @@ export class AddCreditComponent implements OnInit {
     private email: string;
 
     constructor(private userService: UserService, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService) {
+        private platformUtilsService: PlatformUtilsService, private logService: LogService) {
         const payPalConfig = process.env.PAYPAL_CONFIG as PayPalConfig;
         this.ppButtonFormAction = payPalConfig.buttonAction;
         this.ppButtonBusinessId = payPalConfig.businessId;
@@ -98,12 +99,16 @@ export class AddCreditComponent implements OnInit {
                 this.formPromise = this.apiService.postBitPayInvoice(req);
                 const bitPayUrl: string = await this.formPromise;
                 this.platformUtilsService.launchUri(bitPayUrl);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
             return;
         }
         try {
             this.onAdded.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     cancel() {
@@ -120,7 +125,9 @@ export class AddCreditComponent implements OnInit {
                     return;
                 }
             }
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
         this.creditAmount = '';
     }
 
@@ -128,7 +135,9 @@ export class AddCreditComponent implements OnInit {
         if (this.creditAmount != null && this.creditAmount !== '') {
             try {
                 return parseFloat(this.creditAmount);
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         }
         return null;
     }

src/app/settings/adjust-payment.component.ts

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { PaymentRequest } from 'jslib-common/models/request/paymentRequest';
 
@@ -35,7 +36,7 @@ export class AdjustPaymentComponent {
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async submit() {
         try {
@@ -60,7 +61,9 @@ export class AdjustPaymentComponent {
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('updatedPaymentMethod'));
             this.onAdjusted.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     cancel() {

src/app/settings/adjust-storage.component.html

@@ -4,7 +4,7 @@
                 aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
         <div class="row">
-            <div class="form-group col-6">
+            <div class="form-group col-md-6">
                 <label for="storageAdjustment">{{(add ? 'gbStorageAdd' : 'gbStorageRemove') | i18n}}</label>
                 <input id="storageAdjustment" class="form-control" type="number" name="StroageGbAdjustment"
                     [(ngModel)]="storageAdjustment" min="0" max="99" step="1" required>

src/app/settings/adjust-storage.component.ts

@@ -15,6 +15,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { StorageRequest } from 'jslib-common/models/request/storageRequest';
 
@@ -41,7 +42,7 @@ export class AdjustStorageComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private router: Router,
-        private activatedRoute: ActivatedRoute) { }
+        private activatedRoute: ActivatedRoute, private logService: LogService) { }
 
     async submit() {
         try {
@@ -82,7 +83,9 @@ export class AdjustStorageComponent {
                 this.toasterService.popAsync('success', null,
                     this.i18nService.t('adjustedStorage', request.storageGbAdjustment.toString()));
             }
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     cancel() {

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

@@ -4,6 +4,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
 
@@ -30,7 +31,7 @@ export class ApiKeyComponent {
     clientSecret: string;
 
     constructor(private i18nService: I18nService, private toasterService: ToasterService,
-        private cryptoService: CryptoService) { }
+        private cryptoService: CryptoService, private logService: LogService) { }
 
     async submit() {
         if (this.masterPassword == null || this.masterPassword === '') {
@@ -46,6 +47,8 @@ export class ApiKeyComponent {
             const response = await this.formPromise;
             this.clientSecret = response.apiKey;
             this.clientId = `${this.keyType}.${this.entityId}`;
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/change-email.component.html

@@ -3,7 +3,7 @@
         {{'changeEmailTwoFactorWarning' | i18n}}
     </app-callout>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -21,7 +21,7 @@
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
         <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
         <div class="row">
-            <div class="col-6">
+            <div class="col-12 col-md-6 mt-4 mt-md-0">
                 <div class="form-group">
                     <label for="token">{{'code' | i18n}}</label>
                     <input id="token" class="form-control" type="text" name="Token" [(ngModel)]="token" required

src/app/settings/change-email.component.ts

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -31,7 +32,8 @@ export class ChangeEmailComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
-        private messagingService: MessagingService, private userService: UserService) { }
+        private messagingService: MessagingService, private userService: UserService,
+        private logService: LogService) { }
 
     async ngOnInit() {
         const twoFactorProviders = await this.apiService.getTwoFactorProviders();
@@ -55,7 +57,9 @@ export class ChangeEmailComponent implements OnInit {
                 this.formPromise = this.apiService.postEmailToken(request);
                 await this.formPromise;
                 this.tokenSent = true;
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             const request = new EmailRequest();
             request.token = this.token;
@@ -74,7 +78,9 @@ export class ChangeEmailComponent implements OnInit {
                 this.toasterService.popAsync('success', this.i18nService.t('emailChanged'),
                     this.i18nService.t('logBackIn'));
                 this.messagingService.send('logout');
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         }
     }
 

src/app/settings/change-kdf.component.html

@@ -1,7 +1,7 @@
 <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="kdfMasterPassword">{{'masterPass' | i18n}}</label>
                 <input id="kdfMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -10,7 +10,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
@@ -22,7 +22,7 @@
                 </select>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group mb-0">
                 <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                 <a class="ml-auto" href="https://bitwarden.com/help/article/what-encryption-is-used/#pbkdf2" target="_blank" rel="noopener"

src/app/settings/change-kdf.component.ts

@@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -28,7 +29,8 @@ export class ChangeKdfComponent implements OnInit {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
-        private messagingService: MessagingService, private userService: UserService) {
+        private messagingService: MessagingService, private userService: UserService,
+        private logService: LogService) {
         this.kdfOptions = [
             { name: 'PBKDF2 SHA-256', value: KdfType.PBKDF2_SHA256 },
         ];
@@ -61,6 +63,8 @@ export class ChangeKdfComponent implements OnInit {
             this.toasterService.popAsync('success', this.i18nService.t('encKeySettingsChanged'),
                 this.i18nService.t('logBackIn'));
             this.messagingService.send('logout');
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/change-password.component.html

@@ -4,7 +4,7 @@
 
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate autocomplete="off">
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="currentMasterPassword">{{'currentMasterPass' | i18n}}</label>
                 <input id="currentMasterPassword" type="password" name="MasterPasswordHash" class="form-control"
@@ -13,7 +13,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="newMasterPassword">{{'newMasterPass' | i18n}}</label>
                 <input id="newMasterPassword" type="password" name="NewMasterPasswordHash" class="form-control mb-1"
@@ -22,7 +22,7 @@
                 <app-password-strength [score]="masterPasswordScore" [showText]="true"></app-password-strength>
             </div>
         </div>
-        <div class="col-6">
+        <div class="col-12 col-md-6 mt-4 mt-md-0">
             <div class="form-group">
                 <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                 <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype" class="form-control"

src/app/settings/create-organization.component.ts

@@ -5,6 +5,8 @@ import {
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
+import { first } from 'rxjs/operators';
+
 import { PlanType } from 'jslib-common/enums/planType';
 import { ProductType } from 'jslib-common/enums/productType';
 
@@ -20,7 +22,7 @@ export class CreateOrganizationComponent implements OnInit {
     constructor(private route: ActivatedRoute) { }
 
     ngOnInit() {
-        const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
+        this.route.queryParams.pipe(first()).subscribe(async qParams => {
             if (qParams.plan === 'families') {
                 this.orgPlansComponent.plan = PlanType.FamiliesAnnually;
                 this.orgPlansComponent.product = ProductType.Families;
@@ -31,9 +33,6 @@ export class CreateOrganizationComponent implements OnInit {
                 this.orgPlansComponent.plan = PlanType.EnterpriseAnnually;
                 this.orgPlansComponent.product = ProductType.Enterprise;
             }
-            if (queryParamsSub != null) {
-                queryParamsSub.unsubscribe();
-            }
         });
     }
 }

src/app/settings/deauthorize-sessions.component.ts

@@ -5,6 +5,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 
 import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
@@ -19,7 +20,7 @@ export class DeauthorizeSessionsComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
-        private messagingService: MessagingService) { }
+        private messagingService: MessagingService, private logService: LogService) { }
 
     async submit() {
         if (this.masterPassword == null || this.masterPassword === '') {
@@ -36,6 +37,8 @@ export class DeauthorizeSessionsComponent {
             this.toasterService.popAsync('success', this.i18nService.t('sessionsDeauthorized'),
                 this.i18nService.t('logBackIn'));
             this.messagingService.send('logout');
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/delete-account.component.ts

@@ -5,6 +5,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 
 import { PasswordVerificationRequest } from 'jslib-common/models/request/passwordVerificationRequest';
@@ -19,7 +20,7 @@ export class DeleteAccountComponent {
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
         private toasterService: ToasterService, private cryptoService: CryptoService,
-        private messagingService: MessagingService) { }
+        private messagingService: MessagingService, private logService: LogService) { }
 
     async submit() {
         if (this.masterPassword == null || this.masterPassword === '') {
@@ -36,6 +37,8 @@ export class DeleteAccountComponent {
             this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
                 this.i18nService.t('accountDeletedDesc'));
             this.messagingService.send('logout');
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/domain-rules.component.ts

@@ -7,6 +7,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { UpdateDomainsRequest } from 'jslib-common/models/request/updateDomainsRequest';
 
@@ -21,7 +22,7 @@ export class DomainRulesComponent implements OnInit {
     formPromise: Promise<any>;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async ngOnInit() {
         const response = await this.apiService.getSettingsDomains();
@@ -74,7 +75,9 @@ export class DomainRulesComponent implements OnInit {
             this.formPromise = this.apiService.putSettingsDomains(request);
             await this.formPromise;
             this.toasterService.popAsync('success', null, this.i18nService.t('domainsUpdated'));
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     indexTrackBy(index: number, obj: any): any {

src/app/settings/emergency-access-add-edit.component.html

@@ -46,7 +46,7 @@
                         <small>{{'takeoverDesc' | i18n}}</small>
                     </label>
                 </div>
-                <div class="form-group col-6 mt-4">
+                <div class="form-group col-12 col-md-6 mt-4">
                     <label for="waitTime">{{'waitTime' | i18n}}</label>
                     <select id="waitTime" name="waitTime" [(ngModel)]="waitTime" class="form-control" [disabled]="readOnly">
                         <option *ngFor="let o of waitTimes" [ngValue]="o.value">{{o.name}}</option>

src/app/settings/emergency-access-add-edit.component.ts

@@ -10,6 +10,7 @@ import { ToasterService } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 
 import { EmergencyAccessType } from 'jslib-common/enums/emergencyAccessType';
 import { EmergencyAccessInviteRequest } from 'jslib-common/models/request/emergencyAccessInviteRequest';
@@ -39,7 +40,7 @@ export class EmergencyAccessAddEditComponent implements OnInit {
     waitTime: number;
 
     constructor(private apiService: ApiService, private i18nService: I18nService,
-        private toasterService: ToasterService) { }
+        private toasterService: ToasterService, private logService: LogService) { }
 
     async ngOnInit() {
         this.editMode = this.loading = this.emergencyAccessId != null;
@@ -60,7 +61,9 @@ export class EmergencyAccessAddEditComponent implements OnInit {
                 const emergencyAccess = await this.apiService.getEmergencyAccess(this.emergencyAccessId);
                 this.type = emergencyAccess.type;
                 this.waitTime = emergencyAccess.waitTimeDays;
-            } catch { }
+            } catch (e) {
+                this.logService.error(e);
+            }
         } else {
             this.title = this.i18nService.t('inviteEmergencyContact');
             this.waitTime = this.waitTimes[2].value;
@@ -90,7 +93,9 @@ export class EmergencyAccessAddEditComponent implements OnInit {
             this.toasterService.popAsync('success', null,
                 this.i18nService.t(this.editMode ? 'editedUserId' : 'invitedUsers', this.name));
             this.onSaved.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 
     async delete() {

src/app/settings/emergency-access-attachments.component.ts

@@ -4,6 +4,7 @@ import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CipherService } from 'jslib-common/abstractions/cipher.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
 
@@ -21,8 +22,10 @@ export class EmergencyAccessAttachmentsComponent extends BaseAttachmentsComponen
 
     constructor(cipherService: CipherService, i18nService: I18nService,
         cryptoService: CryptoService, userService: UserService,
-        platformUtilsService: PlatformUtilsService, apiService: ApiService) {
-        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, apiService, window);
+        platformUtilsService: PlatformUtilsService, apiService: ApiService,
+        logService: LogService) {
+        super(cipherService, i18nService, cryptoService, userService, platformUtilsService, apiService, window,
+            logService);
     }
 
     protected async init() {

src/app/settings/emergency-access-confirm.component.ts

@@ -10,6 +10,7 @@ import { ConstantsService } from 'jslib-common/services/constants.service';
 
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { StorageService } from 'jslib-common/abstractions/storage.service';
 
 import { Utils } from 'jslib-common/misc/utils';
@@ -30,7 +31,7 @@ export class EmergencyAccessConfirmComponent implements OnInit {
     fingerprint: string;
 
     constructor(private apiService: ApiService, private cryptoService: CryptoService,
-        private storageService: StorageService) { }
+        private storageService: StorageService, private logService: LogService) { }
 
     async ngOnInit() {
         try {
@@ -42,7 +43,9 @@ export class EmergencyAccessConfirmComponent implements OnInit {
                     this.fingerprint = fingerprint.join('-');
                 }
             }
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
         this.loading = false;
     }
 
@@ -57,6 +60,8 @@ export class EmergencyAccessConfirmComponent implements OnInit {
 
         try {
             this.onConfirmed.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/emergency-access-takeover.component.html

@@ -15,7 +15,7 @@
                 <app-callout type="info" [enforcedPolicyOptions]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
                 </app-callout>
                 <div class="row">
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPassword">{{'newMasterPass' | i18n}}</label>
                             <input id="masterPassword" type="password" name="NewMasterPasswordHash"
@@ -26,7 +26,7 @@
                             </app-password-strength>
                         </div>
                     </div>
-                    <div class="col-6">
+                    <div class="col-12 col-md-6 mt-4 mt-md-0">
                         <div class="form-group">
                             <label for="masterPasswordRetype">{{'confirmNewMasterPass' | i18n}}</label>
                             <input id="masterPasswordRetype" type="password" name="MasterPasswordRetype"

src/app/settings/emergency-access-takeover.component.ts

@@ -11,6 +11,7 @@ import { ToasterService } from 'angular2-toaster';
 import { ApiService } from 'jslib-common/abstractions/api.service';
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
+import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -44,7 +45,7 @@ export class EmergencyAccessTakeoverComponent extends ChangePasswordComponent im
         messagingService: MessagingService, userService: UserService,
         passwordGenerationService: PasswordGenerationService,
         platformUtilsService: PlatformUtilsService, policyService: PolicyService,
-        private apiService: ApiService, private toasterService: ToasterService) {
+        private apiService: ApiService, private toasterService: ToasterService, private logService: LogService) {
         super(i18nService, cryptoService, messagingService, userService, passwordGenerationService,
             platformUtilsService, policyService);
     }
@@ -85,6 +86,8 @@ export class EmergencyAccessTakeoverComponent extends ChangePasswordComponent im
 
         try {
             this.onDone.emit();
-        } catch { }
+        } catch (e) {
+            this.logService.error(e);
+        }
     }
 }

src/app/settings/emergency-access-view.component.html

@@ -42,6 +42,10 @@
             </tbody>
         </table>
     </ng-container>
+    <ng-container *ngIf="!loaded">
+        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
+    </ng-container>
 </div>
 <ng-template #cipherAddEdit></ng-template>
 <ng-template #attachments></ng-template>