Add delete user to the console (#2603)

* Add delete user to the console

* Add delete user to the console

* Add delete user to the console

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

@@ -172,6 +172,14 @@ export class BackendService {
       .pipe(catchError((err) => this.errorCatcher<User>(err)));
   }
 
+  deleteUser(registrarId: string, emailAddress: string): Observable<any> {
+    return this.http
+      .delete<any>(`/console-api/users?registrarId=${registrarId}`, {
+        body: JSON.stringify({ emailAddress }),
+      })
+      .pipe(catchError((err) => this.errorCatcher<any>(err)));
+  }
+
   getUserData(): Observable<UserData> {
     return this.http
       .get<UserData>('/console-api/userdata')

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

@@ -0,0 +1,79 @@
+<div class="console-app__user-details">
+  @if(isNewUser) {
+  <h1 class="mat-headline-4">
+    {{ userDetails.emailAddress + " succesfully created" }}
+  </h1>
+  } @else {
+  <h1 class="mat-headline-4">User details</h1>
+  }
+  <mat-divider></mat-divider>
+  <div>
+    <div class="console-app__user-details-controls">
+      <button
+        mat-icon-button
+        aria-label="Back to users list"
+        (click)="goBack()"
+      >
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <div class="spacer"></div>
+      <button
+        mat-icon-button
+        aria-label="Delete User"
+        (click)="deleteUser()"
+        [disabled]="isLoading"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+  </div>
+  <p *ngIf="isLoading">
+    <mat-progress-bar mode="query"></mat-progress-bar>
+  </p>
+
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list role="list">
+        <mat-list-item role="listitem">
+          <h2>User details</h2>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">User email</span>
+          <span class="console-app__list-value">{{
+            userDetails.emailAddress
+          }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">User role</span>
+          <span class="console-app__list-value">{{
+            roleToDescription(userDetails.role)
+          }}</span>
+        </mat-list-item>
+        @if (userDetails.password) {
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Password</span>
+          <span
+            class="console-app__list-value console-app__user-details-password"
+          >
+            <input
+              [type]="isPasswordVisible ? 'text' : 'password'"
+              [value]="userDetails.password"
+              disabled
+            />
+            <button
+              mat-button
+              aria-label="Show password"
+              (click)="isPasswordVisible = !isPasswordVisible"
+            >
+              {{ isPasswordVisible ? "Hide" : "View" }} password
+            </button>
+          </span>
+        </mat-list-item>
+        }
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+</div>

console-webapp/src/app/users/userEdit.component.scss

@@ -0,0 +1,30 @@
+// 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.
+
+.console-app {
+  &__user-details {
+    &-controls {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+    }
+    &-password {
+      input {
+        border: none;
+        background: transparent;
+      }
+    }
+    max-width: 616px;
+  }
+}

console-webapp/src/app/users/userEdit.component.ts

@@ -0,0 +1,81 @@
+// 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 { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SelectedRegistrarModule } from '../app.module';
+import { MaterialModule } from '../material.module';
+import { RegistrarService } from '../registrar/registrar.service';
+import { SnackBarModule } from '../snackbar.module';
+import { User, UsersService, roleToDescription } from './users.service';
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './userEdit.component.html',
+  styleUrls: ['./userEdit.component.scss'],
+  standalone: true,
+  imports: [
+    MaterialModule,
+    SnackBarModule,
+    CommonModule,
+    SelectedRegistrarModule,
+  ],
+  providers: [],
+})
+export class UserEditComponent {
+  inEdit = false;
+  isPasswordVisible = false;
+  isNewUser = false;
+  isLoading = false;
+  userDetails: User;
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected usersService: UsersService,
+    private _snackBar: MatSnackBar
+  ) {
+    this.userDetails = this.usersService
+      .users()
+      .filter(
+        (u) => u.emailAddress === this.usersService.currentlyOpenUserEmail()
+      )[0];
+    if (this.usersService.isNewUser) {
+      this.isNewUser = true;
+      this.usersService.isNewUser = false;
+    }
+  }
+
+  roleToDescription(role: string) {
+    return roleToDescription(role);
+  }
+
+  deleteUser() {
+    this.isLoading = true;
+    this.usersService.deleteUser(this.userDetails.emailAddress).subscribe({
+      error: (err) => {
+        this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
+      },
+      complete: () => {
+        this.isLoading = false;
+        this.goBack();
+      },
+    });
+  }
+
+  goBack() {
+    this.usersService.currentlyOpenUserEmail.set('');
+  }
+}

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

