Add page for WHOIS-editable fields in the console (#2155)

This isn't the prettiest thing, but it replicates the type of view /
edit functionality that we had in the original console.

Of note: this doesn't include input field validation, which would
probably be a good idea to add at some point.

console-webapp/angular.json

@@ -41,8 +41,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",

console-webapp/src/app/app.module.ts

@@ -47,6 +47,7 @@ import { BillingWidgetComponent } from './home/widgets/billing-widget.component'
 import { DomainsWidgetComponent } from './home/widgets/domains-widget.component';
 import { SettingsWidgetComponent } from './home/widgets/settings-widget.component';
 import { UserDataService } from './shared/services/userData.service';
+import WhoisComponent from './settings/whois/whois.component';
 
 @NgModule({
   declarations: [
@@ -69,6 +70,7 @@ import { UserDataService } from './shared/services/userData.service';
     SettingsWidgetComponent,
     TldsComponent,
     TldsWidgetComponent,
+    WhoisComponent,
   ],
   imports: [
     AppRoutingModule,

console-webapp/src/app/registrar/registrar.service.ts

@@ -13,15 +13,16 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
-import { BackendService } from '../shared/services/backend.service';
 import { Observable, Subject, tap } from 'rxjs';
+
+import { BackendService } from '../shared/services/backend.service';
 import {
   GlobalLoader,
   GlobalLoaderService,
 } from '../shared/services/globalLoader.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
-interface Address {
+export interface Address {
   street?: string[];
   city?: string;
   countryCode?: string;
@@ -31,16 +32,20 @@ interface Address {
 
 export interface Registrar {
   allowedTlds?: string[];
-  ipAddressAllowList?: string[];
-  emailAddress?: string;
   billingAccountMap?: object;
   driveFolderId?: string;
+  emailAddress?: string;
+  faxNumber?: string;
   ianaIdentifier?: number;
   icannReferralEmail?: string;
+  ipAddressAllowList?: string[];
   localizedAddress?: Address;
+  phoneNumber?: string;
   registrarId: string;
   registrarName: string;
   registryLockAllowed?: boolean;
+  url?: string;
+  whoisServer?: string;
 }
 
 @Injectable({

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

@@ -1 +1,250 @@
-<p>whois works!</p>
+<div class="settings-whois">
+  <h2>WHOIS settings</h2>
+  <h3>
+    General registrar information for your WHOIS record. This information is
+    always visible in WHOIS.
+  </h3>
+  <div *ngIf="loading" class="settings-whois__loading">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>Name:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.registrarName"
+          disabled
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>IANA Identifier:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.ianaIdentifier"
+          disabled
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>ICANN Referral Email:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="email"
+          [(ngModel)]="registrar.icannReferralEmail"
+          disabled
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>WHOIS server:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.whoisServer"
+          [disabled]="!inEdit"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>Referral URL:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.url"
+          [disabled]="!inEdit"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>Email:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="email"
+          [(ngModel)]="registrar.emailAddress"
+          [disabled]="!inEdit"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>Phone::</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.phoneNumber"
+          [disabled]="!inEdit"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-description">
+      <h3>Fax:</h3>
+    </div>
+    <div class="settings-whois__section-form">
+      <mat-form-field>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrar.faxNumber"
+          [disabled]="!inEdit"
+        />
+      </mat-form-field>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>Address Line 1:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress?.street"
+            matInput
+            type="text"
+            [(ngModel)]="(registrar.localizedAddress?.street)![0]"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>City:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress"
+            matInput
+            type="text"
+            [(ngModel)]="registrar.localizedAddress.city"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>Address Line 2:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress?.street"
+            matInput
+            type="text"
+            [(ngModel)]="(registrar.localizedAddress?.street)![1]"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>State/Region:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress"
+            matInput
+            type="text"
+            [(ngModel)]="registrar.localizedAddress.state"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+  <div class="settings-whois__section">
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>Address Line 3:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress?.street"
+            matInput
+            type="text"
+            [(ngModel)]="(registrar.localizedAddress?.street)![2]"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+    <div class="settings-whois__section-address">
+      <div class="settings-whois__section-description">
+        <h3>Country Code:</h3>
+      </div>
+      <div class="settings-whois__section-form">
+        <mat-form-field>
+          <input
+            *ngIf="registrar.localizedAddress"
+            matInput
+            type="text"
+            [(ngModel)]="registrar.localizedAddress.countryCode"
+            [disabled]="!inEdit"
+          />
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+  <div class="settings-whois__actions">
+    <ng-template [ngIf]="inEdit" [ngIfElse]="inView">
+      <button
+        class="actions-save"
+        mat-raised-button
+        color="primary"
+        (click)="save()"
+      >
+        Save
+      </button>
+      <button class="actions-cancel" mat-stroked-button (click)="cancel()">
+        Cancel
+      </button>
+    </ng-template>
+    <ng-template #inView>
+      <button #elseBlock mat-raised-button (click)="enableEdit()">Edit</button>
+    </ng-template>
+  </div>
+</div>

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

@@ -11,3 +11,49 @@
 // 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.
+
+.settings-whois {
+  margin-top: 1.5rem;
+  &__section {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    min-width: 400px;
+  }
+  &__section-address {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 5px;
+    min-width: 450px;
+    width: 50%;
+    max-width: 50%;
+  }
+  &__section-description {
+    display: inline-block;
+    margin-block-start: 1em;
+    min-width: 150px;
+  }
+  &__section-form {
+    display: inline-block;
+    width: 70%;
+    mat-form-field {
+      width: 90%;
+      min-width: 300px;
+    }
+    input:disabled {
+      border: 0;
+    }
+  }
+  &__loading {
+    margin: 2rem 0;
+  }
+  &__actions {
+    margin-top: 50px;
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 50px;
+    button {
+      margin-left: 20px;
+    }
+  }
+}

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

@@ -12,13 +12,66 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import {
+  Registrar,
+  RegistrarService,
+} from 'src/app/registrar/registrar.service';
+
+import { WhoisService } from './whois.service';
 
 @Component({
   selector: 'app-whois',
   templateUrl: './whois.component.html',
   styleUrls: ['./whois.component.scss'],
+  providers: [WhoisService],
 })
 export default class WhoisComponent {
   public static PATH = 'whois';
+  loading = false;
+  inEdit = false;
+  registrar: Registrar;
+
+  constructor(
+    public whoisService: WhoisService,
+    public registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {
+    this.registrar = JSON.parse(
+      JSON.stringify(this.registrarService.registrar)
+    );
+  }
+
+  enableEdit() {
+    this.inEdit = true;
+  }
+
+  cancel() {
+    this.inEdit = false;
+    this.resetDataSource();
+  }
+
+  save() {
+    this.loading = true;
+    this.whoisService.saveChanges(this.registrar).subscribe({
+      complete: () => {
+        this.loading = false;
+        this.resetDataSource();
+      },
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error, undefined, {
+          duration: 1500,
+        });
+      },
+    });
+    this.cancel();
+  }
+
+  resetDataSource() {
+    this.registrar = JSON.parse(
+      JSON.stringify(this.registrarService.registrar)
+    );
+  }
 }

console-webapp/src/app/settings/whois/whois.service.ts

@@ -0,0 +1,45 @@
+// 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 { switchMap } from 'rxjs';
+import { Address, RegistrarService } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+
+export interface WhoisRegistrarFields {
+  ianaIdentifier?: number;
+  icannReferralEmail?: string;
+  localizedAddress?: Address;
+  registrarId?: string;
+  url?: string;
+  whoisServer?: string;
+}
+
+@Injectable()
+export class WhoisService {
+  whoisRegistrarFields: WhoisRegistrarFields = {};
+
+  constructor(
+    private backend: BackendService,
+    private registrarService: RegistrarService
+  ) {}
+
+  saveChanges(newWhoisRegistrarFields: WhoisRegistrarFields) {
+    return this.backend.postWhoisRegistrarFields(newWhoisRegistrarFields).pipe(
+      switchMap(() => {
+        return this.registrarService.loadRegistrars();
+      })
+    );
+  }
+}

console-webapp/src/app/shared/services/backend.service.ts

@@ -20,6 +20,7 @@ import { SecuritySettingsBackendModel } from 'src/app/settings/security/security
 import { Contact } from '../../settings/contact/contact.service';
 import { Registrar } from '../../registrar/registrar.service';
 import { UserData } from './userData.service';
+import { WhoisRegistrarFields } from 'src/app/settings/whois/whois.service';
 
 @Injectable()
 export class BackendService {
@@ -97,4 +98,13 @@ export class BackendService {
       .get<UserData>(`/console-api/userdata`)
       .pipe(catchError((err) => this.errorCatcher<UserData>(err)));
   }
+
+  postWhoisRegistrarFields(
+    whoisRegistrarFields: WhoisRegistrarFields
+  ): Observable<WhoisRegistrarFields> {
+    return this.http.post<WhoisRegistrarFields>(
+      '/console-api/settings/whois-fields',
+      whoisRegistrarFields
+    );
+  }
 }