SG-680 - Moved domain verification comp into subfolder to add clarity in folder structure

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

@@ -1,55 +0,0 @@
-<div class="tw-flex tw-flex-row tw-justify-between">
-  <h1>{{ "domainVerification" | i18n }}</h1>
-
-  <button type="button" buttonType="primary" bitButton>
-    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
-  </button>
-</div>
-
-<div class="tw-flex tw-flex-row">
-  <bit-table class="tw-w-full tw-table-auto">
-    <ng-container header>
-      <tr>
-        <th bitCell>Name</th>
-        <th bitCell>Status</th>
-        <th bitCell>Last Checked</th>
-        <th bitCell>Options</th>
-      </tr>
-    </ng-container>
-    <ng-container body>
-      <!-- <tr bitRow [alignContent]="alignRowContent">
-        <td bitCell>Cell 1</td>
-        <td bitCell>Cell 2 <br> Multiline Cell</td>
-        <td bitCell>Cell 3</td>
-      </tr>
-      <tr bitRow [alignContent]="alignRowContent">
-        <td bitCell>Cell 4</td>
-        <td bitCell>Cell 5</td>
-        <td bitCell>Cell 6</td>
-      </tr>
-      <tr bitRow [alignContent]="alignRowContent">
-        <td bitCell>Cell 7 <br> Multiline Cell</td>
-        <td bitCell>Cell 8</td>
-        <td bitCell>Cell 9</td>
-      </tr> -->
-    </ng-container>
-  </bit-table>
-</div>
-
-<div class="tw-mt-6 tw-flex tw-flex-col tw-items-center tw-justify-center">
-  <img src="../../images/domain-verification/domain.svg" class="tw-mb-4" alt="domain" />
-
-  <div class="tw-mb-2 tw-flex tw-flex-row tw-justify-center">
-    <span class="tw-text-lg tw-font-bold">{{ "noDomains" | i18n }}</span>
-  </div>
-
-  <div class="tw-mb-4 tw-flex tw-flex-row tw-justify-center">
-    <span>
-      {{ "noDomainsSubText" | i18n }}
-    </span>
-  </div>
-
-  <button type="button" buttonType="secondary" bitButton>
-    <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.component.ts

@@ -1,37 +0,0 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { Subject } from "rxjs";
-
-import { ApiService } from "@bitwarden/common/abstractions/api.service";
-import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
-import { OrganizationApiServiceAbstraction } from "@bitwarden/common/abstractions/organization/organization-api.service.abstraction";
-import { OrganizationService } from "@bitwarden/common/abstractions/organization/organization.service.abstraction";
-import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
-import { Organization } from "@bitwarden/common/models/domain/organization";
-
-@Component({
-  selector: "app-org-manage-domain-verification",
-  templateUrl: "domain-verification.component.html",
-})
-export class DomainVerificationComponent implements OnInit, OnDestroy {
-  private componentDestroyed$ = new Subject<void>();
-
-  organization: Organization;
-
-  constructor(
-    private route: ActivatedRoute,
-    private apiService: ApiService,
-    private platformUtilsService: PlatformUtilsService,
-    private i18nService: I18nService,
-    private organizationService: OrganizationService,
-    private organizationApiService: OrganizationApiServiceAbstraction
-  ) {}
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async ngOnInit() {}
-
-  ngOnDestroy(): void {
-    this.componentDestroyed$.next();
-    this.componentDestroyed$.complete();
-  }
-}

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

