From c1b559f2b051cec2919e30d23d85d657a4668b38 Mon Sep 17 00:00:00 2001 From: Jake Fink Date: Thu, 9 Jun 2022 08:14:31 -0400 Subject: [PATCH] [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 --- .../accessibility-cookie.component.html | 33 +++++++ .../accessibility-cookie.component.ts | 97 +++++++++++++++++++ .../src/app/accounts/login.component.html | 4 + .../src/app/accounts/register.component.html | 12 ++- .../app/accounts/two-factor.component.html | 4 + apps/desktop/src/app/app-routing.module.ts | 2 + apps/desktop/src/app/app.module.ts | 2 + apps/desktop/src/locales/en/messages.json | 34 +++++++ apps/desktop/src/scss/pages.scss | 2 + 9 files changed, 188 insertions(+), 2 deletions(-) create mode 100644 apps/desktop/src/app/accounts/accessibility-cookie.component.html create mode 100644 apps/desktop/src/app/accounts/accessibility-cookie.component.ts diff --git a/apps/desktop/src/app/accounts/accessibility-cookie.component.html b/apps/desktop/src/app/accounts/accessibility-cookie.component.html new file mode 100644 index 0000000000..fd52508eac --- /dev/null +++ b/apps/desktop/src/app/accounts/accessibility-cookie.component.html @@ -0,0 +1,33 @@ +
+
+

{{ "loadAccessibilityCookie" | i18n }}

+

+ {{ "registerAccessibilityUser" | i18n }} + hcaptcha.com. + {{ "copyPasteLink" | i18n }} +

+
+
+
+ + +
+
+
{{ "enterhCaptchaUrl" | i18n }}
+
+
+ + +
+
+
diff --git a/apps/desktop/src/app/accounts/accessibility-cookie.component.ts b/apps/desktop/src/app/accounts/accessibility-cookie.component.ts new file mode 100644 index 0000000000..968ed6702c --- /dev/null +++ b/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); + } +} diff --git a/apps/desktop/src/app/accounts/login.component.html b/apps/desktop/src/app/accounts/login.component.html index 4ec1307f54..1ce8f07e6b 100644 --- a/apps/desktop/src/app/accounts/login.component.html +++ b/apps/desktop/src/app/accounts/login.component.html @@ -70,6 +70,10 @@
+
diff --git a/apps/desktop/src/app/accounts/register.component.html b/apps/desktop/src/app/accounts/register.component.html index 3de6aac86c..395c1bba62 100644 --- a/apps/desktop/src/app/accounts/register.component.html +++ b/apps/desktop/src/app/accounts/register.component.html @@ -109,8 +109,16 @@ -
- +
+
+
+ + +
+
diff --git a/apps/desktop/src/app/accounts/two-factor.component.html b/apps/desktop/src/app/accounts/two-factor.component.html index e18a1dd0d2..dc67e4e0b4 100644 --- a/apps/desktop/src/app/accounts/two-factor.component.html +++ b/apps/desktop/src/app/accounts/two-factor.component.html @@ -104,6 +104,10 @@
+
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts index 38592bf509..1d75d2ea1b 100644 --- a/apps/desktop/src/app/app-routing.module.ts +++ b/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 }, diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts index 9e88eec960..23e44d85a2 100644 --- a/apps/desktop/src/app/app.module.ts +++ b/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, diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 590e3743f2..bf236c599c 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/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)" diff --git a/apps/desktop/src/scss/pages.scss b/apps/desktop/src/scss/pages.scss index cb91290e44..87c5e66cc5 100644 --- a/apps/desktop/src/scss/pages.scss +++ b/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,