SG-680 - Created Domain Verification component and started scaffolding out HTML

apps/web/src/app/organizations/settings/settings.component.html

@@ -52,6 +52,14 @@
           >
             {{ "singleSignOn" | i18n }}
           </a>
+          <a
+            routerLink="domain-verification"
+            class="list-group-item"
+            routerLinkActive="active"
+            *ngIf="organization?.canManageDomainVerification"
+          >
+            {{ "domainVerification" | i18n }}
+          </a>
           <a
             routerLink="scim"
             class="list-group-item"

apps/web/src/images/domain-verification/domain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="129" height="123" fill="none"><circle cx="67.071" cy="61.444" r="59.684" fill="#F0F0F0" stroke="#89929F" stroke-width="3"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M21.55 100.351c30.98 2.459 58.077-20.525 60.522-51.335 1.482-18.666-6.06-34.632-19.411-45.882"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M14.496 33.785C12.136 66.27 38.456 95.843 72.6 98.322c1.593.116 5.962.174 7.528.177 4.43-.177 17.611-2.407 26.618-7.151 6.626-3.49 12.932-7.15 17.831-12.737"/><path stroke="#89929F" stroke-linecap="round" stroke-width="1.5" d="M124.435 48.005c-17.949-24.123-55.678-26.834-83.084-6.443-16.604 12.353-26.685 30.356-27.493 48.08"/><circle cx="78.336" cy="27.893" r="5" fill="#89929F"/><circle cx="19.703" cy="66.052" r="5" fill="#89929F"/><circle cx="52.277" cy="93.973" r="5" fill="#89929F"/></svg>

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

@@ -5507,5 +5507,17 @@
   },
   "memberAccessAll": {
     "message": "This member can access and modify all items."
+  },
+  "domainVerification": {
+    "message": "Domain Verification"
+  },
+  "newDomain": {
+    "message": "New Domain"
+  },
+  "noDomains": {
+    "message": "No domains"
+  },
+  "noDomainsSubText": {
+    "message": "Connecting a domain allows members to skip the SSO identifier field during Login with SSO."
   }
 }

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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,37 @@
+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/organizations-routing.module.ts

@@ -8,6 +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 { ScimComponent } from "./manage/scim.component";
 import { SsoComponent } from "./manage/sso.component";
 
@@ -33,6 +34,14 @@ const routes: Routes = [
               organizationPermissions: (org: Organization) => org.canManageSso,
             },
           },
+          {
+            path: "domain-verification",
+            component: DomainVerificationComponent,
+            canActivate: [OrganizationPermissionsGuard],
+            data: {
+              organizationPermissions: (org: Organization) => org.canManageDomainVerification,
+            },
+          },
           {
             path: "scim",
             component: ScimComponent,

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

@@ -3,12 +3,13 @@ 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 { ScimComponent } from "./manage/scim.component";
 import { SsoComponent } from "./manage/sso.component";
 import { OrganizationsRoutingModule } from "./organizations-routing.module";
 
 @NgModule({
   imports: [SharedModule, OrganizationsRoutingModule],
-  declarations: [InputCheckboxComponent, SsoComponent, ScimComponent],
+  declarations: [InputCheckboxComponent, SsoComponent, ScimComponent, DomainVerificationComponent],
 })
 export class OrganizationsModule {}