PM-5086 - WIP start on registration start component

apps/web/src/app/oss-routing.module.ts

@@ -8,6 +8,7 @@ import {
   tdeDecryptionRequiredGuard,
   UnauthGuard,
 } from "@bitwarden/angular/auth/guards";
+import { RegistrationStartComponent } from "@bitwarden/auth/angular";
 
 import { flagEnabled, Flags } from "../utils/flags";
 
@@ -17,6 +18,7 @@ import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
 import { SponsoredFamiliesComponent } from "./admin-console/settings/sponsored-families.component";
 import { AcceptOrganizationComponent } from "./auth/accept-organization.component";
+import { AnonLayoutWrapperComponent } from "./auth/anon-layout-wrapper.component";
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
@@ -290,6 +292,18 @@ const routes: Routes = [
       { path: "setup/families-for-enterprise", component: FamiliesForEnterpriseSetupComponent },
     ],
   },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
+      {
+        path: "start-registration",
+        component: RegistrationStartComponent,
+        canActivate: [],
+        data: { pageTitle: "createAccount" },
+      },
+    ],
+  },
   {
     path: "organizations",
     loadChildren: () =>

libs/auth/src/angular/index.ts

@@ -13,3 +13,6 @@ 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";

libs/auth/src/angular/registration/registration-start/registration-start.component.html

@@ -0,0 +1,38 @@
+<div class="tw-max-w-[28rem] tw-min-w-[28rem]">
+  <form [formGroup]="formGroup" (ngSubmit)="submit()">
+    <bit-form-field>
+      <bit-label>{{ "emailAddress" | i18n }}</bit-label>
+      <input
+        id="register-start_form_input_email"
+        bitInput
+        type="email"
+        formControlName="email"
+        [attr.readonly]="queryParamFromOrgInvite ? true : null"
+      />
+    </bit-form-field>
+
+    <bit-form-field>
+      <bit-label>{{ "name" | i18n }}</bit-label>
+      <input id="register-start_form_input_name" bitInput type="text" formControlName="name" />
+    </bit-form-field>
+
+    <bit-form-control>
+      <input
+        id="register-start-form-input-accept-policies"
+        type="checkbox"
+        bitCheckbox
+        formControlName="acceptPolicies"
+      />
+      <bit-label for="register-start-form-input-accept-policies">
+        {{ "acceptPolicies" | i18n }}<br />
+        <a href="https://bitwarden.com/terms/" target="_blank" rel="noreferrer">{{
+          "termsOfService" | i18n
+        }}</a
+        >,
+        <a href="https://bitwarden.com/privacy/" target="_blank" rel="noreferrer">{{
+          "privacyPolicy" | i18n
+        }}</a>
+      </bit-label>
+    </bit-form-control>
+  </form>
+</div>

libs/auth/src/angular/registration/registration-start/registration-start.component.ts

@@ -0,0 +1,87 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  ReactiveFormsModule,
+  ValidatorFn,
+  Validators,
+} from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ButtonModule, CheckboxModule, FormFieldModule } from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "auth-registration-start",
+  templateUrl: "./registration-start.component.html",
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    JslibModule,
+    FormFieldModule,
+    CheckboxModule,
+    ButtonModule,
+  ],
+})
+export class RegistrationStartComponent implements OnInit, OnDestroy {
+  queryParamFromOrgInvite: boolean = false;
+
+  showTerms = true;
+
+  formGroup = this.formBuilder.group({
+    email: ["", [Validators.required, Validators.email]],
+    name: [""],
+    acceptPolicies: [false, [this.acceptPoliciesValidator()]],
+  });
+
+  get email(): FormControl {
+    return this.formGroup.get("email") as FormControl;
+  }
+
+  get name(): FormControl {
+    return this.formGroup.get("name") as FormControl;
+  }
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private platformUtilsService: PlatformUtilsService,
+  ) {
+    this.showTerms = !platformUtilsService.isSelfHost();
+  }
+
+  async ngOnInit() {
+    this.listenForQueryParamChanges();
+  }
+
+  submit = async () => {};
+
+  private listenForQueryParamChanges() {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((qParams) => {
+      if (qParams.email != null && qParams.email.indexOf("@") > -1) {
+        this.email?.setValue(qParams.email);
+        this.queryParamFromOrgInvite = qParams.fromOrgInvite === "true";
+      }
+    });
+  }
+
+  private acceptPoliciesValidator(): ValidatorFn {
+    return (control: AbstractControl) => {
+      const ctrlValue = control.value;
+
+      return !ctrlValue && this.showTerms ? { required: true } : null;
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}