Feature/use hcaptcha if bot (#1968)

* Add captcha to login page

* Include log service in DI providers for api-action directive

* Add captcha to register page

* update jslib

src/background/main.background.ts

@@ -42,6 +42,7 @@ import {
     EnvironmentService as EnvironmentServiceAbstraction,
     FolderService as FolderServiceAbstraction,
     I18nService as I18nServiceAbstraction,
+    LogService as LogServiceAbstraction,
     MessagingService as MessagingServiceAbstraction,
     PasswordGenerationService as PasswordGenerationServiceAbstraction,
     PlatformUtilsService as PlatformUtilsServiceAbstraction,
@@ -95,7 +96,7 @@ export default class MainBackground {
     i18nService: I18nServiceAbstraction;
     platformUtilsService: PlatformUtilsServiceAbstraction;
     constantsService: ConstantsService;
-    consoleLogService: ConsoleLogService;
+    logService: LogServiceAbstraction;
     cryptoService: CryptoServiceAbstraction;
     cryptoFunctionService: CryptoFunctionServiceAbstraction;
     tokenService: TokenServiceAbstraction;
@@ -172,23 +173,23 @@ export default class MainBackground {
         this.secureStorageService = new BrowserStorageService();
         this.i18nService = new I18nService(BrowserApi.getUILanguage(window));
         this.cryptoFunctionService = new WebCryptoFunctionService(window, this.platformUtilsService);
-        this.consoleLogService = new ConsoleLogService(false);
+        this.logService = new ConsoleLogService(false);
         this.cryptoService = new BrowserCryptoService(this.storageService, this.secureStorageService,
-            this.cryptoFunctionService, this.platformUtilsService, this.consoleLogService);
+            this.cryptoFunctionService, this.platformUtilsService, this.logService);
         this.tokenService = new TokenService(this.storageService);
         this.appIdService = new AppIdService(this.storageService);
         this.apiService = new ApiService(this.tokenService, this.platformUtilsService,
             (expired: boolean) => this.logout(expired));
         this.userService = new UserService(this.tokenService, this.storageService);
         this.settingsService = new SettingsService(this.userService, this.storageService);
-        this.fileUploadService = new FileUploadService(this.consoleLogService, this.apiService);
+        this.fileUploadService = new FileUploadService(this.logService, this.apiService);
         this.cipherService = new CipherService(this.cryptoService, this.userService, this.settingsService,
             this.apiService, this.fileUploadService, this.storageService, this.i18nService, () => this.searchService);
         this.folderService = new FolderService(this.cryptoService, this.userService, this.apiService,
             this.storageService, this.i18nService, this.cipherService);
         this.collectionService = new CollectionService(this.cryptoService, this.userService, this.storageService,
             this.i18nService);
-        this.searchService = new SearchService(this.cipherService, this.consoleLogService, this.i18nService);
+        this.searchService = new SearchService(this.cipherService, this.logService, this.i18nService);
         this.sendService = new SendService(this.cryptoService, this.userService, this.apiService, this.fileUploadService,
             this.storageService, this.i18nService, this.cryptoFunctionService);
         this.stateService = new StateService();
@@ -223,7 +224,7 @@ export default class MainBackground {
         this.exportService = new ExportService(this.folderService, this.cipherService, this.apiService,
             this.cryptoService);
         this.notificationsService = new NotificationsService(this.userService, this.syncService, this.appIdService,
-            this.apiService, this.vaultTimeoutService, () => this.logout(true), this.consoleLogService);
+            this.apiService, this.vaultTimeoutService, () => this.logout(true), this.logService);
         this.environmentService = new EnvironmentService(this.apiService, this.storageService,
             this.notificationsService);
         this.popupUtilsService = new PopupUtilsService(this.platformUtilsService);
@@ -269,7 +270,7 @@ export default class MainBackground {
                     const message = Object.assign({}, { command: subscriber }, arg);
                     that.runtimeBackground.processMessage(message, that, null);
                 }
-            }(), this.vaultTimeoutService, this.consoleLogService);
+            }(), this.vaultTimeoutService, this.logService);
     }
 
     async bootstrap() {

src/popup/accounts/login.component.html

@@ -35,6 +35,9 @@
                         </a>
                     </div>
                 </div>
+                <div class="box-content-row" [hidden]="!showCaptcha()">
+                    <iframe id="hcaptcha_iframe" height="80"></iframe>
+                </div>
             </div>
         </div>
         <p class="text-center">

src/popup/accounts/register.component.html

@@ -80,9 +80,11 @@
                 {{'masterPassHintDesc' | i18n}}
             </div>
         </div>
+        <div [hidden]="!showCaptcha()"><iframe id="hcaptcha_iframe" height="80"></iframe></div>
         <div class="box last" *ngIf="showTerms">
             <div class="box-content">
-                <div class="box-content-row box-content-row-checkbox box-content-row-checkbox-left" appBoxRow>
+                <div class="box-content-row box-content-row-checkbox box-content-row-checkbox-left box-content-row-word-break"
+                    appBoxRow>
                     <input type="checkbox" id="acceptPolicies" [(ngModel)]="acceptPolicies" name="AcceptPolicies">
                     <label for="acceptPolicies">
                         {{'acceptPolicies' | i18n}}<br>

src/popup/accounts/register.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 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 { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
@@ -19,8 +20,9 @@ export class RegisterComponent extends BaseRegisterComponent {
     constructor(authService: AuthService, router: Router,
         i18nService: I18nService, cryptoService: CryptoService,
         apiService: ApiService, stateService: StateService,
-        platformUtilsService: PlatformUtilsService, passwordGenerationService: PasswordGenerationService) {
+        platformUtilsService: PlatformUtilsService, passwordGenerationService: PasswordGenerationService,
+        environmentService: EnvironmentService) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
-            passwordGenerationService);
+            passwordGenerationService, environmentService);
     }
 }

src/popup/scss/box.scss

@@ -283,6 +283,10 @@
         display: flex;
         align-items: center;
         word-break: break-all;
+
+        &.box-content-row-word-break {
+            word-break: normal;
+        }
     }
 
     &.box-content-row-multi {

src/popup/scss/misc.scss

@@ -189,6 +189,12 @@ p.lead {
     }
 }
 
+#hcaptcha_iframe {
+    width: 100%;
+    border: none;
+    transition: height 0.25s linear;
+}
+
 body.linux-webauthn {
     width: 485px !important;
     #web-authn-frame {

src/popup/services/services.module.ts

@@ -31,6 +31,7 @@ import { ExportService } from 'jslib-common/abstractions/export.service';
 import { FileUploadService } from 'jslib-common/abstractions/fileUpload.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 { NotificationsService } from 'jslib-common/abstractions/notifications.service';
 import { PasswordGenerationService } from 'jslib-common/abstractions/passwordGeneration.service';
@@ -139,6 +140,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
         },
         { provide: FolderService, useFactory: getBgService<FolderService>('folderService'), deps: [] },
         { provide: CollectionService, useFactory: getBgService<CollectionService>('collectionService'), deps: [] },
+        { provide: LogService, useFactory: getBgService<ConsoleLogService>('logService'), deps: [] },
         { provide: EnvironmentService, useFactory: getBgService<EnvironmentService>('environmentService'), deps: [] },
         { provide: TotpService, useFactory: getBgService<TotpService>('totpService'), deps: [] },
         { provide: TokenService, useFactory: getBgService<TokenService>('tokenService'), deps: [] },