Add console UI main layout, settings page and contact settings (#1989)

* Header initialized * Added settings page * switch history mode to hash * Add eslint * Add prettier and reformat * Contact details in a bottom sheet for mobile devices * Add contact details events abstraction * Fix formatting issue and update deps versions
2025-07-25 12:08:36 +02:00 · 2023-06-09 14:20:08 -04:00 · 2023-06-09 14:20:08 -04:00 · b319eff7cd
commit b319eff7cd
parent 894d05ce4e
60 changed files with 4896 additions and 10476 deletions
--- a/console-webapp/.eslintrc.json
+++ b/console-webapp/.eslintrc.json
@ -0,0 +1,47 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ],
+        "eol-last": ["error", "always"]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}
--- a/console-webapp/.prettierignore
+++ b/console-webapp/.prettierignore
--- a/console-webapp/.prettierrc.json
+++ b/console-webapp/.prettierrc.json
@ -0,0 +1 @@
+{}
--- a/console-webapp/angular.json
+++ b/console-webapp/angular.json
@ -102,8 +102,23 @@
            ],
            "scripts": []
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
        }
      }
    }
+  },
+  "cli": {
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
  }
 }
--- a/console-webapp/build.gradle
+++ b/console-webapp/build.gradle
@ -50,5 +50,12 @@ task buildConsoleWebappProd(type: Exec) {
  args 'run', 'build'
 }

+task applyFormatting() {
+  exec {
+    workingDir "${consoleDir}/"
+    commandLine 'npm', 'run', 'prettify'
+  }
+}
+
 tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps)
 tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps)
--- a/console-webapp/package-lock.json
+++ b/console-webapp/package-lock.json
--- a/console-webapp/package.json
+++ b/console-webapp/package.json
@ -9,7 +9,9 @@
    "watch": "ng build --watch --configuration development",
    "test": "ng test --browsers=ChromeHeadless --watch=false",
    "run:dev": "",
-    "start:dev": "concurrently \"./../gradlew :core:runTestServer\" \"ng serve --proxy-config dev-proxy.config.json\""
+    "prettify": "npx prettier --write ./src/",
+    "start:dev": "concurrently \"./../gradlew :core:runTestServer\" \"ng serve --proxy-config dev-proxy.config.json\"",
+    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
@ -29,17 +31,26 @@
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.4",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "~15.2.4",
    "@angular/compiler-cli": "^15.2.2",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^18.11.18",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
    "concurrently": "^7.6.0",
+    "eslint": "^8.33.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
+    "prettier": "2.8.7",
    "typescript": "~4.9.4"
  }
-}
+}
--- a/console-webapp/src/app/app-routing.module.ts
+++ b/console-webapp/src/app/app-routing.module.ts
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -14,16 +14,58 @@

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {TldsComponent} from './tlds/tlds.component';
-import {HomeComponent} from './home/home.component';
+import { TldsComponent } from './tlds/tlds.component';
+import { HomeComponent } from './home/home.component';
+import { SettingsComponent } from './settings/settings.component';
+import SettingsContactComponent from './settings/contact/contact.component';
+import SettingsRegistrarsComponent from './settings/registrars/registrars.component';
+import SettingsWhoisComponent from './settings/whois/whois.component';
+import SettingsUsersComponent from './settings/users/users.component';
+import SettingsSecurityComponent from './settings/security/security.component';

 const routes: Routes = [
+  { path: '', redirectTo: '/settings/contact', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'tlds', component: TldsComponent },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'contact',
+        pathMatch: 'full',
+      },
+      {
+        path: 'contact',
+        component: SettingsContactComponent,
+      },
+      {
+        path: 'whois',
+        component: SettingsWhoisComponent,
+      },
+      {
+        path: 'security',
+        component: SettingsSecurityComponent,
+      },
+      {
+        path: 'epp-password',
+        component: SettingsSecurityComponent,
+      },
+      {
+        path: 'users',
+        component: SettingsUsersComponent,
+      },
+      {
+        path: 'registrars',
+        component: SettingsRegistrarsComponent,
+      },
+    ],
+  },
 ];

@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
--- a/console-webapp/src/app/app.component.html
+++ b/console-webapp/src/app/app.component.html
@ -1,14 +1,21 @@
-<div class="toolbar" role="banner">
-  Nomulus Console
+<div class="console-app">
+  <app-header (toggleNavOpen)="sidenav.toggle()"></app-header>
+  <mat-sidenav-container class="console-app__content-wrapper">
+    <mat-sidenav #sidenav class="console-app__sidebar">
+      <mat-nav-list>
+        <a mat-list-item [routerLink]="'/home'" routerLinkActive="active">
+          Home page
+        </a>
+        <a mat-list-item [routerLink]="'/tlds'" routerLinkActive="active">
+          TLDS
+        </a>
+        <a mat-list-item [routerLink]="'/settings'" routerLinkActive="active">
+          Settings
+        </a>
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content class="console-app__content">
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
 </div>
