[PS-526] Allow loading accessibility cookie on desktop (#2709)

* add accessibility cookie page

* linting

* add accessibility button to captcha

* add message descriptions and reactive forms

* prettier

apps/desktop/src/app/accounts/accessibility-cookie.component.html

@@ -0,0 +1,33 @@
+<form id="accessibility-cookie-page" #form [formGroup]="accessibilityForm" (ngSubmit)="submit()">
+  <div class="content">
+    <h1>{{ "loadAccessibilityCookie" | i18n }}</h1>
+    <p>
+      {{ "registerAccessibilityUser" | i18n }}
+      <a (click)="registerhCaptcha()">hcaptcha.com</a>.
+      {{ "copyPasteLink" | i18n }}
+    </p>
+    <div class="box last">
+      <div class="box-content">
+        <div class="box-content-row" appBoxRow>
+          <label for="link">{{ "hCaptchaUrl" | i18n }}</label>
+          <input
+            id="link"
+            type="text"
+            name="Link"
+            formControlName="link"
+            placeholder="{{ 'ex' | i18n }} https://accounts.hcaptcha.com/verify_email"
+            appAutofocus
+            appInputVerbatim
+          />
+        </div>
+      </div>
+      <div class="box-footer">{{ "enterhCaptchaUrl" | i18n }}</div>
+    </div>
+    <div class="buttons">
+      <button type="submit" class="btn primary block" [disabled]="!accessibilityForm.valid">
+        {{ "submit" | i18n }}
+      </button>
+      <button type="button" routerLink="/login" class="btn block">{{ "done" | i18n }}</button>
+    </div>
+  </div>
+</form>

apps/desktop/src/app/accounts/accessibility-cookie.component.ts

@@ -0,0 +1,97 @@
+import { Component, NgZone } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { Router } from "@angular/router";
+
+import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
+import { EnvironmentService } from "jslib-common/abstractions/environment.service";
+import { I18nService } from "jslib-common/abstractions/i18n.service";
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+import { Utils } from "jslib-common/misc/utils";
+import { getCookie } from "jslib-electron/utils";
+
+const BroadcasterSubscriptionId = "AccessibilityCookieComponent";
+
+@Component({
+  selector: "app-accessibility-cookie",
+  templateUrl: "accessibility-cookie.component.html",
+})
+export class AccessibilityCookieComponent {
+  listenForCookie = false;
+  hCaptchaWindow: Window;
+
+  accessibilityForm = new FormGroup({
+    link: new FormControl("", Validators.required),
+  });
+
+  constructor(
+    protected router: Router,
+    protected platformUtilsService: PlatformUtilsService,
+    protected environmentService: EnvironmentService,
+    protected i18nService: I18nService,
+    private broadcasterService: BroadcasterService,
+    protected ngZone: NgZone
+  ) {}
+
+  async ngOnInit() {
+    this.broadcasterService.subscribe(BroadcasterSubscriptionId, async (message: any) => {
+      this.ngZone.run(() => {
+        switch (message.command) {
+          case "windowIsFocused":
+            if (this.listenForCookie) {
+              this.listenForCookie = false;
+              this.checkForCookie();
+            }
+            break;
+          default:
+        }
+      });
+    });
+  }
+
+  registerhCaptcha() {
+    this.platformUtilsService.launchUri("https://www.hcaptcha.com/accessibility");
+  }
+
+  async checkForCookie() {
+    this.hCaptchaWindow.close();
+    const [cookie] = await getCookie("https://www.hcaptcha.com/", "hc_accessibility");
+    if (cookie) {
+      this.onCookieSavedSuccess();
+    } else {
+      this.onCookieSavedFailure();
+    }
+  }
+
+  onCookieSavedSuccess() {
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("accessibilityCookieSaved")
+    );
+  }
+
+  onCookieSavedFailure() {
+    this.platformUtilsService.showToast(
+      "error",
+      null,
+      this.i18nService.t("noAccessibilityCookieSaved")
+    );
+  }
+
+  async submit() {
+    if (Utils.getDomain(this.accessibilityForm.value.link) !== "accounts.hcaptcha.com") {
+      this.platformUtilsService.showToast(
+        "error",
+        this.i18nService.t("errorOccurred"),
+        this.i18nService.t("invalidUrl")
+      );
+      return;
+    }
+    this.listenForCookie = true;
+    this.hCaptchaWindow = window.open(this.accessibilityForm.value.link);
+  }
+
+  ngOnDestroy() {
+    this.broadcasterService.unsubscribe(BroadcasterSubscriptionId);
+  }
+}

apps/desktop/src/app/accounts/login.component.html

