Add reset-EPP-password frontend component (#2786)

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

@@ -77,4 +77,17 @@
       Save
     </button>
   </form>
+  @if(userDataService.userData()?.isAdmin) {
+  <div class="settings-security__reset-password-field">
+    <h2>Need to reset your EPP password?</h2>
+    <button
+      mat-flat-button
+      color="primary"
+      aria-label="Reset EPP password via email"
+      (click)="requestEppPasswordReset()"
+    >
+      Reset EPP password via email
+    </button>
+  </div>
+  }
 </div>

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

@@ -1,16 +1,35 @@
-.settings-security__edit-password {
-  max-width: 616px;
-  &-field {
-    width: 100%;
-    mat-form-field {
-      margin-bottom: 20px;
+// Copyright 2025 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.
+
+.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;
     }
   }
-  &-form {
-    margin-top: 30px;
-  }
-  &-save {
-    margin-top: 30px;
+  &__reset-password-field {
+    margin-top: 60px;
   }
 }

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

@@ -24,11 +24,43 @@ import {
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { SecurityService } from './security.service';
+import { UserDataService } from 'src/app/shared/services/userData.service';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from 'src/app/material.module';
+import { filter, switchMap, take } from 'rxjs';
+import { BackendService } from 'src/app/shared/services/backend.service';
 
 type errorCode = 'required' | 'maxlength' | 'minlength' | 'passwordsDontMatch';
 
 type errorFriendlyText = { [type in errorCode]: String };
 
+@Component({
+  selector: 'app-reset-epp-password-dialog',
+  template: `
+    <h2 mat-dialog-title>Please confirm the password reset:</h2>
+    <mat-dialog-content>
+      This will send an EPP password reset email to the admin POC.
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-button color="warn" (click)="onSave()">Confirm</button>
+    </mat-dialog-actions>
+  `,
+  imports: [CommonModule, MaterialModule],
+})
+export class ResetEppPasswordComponent {
+  constructor(public dialogRef: MatDialogRef<ResetEppPasswordComponent>) {}
+
+  onSave(): void {
+    this.dialogRef.close(true);
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+}
+
 @Component({
   selector: 'app-epp-password-edit',
   templateUrl: './eppPasswordEdit.component.html',
@@ -48,9 +80,12 @@ export default class EppPasswordEditComponent {
   };
 
   constructor(
+    public registrarService: RegistrarService,
     public securityService: SecurityService,
-    private _snackBar: MatSnackBar,
-    public registrarService: RegistrarService
+    protected userDataService: UserDataService,
+    private backendService: BackendService,
+    private resetPasswordDialog: MatDialog,
+    private _snackBar: MatSnackBar
   ) {}
 
   hasError(controlName: string) {
@@ -120,4 +155,26 @@ export default class EppPasswordEditComponent {
   goBack() {
     this.securityService.isEditingPassword = false;
   }
+
+  sendEppPasswordResetRequest() {
+    return this.backendService.requestEppPasswordReset(
+      this.registrarService.registrarId()
+    );
+  }
+
+  requestEppPasswordReset() {
+    const dialogRef = this.resetPasswordDialog.open(ResetEppPasswordComponent);
+    dialogRef
+      .afterClosed()
+      .pipe(
+        take(1),
+        filter((result) => !!result)
+      )
+      .pipe(switchMap((_) => this.sendEppPasswordResetRequest()))
+      .subscribe({
+        next: (_) => this.goBack(),
+        error: (err: HttpErrorResponse) =>
+          this._snackBar.open(err.error || err.message),
+      });
+  }
 }

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

@@ -291,4 +291,11 @@ export class BackendService {
       registryLockEmail,
     });
   }
+
+  requestEppPasswordReset(registrarId: string) {
+    return this.http.post('/console-api/password-reset-request', {
+      type: 'EPP',
+      registrarId,
+    });
+  }
 }