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

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>

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>

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;
+    }
+  }
+}

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();
+  });
+});

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);
+    }
+  }
+}

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);
+  }
+}

console-webapp/src/app/settings/registrars/registrars.component.html

@@ -0,0 +1 @@
+<p>registrars component works!</p>

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.

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();
+  });
+});

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 {}

console-webapp/src/app/settings/security/security.component.html

@@ -0,0 +1 @@
+<p>security works!</p>

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.

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();
+  });
+});

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 {}

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>

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;
+      }
+    }
+  }
+}

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();
+  });
+});

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 {}

console-webapp/src/app/settings/users/users.component.html

@@ -0,0 +1 @@
+<p>users works!</p>

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.

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();
+  });
+});

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 {}

console-webapp/src/app/settings/whois/whois.component.html

@@ -0,0 +1 @@
+<p>whois works!</p>

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.

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();
+  });
+});

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 {}