-
-<div class="content" role="main">
-  <nav>
-    <ul>
-      <li><a routerLink="/home" routerLinkActive="active" ariaCurrentWhenActive="page">Home page</a></li>
-      <li><a routerLink="/tlds" routerLinkActive="active" ariaCurrentWhenActive="page">TLDs</a></li>
-    </ul>
-  </nav>
-</div>
-
-<router-outlet></router-outlet>
--- a/console-webapp/src/app/app.component.less
+++ b/console-webapp/src/app/app.component.less
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -13,7 +13,8 @@
 // limitations under the License.

 :host {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
@ -21,15 +22,25 @@
  -moz-osx-font-smoothing: grayscale;
 }

-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 8px 0;
-}
-
-p {
-  margin: 0;
+.console-app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  &__content-wrapper {
+    flex: 1;
+    margin-top: -12px;
+    padding-bottom: 36px;
+  }
+  &__sidebar {
+    min-width: 300px;
+    a::before {
+      background-color: transparent;
+    }
+    .active {
+      background: #eae1e1;
+    }
+  }
+  &__content {
+    margin: 12px 24px;
+  }
 }
--- a/console-webapp/src/app/app.component.spec.ts
+++ b/console-webapp/src/app/app.component.spec.ts
@ -19,12 +19,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent],
    }).compileComponents();
  });

@ -33,5 +29,4 @@ describe('AppComponent', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
-
 });
--- a/console-webapp/src/app/app.component.ts
+++ b/console-webapp/src/app/app.component.ts
@ -17,8 +17,6 @@ import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
+  styleUrls: ['./app.component.less'],
 })
-export class AppComponent {
-
-}
+export class AppComponent {}
--- a/console-webapp/src/app/app.module.ts
+++ b/console-webapp/src/app/app.module.ts
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -14,28 +14,43 @@

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {MaterialModule} from './material.module';
+import { MaterialModule } from './material.module';
+
+import { BackendService } from './shared/services/backend.service';

 import { HomeComponent } from './home/home.component';
 import { TldsComponent } from './tlds/tlds.component';
+import { HeaderComponent } from './header/header.component';
+import { SettingsComponent } from './settings/settings.component';
+import SettingsContactComponent, {
+  ContactDetailsDialogComponent,
+} from './settings/contact/contact.component';
+import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TldsComponent,
+    HeaderComponent,
+    SettingsComponent,
+    SettingsContactComponent,
+    ContactDetailsDialogComponent,
  ],
  imports: [
+    HttpClientModule,
+    FormsModule,
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
  ],
-  providers: [],
-  bootstrap: [AppComponent]
+  providers: [BackendService],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
--- a/console-webapp/src/app/header/header.component.html
+++ b/console-webapp/src/app/header/header.component.html
@ -0,0 +1,15 @@
+<p>
+  <mat-toolbar color="primary">
+    <button mat-icon-button aria-label="Open menu" (click)="toggleNavPane()">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <span>Google Registry</span>
+    <span class="spacer"></span>
+    <button mat-icon-button aria-label="Open FAQ">
+      <mat-icon>question_mark</mat-icon>
+    </button>
+    <button mat-icon-button aria-label="Open user info">
+      <mat-icon>person</mat-icon>
+    </button>
+  </mat-toolbar>
+</p>
--- a/console-webapp/src/app/header/header.component.less
+++ b/console-webapp/src/app/header/header.component.less
@ -0,0 +1,17 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.spacer {
+  flex: 1;
+}
--- a/console-webapp/src/app/header/header.component.spec.ts
+++ b/console-webapp/src/app/header/header.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/header/header.component.ts
+++ b/console-webapp/src/app/header/header.component.ts
@ -0,0 +1,31 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.less'],
+})
+export class HeaderComponent {
+  private isNavOpen = false;
+
+  @Output() toggleNavOpen = new EventEmitter<boolean>();
+
+  toggleNavPane() {
+    this.isNavOpen = !this.isNavOpen;
+    this.toggleNavOpen.emit(this.isNavOpen);
+  }
+}
--- a/console-webapp/src/app/home/home.component.html
+++ b/console-webapp/src/app/home/home.component.html
@ -1,14 +1,21 @@
 <h3>Recent Activity</h3>
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 console-home__activity">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+<table
+  mat-table
+  [dataSource]="dataSource"
+  class="mat-elevation-z8 console-home__activity"
+>
+  <ng-container
+    *ngFor="let column of columns"
+    [matColumnDef]="column.columnDef"
+  >
    <th mat-header-cell *matHeaderCellDef>
-      {{column.header}}
+      {{ column.header }}
    </th>
    <td mat-cell *matCellDef="let row">
