Add settings to console home page, update settings->security styles (#2144)

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

@@ -129,7 +129,7 @@ export class ContactDetailsDialogComponent {
     operationObservable.subscribe({
       complete: this.onCloseCallback.bind(this),
       error: (err: HttpErrorResponse) => {
-        this._snackBar.open(err.statusText, undefined, {
+        this._snackBar.open(err.error, undefined, {
           duration: 1500,
         });
       },
@@ -148,7 +148,8 @@ export default class ContactComponent {
     private dialog: MatDialog,
     private bottomSheet: MatBottomSheet,
     private breakpointObserver: BreakpointObserver,
-    public contactService: ContactService
+    public contactService: ContactService,
+    private _snackBar: MatSnackBar
   ) {
     // TODO: Refactor to registrarId service
     this.loading = true;
@@ -170,7 +171,13 @@ export default class ContactComponent {
 
   deleteContact(contact: Contact) {
     if (confirm(`Please confirm contact ${contact.name} delete`)) {
-      this.contactService.deleteContact(contact).subscribe();
+      this.contactService.deleteContact(contact).subscribe({
+        error: (err: HttpErrorResponse) => {
+          this._snackBar.open(err.error, undefined, {
+            duration: 1500,
+          });
+        },
+      });
     }
   }
 

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

@@ -17,8 +17,10 @@
           dataSource.ipAddressAllowList.length > 0
         "
       >
-        <div *ngFor="let item of dataSource.ipAddressAllowList; index as index">
-          <div>{{ item.value }}</div>
+        <div
+          *ngFor="let item of dataSource.ipAddressAllowList; index as index"
+          class="settings-security__ipRecord"
+        >
           <mat-form-field>
             <input
               matInput

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

@@ -17,6 +17,9 @@
   h1 {
     margin: 0;
   }
+  &__ipRecord {
+    margin-bottom: 1rem;
+  }
   &__section {
     display: flex;
     align-items: stretch;

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

@@ -13,9 +13,14 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { SecurityService, SecuritySettings } from './security.service';
+import {
+  SecurityService,
+  SecuritySettings,
+  apiToUiConverter,
+} from './security.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
 
 @Component({
   selector: 'app-security',
@@ -30,33 +35,19 @@ export default class SecurityComponent {
 
   constructor(
     public securityService: SecurityService,
-    private _snackBar: MatSnackBar
+    private _snackBar: MatSnackBar,
+    public registrarService: RegistrarService
   ) {
-    this.loading = true;
-    this.securityService.fetchSecurityDetails().subscribe({
-      complete: () => {
-        this.dataSource = this.securityService.securitySettings;
-        this.loading = false;
-      },
-      error: (err: HttpErrorResponse) => {
-        this._snackBar.open(err.error, undefined, {
-          duration: 1500,
-        });
-        this.loading = false;
-      },
-    });
+    this.dataSource = apiToUiConverter(this.registrarService.registrar);
   }
 
   enableEdit() {
     this.inEdit = true;
-    this.dataSource = JSON.parse(
-      JSON.stringify(this.securityService.securitySettings)
-    );
   }
 
-  disableEdit() {
+  cancel() {
     this.inEdit = false;
-    this.dataSource = this.securityService.securitySettings;
+    this.resetDataSource();
   }
 
   createIpEntry() {
@@ -68,7 +59,7 @@ export default class SecurityComponent {
     this.securityService.saveChanges(this.dataSource).subscribe({
       complete: () => {
         this.loading = false;
-        this.dataSource = this.securityService.securitySettings;
+        this.resetDataSource();
       },
       error: (err: HttpErrorResponse) => {
         this._snackBar.open(err.error, undefined, {
@@ -76,16 +67,15 @@ export default class SecurityComponent {
         });
       },
     });
-    this.disableEdit();
-  }
-
-  cancel() {
-    this.dataSource = this.securityService.securitySettings;
-    this.inEdit = false;
+    this.cancel();
   }
 
   removeIpEntry(index: number) {
     this.dataSource.ipAddressAllowList =
       this.dataSource.ipAddressAllowList?.filter((_, i) => i != index);
   }
+
+  resetDataSource() {
+    this.dataSource = apiToUiConverter(this.registrarService.registrar);
+  }
 }

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
-import { tap } from 'rxjs';
+import { switchMap } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 
@@ -61,16 +61,6 @@ export class SecurityService {
     private registrarService: RegistrarService
   ) {}
 
-  fetchSecurityDetails() {
-    return this.backend
-      .getSecuritySettings(this.registrarService.activeRegistrarId)
-      .pipe(
-        tap((securitySettings: SecuritySettingsBackendModel) => {
-          this.securitySettings = apiToUiConverter(securitySettings);
-        })
-      );
-  }
-
   saveChanges(newSecuritySettings: SecuritySettings) {
     return this.backend
       .postSecuritySettings(
@@ -78,8 +68,8 @@ export class SecurityService {
         uiToApiConverter(newSecuritySettings)
       )
       .pipe(
-        tap((_) => {
-          this.securitySettings = newSecuritySettings;
+        switchMap(() => {
+          return this.registrarService.loadRegistrars();
         })
       );
   }