From 89d7e96b25594e51a7e8db6b227f06aeab79c543 Mon Sep 17 00:00:00 2001 From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com> Date: Fri, 24 May 2024 15:43:29 -0400 Subject: [PATCH] Auth/PM-5086 - Email Verification - Registration Start + Environment Selector components (#9342) * PM-5086 - WIP start on registration start component * PM-5086 - more WIP progress on registration start comp * PM-5086 - Setup secondary component * PM-5086 - (1) Validation working (2) States implemented (3) 2nd state for check email mostly completed except for correct icon * PM-5086 - Registration Start - check email state - update icon to be correct from figma. * PM-5086 - Refactor self hosted conditional + actually hide the checkbox if it is self hosted. * PM-5086 - WIP good progress on getting browser & desktop creating account on logic working. * PM-5086 - Accessibility pass + WIP on region selector * PM-5086 - Accessibility pass with Danielle * PM-5086 - Migrate env selector logic to own component. * PM-5086 - Update AnonLayoutWrapperComp import * PM-5086 - Remove unncessary focus. * PM-5086 - WIP first draft of registration env selector; name might change to differentiate it from existing env selector. * PM-5086 - Rename env selector to be more clear and use registration-env-selector instead. * PM-5086 - (1) Export registration env selector (2) Change comp name not just file name. * PM-5086 - Create new registration page stub * PM-5086 - Fix build issue where select module was missing from new registration env selector. * PM-5086 - Registration --> registration start. * PM-5086 - Add missing translation from registration-start-secondary-component to desktop & browser. * PM-5086 - Add missing translations * PM-5086 - Registration Env Selector - forms require form groups. duh. * PM-5086 - Registration Env Selector - working now. * PM-5086 - Registration Start desktop mostly working with env selector issues. * PM-5086 - Registration start - get self hosted env dialog to close on close click. Backdrop click doesn't work but escape does still. * PM-5086 - TODO: figure out if there is a better way to get the dialog to close. * PM-5086 - Registration start - get goBack working to properly re-show env selector * PM-5086 - Self Hosted Env Comp - re-emit current env on close so that select based env selectors can reset * PM-5086 - RegistrationEnvSelector - Refactor init logic to also listen for env updates so that the user's choices on the self hosted settings dialog get communicated to this comp * PM-5086 - Registration Start Desktop - Don't allow users to close dialog via escape as we need them to either close or save to get the env service to set the env correctly. * PM-5086 - Browser Registration Start Page stub * PM-5086 - Registration Start comp - storybook added * PM-5086 - Remove links to start-registration as we aren't ready to implement that yet. * PM-5086 - Revert environment comp changes. * PM-5086 - Delete registration start pages. * PM-5086 - Test removing PreloadedEnglishI18nModule to see if it fixes test failures * PM-5086 - Try to resolve issues w/ importing PreloadedEnglishI18nModule into RegistrationStartComponent storybook stories file. * PM-5086 - Allow translations to be imported for all libs. * PM-5086 - Remove comment from JSON * PM-5086 - TODO cleanup * PM-5086 - Per PR feedback, fix display issues by using correct classes. * PM-5086 - Fix SVG per PR feedback * PM-5086 - Remove unnecessary methods * PM-5086 - RegistrationEnvSelectorComponent - per PR feedback, properly type null in form group --- apps/browser/src/_locales/en/messages.json | 24 +++ apps/desktop/src/locales/en/messages.json | 24 +++ apps/web/src/locales/en/messages.json | 21 +++ .../icons/registration-check-email.icon.ts | 12 ++ libs/auth/src/angular/index.ts | 5 + .../registration-env-selector.component.html | 16 ++ .../registration-env-selector.component.ts | 101 ++++++++++++ ...egistration-start-secondary.component.html | 3 + .../registration-start-secondary.component.ts | 15 ++ .../registration-start.component.html | 83 ++++++++++ .../registration-start.component.ts | 146 ++++++++++++++++++ .../registration-start/registration-start.mdx | 28 ++++ .../registration-start.stories.ts | 74 +++++++++ libs/shared/tsconfig.libs.json | 1 + 14 files changed, 553 insertions(+) create mode 100644 libs/auth/src/angular/icons/registration-check-email.icon.ts create mode 100644 libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html create mode 100644 libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start-secondary.component.html create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start-secondary.component.ts create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start.component.html create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start.component.ts create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start.mdx create mode 100644 libs/auth/src/angular/registration/registration-start/registration-start.stories.ts diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 2c6741a967..bb672ea61d 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -1606,6 +1606,9 @@ "restoredItem": { "message": "Item restored" }, + "alreadyHaveAccount": { + "message": "Already have an account?" + }, "vaultTimeoutLogOutConfirmation": { "message": "Logging out will remove all access to your vault and requires online authentication after the timeout period. Are you sure you want to use this setting?" }, @@ -2541,6 +2544,27 @@ "ssoIdentifierRequired": { "message": "Organization SSO identifier is required." }, + "creatingAccountOn": { + "message": "Creating account on" + }, + "checkYourEmail": { + "message": "Check your email" + }, + "followTheLinkInTheEmailSentTo": { + "message": "Follow the link in the email sent to" + }, + "andContinueCreatingYourAccount": { + "message": "and continue creating your account." + }, + "noEmail": { + "message": "No email?" + }, + "goBack": { + "message": "Go back" + }, + "toEditYourEmailAddress": { + "message": "to edit your email address." + }, "eu": { "message": "EU", "description": "European Union" diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 017b9d10c4..dde1763378 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -2050,6 +2050,9 @@ "switchAccount": { "message": "Switch account" }, + "alreadyHaveAccount": { + "message": "Already have an account?" + }, "options": { "message": "Options" }, @@ -2390,6 +2393,27 @@ "logInRequested": { "message": "Log in requested" }, + "creatingAccountOn": { + "message": "Creating account on" + }, + "checkYourEmail": { + "message": "Check your email" + }, + "followTheLinkInTheEmailSentTo": { + "message": "Follow the link in the email sent to" + }, + "andContinueCreatingYourAccount": { + "message": "and continue creating your account." + }, + "noEmail": { + "message": "No email?" + }, + "goBack": { + "message": "Go back" + }, + "toEditYourEmailAddress": { + "message": "to edit your email address." + }, "exposedMasterPassword": { "message": "Exposed Master Password" }, diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index c4dbb33ac4..d4d3fc6d81 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -3244,6 +3244,27 @@ "device": { "message": "Device" }, + "creatingAccountOn": { + "message": "Creating account on" + }, + "checkYourEmail": { + "message": "Check your email" + }, + "followTheLinkInTheEmailSentTo": { + "message": "Follow the link in the email sent to" + }, + "andContinueCreatingYourAccount": { + "message": "and continue creating your account." + }, + "noEmail": { + "message": "No email?" + }, + "goBack": { + "message": "Go back" + }, + "toEditYourEmailAddress": { + "message": "to edit your email address." + }, "view": { "message": "View" }, diff --git a/libs/auth/src/angular/icons/registration-check-email.icon.ts b/libs/auth/src/angular/icons/registration-check-email.icon.ts new file mode 100644 index 0000000000..1d173ff585 --- /dev/null +++ b/libs/auth/src/angular/icons/registration-check-email.icon.ts @@ -0,0 +1,12 @@ +import { svgIcon } from "@bitwarden/components"; + +export const RegistrationCheckEmailIcon = svgIcon` +`; diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts index 474ef17d93..eb8fd0416a 100644 --- a/libs/auth/src/angular/index.ts +++ b/libs/auth/src/angular/index.ts @@ -14,3 +14,8 @@ export * from "./password-callout/password-callout.component"; export * from "./user-verification/user-verification-dialog.component"; export * from "./user-verification/user-verification-dialog.types"; export * from "./user-verification/user-verification-form-input.component"; + +// registration +export * from "./registration/registration-start/registration-start.component"; +export * from "./registration/registration-start/registration-start-secondary.component"; +export * from "./registration/registration-env-selector/registration-env-selector.component"; diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html new file mode 100644 index 0000000000..b4dad835ee --- /dev/null +++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.html @@ -0,0 +1,16 @@ +
diff --git a/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts new file mode 100644 index 0000000000..f01873dd3e --- /dev/null +++ b/libs/auth/src/angular/registration/registration-env-selector/registration-env-selector.component.ts @@ -0,0 +1,101 @@ +import { CommonModule } from "@angular/common"; +import { Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core"; +import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; +import { EMPTY, Subject, from, map, of, switchMap, takeUntil, tap } from "rxjs"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { + Environment, + EnvironmentService, + Region, + RegionConfig, +} from "@bitwarden/common/platform/abstractions/environment.service"; +import { FormFieldModule, SelectModule } from "@bitwarden/components"; + +@Component({ + standalone: true, + selector: "auth-registration-env-selector", + templateUrl: "registration-env-selector.component.html", + imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule], +}) +export class RegistrationEnvSelectorComponent implements OnInit, OnDestroy { + @Output() onOpenSelfHostedSettings = new EventEmitter(); + + ServerEnvironmentType = Region; + + formGroup = this.formBuilder.group({ + selectedRegion: [null as RegionConfig | Region.SelfHosted | null, Validators.required], + }); + + get selectedRegion(): FormControl { + return this.formGroup.get("selectedRegion") as FormControl; + } + + availableRegionConfigs: RegionConfig[] = this.environmentService.availableRegions(); + + private destroy$ = new Subject+ {{ "followTheLinkInTheEmailSentTo" | i18n }} + {{ email.value }} + {{ "andContinueCreatingYourAccount" | i18n }} +
+ ++ {{ "noEmail" | i18n }} + + {{ "goBack" | i18n }} + + {{ "toEditYourEmailAddress" | i18n }} +
+