From c863d68057ce466f153ae9c0f0a698d46a2669a2 Mon Sep 17 00:00:00 2001
From: Matt Gibson <mgibson@bitwarden.com>
Date: Fri, 23 Jul 2021 13:48:10 -0500
Subject: [PATCH] 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
---
 jslib                                    | 2 +-
 src/app/accounts/login.component.html    | 5 ++++-
 src/app/accounts/login.component.ts      | 8 ++++++++
 src/app/accounts/register.component.html | 3 +++
 src/app/accounts/register.component.ts   | 8 ++++++--
 src/scss/misc.scss                       | 6 ++++++
 src/scss/pages.scss                      | 1 +
 7 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/jslib b/jslib
index 58be5796b0..c77441b353 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 58be5796b0c2b19aacf52d4a1c179aeb80924443
+Subproject commit c77441b35348c821af7fd6261b6dc72732d5ebad
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 2231b5e755..1a9516e384 100644
--- a/src/app/accounts/login.component.html
+++ b/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>
         
diff --git a/src/app/accounts/login.component.ts b/src/app/accounts/login.component.ts
index 7246f3c258..5367a9f3be 100644
--- a/src/app/accounts/login.component.ts
+++ b/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');
+        }
+    }
 }
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index b43e4dbe47..54eafb6447 100644
--- a/src/app/accounts/register.component.html
+++ b/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}}
diff --git a/src/app/accounts/register.component.ts b/src/app/accounts/register.component.ts
index 3805acabd2..516f07a215 100644
--- a/src/app/accounts/register.component.ts
+++ b/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() {
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 01f5da9027..b3f94ade31 100644
--- a/src/scss/misc.scss
+++ b/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;
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index 89ace6f760..bec20b258e 100644
--- a/src/scss/pages.scss
+++ b/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