Feature/use hcaptcha if bot (#1000)

* Add captcha to login component

* Add catpcha to login page

* Update content width if captcha is visible

* extend submit to handle widening if captcha is required

* Improve login styling

* Add Captcha to registration page

* Remove padding from captcha div

The padding was messing up image selection of captcha items

* Update jslib

* PR review

* update jslib

src/app/accounts/login.component.html

@@ -1,5 +1,5 @@
 <form id="login-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise" attr.aria-hidden="{{showingModal}}">
-    <div class="content">
+    <div id="content" class="content">
         <img class="logo-image" alt="Bitwarden">
         <p class="lead">{{'loginOrCreateNewAccount' | i18n}}</p>
         <div class="box last">
@@ -22,6 +22,9 @@
                         </a>
                     </div>
                 </div>
+                <div class="box-content-row" [hidden]="!showCaptcha()">
+                    <iframe id="hcaptcha_iframe" height="80"></iframe>
+                </div>
             </div>
         </div>
         

src/app/accounts/login.component.ts

@@ -106,4 +106,12 @@ export class LoginComponent extends BaseLoginComponent implements OnDestroy {
     onWindowHidden() {
         this.showPassword = false;
     }
+
+    async submit() {
+        await super.submit();
+        if (this.captchaSiteKey) {
+            const content = document.getElementById('content') as HTMLDivElement;
+            content.setAttribute('style', 'width:335px');
+        }
+    }
 }

src/app/accounts/register.component.html

@@ -61,6 +61,9 @@
                     <label for="hint">{{'masterPassHint' | i18n}}</label>
                     <input id="hint" type="text" name="Hint" [(ngModel)]="hint">
                 </div>
+                <div class="box-content-row" [hidden]="!showCaptcha()">
+                    <iframe id="hcaptcha_iframe" height="80"></iframe>
+                </div>
             </div>
             <div class="box-footer">
                 {{'masterPassHintDesc' | i18n}}

src/app/accounts/register.component.ts

@@ -9,6 +9,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';
@@ -29,9 +30,10 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
         i18nService: I18nService, cryptoService: CryptoService,
         apiService: ApiService, stateService: StateService,
         platformUtilsService: PlatformUtilsService, passwordGenerationService: PasswordGenerationService,
-        private broadcasterService: BroadcasterService, private ngZone: NgZone) {
+        environmentService: EnvironmentService, private broadcasterService: BroadcasterService,
+        private ngZone: NgZone) {
         super(authService, router, i18nService, cryptoService, apiService, stateService, platformUtilsService,
-            passwordGenerationService);
+            passwordGenerationService, environmentService);
     }
 
     async ngOnInit() {
@@ -45,6 +47,8 @@ export class RegisterComponent extends BaseRegisterComponent implements OnInit,
                 }
             });
         });
+
+        super.ngOnInit();
     }
 
     ngOnDestroy() {

src/scss/misc.scss

@@ -225,6 +225,12 @@ p.lead {
     }
 }
 
+#hcaptcha_iframe {
+    width: 100%;
+    border: none;
+    transition: height 0.25s linear;
+}
+
 form, .form {
     .form-group {
         margin-bottom: 10px;

src/scss/pages.scss

@@ -42,6 +42,7 @@
 #login-page, #register-page, #hint-page, #two-factor-page, #lock-page {
     .content {
         width: 300px;
+        transition: width 0.25s linear;
 
         p {
             text-align: center