Add UI for EPP Password update (#2393)

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

@@ -36,6 +36,7 @@ import { RegistrarComponent } from './registrar/registrarsTable.component';
 import { ResourcesComponent } from './resources/resources.component';
 import SettingsContactComponent from './settings/contact/contact.component';
 import { ContactDetailsComponent } from './settings/contact/contactDetails.component';
+import EppPasswordEditComponent from './settings/security/eppPasswordEdit.component';
 import SecurityComponent from './settings/security/security.component';
 import SecurityEditComponent from './settings/security/securityEdit.component';
 import { SettingsComponent } from './settings/settings.component';
@@ -57,6 +58,7 @@ import { TldsComponent } from './tlds/tlds.component';
     BillingInfoComponent,
     ContactDetailsComponent,
     DomainListComponent,
+    EppPasswordEditComponent,
     HeaderComponent,
     HomeComponent,
     LocationBackDirective,

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

@@ -12,16 +12,23 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
+import { DialogModule } from '@angular/cdk/dialog';
+import { CdkMenuModule } from '@angular/cdk/menu';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 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 { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -29,24 +36,18 @@ 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 { MatPaginatorModule } from '@angular/material/paginator';
 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 { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 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';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 @NgModule({
   exports: [
@@ -85,6 +86,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
     MatPaginatorModule,
     MatChipsModule,
     MatAutocompleteModule,
+    ReactiveFormsModule,
   ],
 })
 export class MaterialModule {}

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

@@ -23,6 +23,10 @@ import {
   GlobalLoaderService,
 } from '../shared/services/globalLoader.service';
 
+export interface IpAllowListItem {
+  value: string;
+}
+
 export interface Address {
   city?: string;
   countryCode?: string;
@@ -31,6 +35,19 @@ export interface Address {
   zip?: string;
 }
 
+export interface SecuritySettingsBackendModel {
+  clientCertificate?: string;
+  failoverClientCertificate?: string;
+  ipAddressAllowList?: Array<string>;
+  // TODO: @ptkach At some point we want to add a back-end support for this
+  eppPasswordLastUpdated?: string;
+}
+
+export interface SecuritySettings
+  extends Omit<SecuritySettingsBackendModel, 'ipAddressAllowList'> {
+  ipAddressAllowList?: Array<IpAllowListItem>;
+}
+
 export interface WhoisRegistrarFields {
   ianaIdentifier?: number;
   icannReferralEmail: string;
@@ -40,13 +57,14 @@ export interface WhoisRegistrarFields {
   whoisServer: string;
 }
 
-export interface Registrar extends WhoisRegistrarFields {
+export interface Registrar
+  extends WhoisRegistrarFields,
+    SecuritySettingsBackendModel {
   allowedTlds?: string[];
   billingAccountMap?: object;
   driveFolderId?: string;
   emailAddress?: string;
   faxNumber?: string;
-  ipAddressAllowList?: string[];
   phoneNumber?: string;
   registrarId: string;
   registrarName: string;

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

@@ -25,6 +25,9 @@
       font-weight: 500;
       padding: 10px 0;
     }
+    .contact__name-column-roles {
+      margin-bottom: 10px;
+    }
   }
   &__empty-contacts {
     display: flex;

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

@@ -17,10 +17,9 @@ import { MatTableDataSource } from '@angular/material/table';
 import { take } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import {
-  Contact,
   ContactService,
-  ViewReadyContact,
   contactTypeToViewReadyContact,
+  ViewReadyContact,
 } from './contact.service';
 
 @Component({
@@ -85,7 +84,7 @@ export default class ContactComponent {
     });
   }
 
-  openDetails(contact: Contact) {
+  openDetails(contact: ViewReadyContact) {
     this.contactService.setEditableContact(contact);
     this.contactService.isContactDetailsView = true;
   }

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

@@ -77,19 +77,17 @@ export class ContactService {
     private registrarService: RegistrarService
   ) {}
 
-  setEditableContact(contact?: Contact) {
-    this.contactInEdit = contactTypeToViewReadyContact(
-      contact
-        ? contact
-        : {
-            emailAddress: '',
-            name: '',
-            types: ['ADMIN'],
-            faxNumber: '',
-            phoneNumber: '',
-            registrarId: '',
-          }
-    );
+  setEditableContact(contact?: ViewReadyContact) {
+    this.contactInEdit = contact
+      ? contact
+      : contactTypeToViewReadyContact({
+          emailAddress: '',
+          name: '',
+          types: ['ADMIN'],
+          faxNumber: '',
+          phoneNumber: '',
+          registrarId: '',
+        });
   }
 
   fetchContacts(): Observable<Contact[]> {
@@ -106,13 +104,6 @@ export class ContactService {
       .pipe(switchMap((_) => this.fetchContacts()));
   }
 
-  updateContact(index: number, contact: ViewReadyContact) {
-    const newContacts = this.contacts().map((c, i) =>
-      i === index ? contact : c
-    );
-    return this.saveContacts(newContacts);
-  }
-
   addContact(contact: ViewReadyContact) {
     const newContacts = this.contacts().concat([contact]);
     return this.saveContacts(newContacts);

console-webapp/src/app/settings/contact/contactDetails.component.ts

@@ -65,16 +65,17 @@ export class ContactDetailsComponent {
 
   save(e: SubmitEvent) {
     e.preventDefault();
-    this.contactService
-      .saveContacts([this.contactService.contactInEdit])
-      .subscribe({
-        complete: () => {
-          this.goBack();
-        },
-        error: (err: HttpErrorResponse) => {
-          this._snackBar.open(err.error);
-        },
-      });
+    const request = this.contactService.isContactNewView
+      ? this.contactService.addContact(this.contactService.contactInEdit)
+      : this.contactService.saveContacts(this.contactService.contacts());
+    request.subscribe({
+      complete: () => {
+        this.goBack();
+      },
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error);
+      },
+    });
   }
 
   checkboxIsChecked(type: string) {

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

@@ -0,0 +1,76 @@
+<div class="settings-security__edit-password">
+  <p>
+    <button
+      mat-icon-button
+      aria-label="Back to security settings"
+      (click)="goBack()"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+  </p>
+  <h1>Update EPP password</h1>
+  <p class="secondary-text">
+    Passwords must be between 6 and 16 alphanumeric characters
+  </p>
+  <form
+    (ngSubmit)="save()"
+    [formGroup]="passwordUpdateForm"
+    class="settings-security__edit-password-form"
+  >
+    <div class="settings-security__edit-password-field">
+      <mat-form-field appearance="outline">
+        <mat-label>Old password: </mat-label>
+        <input
+          matInput
+          type="text"
+          formControlName="oldPassword"
+          required
+          autocomplete="current-password"
+        />
+        <mat-error *ngIf="hasError('oldPassword') as errorText">{{
+          errorText
+        }}</mat-error>
+      </mat-form-field>
+    </div>
+    <div class="settings-security__edit-password-field">
+      <mat-form-field appearance="outline">
+        <mat-label>New password: </mat-label>
+        <input
+          matInput
+          type="text"
+          formControlName="newPassword"
+          required
+          autocomplete="new-password"
+        />
+        <mat-error *ngIf="hasError('newPassword') as errorText">{{
+          errorText
+        }}</mat-error>
+      </mat-form-field>
+    </div>
+    <div class="settings-security__edit-password-field">
+      <mat-form-field appearance="outline">
+        <mat-label>Confirm new password: </mat-label>
+        <input
+          matInput
+          type="text"
+          formControlName="newPasswordRepeat"
+          required
+          autocomplete="new-password"
+        />
+        <mat-error *ngIf="hasError('newPasswordRepeat') as errorText">{{
+          errorText
+        }}</mat-error>
+      </mat-form-field>
+    </div>
+    <button
+      mat-flat-button
+      color="primary"
+      [disabled]="!passwordUpdateForm.valid"
+      aria-label="Save epp password update"
+      type="submit"
+      class="settings-security__edit-password-save"
+    >
+      Save
+    </button>
+  </form>
+</div>

console-webapp/src/app/settings/security/eppPasswordEdit.component.scss

@@ -0,0 +1,16 @@
+.settings-security__edit-password {
+  max-width: 616px;
+  &-field {
+    width: 100%;
+    mat-form-field {
+      margin-bottom: 20px;
+      width: 100%;
+    }
+  }
+  &-form {
+    margin-top: 30px;
+  }
+  &-save {
+    margin-top: 30px;
+  }
+}

console-webapp/src/app/settings/security/eppPasswordEdit.component.ts

@@ -0,0 +1,109 @@
+// Copyright 2024 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';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { SecurityService } from './security.service';
+
+type errorCode = 'required' | 'maxlength' | 'minlength' | 'passwordsDontMatch';
+
+type errorFriendlyText = { [type in errorCode]: String };
+
+@Component({
+  selector: 'app-epp-password-edit',
+  templateUrl: './eppPasswordEdit.component.html',
+  styleUrls: ['./eppPasswordEdit.component.scss'],
+})
+export default class EppPasswordEditComponent {
+  MIN_MAX_LENGHT = new String(
+    'Passwords must be between 6 and 16 alphanumeric characters'
+  );
+
+  errorTextMap: errorFriendlyText = {
+    required: "This field can't be empty",
+    maxlength: this.MIN_MAX_LENGHT,
+    minlength: this.MIN_MAX_LENGHT,
+    passwordsDontMatch: "Passwords don't match",
+  };
+
+  constructor(
+    public securityService: SecurityService,
+    private _snackBar: MatSnackBar,
+    public registrarService: RegistrarService
+  ) {}
+
+  hasError(controlName: string) {
+    const maybeErrors = this.passwordUpdateForm.get(controlName)?.errors;
+    const maybeError =
+      maybeErrors && (Object.keys(maybeErrors)[0] as errorCode);
+    if (maybeError) {
+      return this.errorTextMap[maybeError];
+    }
+    return '';
+  }
+
+  newPasswordsMatch: ValidatorFn = (control: AbstractControl) => {
+    if (
+      this.passwordUpdateForm?.get('newPassword')?.value ===
+      this.passwordUpdateForm?.get('newPasswordRepeat')?.value
+    ) {
+      this.passwordUpdateForm?.get('newPasswordRepeat')?.setErrors(null);
+    } else {
+      this.passwordUpdateForm
+        ?.get('newPasswordRepeat')
+        ?.setErrors({ passwordsDontMatch: control.value });
+    }
+    return null;
+  };
+
+  passwordUpdateForm = new FormGroup({
+    oldPassword: new FormControl('', [Validators.required]),
+    newPassword: new FormControl('', [
+      Validators.required,
+      Validators.minLength(6),
+      Validators.maxLength(16),
+      this.newPasswordsMatch,
+    ]),
+    newPasswordRepeat: new FormControl('', [
+      Validators.required,
+      Validators.minLength(6),
+      Validators.maxLength(16),
+      this.newPasswordsMatch,
+    ]),
+  });
+
+  save() {
+    debugger;
+    // this.securityService.saveEppPassword().subscribe({
+    //   complete: () => {
+    //     this.goBack();
+    //   },
+    //   error: (err: HttpErrorResponse) => {
+    //     this._snackBar.open(err.error);
+    //   },
+    // });
+  }
+
+  goBack() {
+    this.securityService.isEditingPassword = false;
+  }
+}

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

@@ -1,7 +1,48 @@
 @if(securityService.isEditingSecurity) {
 <app-security-edit></app-security-edit>
+} @else if(securityService.isEditingPassword) {
+<app-epp-password-edit></app-epp-password-edit>
 } @else {
 <div class="settings-security">
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list role="list">
+        <!-- IP Allowlist Start -->
+        <mat-list-item role="listitem">
+          <div class="settings-security__section-header">
+            <h2>EPP Password</h2>
+            <button
+              mat-flat-button
+              color="primary"
+              aria-label="Edit EPP Password"
+              (click)="editEppPassword()"
+            >
+              <mat-icon>edit</mat-icon>
+              Edit
+            </button>
+          </div>
+        </mat-list-item>
+        <mat-list-item role="listitem" lines="3">
+          <span class="console-app__list-value"
+            >todo: come up with a text here</span
+          >
+        </mat-list-item>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Password</span>
+          <span class="console-app__list-value">••••••••••••••</span>
+        </mat-list-item>
+        @if(dataSource.eppPasswordLastUpdated) {
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Last Changed</span>
+          <span class="console-app__list-value">{{
+            dataSource.eppPasswordLastUpdated
+          }}</span>
+        </mat-list-item>
+        }
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
   <mat-card appearance="outlined">
     <mat-card-content>
       <mat-list role="list">
@@ -12,7 +53,7 @@
             <button
               mat-flat-button
               color="primary"
-              aria-label="Edit Contact"
+              aria-label="Edit security settings"
               (click)="editSecurity()"
             >
               <mat-icon>edit</mat-icon>

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

@@ -13,12 +13,11 @@
 // limitations under the License.
 
 import { Component, effect } from '@angular/core';
-import { RegistrarService } from 'src/app/registrar/registrar.service';
 import {
-  SecurityService,
+  RegistrarService,
   SecuritySettings,
-  apiToUiConverter,
-} from './security.service';
+} from 'src/app/registrar/registrar.service';
+import { SecurityService, apiToUiConverter } from './security.service';
 
 @Component({
   selector: 'app-security',
@@ -43,4 +42,8 @@ export default class SecurityComponent {
   editSecurity() {
     this.securityService.isEditingSecurity = true;
   }
+
+  editEppPassword() {
+    this.securityService.isEditingPassword = true;
+  }
 }

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

@@ -14,24 +14,14 @@
 
 import { Injectable } from '@angular/core';
 import { switchMap } from 'rxjs';
-import { RegistrarService } from 'src/app/registrar/registrar.service';
+import {
+  IpAllowListItem,
+  RegistrarService,
+  SecuritySettings,
+  SecuritySettingsBackendModel,
+} from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 
-export interface ipAllowListItem {
-  value: string;
-}
-export interface SecuritySettings {
-  clientCertificate?: string;
-  failoverClientCertificate?: string;
-  ipAddressAllowList?: Array<ipAllowListItem>;
-}
-
-export interface SecuritySettingsBackendModel {
-  clientCertificate?: string;
-  failoverClientCertificate?: string;
-  ipAddressAllowList?: Array<string>;
-}
-
 export function apiToUiConverter(
   securitySettings: SecuritySettingsBackendModel = {}
 ): SecuritySettings {
@@ -48,7 +38,7 @@ export function uiToApiConverter(
   return Object.assign({}, securitySettings, {
     ipAddressAllowList: (securitySettings.ipAddressAllowList || [])
       .filter((s) => s.value)
-      .map((ipAllowItem: ipAllowListItem) => ipAllowItem.value),
+      .map((ipAllowItem: IpAllowListItem) => ipAllowItem.value),
   });
 }
 
@@ -58,6 +48,7 @@ export function uiToApiConverter(
 export class SecurityService {
   securitySettings: SecuritySettings = {};
   isEditingSecurity: boolean = false;
+  isEditingPassword: boolean = false;
 
   constructor(
     private backend: BackendService,
@@ -76,4 +67,6 @@ export class SecurityService {
         })
       );
   }
+
+  saveEppPassword() {}
 }

console-webapp/src/app/settings/security/securityEdit.component.ts

@@ -15,13 +15,12 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { RegistrarService } from 'src/app/registrar/registrar.service';
 import {
-  SecurityService,
+  IpAllowListItem,
+  RegistrarService,
   SecuritySettings,
-  apiToUiConverter,
-  ipAllowListItem,
-} from './security.service';
+} from 'src/app/registrar/registrar.service';
+import { SecurityService, apiToUiConverter } from './security.service';
 
 @Component({
   selector: 'app-security-edit',
@@ -58,7 +57,7 @@ export default class SecurityEditComponent {
     this.securityService.isEditingSecurity = false;
   }
 
-  removeIpEntry(ip: ipAllowListItem) {
+  removeIpEntry(ip: IpAllowListItem) {
     this.dataSource.ipAddressAllowList =
       this.dataSource.ipAddressAllowList?.filter((item) => item !== ip);
   }

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

@@ -15,11 +15,11 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, catchError, of, throwError } from 'rxjs';
-import { SecuritySettingsBackendModel } from 'src/app/settings/security/security.service';
 
 import { DomainListResult } from 'src/app/domains/domainList.service';
 import {
   Registrar,
+  SecuritySettingsBackendModel,
   WhoisRegistrarFields,
 } from '../../registrar/registrar.service';
 import { Contact } from '../../settings/contact/contact.service';