@@ -1,5 +1,11 @@
 <app-selected-registrar-wrapper>
-  @if (!isLoading) {
+  @if(isLoading) {
+  <div class="console-app__users-spinner">
+    <mat-spinner />
+  </div>
+  } @else if(usersService.currentlyOpenUserEmail()) {
+  <app-user-edit></app-user-edit>
+  } @else {
   <div class="console-app__users">
     <div class="console-app__users-header">
       <h1 class="mat-headline-4">Users</h1>
@@ -32,12 +38,11 @@
         ></mat-cell>
       </ng-container>
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      <mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        (click)="openDetails(row.emailAddress)"
+      ></mat-row>
     </mat-table>
   </div>
-  } @else {
-  <div class="console-app__users-spinner">
-    <mat-spinner />
-  </div>
   }
 </app-selected-registrar-wrapper>

console-webapp/src/app/users/users.component.ts

@@ -22,15 +22,8 @@ import { SelectedRegistrarModule } from '../app.module';
 import { MaterialModule } from '../material.module';
 import { RegistrarService } from '../registrar/registrar.service';
 import { SnackBarModule } from '../snackbar.module';
-import { User, UsersService } from './users.service';
-
-const roleToDescription = (role: String) => {
-  if (!role) return 'N/A';
-  else if (role.toLowerCase().startsWith('account_manager')) {
-    return 'Viewer';
-  }
-  return 'Editor';
-};
+import { UserEditComponent } from './userEdit.component';
+import { roleToDescription, User, UsersService } from './users.service';
 
 export const columns = [
   {
@@ -55,6 +48,7 @@ export const columns = [
     SnackBarModule,
     CommonModule,
     SelectedRegistrarModule,
+    UserEditComponent,
   ],
   providers: [UsersService],
 })
@@ -92,6 +86,7 @@ export class UsersComponent {
     this.usersService.fetchUsers().subscribe({
       error: (err: HttpErrorResponse) => {
         this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
       },
       complete: () => {
         this.isLoading = false;
@@ -102,21 +97,17 @@ export class UsersComponent {
   createNewUser() {
     this.isLoading = true;
     this.usersService.createNewUser().subscribe({
-      next: (newUser) => {
-        this._snackBar.open(
-          `New user with email ${newUser.emailAddress} has been created.`,
-          '',
-          {
-            duration: 2000,
-          }
-        );
-      },
       error: (err: HttpErrorResponse) => {
         this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
       },
       complete: () => {
         this.isLoading = false;
       },
     });
   }
+
+  openDetails(emailAddress: string) {
+    this.usersService.currentlyOpenUserEmail.set(emailAddress);
+  }
 }

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

@@ -17,19 +17,29 @@ import { tap } from 'rxjs';
 import { RegistrarService } from '../registrar/registrar.service';
 import { BackendService } from '../shared/services/backend.service';
 
+export const roleToDescription = (role: string) => {
+  if (!role) return 'N/A';
+  else if (role.toLowerCase().startsWith('account_manager')) {
+    return 'Viewer';
+  }
+  return 'Editor';
+};
+
 export interface CreateAutoTimestamp {
   creationTime: string;
 }
 
 export interface User {
-  emailAddress: String;
-  role: String;
-  password?: String;
+  emailAddress: string;
+  role: string;
+  password?: string;
 }
 
 @Injectable()
 export class UsersService {
   users = signal<User[]>([]);
+  currentlyOpenUserEmail = signal<string>('');
+  isNewUser: boolean = false;
 
   constructor(
     private backendService: BackendService,
@@ -52,7 +62,15 @@ export class UsersService {
       .pipe(
         tap((newUser: User) => {
           this.users.set([...this.users(), newUser]);
+          this.currentlyOpenUserEmail.set(newUser.emailAddress);
+          this.isNewUser = true;
         })
       );
   }
+
+  deleteUser(emailAddress: string) {
+    return this.backendService
+      .deleteUser(this.registrarService.registrarId(), emailAddress)
+      .pipe(tap((_) => this.fetchUsers()));
+  }
 }