-      {{column.cell(row)}}
+      {{ column.cell(row) }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 </table>
--- a/console-webapp/src/app/home/home.component.less
+++ b/console-webapp/src/app/home/home.component.less
@ -11,4 +11,3 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
--- a/console-webapp/src/app/home/home.component.spec.ts
+++ b/console-webapp/src/app/home/home.component.spec.ts
@ -15,7 +15,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { HomeComponent } from './home.component';
-import {MaterialModule} from '../material.module';
+import { MaterialModule } from '../material.module';

 describe('HomeComponent', () => {
  let component: HomeComponent;
@ -24,9 +24,8 @@ describe('HomeComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MaterialModule],
-      declarations: [ HomeComponent ]
-    })
-    .compileComponents();
+      declarations: [HomeComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
--- a/console-webapp/src/app/home/home.component.ts
+++ b/console-webapp/src/app/home/home.component.ts
@ -19,76 +19,213 @@ export interface ActivityRecord {
  userName: string;
  registrarName: string;
  timestamp: string;
-  details: string
+  details: string;
 }

 const MOCK_DATA: ActivityRecord[] = [
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Export DUMS", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Update Contact", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
-  {eventType: "Delete Domain", userName:"user3", registrarName: "registrar1", timestamp: "2022-03-15T19:46:39.007", details: "All Domains under management exported as .csv file" },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Export DUMS',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Update Contact',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
+  {
+    eventType: 'Delete Domain',
+    userName: 'user3',
+    registrarName: 'registrar1',
+    timestamp: '2022-03-15T19:46:39.007',
+    details: 'All Domains under management exported as .csv file',
+  },
 ];

-
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.less']
+  styleUrls: ['./home.component.less'],
 })
 export class HomeComponent {
-
  columns = [
    {
      columnDef: 'eventType',
      header: 'Event Type',
-      cell:(record: ActivityRecord) => `${record.eventType}`,
+      cell: (record: ActivityRecord) => `${record.eventType}`,
    },
    {
      columnDef: 'userName',
      header: 'User',
-      cell: (record: ActivityRecord)  => `${record.userName}`,
+      cell: (record: ActivityRecord) => `${record.userName}`,
    },
    {
      columnDef: 'registrarName',
      header: 'Registrar',
-      cell: (record: ActivityRecord)  => `${record.registrarName}`,
+      cell: (record: ActivityRecord) => `${record.registrarName}`,
    },
    {
      columnDef: 'timestamp',
      header: 'Timestamp',
-      cell: (record: ActivityRecord)  => `${record.timestamp}`,
+      cell: (record: ActivityRecord) => `${record.timestamp}`,
    },
    {
      columnDef: 'details',
      header: 'Details',
-      cell: (record: ActivityRecord)  => `${record.details}`,
+      cell: (record: ActivityRecord) => `${record.details}`,
    },
  ];
  dataSource = MOCK_DATA;
-  displayedColumns = this.columns.map(c => c.columnDef);
-
-  constructor() {
-
-
-  }
+  displayedColumns = this.columns.map((c) => c.columnDef);
 }
--- a/console-webapp/src/app/material.module.ts
+++ b/console-webapp/src/app/material.module.ts
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -12,15 +12,73 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import {NgModule} from '@angular/core';
-import {MatCardModule} from '@angular/material/card';
-import {MatTableModule} from '@angular/material/table';
+import { NgModule } from '@angular/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { DialogModule } from '@angular/cdk/dialog';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';

-const MATERIAL_MODULES = [
-  MatCardModule,
-  MatTableModule,
-];
-
-@NgModule({imports: MATERIAL_MODULES, exports: MATERIAL_MODULES})
-export class MaterialModule {
-}
+@NgModule({
+  exports: [
+    A11yModule,
+    CdkMenuModule,
+    CdkTableModule,
+    CdkTreeModule,
+    MatBadgeModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatBottomSheetModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    OverlayModule,
+    DialogModule,
+    MatSnackBarModule,
+  ],
+})
+export class MaterialModule {}
--- a/console-webapp/src/app/settings/contact/contact-details.component.html
+++ b/console-webapp/src/app/settings/contact/contact-details.component.html
@ -0,0 +1,105 @@
+<h3 mat-dialog-title>Contact details</h3>
+<div mat-dialog-content>
+  <form>
+    <div>
+      <mat-form-field class="contact-details__input">
+        <mat-label>Name: </mat-label>
+        <input
+          matInput
+          [(ngModel)]="contact.name"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </div>
+
+    <div>
+      <mat-form-field class="contact-details__input">
+        <mat-label>Primary account email: </mat-label>
+        <input
+          type="email"
+          matInput
+          [email]="true"
+          [(ngModel)]="contact.emailAddress"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </div>
+
+    <div>
+      <mat-form-field class="contact-details__input">
+        <mat-label>Phone: </mat-label>
+        <input
+          matInput
+          [(ngModel)]="contact.phoneNumber"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </div>
+
+    <div>
+      <mat-form-field class="contact-details__input">
+        <mat-label>Fax: </mat-label>
+        <input
+          matInput
+          [(ngModel)]="contact.faxNumber"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="contact-details__group">
+      <label>Contact type:</label>
+      <div class="contact-details__group-content">
+        <mat-checkbox
+          *ngFor="let contactType of contactTypes"
+          [checked]="contact.types.includes(contactType.value)"
+          (change)="
+            $event.checked
+              ? contact.types.push(contactType.value)
+              : contact.types.splice(
+                  contact.types.indexOf(contactType.value),
+                  1
+                )
+          "
+          [disabled]="
+            contact.types.length === 1 && contact.types[0] === contactType.value
+          "
+        >
+          {{ contactType.label }}
+        </mat-checkbox>
+      </div>
+    </div>
+
+    <section>
+      <mat-checkbox
+        [(ngModel)]="contact.visibleInWhoisAsAdmin"
+        [ngModelOptions]="{ standalone: true }"
+        >Show in Registrar WHOIS record as admin contact</mat-checkbox
+      >
+    </section>
+
+    <section>
+      <mat-checkbox
+        [(ngModel)]="contact.visibleInWhoisAsTech"
+        [ngModelOptions]="{ standalone: true }"
+        >Show in Registrar WHOIS record as technical contact</mat-checkbox
+      >
+    </section>
+
+    <section>
+      <mat-checkbox
+        [(ngModel)]="contact.visibleInDomainWhoisAsAbuse"
+        [ngModelOptions]="{ standalone: true }"
+        >Show Phone and Email in Domain WHOIS Record as registrar abuse contact
+        (per CL&D requirements)</mat-checkbox
+      >
+    </section>
+  </form>
+
+  <p></p>
+
+  <mat-dialog-actions>
+    <button mat-button (click)="onClose()">Cancel</button>
+    <button mat-button (click)="saveAndClose()">Save</button>
+  </mat-dialog-actions>
+</div>
--- a/console-webapp/src/app/settings/contact/contact.component.html
+++ b/console-webapp/src/app/settings/contact/contact.component.html
@ -0,0 +1,35 @@
+<div *ngIf="loading" class="contact__loading">
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+</div>
+<div *ngIf="!loading">
+  <div *ngFor="let group of groupedData">
+    <div class="contact__cards-wrapper" *ngIf="group.contacts.length">
+      <h3>{{ group.label }}s</h3>
+      <mat-divider></mat-divider>
+      <div class="contact__cards">
+        <mat-card class="contact__card" *ngFor="let contact of group.contacts">
+          <mat-card-title>{{ contact.name }}</mat-card-title>
+          <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
+          <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
+          <mat-card-actions class="contact__card-actions">
+            <button
+              mat-button
+              color="primary"
+              (click)="openDetails($event, contact)"
+            >
+              <mat-icon>edit</mat-icon>Edit
+            </button>
+            <button mat-button color="accent" (click)="deleteContact(contact)">
+              <mat-icon>delete</mat-icon>Delete
+            </button>
+          </mat-card-actions>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+  <div class="contact__actions">
+    <button mat-raised-button color="primary" (click)="openCreateNew($event)">
+      <mat-icon>add</mat-icon>Create a Contact
+    </button>
+  </div>
+</div>
--- a/console-webapp/src/app/settings/contact/contact.component.less
+++ b/console-webapp/src/app/settings/contact/contact.component.less
@ -0,0 +1,58 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.contact {
+  &__cards-wrapper {
+    margin-top: 22px;
+  }
+  &__card {
+    width: 400px;
+    padding: 15px;
+  }
+  &__card-actions {
+    padding: 0;
+  }
+  &__loading {
+    margin: 2rem 0;
+  }
+  &__cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-top: 20px;
+  }
+  &__actions {
+    display: flex;
+    justify-content: flex-start;
+    margin: 2rem 0;
+  }
+}
+.contact-details {
+  &__input {
+    width: 100%;
+  }
+  &__group {
+    margin: 20px 0;
+    display: flex;
+    align-items: baseline;
+  }
+  &__group-content {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 450px;
+    * {
+      min-width: 200px;
+    }
+  }
+}
--- a/console-webapp/src/app/settings/contact/contact.component.spec.ts
+++ b/console-webapp/src/app/settings/contact/contact.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ContactComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/contact/contact.component.ts
+++ b/console-webapp/src/app/settings/contact/contact.component.ts
@ -0,0 +1,198 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Inject } from '@angular/core';
+import {
+  MatDialog,
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import {
+  MatBottomSheet,
+  MAT_BOTTOM_SHEET_DATA,
+  MatBottomSheetRef,
+} from '@angular/material/bottom-sheet';
+import { Contact, ContactService } from './contact.service';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { HttpErrorResponse } from '@angular/common/http';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+enum Operations {
+  DELETE,
+  ADD,
+  UPDATE,
+}
+
+interface GroupedContacts {
+  value: string;
+  label: string;
+  contacts: Array<Contact>;
+}
+
+let isMobile: boolean;
+
+const contactTypes: Array<GroupedContacts> = [
+  { value: 'ADMIN', label: 'Primary contact', contacts: [] },
+  { value: 'ABUSE', label: 'Abuse contact', contacts: [] },
+  { value: 'BILLING', label: 'Billing contact', contacts: [] },
+  { value: 'LEGAL', label: 'Legal contact', contacts: [] },
+  { value: 'MARKETING', label: 'Marketing contact', contacts: [] },
+  { value: 'TECH', label: 'Technical contact', contacts: [] },
+  { value: 'WHOIS', label: 'WHOIS-Inquiry contact', contacts: [] },
+];
+
+class ContactDetailsEventsResponder {
+  private ref?: MatDialogRef<any> | MatBottomSheetRef;
+  constructor() {
+    this.onClose = this.onClose.bind(this);
+  }
+
+  setRef(ref: MatDialogRef<any> | MatBottomSheetRef) {
+    this.ref = ref;
+  }
+
+  onClose() {
+    if (this.ref == undefined) {
+      throw "Reference to ContactDetailsDialogComponent hasn't been set. ";
+    }
+    if (this.ref instanceof MatBottomSheetRef) {
+      this.ref.dismiss();
+    } else if (this.ref instanceof MatDialogRef) {
+      this.ref.close();
+    }
+  }
+}
+
+@Component({
+  selector: 'app-contact-details-dialog',
+  templateUrl: 'contact-details.component.html',
+  styleUrls: ['./contact.component.less'],
+})
+export class ContactDetailsDialogComponent {
+  onClose!: Function;
+  contact: Contact;
+  contactTypes = contactTypes;
+  operation: Operations;
+  contactIndex: number;
+
+  constructor(
+    public contactService: ContactService,
+    private _snackBar: MatSnackBar,
+    @Inject(isMobile ? MAT_BOTTOM_SHEET_DATA : MAT_DIALOG_DATA)
+    public data: {
+      onClose: Function;
+      contact: Contact;
+      operation: Operations;
+    }
+  ) {
+    this.onClose = data.onClose;
+    this.contactIndex = contactService.contacts.findIndex(
+      (c) => c === data.contact
+    );
+    this.contact = JSON.parse(JSON.stringify(data.contact));
+    this.operation = data.operation;
+  }
+
+  saveAndClose() {
+    let operationObservable;
+    if (this.operation === Operations.ADD) {
+      operationObservable = this.contactService.addContact(this.contact);
+    } else if (this.operation === Operations.UPDATE) {
+      operationObservable = this.contactService.updateContact(
+        this.contactIndex,
+        this.contact
+      );
+    } else {
+      throw 'Unknown operation type';
+    }
+
+    operationObservable.subscribe({
+      complete: this.onClose.bind(this),
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.statusText, undefined, {
+          duration: 1500,
+        });
+      },
+    });
+  }
+}
+
+@Component({
+  selector: 'app-contact',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.less'],
+})
+export default class ContactComponent {
+  loading: boolean = false;
+  constructor(
+    private dialog: MatDialog,
+    private bottomSheet: MatBottomSheet,
+    private breakpointObserver: BreakpointObserver,
+    public contactService: ContactService
+  ) {
+    // TODO: Refactor to registrarId service
+    this.loading = true;
+    this.contactService.fetchContacts('zoomco').subscribe(() => {
+      this.loading = false;
+    });
+  }
+
+  public get groupedData() {
+    return this.contactService.contacts.reduce((acc, contact) => {
+      contact.types.forEach((type) => {
+        acc
+          .find((group: GroupedContacts) => group.value === type)
+          ?.contacts.push(contact);
+      });
+      return acc;
+    }, JSON.parse(JSON.stringify(contactTypes)));
+  }
+
+  deleteContact(contact: Contact) {
+    this.contactService.deleteContact(contact);
+  }
+
+  openCreateNew(e: Event) {
+    const newContact: Contact = {
+      name: '',
+      phoneNumber: '',
+      emailAddress: '',
+      types: [contactTypes[0].value],
+    };
+    this.openDetails(e, newContact, Operations.ADD);
+  }
+
+  openDetails(
+    e: Event,
+    contact: Contact,
+    operation: Operations = Operations.UPDATE
+  ) {
+    e.preventDefault();
+    // TODO: handle orientation change
+    isMobile = this.breakpointObserver.isMatched('(max-width: 599px)');
+    const responder = new ContactDetailsEventsResponder();
+    const config = { data: { onClose: responder.onClose, contact, operation } };
+
+    if (isMobile) {
+      const bottomSheetRef = this.bottomSheet.open(
+        ContactDetailsDialogComponent,
+        config
+      );
+      responder.setRef(bottomSheetRef);
+    } else {
+      const dialogRef = this.dialog.open(ContactDetailsDialogComponent, config);
+      responder.setRef(dialogRef);
+    }
+  }
+}
--- a/console-webapp/src/app/settings/contact/contact.service.ts
+++ b/console-webapp/src/app/settings/contact/contact.service.ts
@ -0,0 +1,77 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable } from '@angular/core';
+import { Observable, tap } from 'rxjs';
+import { BackendService } from 'src/app/shared/services/backend.service';
+
+export interface Contact {
+  name: string;
+  phoneNumber: string;
+  emailAddress: string;
+  registrarId?: string;
+  faxNumber?: string;
+  types: Array<string>;
+  visibleInWhoisAsAdmin?: boolean;
+  visibleInWhoisAsTech?: boolean;
+  visibleInDomainWhoisAsAbuse?: boolean;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactService {
+  contacts: Contact[] = [];
+
+  constructor(private backend: BackendService) {}
+
+  // TODO: Come up with a better handling for registrarId
+  fetchContacts(registrarId: string): Observable<Contact[]> {
+    return this.backend.getContacts(registrarId).pipe(
+      tap((contacts) => {
+        this.contacts = contacts;
+      })
+    );
+  }
+
+  saveContacts(
+    contacts: Contact[],
+    registrarId?: string
+  ): Observable<Contact[]> {
+    return this.backend
+      .postContacts(registrarId || 'default', contacts)
+      .pipe(
+        tap((_) => {
+          this.contacts = contacts;
+        })
+      );
+  }
+
+  updateContact(index: number, contact: Contact) {
+    const newContacts = this.contacts.map((c, i) =>
+      i === index ? contact : c
+    );
+    return this.saveContacts(newContacts);
+  }
+
+  addContact(contact: Contact) {
+    const newContacts = this.contacts.concat([contact]);
+    return this.saveContacts(newContacts);
+  }
+
+  deleteContact(contact: Contact) {
+    const newContacts = this.contacts.filter((c) => c !== contact);
+    return this.saveContacts(newContacts);
+  }
+}
--- a/console-webapp/src/app/settings/registrars/registrars.component.html
+++ b/console-webapp/src/app/settings/registrars/registrars.component.html
@ -0,0 +1 @@
+<p>registrars component works!</p>
--- a/console-webapp/src/app/settings/registrars/registrars.component.less
+++ b/console-webapp/src/app/settings/registrars/registrars.component.less
@ -0,0 +1,13 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
--- a/console-webapp/src/app/settings/registrars/registrars.component.spec.ts
+++ b/console-webapp/src/app/settings/registrars/registrars.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrarsComponent } from './registrars.component';
+
+describe('RegistrarsComponent', () => {
+  let component: RegistrarsComponent;
+  let fixture: ComponentFixture<RegistrarsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RegistrarsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RegistrarsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/registrars/registrars.component.ts
+++ b/console-webapp/src/app/settings/registrars/registrars.component.ts
@ -0,0 +1,22 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-registrars',
+  templateUrl: './registrars.component.html',
+  styleUrls: ['./registrars.component.less'],
+})
+export default class RegistrarsComponent {}
--- a/console-webapp/src/app/settings/security/security.component.html
+++ b/console-webapp/src/app/settings/security/security.component.html
@ -0,0 +1 @@
+<p>security works!</p>
--- a/console-webapp/src/app/settings/security/security.component.less
+++ b/console-webapp/src/app/settings/security/security.component.less
@ -0,0 +1,13 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
--- a/console-webapp/src/app/settings/security/security.component.spec.ts
+++ b/console-webapp/src/app/settings/security/security.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SecurityComponent } from './security.component';
+
+describe('SecurityComponent', () => {
+  let component: SecurityComponent;
+  let fixture: ComponentFixture<SecurityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SecurityComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SecurityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/security/security.component.ts
+++ b/console-webapp/src/app/settings/security/security.component.ts
@ -0,0 +1,22 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-security',
+  templateUrl: './security.component.html',
+  styleUrls: ['./security.component.less'],
+})
+export default class SecurityComponent {}
--- a/console-webapp/src/app/settings/settings.component.html
+++ b/console-webapp/src/app/settings/settings.component.html
@ -0,0 +1,24 @@
+<div class="console-settings">
+  <h1>Settings</h1>
+  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
+    <a mat-tab-link routerLink="contact" routerLinkActive="active-link"
+      >Contact Info</a
+    >
+    <a mat-tab-link routerLink="whois" routerLinkActive="active-link"
+      >WHOIS Info</a
+    >
+    <a mat-tab-link routerLink="security" routerLinkActive="active-link"
+      >Security</a
+    >
+    <a mat-tab-link routerLink="epp-password" routerLinkActive="active-link"
+      >EPP Password</a
+    >
+    <a mat-tab-link routerLink="users" routerLinkActive="active-link">Users</a>
+    <a mat-tab-link routerLink="registrars" routerLinkActive="active-link"
+      >Registrars</a
+    >
+  </nav>
+  <mat-tab-nav-panel #tabPanel>
+    <router-outlet></router-outlet>
+  </mat-tab-nav-panel>
+</div>
--- a/console-webapp/src/app/settings/settings.component.less
+++ b/console-webapp/src/app/settings/settings.component.less
@ -0,0 +1,24 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.console-settings {
+  .mdc-tab {
+    &.active-link {
+      border-bottom: 2px solid #673ab7;
+      .mdc-tab__text-label {
+        color: #673ab7;
+      }
+    }
+  }
+}
--- a/console-webapp/src/app/settings/settings.component.spec.ts
+++ b/console-webapp/src/app/settings/settings.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SettingsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/settings.component.ts
+++ b/console-webapp/src/app/settings/settings.component.ts
@ -0,0 +1,23 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.less'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SettingsComponent {}
--- a/console-webapp/src/app/settings/users/users.component.html
+++ b/console-webapp/src/app/settings/users/users.component.html
@ -0,0 +1 @@
+<p>users works!</p>
--- a/console-webapp/src/app/settings/users/users.component.less
+++ b/console-webapp/src/app/settings/users/users.component.less
@ -0,0 +1,13 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
--- a/console-webapp/src/app/settings/users/users.component.spec.ts
+++ b/console-webapp/src/app/settings/users/users.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UsersComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/users/users.component.ts
+++ b/console-webapp/src/app/settings/users/users.component.ts
@ -0,0 +1,22 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.less'],
+})
+export default class UsersComponent {}
--- a/console-webapp/src/app/settings/whois/whois.component.html
+++ b/console-webapp/src/app/settings/whois/whois.component.html
@ -0,0 +1 @@
+<p>whois works!</p>
--- a/console-webapp/src/app/settings/whois/whois.component.less
+++ b/console-webapp/src/app/settings/whois/whois.component.less
@ -0,0 +1,13 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
--- a/console-webapp/src/app/settings/whois/whois.component.spec.ts
+++ b/console-webapp/src/app/settings/whois/whois.component.spec.ts
@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WhoisComponent } from './whois.component';
+
+describe('WhoisComponent', () => {
+  let component: WhoisComponent;
+  let fixture: ComponentFixture<WhoisComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WhoisComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WhoisComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/console-webapp/src/app/settings/whois/whois.component.ts
+++ b/console-webapp/src/app/settings/whois/whois.component.ts
@ -0,0 +1,22 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-whois',
+  templateUrl: './whois.component.html',
+  styleUrls: ['./whois.component.less'],
+})
+export default class WhoisComponent {}
--- a/console-webapp/src/app/shared/services/backend.service.ts
+++ b/console-webapp/src/app/shared/services/backend.service.ts
@ -0,0 +1,75 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, catchError, of } from 'rxjs';
+import { Contact } from '../../settings/contact/contact.service';
+
+@Injectable()
+export class BackendService {
+  constructor(private http: HttpClient) {}
+
+  errorCatcher<Type>(
+    error: HttpErrorResponse,
+    mockData?: Type
+  ): Observable<Type> {
+    if (error.error instanceof Error) {
+      // A client-side or network error occurred. Handle it accordingly.
+      console.error('An error occurred:', error.error.message);
+    } else {
+      // The backend returned an unsuccessful response code.
+      // The response body may contain clues as to what went wrong,
+      console.error(
+        `Backend returned code ${error.status}, body was: ${error.error}`
+      );
+    }
+
+    //   return throwError(() => {throw "Failed"});
+    return of(<Type>mockData);
+  }
+
+  getContacts(registrarId: string): Observable<Contact[]> {
+    const mockData = [
+      {
+        name: 'Name Lastname',
+        emailAddress: 'test@google.com',
+        registrarId: 'zoomco',
+        types: ['ADMIN'],
+        visibleInWhoisAsAdmin: false,
+        visibleInWhoisAsTech: false,
+        visibleInDomainWhoisAsAbuse: false,
+      },
+      {
+        name: 'Testname testlastname',
+        emailAddress: 'testasd@google.com',
+        registrarId: 'zoomco',
+        visibleInWhoisAsAdmin: false,
+        visibleInWhoisAsTech: false,
+        visibleInDomainWhoisAsAbuse: false,
+        types: ['BILLING'],
+      },
+    ];
+    return this.http
+      .get<Contact[]>(`/console-api/settings/contacts?registrarId=${registrarId}`)
+      .pipe(catchError((err) => this.errorCatcher<Contact[]>(err, <Contact[]>mockData)));
+  }
+
+  postContacts(registrarId: string, contacts: Contact[]): Observable<Contact[]> {
+    return this.http.post<Contact[]>(
+      `/console-api/settings/contacts?registrarId=${registrarId}`,
+      { contacts }
+    );
+  }
+}
--- a/console-webapp/src/app/tlds/tlds.component.html
+++ b/console-webapp/src/app/tlds/tlds.component.html
@ -1,12 +1,23 @@
-
 <div class="console-tlds__cards">
  <mat-card class="console-tlds__card">
    <mat-card-title>.how</mat-card-title>
