[PM-9113] Trim Whitespace from email in sponsorship form (#9781)

* Removed whitespace from email form when setting up families sponsorship

* Moved sponsorship components to billing folder

* Updated to use existing input stripping directive

* Updated appInputStripSpaces to update both the element and the control value

* Removed the call to Renderer2 as it wasn't needed

apps/web/src/app/billing/settings/sponsored-families.component.html

@@ -47,6 +47,7 @@
               inputmode="email"
               formControlName="sponsorshipEmail"
               [attr.aria-invalid]="sponsorshipEmailControl.invalid"
+              appInputStripSpaces
             />
           </bit-form-field>
         </div>

apps/web/src/app/billing/settings/sponsored-families.component.ts

@@ -14,7 +14,7 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { PlanSponsorshipType } from "@bitwarden/common/billing/enums/";
+import { PlanSponsorshipType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";

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

@@ -29,7 +29,6 @@ import { AcceptFamilySponsorshipComponent } from "./admin-console/organizations/
 import { FamiliesForEnterpriseSetupComponent } from "./admin-console/organizations/sponsorships/families-for-enterprise-setup.component";
 import { VerifyRecoverDeleteProviderComponent } from "./admin-console/providers/verify-recover-delete-provider.component";
 import { CreateOrganizationComponent } from "./admin-console/settings/create-organization.component";
-import { SponsoredFamiliesComponent } from "./admin-console/settings/sponsored-families.component";
 import { deepLinkGuard } from "./auth/guards/deep-link.guard";
 import { HintComponent } from "./auth/hint.component";
 import { LockComponent } from "./auth/lock.component";
@@ -54,6 +53,7 @@ import { UpdatePasswordComponent } from "./auth/update-password.component";
 import { UpdateTempPasswordComponent } from "./auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "./auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "./auth/verify-recover-delete.component";
+import { SponsoredFamiliesComponent } from "./billing/settings/sponsored-families.component";
 import { EnvironmentSelectorComponent } from "./components/environment-selector/environment-selector.component";
 import { DataProperties } from "./core";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";

apps/web/src/app/shared/loose-components.module.ts

@@ -19,8 +19,6 @@ import { UnsecuredWebsitesReportComponent as OrgUnsecuredWebsitesReportComponent
 import { WeakPasswordsReportComponent as OrgWeakPasswordsReportComponent } from "../admin-console/organizations/tools/weak-passwords-report.component";
 import { ProvidersComponent } from "../admin-console/providers/providers.component";
 import { VerifyRecoverDeleteProviderComponent } from "../admin-console/providers/verify-recover-delete-provider.component";
-import { SponsoredFamiliesComponent } from "../admin-console/settings/sponsored-families.component";
-import { SponsoringOrgRowComponent } from "../admin-console/settings/sponsoring-org-row.component";
 import { HintComponent } from "../auth/hint.component";
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
@@ -61,6 +59,8 @@ import { UpdatePasswordComponent } from "../auth/update-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component";
+import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-families.component";
+import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
 import { PaymentMethodWarningsModule } from "../billing/shared";
 import { DynamicAvatarComponent } from "../components/dynamic-avatar.component";
 import { SelectableAvatarComponent } from "../components/selectable-avatar.component";

libs/angular/src/directives/input-strip-spaces.directive.ts

@@ -1,12 +1,17 @@
-import { Directive, ElementRef, HostListener } from "@angular/core";
+import { Directive, ElementRef, HostListener, Self } from "@angular/core";
+import { NgControl } from "@angular/forms";
 
 @Directive({
   selector: "input[appInputStripSpaces]",
 })
 export class InputStripSpacesDirective {
-  constructor(private el: ElementRef<HTMLInputElement>) {}
+  constructor(
+    private el: ElementRef<HTMLInputElement>,
+    @Self() private ngControl: NgControl,
+  ) {}
 
   @HostListener("input") onInput() {
-    this.el.nativeElement.value = this.el.nativeElement.value.replace(/ /g, "");
+    const value = this.el.nativeElement.value.replace(/\s+/g, "");
+    this.ngControl.control.setValue(value);
   }
 }