SG-680 - Domain Add Edit Dialog - (1) Added custom validator for domain name (2) Disable verify btn if form invalid

apps/web/src/locales/en/messages.json

@@ -5555,6 +5555,9 @@
   },
   "automaticDomainVerificationProcess": {
     "message": "Bitwarden will attempt to verify the domain 3 times during the first 72 hours. If the domain can’t be verified, check the DNS record in your host and manually verify."
+  },
+  "invalidDomainNameMessage": {
+    "message": "'https://', 'http://', or 'www.' domain prefixes not allowed."
   }
 
 }

bitwarden_license/bit-web/src/app/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.html

@@ -29,7 +29,9 @@
     </bit-callout>
   </div>
   <div bitDialogFooter class="tw-flex tw-flex-row tw-items-center tw-gap-2">
-    <button bitButton buttonType="primary">{{ "verifyDomain" | i18n }}</button>
+    <button bitButton buttonType="primary" [disabled]="domainForm.invalid">
+      {{ "verifyDomain" | i18n }}
+    </button>
     <button bitButton buttonType="secondary" (click)="dialogRef.close()">
       {{ "cancel" | i18n }}
     </button>

bitwarden_license/bit-web/src/app/organizations/manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component.ts

@@ -7,6 +7,8 @@ import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationDomainResponse } from "@bitwarden/common/abstractions/organization-domain/responses/organization-domain.response";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { Utils } from "@bitwarden/common/misc/utils";
+
+import { domainNameValidator } from "./domain-name.validator";
 export interface DomainAddEditDialogData {
   organizationId: string;
   orgDomain: OrganizationDomainResponse;
@@ -20,9 +22,11 @@ export class DomainAddEditDialogComponent implements OnInit {
   dialogSize: "small" | "default" | "large" = "default";
   disablePadding = false;
 
-  // TODO: custom validator for preventing https:// or www. on domainName
   domainForm: FormGroup = this.formBuilder.group({
-    domainName: ["", [Validators.required]],
+    domainName: [
+      "",
+      [Validators.required, domainNameValidator(this.i18nService.t("invalidDomainNameMessage"))],
+    ],
     txt: [{ value: null, disabled: true }],
   });
 

bitwarden_license/bit-web/src/app/organizations/manage/domain-verification/domain-add-edit-dialog/domain-name.validator.ts

@@ -0,0 +1,19 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+export function domainNameValidator(errorMessage: string): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+
+    const forbiddenPatterns = [/^https:\/\//, /^http:\/\//, /^www\./];
+    for (const pattern of forbiddenPatterns) {
+      if (pattern.test(control.value)) {
+        return { invalidDomainName: errorMessage };
+      }
+    }
+    return null;
+  };
+}