-    <mat-card-subtitle>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle>
+    <mat-card-subtitle
+      >A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle
+    >
    <mat-card-actions class="console-tlds__card-links">
-      <a title="Onboarding Now" href="#" target="_blank" rel="noopener">Onboarding Now</a>
-      <a title="Marketing Materials" href="#" target="_blank" rel="noopener">Marketing Materials</a>
-      <a title="Visit get.how for more information" href="#" target="_blank" rel="noopener">Visit get.how for more information</a>
+      <a title="Onboarding Now" href="#" target="_blank" rel="noopener"
+        >Onboarding Now</a
+      >
+      <a title="Marketing Materials" href="#" target="_blank" rel="noopener"
+        >Marketing Materials</a
+      >
+      <a
+        title="Visit get.how for more information"
+        href="#"
+        target="_blank"
+        rel="noopener"
+        >Visit get.how for more information</a
+      >
    </mat-card-actions>
  </mat-card>
 </div>
@ -14,11 +25,23 @@
 <div class="console-tlds__cards">
  <mat-card class="console-tlds__card">
    <mat-card-title>.soy</mat-card-title>
-    <mat-card-subtitle>A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle>
+    <mat-card-subtitle
+      >A place for thinkers, tinkerers, and knowledge seekers</mat-card-subtitle
+    >
    <mat-card-actions class="console-tlds__card-links">