@@ -0,0 +1,66 @@
+<div class="tw-flex tw-flex-row tw-justify-between">
+  <h1>{{ "domainVerification" | i18n }}</h1>
+
+  <button *ngIf="!loading" type="button" buttonType="primary" bitButton>
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
+  </button>
+</div>
+
+<ng-container *ngIf="loading">
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <span class="sr-only">{{ "loading" | i18n }}</span>
+</ng-container>
+
+<!-- <div *ngIf="orgDomains$ | async as orgDomains; else loading">
+  {{ obs }}
+</div>
+<ng-template #loading>Loading...</ng-template>  -->
+
+<ng-container *ngIf="!loading">
+  <div class="tw-flex tw-flex-row">
+    <bit-table class="tw-w-full tw-table-auto">
+      <ng-container header>
+        <tr>
+          <th bitCell>Name</th>
+          <th bitCell>Status</th>
+          <th bitCell>Last Checked</th>
+          <th bitCell>Options</th>
+        </tr>
+      </ng-container>
+      <ng-container body>
+        <!-- [alignContent]="alignRowContent" -->
+        <tr bitRow *ngFor="let orgDomain of orgDomains$ | async; index as i">
+          <td bitCell>{{ orgDomain.domainName }}</td>
+          <td bitCell>
+            {{ orgDomain.domainName }}
+          </td>
+          <td bitCell>test</td>
+          <td bitCell>test</td>
+        </tr>
+      </ng-container>
+    </bit-table>
+  </div>
+
+  <div class="tw-mt-6 tw-flex tw-flex-col tw-items-center tw-justify-center">
+    <img src="../../images/domain-verification/domain.svg" class="tw-mb-4" alt="domain" />
+
+    <div class="tw-mb-2 tw-flex tw-flex-row tw-justify-center">
+      <span class="tw-text-lg tw-font-bold">{{ "noDomains" | i18n }}</span>
+    </div>
+
+    <div class="tw-mb-4 tw-flex tw-flex-row tw-justify-center">
+      <span>
+        {{ "noDomainsSubText" | i18n }}
+      </span>
+    </div>
+
+    <button type="button" buttonType="secondary" bitButton>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newDomain" | i18n }}
+    </button>
+  </div>
+  ¸
+</ng-container>

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

@@ -0,0 +1,64 @@
+import { Component, OnDestroy, OnInit } from "@angular/core";
+import { ActivatedRoute, Params } from "@angular/router";
+import { concatMap, Observable, Subject, takeUntil } from "rxjs";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { OrgDomainApiServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain-api.service.abstraction";
+import { OrgDomainServiceAbstraction } from "@bitwarden/common/abstractions/organization-domain/org-domain.service.abstraction";
+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";
+
+@Component({
+  selector: "app-org-manage-domain-verification",
+  templateUrl: "domain-verification.component.html",
+})
+export class DomainVerificationComponent implements OnInit, OnDestroy {
+  private componentDestroyed$ = new Subject<void>();
+
+  loading = true;
+
+  organizationId: string;
+  // organization: Organization;
+  orgDomains$: Observable<OrganizationDomainResponse[]>;
+
+  constructor(
+    private route: ActivatedRoute,
+    private apiService: ApiService,
+    private platformUtilsService: PlatformUtilsService,
+    private i18nService: I18nService,
+    private organizationService: OrganizationService,
+    private orgDomainApiService: OrgDomainApiServiceAbstraction,
+    private orgDomainService: OrgDomainServiceAbstraction
+  ) {}
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async ngOnInit() {
+    this.orgDomains$ = this.orgDomainService.orgDomains$;
+
+    // Note: going to use concatMap as async subscribe blocks don't work as you expect and
+    // as such, ESLint rejects it
+    // ex: https://stackoverflow.com/a/71056380
+    this.route.params
+      .pipe(
+        concatMap(async (params: Params) => {
+          this.organizationId = params.organizationId;
+          await this.load();
+        }),
+        takeUntil(this.componentDestroyed$)
+      )
+      .subscribe();
+  }
+
+  async load() {
+    await this.orgDomainApiService.getAllByOrgId(this.organizationId);
+
+    this.loading = false;
+  }
+
+  ngOnDestroy(): void {
+    this.componentDestroyed$.next();
+    this.componentDestroyed$.complete();
+  }
+}

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

@@ -8,7 +8,7 @@ import { OrganizationPermissionsGuard } from "@bitwarden/web-vault/app/organizat
 import { OrganizationLayoutComponent } from "@bitwarden/web-vault/app/organizations/layouts/organization-layout.component";
 import { SettingsComponent } from "@bitwarden/web-vault/app/organizations/settings/settings.component";
 
-import { DomainVerificationComponent } from "./manage/domain-verification.component";
+import { DomainVerificationComponent } from "./manage/domain-verification/domain-verification.component";
 import { ScimComponent } from "./manage/scim.component";
 import { SsoComponent } from "./manage/sso.component";
 

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

@@ -3,7 +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 { DomainVerificationComponent } from "./manage/domain-verification.component";
+import { DomainVerificationComponent } from "./manage/domain-verification/domain-verification.component";
 import { ScimComponent } from "./manage/scim.component";
 import { SsoComponent } from "./manage/sso.component";
 import { OrganizationsRoutingModule } from "./organizations-routing.module";