From 9c0aa9e8d4519efbd5ec199ad38b5ec84b358d15 Mon Sep 17 00:00:00 2001
From: Robyn MacCallum <robyntmaccallum@gmail.com>
Date: Mon, 12 Dec 2022 15:33:41 -0500
Subject: [PATCH] [SG-664] Add org name length validation to inputs (#4111)

* Add maxLength validator to org name field

* Disable next button if name has any error

* Only check org name value changes

* Add name length validator to normal create org flow
---
 .../trial-initiation/trial-initiation.component.html      | 2 +-
 .../trial-initiation/trial-initiation.component.ts        | 8 +++++++-
 apps/web/src/app/settings/organization-plans.component.ts | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html b/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
index 2b7f07254b6..86419550d94 100644
--- a/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
+++ b/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.html
@@ -62,7 +62,7 @@
               <button
                 bitButton
                 buttonType="primary"
-                [disabled]="orgInfoFormGroup.get('name').hasError('required')"
+                [disabled]="orgInfoFormGroup.get('name').invalid"
                 cdkStepperNext
               >
                 Next
diff --git a/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts b/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts
index 1f9b08987d1..f675fa68161 100644
--- a/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts
+++ b/apps/web/src/app/accounts/trial-initiation/trial-initiation.component.ts
@@ -42,7 +42,7 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
   @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent;
 
   orgInfoFormGroup = this.formBuilder.group({
-    name: ["", [Validators.required]],
+    name: ["", { validators: [Validators.required, Validators.maxLength(50)], updateOn: "change" }],
     email: [""],
   });
 
@@ -148,6 +148,12 @@ export class TrialInitiationComponent implements OnInit, OnDestroy {
           this.enforcedPolicyOptions = enforcedPasswordPolicyOptions;
         });
     }
+
+    this.orgInfoFormGroup.controls.name.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.orgInfoFormGroup.controls.name.markAsTouched();
+      });
   }
 
   ngOnDestroy(): void {
diff --git a/apps/web/src/app/settings/organization-plans.component.ts b/apps/web/src/app/settings/organization-plans.component.ts
index ad1c01d235e..e2dfd73d972 100644
--- a/apps/web/src/app/settings/organization-plans.component.ts
+++ b/apps/web/src/app/settings/organization-plans.component.ts
@@ -121,7 +121,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
     }
 
     if (this.createOrganization) {
-      this.formGroup.controls.name.addValidators(Validators.required);
+      this.formGroup.controls.name.addValidators([Validators.required, Validators.maxLength(50)]);
       this.formGroup.controls.billingEmail.addValidators(Validators.required);
     }