-      <a title="Onboarding Now" href="#" target="_blank" rel="noopener">Onboarding Now</a>
-      <a title="Marketing Materials" href="#" target="_blank" rel="noopener">Marketing Materials</a>
-      <a title="Visit get.how for more information" href="#" target="_blank" rel="noopener">Visit iam.soy for more information</a>
+      <a title="Onboarding Now" href="#" target="_blank" rel="noopener"
+        >Onboarding Now</a
+      >
+      <a title="Marketing Materials" href="#" target="_blank" rel="noopener"
+        >Marketing Materials</a
+      >
+      <a
+        title="Visit get.how for more information"
+        href="#"
+        target="_blank"
+        rel="noopener"
+        >Visit iam.soy for more information</a
+      >
    </mat-card-actions>
  </mat-card>
 </div>
--- a/console-webapp/src/app/tlds/tlds.component.less
+++ b/console-webapp/src/app/tlds/tlds.component.less
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
--- a/console-webapp/src/app/tlds/tlds.component.spec.ts
+++ b/console-webapp/src/app/tlds/tlds.component.spec.ts
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -15,7 +15,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { TldsComponent } from './tlds.component';
-import {MaterialModule} from '../material.module';
+import { MaterialModule } from '../material.module';

 describe('TldsComponent', () => {
  let component: TldsComponent;
@ -24,9 +24,8 @@ describe('TldsComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MaterialModule],
-      declarations: [ TldsComponent ]
-    })
-    .compileComponents();
+      declarations: [TldsComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(TldsComponent);
    component = fixture.componentInstance;
--- a/console-webapp/src/app/tlds/tlds.component.ts
+++ b/console-webapp/src/app/tlds/tlds.component.ts
@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@ -12,18 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';

@Component({
  selector: 'app-tlds',
  templateUrl: './tlds.component.html',
-  styleUrls: ['./tlds.component.less']
+  styleUrls: ['./tlds.component.less'],
 })
-export class TldsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
+export class TldsComponent {}
--- a/console-webapp/src/environments/environment.prod.ts
+++ b/console-webapp/src/environments/environment.prod.ts
@ -13,5 +13,5 @@
 // limitations under the License.

 export const environment = {
-  production: true
+  production: true,
 };
--- a/console-webapp/src/environments/environment.ts
+++ b/console-webapp/src/environments/environment.ts
@ -17,7 +17,7 @@
 // The list of file replacements can be found in `angular.json`.

 export const environment = {
-  production: false
+  production: false,
 };

 /*
--- a/console-webapp/src/index.html
+++ b/console-webapp/src/index.html
@ -1,16 +1,22 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Nomulus Console</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-</head>
-<body class="mat-typography">
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Nomulus Console</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
 </html>
--- a/console-webapp/src/main.ts
+++ b/console-webapp/src/main.ts
@ -22,5 +22,6 @@ if (environment.production) {
  enableProdMode();
 }

-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
--- a/console-webapp/src/polyfills.ts
+++ b/console-webapp/src/polyfills.ts
@ -45,8 +45,7 @@
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
-import 'zone.js';  // Included with Angular CLI.
-
+import 'zone.js'; // Included with Angular CLI.

 /***************************************************************************************************
 * APPLICATION IMPORTS
--- a/console-webapp/src/styles.less
+++ b/console-webapp/src/styles.less
@ -12,7 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.

-
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
--- a/console-webapp/src/test.ts
+++ b/console-webapp/src/test.ts
@ -4,11 +4,11 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
+  platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';

 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  platformBrowserDynamicTesting()
 );