@@ -70,6 +70,10 @@
         <div class="box-content">
           <div class="box-content-row">
             <iframe id="hcaptcha_iframe" height="80"></iframe>
+            <button class="btn block" type="button" routerLink="/accessibility-cookie">
+              <i class="bwi bwi-universal-access" aria-hidden="true"></i>
+              {{ "loadAccessibilityCookie" | i18n }}
+            </button>
           </div>
         </div>
       </div>

apps/desktop/src/app/accounts/register.component.html

@@ -109,8 +109,16 @@
           <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 class="box last" [hidden]="!showCaptcha()">
+          <div class="box-content">
+            <div class="box-content-row">
+              <iframe id="hcaptcha_iframe" height="80"></iframe>
+              <button class="btn block" type="button" routerLink="/accessibility-cookie">
+                <i class="bwi bwi-universal-access" aria-hidden="true"></i>
+                {{ "loadAccessibilityCookie" | i18n }}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
       <div class="box-footer">

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

@@ -104,6 +104,10 @@
       <div class="box-content">
         <div class="box-content-row">
           <iframe id="hcaptcha_iframe" height="80"></iframe>
+          <button class="btn block" type="button" routerLink="/accessibility-cookie">
+            <i class="bwi bwi-universal-access" aria-hidden="true"></i>
+            {{ "loadAccessibilityCookie" | i18n }}
+          </button>
         </div>
       </div>
     </div>

apps/desktop/src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from "@angular/router";
 import { AuthGuard } from "jslib-angular/guards/auth.guard";
 import { LockGuard } from "jslib-angular/guards/lock.guard";
 
+import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component";
 import { HintComponent } from "./accounts/hint.component";
 import { LockComponent } from "./accounts/lock.component";
 import { LoginComponent } from "./accounts/login.component";
@@ -36,6 +37,7 @@ const routes: Routes = [
     component: VaultComponent,
     canActivate: [AuthGuard],
   },
+  { path: "accessibility-cookie", component: AccessibilityCookieComponent },
   { path: "hint", component: HintComponent },
   { path: "set-password", component: SetPasswordComponent },
   { path: "sso", component: SsoComponent },

apps/desktop/src/app/app.module.ts

@@ -56,6 +56,7 @@ import localeZhCn from "@angular/common/locales/zh-Hans";
 import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";
 
+import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component";
 import { EnvironmentComponent } from "./accounts/environment.component";
 import { HintComponent } from "./accounts/hint.component";
 import { LockComponent } from "./accounts/lock.component";
@@ -156,6 +157,7 @@ registerLocaleData(localeZhTw, "zh-TW");
 @NgModule({
   imports: [SharedModule, AppRoutingModule, VaultFilterModule],
   declarations: [
+    AccessibilityCookieComponent,
     AccountSwitcherComponent,
     AddEditComponent,
     AddEditCustomFieldsComponent,

apps/desktop/src/locales/en/messages.json

@@ -1273,6 +1273,40 @@
   "fileFormat": {
     "message": "File Format"
   },
+  "hCaptchaUrl": {
+    "message": "hCaptcha Url",
+    "description": "hCaptcha is the name of a website, should not be translated"
+  },
+  "loadAccessibilityCookie": {
+    "message": "Load Accessibility Cookie"
+  },
+  "registerAccessibilityUser": {
+    "message": "Register as an accessibility user at",
+    "description": "ex. Register as an accessibility user at hcaptcha.com"
+  },
+  "copyPasteLink": {
+    "message": "Copy and paste the link sent to your email below"
+  },
+  "enterhCaptchaUrl": {
+    "message": "Enter URL to load accessibility cookie for hCaptcha",
+    "description": "hCaptcha is the name of a website, should not be translated"
+  },
+  "hCaptchaUrlRequired": {
+    "message": "hCaptcha Url is required",
+    "description": "hCaptcha is the name of a website, should not be translated"
+  },
+  "invalidUrl": {
+    "message": "Invalid Url"
+  },
+  "done": {
+    "message": "Done"
+  },
+  "accessibilityCookieSaved": {
+    "message": "Accessibility cookie saved!"
+  },
+  "noAccessibilityCookieSaved": {
+    "message": "No accessibility cookie saved"
+  },
   "warning": {
     "message": "WARNING",
     "description": "WARNING (should stay in capitalized letters if the language permits)"

apps/desktop/src/scss/pages.scss

@@ -25,6 +25,7 @@
   }
 }
 
+#accessibility-cookie-page,
 #register-page,
 #hint-page,
 #two-factor-page,
@@ -45,6 +46,7 @@
   }
 }
 
+#accessibility-cookie-page,
 #login-page,
 #register-page,
 #hint-page,