SG-680 - Good start on Domain Add Edit Dialog

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

@@ -5519,5 +5519,8 @@
   },
   "noDomainsSubText": {
     "message": "Connecting a domain allows members to skip the SSO identifier field during Login with SSO."
+  },
+  "verifyDomain": {
+    "message": "Verify domain"
   }
 }

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

@@ -0,0 +1,35 @@
+<bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
+  <span bitDialogTitle>{{ "newDomain" | i18n }}</span>
+  <div bitDialogContent>
+    <form [formGroup]="domainForm">
+      <bit-form-field>
+        <bit-label>Domain name</bit-label>
+        <input bitInput formControlName="domainName" />
+        <bit-hint
+          >Example: mydomain.com. Subdomains require separate entries to be verified.</bit-hint
+        >
+      </bit-form-field>
+
+      <bit-form-field>
+        <bit-label>DNS TXT record</bit-label>
+        <input bitInput formControlName="txt" />
+        <bit-hint>Copy and paste the TXT record into your DNS Provider.</bit-hint>
+      </bit-form-field>
+    </form>
+  </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="secondary" (click)="dialogRef.close()">
+      {{ "cancel" | i18n }}
+    </button>
+    <button
+      *ngIf="data.orgDomain"
+      class="tw-ml-auto"
+      bitIconButton="bwi-trash"
+      buttonType="danger"
+      size="default"
+      title="Delete"
+      aria-label="Delete"
+    ></button>
+  </div>
+</bit-dialog>

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

@@ -0,0 +1,34 @@
+import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+import { OrganizationDomainResponse } from "@bitwarden/common/abstractions/organization-domain/responses/organization-domain.response";
+
+export interface DomainAddEditDialogData {
+  organizationId: string;
+  orgDomain: OrganizationDomainResponse;
+}
+
+@Component({
+  selector: "app-domain-add-edit-dialog",
+  templateUrl: "domain-add-edit-dialog.component.html",
+})
+export class DomainAddEditDialogComponent implements OnInit {
+  dialogSize: "small" | "default" | "large" = "default";
+  disablePadding = false;
+
+  domainForm: FormGroup = this.formBuilder.group({
+    domainName: ["", [Validators.required]],
+    txt: [""],
+  });
+
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) public data: DomainAddEditDialogData,
+    private formBuilder: FormBuilder
+  ) {}
+
+  ngOnInit(): void {
+    // If we have data.orgDomain, then editing, otherwise creating new domain
+  }
+}

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

@@ -1,7 +1,7 @@
 <div class="tw-flex tw-flex-row tw-justify-between">
   <h1>{{ "domainVerification" | i18n }}</h1>
 
-  <button *ngIf="!loading" type="button" buttonType="primary" bitButton>
+  <button *ngIf="!loading" type="button" buttonType="primary" bitButton (click)="addDomain()">
     <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
   </button>
 </div>
@@ -58,7 +58,7 @@
       </span>
     </div>
 
-    <button type="button" buttonType="secondary" bitButton>
+    <button type="button" buttonType="secondary" bitButton (click)="addDomain()">
       <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
     </button>
   </div>

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

@@ -9,6 +9,12 @@ import { OrgDomainServiceAbstraction } from "@bitwarden/common/abstractions/orga
 import { OrganizationDomainResponse } from "@bitwarden/common/abstractions/organization-domain/responses/organization-domain.response";
 import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { DialogService } from "@bitwarden/components";
+
+import {
+  DomainAddEditDialogComponent,
+  DomainAddEditDialogData,
+} from "./domain-add-edit-dialog/domain-add-edit-dialog.component";
 
 @Component({
   selector: "app-org-manage-domain-verification",
@@ -30,7 +36,8 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
     private i18nService: I18nService,
     private organizationService: OrganizationService,
     private orgDomainApiService: OrgDomainApiServiceAbstraction,
-    private orgDomainService: OrgDomainServiceAbstraction
+    private orgDomainService: OrgDomainServiceAbstraction,
+    private dialogService: DialogService
   ) {}
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -57,6 +64,17 @@ export class DomainVerificationComponent implements OnInit, OnDestroy {
     this.loading = false;
   }
 
+  addDomain() {
+    const domainAddEditDialogData: DomainAddEditDialogData = {
+      organizationId: this.organizationId,
+      orgDomain: null,
+    };
+
+    this.dialogService.open(DomainAddEditDialogComponent, {
+      data: domainAddEditDialogData,
+    });
+  }
+
   ngOnDestroy(): void {
     this.componentDestroyed$.next();
     this.componentDestroyed$.complete();

bitwarden_license/bit-web/src/app/organizations/organizations.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
 
 import { InputCheckboxComponent } from "./components/input-checkbox.component";
+import { DomainAddEditDialogComponent } from "./manage/domain-verification/domain-add-edit-dialog/domain-add-edit-dialog.component";
 import { DomainVerificationComponent } from "./manage/domain-verification/domain-verification.component";
 import { ScimComponent } from "./manage/scim.component";
 import { SsoComponent } from "./manage/sso.component";
@@ -10,6 +11,12 @@ import { OrganizationsRoutingModule } from "./organizations-routing.module";
 
 @NgModule({
   imports: [SharedModule, OrganizationsRoutingModule],
-  declarations: [InputCheckboxComponent, SsoComponent, ScimComponent, DomainVerificationComponent],
+  declarations: [
+    InputCheckboxComponent,
+    SsoComponent,
+    ScimComponent,
+    DomainVerificationComponent,
+    DomainAddEditDialogComponent,
+  ],
 })
 export class OrganizationsModule {}