Allow updating icannReferralEmail through the new console ui (#2525)

It already exists under the resources folder.

appengine_war.gradle

@@ -47,10 +47,6 @@ war {
 
 if (project.path == ":services:default") {
     war {
-        from("${rootDir}/console-webapp/dist/console-webapp") {
-            include "**/*"
-            into("console")
-        }
         from("${coreResourcesDir}/google/registry/ui") {
             include "registrar_bin.js"
             if (environment != "production") {
@@ -103,10 +99,11 @@ explodeWar.doLast {
     file("${it.explodedAppDirectory}/WEB-INF/lib/tools.jar").setWritable(true)
 }
 
+appengineDeployAll.mustRunAfter ':console-webapp:deploy'
 appengineDeployAll.finalizedBy ':deployCloudSchedulerAndQueue'
 rootProject.deploy.dependsOn appengineDeployAll
+
 rootProject.stage.dependsOn appengineStage
-tasks['war'].dependsOn ':console-webapp:buildConsoleWebappProd'
 tasks['war'].dependsOn ':core:compileProdJS'
 tasks['war'].dependsOn ':core:processResources'
 tasks['war'].dependsOn ':core:jar'

build.gradle

@@ -342,8 +342,8 @@ subprojects {
   // search for `flex-template-base-image` and update the parameter value.
   // There are at least two instances, one in core/build.gradle, one in
   // release/stage_beam_pipeline.sh
-  sourceCompatibility = JavaVersion.VERSION_17
-  targetCompatibility = JavaVersion.VERSION_17
+  sourceCompatibility = JavaVersion.VERSION_21
+  targetCompatibility = JavaVersion.VERSION_21
 
   project.tasks.test.dependsOn runPresubmits
 
@@ -539,8 +539,6 @@ task coreDev {
   dependsOn 'javadoc'
   dependsOn 'checkDependenciesDotGradle'
   dependsOn 'checkLicense'
-  // TODO: @ptkach reenable after console design merged
-  // dependsOn ':console-webapp:runConsoleWebappUnitTests'
   dependsOn ':core:check'
   dependsOn 'assemble'
 }

common/gradle.lockfile

@@ -6,13 +6,13 @@ com.github.ben-manes.caffeine:caffeine:3.0.5=annotationProcessor,errorprone,test
 com.github.ben-manes.caffeine:caffeine:3.1.8=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.github.kevinstern:software-and-algorithms:1.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.auto.service:auto-service-annotations:1.0.1=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-com.google.auto.value:auto-value-annotations:1.10.4=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+com.google.auto.value:auto-value-annotations:1.11.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.google.auto.value:auto-value-annotations:1.9=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.auto:auto-common:1.2.1=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.code.findbugs:jsr305:3.0.2=annotationProcessor,checkstyle,compileClasspath,deploy_jar,errorprone,runtimeClasspath,testAnnotationProcessor,testCompileClasspath,testRuntimeClasspath,testing,testingAnnotationProcessor,testingCompileClasspath
 com.google.errorprone:error_prone_annotation:2.23.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.errorprone:error_prone_annotations:2.23.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-com.google.errorprone:error_prone_annotations:2.26.1=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+com.google.errorprone:error_prone_annotations:2.28.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.google.errorprone:error_prone_annotations:2.7.1=checkstyle
 com.google.errorprone:error_prone_check_api:2.23.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.errorprone:error_prone_core:2.23.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
@@ -24,13 +24,13 @@ com.google.guava:failureaccess:1.0.2=compileClasspath,deploy_jar,runtimeClasspat
 com.google.guava:guava-parent:32.1.1-jre=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.guava:guava:31.0.1-jre=checkstyle
 com.google.guava:guava:32.1.1-jre=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-com.google.guava:guava:33.1.0-jre=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+com.google.guava:guava:33.2.1-android=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava=checkstyle,compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.google.inject:guice:5.1.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 com.google.j2objc:j2objc-annotations:1.3=checkstyle
 com.google.j2objc:j2objc-annotations:3.0.0=compileClasspath,testCompileClasspath,testingCompileClasspath
 com.google.protobuf:protobuf-java:3.19.6=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-com.google.truth:truth:1.4.2=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+com.google.truth:truth:1.4.3=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 com.puppycrawl.tools:checkstyle:9.3=checkstyle
 commons-beanutils:commons-beanutils:1.9.4=checkstyle
 commons-collections:commons-collections:3.2.2=checkstyle
@@ -54,15 +54,17 @@ org.jacoco:org.jacoco.ant:0.8.11=jacocoAnt
 org.jacoco:org.jacoco.core:0.8.11=jacocoAnt
 org.jacoco:org.jacoco.report:0.8.11=jacocoAnt
 org.javassist:javassist:3.28.0-GA=checkstyle
-org.junit.jupiter:junit-jupiter-api:5.10.2=testCompileClasspath,testRuntimeClasspath
-org.junit.jupiter:junit-jupiter-engine:5.10.2=testCompileClasspath,testRuntimeClasspath
-org.junit.platform:junit-platform-commons:1.10.2=testCompileClasspath,testRuntimeClasspath
-org.junit.platform:junit-platform-engine:1.10.2=testCompileClasspath,testRuntimeClasspath
-org.junit:junit-bom:5.10.2=testCompileClasspath,testRuntimeClasspath
+org.jspecify:jspecify:0.3.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+org.junit.jupiter:junit-jupiter-api:5.11.0-M2=testCompileClasspath,testRuntimeClasspath
+org.junit.jupiter:junit-jupiter-engine:5.11.0-M2=testCompileClasspath,testRuntimeClasspath
+org.junit.platform:junit-platform-commons:1.11.0-M2=testCompileClasspath,testRuntimeClasspath
+org.junit.platform:junit-platform-engine:1.11.0-M2=testCompileClasspath,testRuntimeClasspath
+org.junit:junit-bom:5.11.0-M2=testCompileClasspath,testRuntimeClasspath
 org.opentest4j:opentest4j:1.3.0=testCompileClasspath,testRuntimeClasspath
 org.ow2.asm:asm-commons:9.6=jacocoAnt
 org.ow2.asm:asm-tree:9.6=jacocoAnt
-org.ow2.asm:asm:9.6=compileClasspath,deploy_jar,jacocoAnt,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+org.ow2.asm:asm:9.6=jacocoAnt
+org.ow2.asm:asm:9.7=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 org.pcollections:pcollections:3.1.4=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 org.reflections:reflections:0.10.2=checkstyle
 empty=testingCompile,testingRuntime,testingRuntimeClasspath

common/src/testing/java/google/registry/testing/truth/TextDiffSubject.java

@@ -175,14 +175,7 @@ public class TextDiffSubject extends Subject {
         .orElse(0);
   }
 
-  private static class SideBySideRowFormatter {
-    private final int maxExpectedLineLength;
-    private final int maxActualLineLength;
-
-    private SideBySideRowFormatter(int maxExpectedLineLength, int maxActualLineLength) {
-      this.maxExpectedLineLength = maxExpectedLineLength;
-      this.maxActualLineLength = maxActualLineLength;
-    }
+  private record SideBySideRowFormatter(int maxExpectedLineLength, int maxActualLineLength) {
 
     public String formatRow(String expected, String actual, char padChar) {
       return String.format(

config/dependency-license/allowed_licenses.json

@@ -262,6 +262,9 @@
     {
       "moduleLicense": "Unicode/ICU License"
     },
+    {
+      "moduleLicense": "Unicode-3.0"
+    },
     {
       "moduleLicense": "Public Domain",
       "moduleName": "aopalliance:aopalliance"

config/nom_build.py

@@ -270,8 +270,7 @@ def generate_gradle_properties() -> str:
 def get_root() -> str:
     """Returns the root of the nomulus build tree."""
     cur_dir = os.getcwd()
-    if not os.path.exists(os.path.join(cur_dir, 'buildSrc')) or \
-       not os.path.exists(os.path.join(cur_dir, 'core')) or \
+    if not os.path.exists(os.path.join(cur_dir, 'core')) or \
        not os.path.exists(os.path.join(cur_dir, 'gradle.properties')):
         raise Exception('You must run this script from the root directory')
     return cur_dir

config/presubmits.py

@@ -100,12 +100,12 @@ PRESUBMITS = {
                    {"node_modules/"}, REQUIRED):
         "Source files must end in a newline.",
 
-    # System.(out|err).println should only appear in tools/
+    # System.(out|err).println should only appear in tools/ or load-testing/
     PresubmitCheck(
         r".*\bSystem\.(out|err)\.print", "java", {
             "StackdriverDashboardBuilder.java", "/tools/", "/example/",
-            "RegistryTestServerMain.java", "TestServerExtension.java",
-            "FlowDocumentationTool.java"
+            "/load-testing/", "RegistryTestServerMain.java",
+            "TestServerExtension.java", "FlowDocumentationTool.java"
         }):
         "System.(out|err).println is only allowed in tools/ packages. Please "
         "use a logger instead.",
@@ -173,11 +173,11 @@ PRESUBMITS = {
     ):
         "JavaScript files should not include console logging.",
     PresubmitCheck(
-        r".*org\.testcontainers\.shaded.*",
+        r".*\nimport (static )?.*\.shaded\..*",
         "java",
         {"/node_modules/"},
     ):
-        "Do not use shaded dependencies from testcontainers.",
+        "Do not use shaded dependencies",
     PresubmitCheck(
         r".*com\.google\.common\.truth\.Truth8.*",
         "java",
@@ -190,7 +190,24 @@ PRESUBMITS = {
         {"/node_modules/", "JpaTransactionManagerImpl.java"},
     ):
         "Do not use java.util.Date. Use classes in java.time package instead.",
-
+    PresubmitCheck(
+        r".*com\.google\.api\.client\.http\.HttpStatusCodes.*",
+        "java",
+        {"/node_modules/"},
+    ):
+        "Use status code from jakarta.servlet.http.HttpServletResponse.",
+    PresubmitCheck(
+        r".*mock\(Response\.class\).*",
+        "java",
+        {"/node_modules/"},
+    ):
+        "Do not mock Response, use FakeResponse.",
+    PresubmitCheck(
+        r".*javax\.servlet\..*",
+        "java",
+        {"/node_modules/"},
+    ):
+        "Do not use javax.servlet.* Use jakarta.servlet.* instead.",
 }
 
 # Note that this regex only works for one kind of Flyway file.  If we want to

console-webapp/.gitignore

@@ -36,7 +36,11 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+.nx/
 
 # System files
 .DS_Store
 Thumbs.db
+
+# Build artifact
+/staged/dist

console-webapp/angular.json

@@ -15,12 +15,16 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/console-webapp",
+            "outputPath": {
+              "base": "staged/dist/",
+              "browser": ""
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -34,7 +38,8 @@
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/"]
             },
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -59,9 +64,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -73,10 +76,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "console-webapp:build:production"
+              "buildTarget": "console-webapp:build:production"
             },
             "development": {
-              "browserTarget": "console-webapp:build:development"
+              "buildTarget": "console-webapp:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -84,7 +87,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "console-webapp:build"
+            "buildTarget": "console-webapp:build"
           }
         },
         "test": {
@@ -122,6 +125,9 @@
     }
   },
   "cli": {
+    "cache": {
+      "enabled": false
+    },
     "analytics": false,
     "schematicCollections": [
       "@angular-eslint/schematics"

console-webapp/build.gradle

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -11,12 +11,12 @@
 // 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.
-
 def consoleDir = "${rootDir}/console-webapp"
+def projectParam = "--project=${rootProject.gcpProject}"
 
 clean {
   delete "${consoleDir}/node_modules"
-  delete "${consoleDir}/dist"
+  delete "${consoleDir}/staged/dist"
 }
 
 task npmInstallDeps(type: Exec) {
@@ -62,8 +62,14 @@ task checkFormatting(type: Exec) {
   args 'run', 'prettify:check'
 }
 
-tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps)
+task deploy(type: Exec) {
+  workingDir "${consoleDir}/staged"
+  executable 'gcloud'
+  args 'app', 'deploy', "${projectParam}", '--quiet'
+}
+
 tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps)
 tasks.applyFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.checkFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.build.dependsOn(tasks.checkFormatting)
+tasks.deploy.dependsOn(tasks.buildConsoleWebappProd)

console-webapp/package.json

@@ -16,35 +16,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.7",
-    "@angular/cdk": "^17.0.4",
-    "@angular/common": "^17.0.7",
-    "@angular/compiler": "^17.0.7",
-    "@angular/core": "^17.0.7",
-    "@angular/forms": "^17.0.7",
-    "@angular/material": "^17.0.4",
-    "@angular/platform-browser": "^17.0.7",
-    "@angular/platform-browser-dynamic": "^17.0.7",
-    "@angular/router": "^17.0.7",
+    "@angular/animations": "^18.0.2",
+    "@angular/cdk": "^18.0.2",
+    "@angular/common": "^18.0.2",
+    "@angular/compiler": "^18.0.2",
+    "@angular/core": "^18.0.2",
+    "@angular/forms": "^18.0.2",
+    "@angular/material": "^18.0.2",
+    "@angular/platform-browser": "^18.0.2",
+    "@angular/platform-browser-dynamic": "^18.0.2",
+    "@angular/router": "^18.0.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.7",
-    "@angular-eslint/builder": "17.1.1",
-    "@angular-eslint/eslint-plugin": "17.1.1",
-    "@angular-eslint/eslint-plugin-template": "17.1.1",
-    "@angular-eslint/schematics": "17.1.1",
-    "@angular-eslint/template-parser": "17.1.1",
-    "@angular/cli": "~17.0.7",
-    "@angular/compiler-cli": "^17.0.7",
+    "@angular-devkit/build-angular": "^18.0.3",
+    "@angular-eslint/builder": "18.0.1",
+    "@angular-eslint/eslint-plugin": "18.0.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.1",
+    "@angular-eslint/schematics": "18.0.1",
+    "@angular-eslint/template-parser": "18.0.1",
+    "@angular/cli": "~18.0.3",
+    "@angular/compiler-cli": "^18.0.2",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^18.11.18",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "concurrently": "^7.6.0",
-    "eslint": "^8.39.0",
+    "eslint": "^8.57.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -52,6 +52,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "2.8.7",
-    "typescript": "~5.2.2"
+    "typescript": "~5.4.5"
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,69 +13,111 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { TldsComponent } from './tlds/tlds.component';
-import { HomeComponent } from './home/home.component';
-import { SettingsComponent } from './settings/settings.component';
-import SettingsContactComponent from './settings/contact/contact.component';
-import SettingsWhoisComponent from './settings/whois/whois.component';
-import SettingsUsersComponent from './settings/users/users.component';
-import SettingsSecurityComponent from './settings/security/security.component';
-import { RegistrarGuard } from './registrar/registrar.guard';
-import { RegistrarComponent } from './registrar/registrarsTable.component';
-import { EmptyRegistrar } from './registrar/emptyRegistrar.component';
-import ContactComponent from './settings/contact/contact.component';
-import WhoisComponent from './settings/whois/whois.component';
-import SecurityComponent from './settings/security/security.component';
-import UsersComponent from './settings/users/users.component';
+import { Route, RouterModule } from '@angular/router';
+import { BillingInfoComponent } from './billingInfo/billingInfo.component';
 import { DomainListComponent } from './domains/domainList.component';
+import { HomeComponent } from './home/home.component';
+import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
+import { RegistrarComponent } from './registrar/registrarsTable.component';
+import { ResourcesComponent } from './resources/resources.component';
+import ContactComponent from './settings/contact/contact.component';
+import SecurityComponent from './settings/security/security.component';
+import { SettingsComponent } from './settings/settings.component';
+import UsersComponent from './settings/users/users.component';
+import WhoisComponent from './settings/whois/whois.component';
+import { SupportComponent } from './support/support.component';
+import { RegistryLockVerifyComponent } from './lock/registryLockVerify.component';
 
-const routes: Routes = [
+export interface RouteWithIcon extends Route {
+  iconName?: string;
+}
+
+export const routes: RouteWithIcon[] = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
+  {
+    path: RegistryLockVerifyComponent.PATH,
+    component: RegistryLockVerifyComponent,
+  },
   { path: 'registrars', component: RegistrarComponent },
-  { path: 'empty-registrar', component: EmptyRegistrar },
-  { path: 'home', component: HomeComponent, canActivate: [RegistrarGuard] },
-  { path: 'tlds', component: TldsComponent, canActivate: [RegistrarGuard] },
+  {
+    path: 'home',
+    component: HomeComponent,
+    title: 'Dashboard',
+    iconName: 'view_comfy_alt',
+  },
+  // { path: 'tlds', component: TldsComponent, title: "TLDs", iconName: "event_list" },
   {
     path: DomainListComponent.PATH,
     component: DomainListComponent,
-    canActivate: [RegistrarGuard],
+    title: 'Domains',
+    iconName: 'view_list',
   },
   {
     path: SettingsComponent.PATH,
     component: SettingsComponent,
+    title: 'Settings',
+    iconName: 'settings',
     children: [
       {
         path: '',
-        redirectTo: 'registrars',
+        redirectTo: ContactComponent.PATH,
         pathMatch: 'full',
       },
       {
         path: ContactComponent.PATH,
-        component: SettingsContactComponent,
-        canActivate: [RegistrarGuard],
+        component: ContactComponent,
+        title: 'Contacts',
       },
       {
         path: WhoisComponent.PATH,
-        component: SettingsWhoisComponent,
-        canActivate: [RegistrarGuard],
+        component: WhoisComponent,
+        title: 'WHOIS Info',
       },
       {
         path: SecurityComponent.PATH,
-        component: SettingsSecurityComponent,
-        canActivate: [RegistrarGuard],
+        component: SecurityComponent,
+        title: 'Security',
       },
       {
         path: UsersComponent.PATH,
-        component: SettingsUsersComponent,
-        canActivate: [RegistrarGuard],
-      },
-      {
-        path: RegistrarComponent.PATH,
-        component: RegistrarComponent,
+        component: UsersComponent,
       },
     ],
   },
+  // {
+  //   path: EppConsole.PATH,
+  //   component: EppConsoleComponent,
+  //   title: "EPP Console",
+  //   iconName: "upgrade"
+  // },
+  {
+    path: RegistrarComponent.PATH,
+    component: RegistrarComponent,
+    title: 'Registrars',
+    iconName: 'account_circle',
+  },
+  {
+    path: RegistrarDetailsComponent.PATH,
+    component: RegistrarDetailsComponent,
+  },
+  {
+    path: BillingInfoComponent.PATH,
+    component: BillingInfoComponent,
+    title: 'Billing Info',
+    iconName: 'credit_card',
+  },
+  {
+    path: ResourcesComponent.PATH,
+    component: ResourcesComponent,
+    title: 'Resources',
+    iconName: 'description',
+  },
+  {
+    path: SupportComponent.PATH,
+    component: SupportComponent,
+    title: 'Support',
+    iconName: 'help',
+  },
 ];
 
 @NgModule({

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

@@ -1,24 +1,22 @@
-<div class="console-app">
-  <app-header (toggleNavOpen)="sidenav.toggle()"></app-header>
+<div class="console-app mat-typography">
+  <app-header (toggleNavOpen)="toggleSidenav()"></app-header>
+  <div class="console-app__global-spinner">
+    <mat-progress-bar
+      mode="indeterminate"
+      *ngIf="globalLoader.isLoading"
+    ></mat-progress-bar>
+  </div>
   <mat-sidenav-container class="console-app__container">
-    <mat-sidenav #sidenav class="console-app__sidebar">
-      <mat-nav-list>
-        <a mat-list-item [routerLink]="'/home'" routerLinkActive="active">
-          Home page
-        </a>
-        <a mat-list-item [routerLink]="'/tlds'" routerLinkActive="active">
-          TLDS
-        </a>
-        <a mat-list-item [routerLink]="'/settings'" routerLinkActive="active">
-          Settings
-        </a>
-      </mat-nav-list>
+    <mat-sidenav
+      [mode]="breakpointObserver.isMobileView() ? 'over' : 'side'"
+      [opened]="!breakpointObserver.isMobileView()"
+      #sidenav
+      class="console-app__sidebar"
+    >
+      <app-navigation />
     </mat-sidenav>
     <mat-sidenav-content class="console-app__content-wrapper">
-      <div *ngIf="globalLoader.isLoading" class="console-app__global-spinner">
-        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-      </div>
-      <div class="console-app__content" *ngIf="renderRouter">
+      <div class="console-app__content">
         <router-outlet></router-outlet>
       </div>
     </mat-sidenav-content>

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 :host {
-  font-family: Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol" !important;
+  font-family: "Google Sans", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
   font-size: 14px;
   color: #333;
   box-sizing: border-box;
@@ -26,28 +26,21 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: #fff;
   &__container {
     flex: 1;
-    margin-top: -12px;
     padding-bottom: 36px;
+    background: transparent;
   }
   &__sidebar {
-    min-width: 300px;
-    a::before {
-      background-color: transparent;
-    }
-    .active {
-      background-color: var(--secondary);
-    }
-  }
-  &__content-wrapper {
-    margin: 12px 24px;
+    min-width: 240px;
+    border: 0;
   }
   &__content {
-    max-width: 1340px;
-    margin: 0 auto;
+    padding: 0 16px;
   }
   &__global-spinner {
-    margin-bottom: 2rem;
+    position: absolute;
+    width: 100%;
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,25 +12,25 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from './material.module';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BackendService } from './shared/services/backend.service';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        RouterTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
-      providers: [BackendService],
       declarations: [AppComponent],
+      imports: [RouterTestingModule, MaterialModule, BrowserAnimationsModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
   });
 

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,12 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AfterViewInit, Component, ViewChild, effect } from '@angular/core';
-import { RegistrarService } from './registrar/registrar.service';
-import { UserDataService } from './shared/services/userData.service';
-import { GlobalLoaderService } from './shared/services/globalLoader.service';
-import { NavigationEnd, Router } from '@angular/router';
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
+import { NavigationEnd, Router } from '@angular/router';
+import { RegistrarService } from './registrar/registrar.service';
+import { BreakPointObserverService } from './shared/services/breakPoint.service';
+import { GlobalLoaderService } from './shared/services/globalLoader.service';
+import { UserDataService } from './shared/services/userData.service';
 
 @Component({
   selector: 'app-root',
@@ -25,32 +26,32 @@ import { MatSidenav } from '@angular/material/sidenav';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements AfterViewInit {
-  renderRouter: boolean = true;
-
-  @ViewChild('sidenav')
+  @ViewChild(MatSidenav)
   sidenav!: MatSidenav;
 
   constructor(
     protected registrarService: RegistrarService,
     protected userDataService: UserDataService,
     protected globalLoader: GlobalLoaderService,
-    protected router: Router
-  ) {
-    effect(() => {
-      if (registrarService.registrarId()) {
-        this.renderRouter = false;
-        setTimeout(() => {
-          this.renderRouter = true;
-        }, 400);
-      }
-    });
-  }
+    protected breakpointObserver: BreakPointObserverService,
+    private router: Router
+  ) {}
 
   ngAfterViewInit() {
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        this.sidenav.close();
+        if (this.breakpointObserver.isMobileView()) {
+          this.sidenav.close();
+        }
       }
     });
   }
+
+  toggleSidenav() {
+    if (this.sidenav.opened) {
+      this.sidenav.close();
+    } else {
+      this.sidenav.open();
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,85 +13,92 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from './material.module';
 
 import { BackendService } from './shared/services/backend.service';
 
-import { HomeComponent } from './home/home.component';
-import { TldsComponent } from './tlds/tlds.component';
-import { HeaderComponent } from './header/header.component';
-import { SettingsComponent } from './settings/settings.component';
-import SettingsContactComponent, {
-  ContactDetailsDialogComponent,
-} from './settings/contact/contact.component';
-import { HttpClientModule } from '@angular/common/http';
-import { RegistrarComponent } from './registrar/registrarsTable.component';
-import { RegistrarGuard } from './registrar/registrar.guard';
-import SecurityComponent from './settings/security/security.component';
+import { provideHttpClient } from '@angular/common/http';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import { EmptyRegistrar } from './registrar/emptyRegistrar.component';
-import { RegistrarSelectorComponent } from './registrar/registrarSelector.component';
-import { GlobalLoaderService } from './shared/services/globalLoader.service';
-import { ContactWidgetComponent } from './home/widgets/contactWidget.component';
-import { PromotionsWidgetComponent } from './home/widgets/promotionsWidget.component';
-import { TldsWidgetComponent } from './home/widgets/tldsWidget.component';
-import { ResourcesWidgetComponent } from './home/widgets/resourcesWidget.component';
-import { EppWidgetComponent } from './home/widgets/eppWidget.component';
-import { BillingWidgetComponent } from './home/widgets/billingWidget.component';
-import { DomainsWidgetComponent } from './home/widgets/domainsWidget.component';
-import { SettingsWidgetComponent } from './home/widgets/settingsWidget.component';
-import { UserDataService } from './shared/services/userData.service';
-import WhoisComponent from './settings/whois/whois.component';
-import { SnackBarModule } from './snackbar.module';
-import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
+import { BillingInfoComponent } from './billingInfo/billingInfo.component';
 import { DomainListComponent } from './domains/domainList.component';
-import { DialogBottomSheetWrapper } from './shared/components/dialogBottomSheet.component';
+import { RegistryLockComponent } from './domains/registryLock.component';
+import { HeaderComponent } from './header/header.component';
+import { HomeComponent } from './home/home.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import NewRegistrarComponent from './registrar/newRegistrar.component';
+import { RegistrarDetailsComponent } from './registrar/registrarDetails.component';
+import { RegistrarSelectorComponent } from './registrar/registrarSelector.component';
+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';
+import WhoisComponent from './settings/whois/whois.component';
+import WhoisEditComponent from './settings/whois/whoisEdit.component';
+import { NotificationsComponent } from './shared/components/notifications/notifications.component';
+import { SelectedRegistrarWrapper } from './shared/components/selectedRegistrarWrapper/selectedRegistrarWrapper.component';
+import { LocationBackDirective } from './shared/directives/locationBack.directive';
+import { UserLevelVisibility } from './shared/directives/userLevelVisiblity.directive';
+import { BreakPointObserverService } from './shared/services/breakPoint.service';
+import { GlobalLoaderService } from './shared/services/globalLoader.service';
+import { UserDataService } from './shared/services/userData.service';
+import { SnackBarModule } from './snackbar.module';
+import { SupportComponent } from './support/support.component';
+import { TldsComponent } from './tlds/tlds.component';
+import { RegistryLockVerifyComponent } from './lock/registryLockVerify.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    DialogBottomSheetWrapper,
-    BillingWidgetComponent,
-    ContactDetailsDialogComponent,
-    ContactWidgetComponent,
+    BillingInfoComponent,
+    ContactDetailsComponent,
     DomainListComponent,
-    DomainsWidgetComponent,
-    EmptyRegistrar,
-    EppWidgetComponent,
+    EppPasswordEditComponent,
     HeaderComponent,
     HomeComponent,
-    PromotionsWidgetComponent,
+    LocationBackDirective,
+    UserLevelVisibility,
+    NavigationComponent,
+    NewRegistrarComponent,
+    NotificationsComponent,
     RegistrarComponent,
     RegistrarDetailsComponent,
+    RegistryLockComponent,
     RegistrarSelectorComponent,
-    ResourcesWidgetComponent,
+    RegistryLockVerifyComponent,
+    ResourcesComponent,
     SecurityComponent,
+    SecurityEditComponent,
+    SelectedRegistrarWrapper,
     SettingsComponent,
     SettingsContactComponent,
-    SettingsWidgetComponent,
+    SupportComponent,
     TldsComponent,
-    TldsWidgetComponent,
     WhoisComponent,
+    WhoisEditComponent,
   ],
+  bootstrap: [AppComponent],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
-    HttpClientModule,
     MaterialModule,
     SnackBarModule,
   ],
   providers: [
     BackendService,
+    BreakPointObserverService,
     GlobalLoaderService,
-    RegistrarGuard,
     UserDataService,
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
@@ -99,7 +106,7 @@ import { DialogBottomSheetWrapper } from './shared/components/dialogBottomSheet.
         subscriptSizing: 'dynamic',
       },
     },
+    provideHttpClient(),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

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

@@ -0,0 +1,16 @@
+<app-selected-registrar-wrapper>
+  <h1 class="mat-headline-4">Billing Info</h1>
+  <div class="console-app__billing">
+    <div>
+      <div class="console-app__billing-subhead">
+        Billing records and information
+      </div>
+      <a class="text-l" href="{{ driveFolderUrl() }}" target="_blank"
+        >View on Google Drive</a
+      >
+    </div>
+    <div>
+      <img src="./assets/billing.png" />
+    </div>
+  </div>
+</app-selected-registrar-wrapper>

console-webapp/src/app/billingInfo/billingInfo.component.scss

@@ -0,0 +1,22 @@
+.console-app__billing {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  > div {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: left;
+    max-width: 300px;
+    min-width: 200px;
+    margin-top: -40px;
+  }
+  img {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+  }
+  &-subhead {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}

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

@@ -0,0 +1,47 @@
+// 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, computed } from '@angular/core';
+import { RegistrarService } from '../registrar/registrar.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-billingInfo',
+  templateUrl: './billingInfo.component.html',
+  styleUrls: ['./billingInfo.component.scss'],
+})
+export class BillingInfoComponent {
+  public static PATH = 'billingInfo';
+  constructor(
+    public registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  driveFolderUrl = computed<string>(() => {
+    if (this.registrarService.registrar()?.driveFolderId) {
+      return (
+        'https://drive.google.com/drive/folders/' +
+        this.registrarService.registrar()?.driveFolderId
+      );
+    }
+    return '';
+  });
+
+  openBillingDetails(e: MouseEvent) {
+    if (!this.registrarService.registrar()?.driveFolderId) {
+      e.preventDefault();
+      this._snackBar.open('Billing Folder ID has not been assigned');
+    }
+  }
+}

console-webapp/src/app/domains/domainList.component.html

@@ -1,60 +1,150 @@
-<div class="console-domains">
-  <mat-form-field>
-    <mat-label>Filter</mat-label>
-    <input
-      type="search"
-      matInput
-      [(ngModel)]="searchTerm"
-      (ngModelChange)="sendInput()"
-      #input
-    />
-  </mat-form-field>
+<app-selected-registrar-wrapper>
+  <div class="console-app-domains">
+    <h1 class="mat-headline-4">Domains</h1>
 
-  <div *ngIf="isLoading; else domains_content" class="console-domains__loading">
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+    <div
+      class="console-app-domains__actions-wrapper"
+      [hidden]="!domainListService.activeActionComponent"
+    >
+      <ng-container
+        v-if="domainListService.activeActionComponent"
+        *ngComponentOutlet="domainListService.activeActionComponent"
+      >
+      </ng-container>
+    </div>
+
+    @if (!isLoading && totalResults == 0) {
+    <div class="console-app__empty-domains">
+      <h1>
+        <mat-icon class="console-app__empty-domains-icon secondary-text"
+          >apps_outage</mat-icon
+        >
+      </h1>
+      <h1>No domains found</h1>
+    </div>
+    } @else {
+    <mat-menu #actions="matMenu">
+      <ng-template matMenuContent let-domainName="domainName">
+        <button mat-menu-item (click)="openRegistryLock(domainName)">
+          <mat-icon>key</mat-icon>
+          <span>Registry Lock</span>
+        </button>
+      </ng-template>
+    </mat-menu>
+    <div
+      class="console-app__domains-table-parent"
+      [hidden]="domainListService.activeActionComponent"
+    >
+      <div class="console-app__scrollable-wrapper">
+        <div class="console-app__scrollable">
+          @if (isLoading) {
+          <div class="console-app__domains-spinner">
+            <mat-spinner />
+          </div>
+          }
+          <a
+            mat-stroked-button
+            color="primary"
+            href="/console-api/dum-download?registrarId={{
+              registrarService.registrarId()
+            }}"
+            class="console-app-domains__download"
+          >
+            <mat-icon>download</mat-icon>
+            Download domains (.csv)
+          </a>
+
+          <mat-form-field class="console-app__domains-filter">
+            <mat-label>Filter</mat-label>
+            <input
+              type="search"
+              matInput
+              [(ngModel)]="searchTerm"
+              (ngModelChange)="sendInput()"
+              #input
+            />
+          </mat-form-field>
+
+          <mat-table
+            [dataSource]="dataSource"
+            class="mat-elevation-z0"
+            class="console-app__domains-table"
+          >
+            <ng-container matColumnDef="domainName">
+              <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
+              <mat-cell *matCellDef="let element">{{
+                element.domainName
+              }}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="creationTime">
+              <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
+              <mat-cell *matCellDef="let element">
+                {{ element.creationTime.creationTime }}
+              </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="registrationExpirationTime">
+              <mat-header-cell *matHeaderCellDef
+                >Expiration Time</mat-header-cell
+              >
+              <mat-cell *matCellDef="let element">
+                {{ element.registrationExpirationTime }}
+              </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="statuses">
+              <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
+              <mat-cell *matCellDef="let element">{{
+                element.statuses
+              }}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="registryLock">
+              <mat-header-cell *matHeaderCellDef
+                >Registry-Locked</mat-header-cell
+              >
+              <mat-cell *matCellDef="let element">{{
+                isDomainLocked(element.domainName)
+              }}</mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="actions">
+              <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+              <mat-cell *matCellDef="let element">
+                <button
+                  mat-icon-button
+                  [matMenuTriggerFor]="actions"
+                  [matMenuTriggerData]="{ domainName: element.domainName }"
+                  aria-label="Domain actions"
+                >
+                  <mat-icon>more_horiz</mat-icon>
+                </button>
+              </mat-cell>
+            </ng-container>
+
+            <mat-header-row
+              *matHeaderRowDef="displayedColumns"
+            ></mat-header-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+
+            <!-- Row shown when there is no matching data. -->
+            <mat-row *matNoDataRow>
+              <mat-cell colspan="6">No domains found</mat-cell>
+            </mat-row>
+          </mat-table>
+          <mat-paginator
+            [length]="totalResults"
+            [pageIndex]="pageNumber"
+            [pageSize]="resultsPerPage"
+            [pageSizeOptions]="[10, 25, 50, 100, 500]"
+            (page)="onPageChange($event)"
+            aria-label="Select page of domain results"
+            showFirstLastButtons
+          ></mat-paginator>
+        </div>
+      </div>
+    </div>
+    }
   </div>
-  <ng-template #domains_content>
-    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-      <ng-container matColumnDef="domainName">
-        <th mat-header-cell *matHeaderCellDef>Domain Name</th>
-        <td mat-cell *matCellDef="let element">{{ element.domainName }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="creationTime">
-        <th mat-header-cell *matHeaderCellDef>Creation Time</th>
-        <td mat-cell *matCellDef="let element">
-          {{ element.creationTime.creationTime }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="registrationExpirationTime">
-        <th mat-header-cell *matHeaderCellDef>Expiration Time</th>
-        <td mat-cell *matCellDef="let element">
-          {{ element.registrationExpirationTime }}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="statuses">
-        <th mat-header-cell *matHeaderCellDef>Statuses</th>
-        <td mat-cell *matCellDef="let element">{{ element.statuses }}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-
-      <!-- Row shown when there is no matching data. -->
-      <tr class="mat-row" *matNoDataRow>
-        <td class="mat-cell" colspan="4">No domains found</td>
-      </tr>
-    </table>
-    <mat-paginator
-      [length]="totalResults"
-      [pageIndex]="pageNumber"
-      [pageSize]="resultsPerPage"
-      [pageSizeOptions]="[10, 25, 50, 100, 500]"
-      (page)="onPageChange($event)"
-      aria-label="Select page of domain results"
-      showFirstLastButtons
-    ></mat-paginator>
-  </ng-template>
-</div>
+</app-selected-registrar-wrapper>

console-webapp/src/app/domains/domainList.component.scss

@@ -0,0 +1,55 @@
+.console-app {
+  $min-width: 756px;
+
+  &__empty-domains {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    &-icon {
+      transform: scale(3);
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  &-domains__download {
+    position: absolute;
+    top: -55px;
+    right: 0;
+  }
+
+  &__domains-filter {
+    min-width: $min-width !important;
+    width: 100%;
+  }
+
+  &__domains-table-parent {
+    position: relative;
+    min-width: 100%;
+  }
+
+  &__domains-table {
+    min-width: $min-width !important;
+    .mat-column-actions {
+      max-width: 100px;
+    }
+    .mat-column-registryLock {
+      max-width: 150px;
+    }
+  }
+
+  &__domains-spinner {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.6);
+    z-index: 2;
+  }
+
+  .mat-mdc-paginator {
+    min-width: $min-width !important;
+  }
+}

console-webapp/src/app/domains/domainList.component.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,11 +14,12 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DomainListComponent } from './domainList.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
 import { BackendService } from '../shared/services/backend.service';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DomainListComponent } from './domainList.component';
 
 describe('DomainListComponent', () => {
   let component: DomainListComponent;
@@ -27,12 +28,12 @@ describe('DomainListComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DomainListComponent],
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
+      imports: [MaterialModule, BrowserAnimationsModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
-      providers: [BackendService],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DomainListComponent);

console-webapp/src/app/domains/domainList.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,19 +12,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild } from '@angular/core';
-import { MatTableDataSource } from '@angular/material/table';
-import { BackendService } from '../shared/services/backend.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, ViewChild, effect } from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subject, debounceTime } from 'rxjs';
 import { RegistrarService } from '../registrar/registrar.service';
 import { Domain, DomainListService } from './domainList.service';
-import { Subject, debounceTime } from 'rxjs';
+import { RegistryLockComponent } from './registryLock.component';
+import { RegistryLockService } from './registryLock.service';
 
 @Component({
   selector: 'app-domain-list',
   templateUrl: './domainList.component.html',
   styleUrls: ['./domainList.component.scss'],
-  providers: [DomainListService],
 })
 export class DomainListComponent {
   public static PATH = 'domain-list';
@@ -35,6 +37,8 @@ export class DomainListComponent {
     'creationTime',
     'registrationExpirationTime',
     'statuses',
+    'registryLock',
+    'actions',
   ];
 
   dataSource: MatTableDataSource<Domain> = new MatTableDataSource();
@@ -45,15 +49,25 @@ export class DomainListComponent {
 
   pageNumber?: number;
   resultsPerPage = 50;
-  totalResults?: number;
+  totalResults?: number = 0;
 
   @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
 
   constructor(
-    private backendService: BackendService,
-    private domainListService: DomainListService,
-    private registrarService: RegistrarService
-  ) {}
+    protected domainListService: DomainListService,
+    protected registrarService: RegistrarService,
+    protected registryLockService: RegistryLockService,
+    private _snackBar: MatSnackBar
+  ) {
+    effect(() => {
+      this.pageNumber = 0;
+      this.totalResults = 0;
+      if (this.registrarService.registrarId()) {
+        this.loadLocks();
+        this.reloadData();
+      }
+    });
+  }
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;
@@ -63,13 +77,31 @@ export class DomainListComponent {
       .subscribe((searchTermValue) => {
         this.reloadData();
       });
-    this.reloadData();
   }
 
   ngOnDestroy() {
     this.searchTermSubject.complete();
   }
 
+  openRegistryLock(domainName: string) {
+    this.domainListService.selectedDomain = domainName;
+    this.domainListService.activeActionComponent = RegistryLockComponent;
+  }
+
+  loadLocks() {
+    this.registryLockService.retrieveLocks().subscribe({
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.message);
+      },
+    });
+  }
+
+  isDomainLocked(domainName: string) {
+    return this.registryLockService.domainsLocks.some(
+      (d) => d.domainName === domainName
+    );
+  }
+
   reloadData() {
     this.isLoading = true;
     this.domainListService
@@ -79,10 +111,16 @@ export class DomainListComponent {
         this.totalResults,
         this.searchTerm
       )
-      .subscribe((domainListResult) => {
-        this.dataSource.data = domainListResult.domains;
-        this.totalResults = domainListResult.totalResults;
-        this.isLoading = false;
+      .subscribe({
+        error: (err: HttpErrorResponse) => {
+          this._snackBar.open(err.message);
+          this.isLoading = false;
+        },
+        next: (domainListResult) => {
+          this.dataSource.data = this.domainListService.domainsList;
+          this.totalResults = (domainListResult || {}).totalResults || 0;
+          this.isLoading = false;
+        },
       });
   }
 

console-webapp/src/app/domains/domainList.service.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,10 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
-import { BackendService } from '../shared/services/backend.service';
-import { RegistrarService } from '../registrar/registrar.service';
+import { Injectable, Type } from '@angular/core';
 import { tap } from 'rxjs';
+import { RegistrarService } from '../registrar/registrar.service';
+import { BackendService } from '../shared/services/backend.service';
 
 export interface CreateAutoTimestamp {
   creationTime: string;
@@ -35,9 +35,14 @@ export interface DomainListResult {
   totalResults: number;
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class DomainListService {
   checkpointTime?: string;
+  selectedDomain?: string;
+  public activeActionComponent: Type<any> | null = null;
+  public domainsList: Domain[] = [];
 
   constructor(
     private backendService: BackendService,
@@ -61,7 +66,8 @@ export class DomainListService {
       )
       .pipe(
         tap((domainListResult: DomainListResult) => {
-          this.checkpointTime = domainListResult.checkpointTime;
+          this.checkpointTime = domainListResult?.checkpointTime;
+          this.domainsList = domainListResult?.domains;
         })
       );
   }

console-webapp/src/app/domains/registryLock.component.html

@@ -0,0 +1,81 @@
+<div class="console-app__registry-lock">
+  <p>
+    <button
+      mat-icon-button
+      aria-label="Back to domains list"
+      (click)="goBack()"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+  </p>
+
+  @if(!registrarService.registrar()?.registryLockAllowed) {
+  <h1>
+    Sorry, your registrar hasn't enrolled in registry lock yet. To do so, please
+    contact {{ userDataService.userData()?.supportEmail }}.
+  </h1>
+  } @else if (isLocked()) {
+  <h1>Unlock the domain {{ domainListService.selectedDomain }}</h1>
+  <form (ngSubmit)="save(false)" [formGroup]="unlockDomain">
+    <p>
+      <mat-label for="password">Password: </mat-label>
+      <mat-form-field name="password" appearance="outline">
+        <input matInput type="text" formControlName="password" required />
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-label for="relockTime"
+        >Automatically re-lock the domain after:</mat-label
+      >
+      <mat-radio-group
+        name="relockTime"
+        formControlName="relockTime"
+        aria-label="Automatically relock option"
+      >
+        @for (option of relockOptions; track option.name) {
+        <mat-radio-button [value]="option.duration">{{
+          option.name
+        }}</mat-radio-button>
+        }
+      </mat-radio-group>
+    </p>
+
+    <div class="console-app__registry-lock-notification">
+      <mat-icon>priority_high</mat-icon>Confirmation email will be sent to your
+      email address to confirm the unlock
+    </div>
+    <button
+      mat-flat-button
+      color="primary"
+      type="submit"
+      [disabled]="!unlockDomain.valid"
+    >
+      Save
+    </button>
+  </form>
+  } @else {
+  <h1>Lock the domain {{ domainListService.selectedDomain }}</h1>
+  <form (ngSubmit)="save(true)" [formGroup]="lockDomain">
+    <p>
+      <mat-label for="password">Password: </mat-label>
+      <mat-form-field name="password" appearance="outline">
+        <input matInput type="text" formControlName="password" required />
+      </mat-form-field>
+    </p>
+
+    <div class="console-app__registry-lock-notification">
+      <mat-icon>priority_high</mat-icon>The lock will not take effect until you
+      click the confirmation link that will be emailed to you. When it takes
+      effect, you will be billed the standard server status change billing cost.
+    </div>
+    <button
+      mat-flat-button
+      color="primary"
+      type="submit"
+      [disabled]="!lockDomain.valid"
+    >
+      Save
+    </button>
+  </form>
+  }
+</div>

console-webapp/src/app/domains/registryLock.component.scss

@@ -0,0 +1,20 @@
+.console-app {
+  &__registry-lock {
+    mat-label {
+      display: block;
+      margin-bottom: 10px;
+    }
+    p {
+      margin-bottom: 40px;
+    }
+  }
+  &__registry-lock-notification {
+    padding: 20px;
+    border-radius: 10px;
+    background-color: var(--light-highlight);
+    margin-bottom: 20px;
+    width: max-content;
+    display: flex;
+    align-items: center;
+  }
+}

console-webapp/src/app/domains/registryLock.component.ts

@@ -0,0 +1,92 @@
+// 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 { HttpErrorResponse } from '@angular/common/http';
+import { Component, computed } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { RegistrarService } from '../registrar/registrar.service';
+import { UserDataService } from '../shared/services/userData.service';
+import { DomainListService } from './domainList.service';
+import { RegistryLockService } from './registryLock.service';
+
+@Component({
+  selector: 'app-registry-lock',
+  templateUrl: './registryLock.component.html',
+  styleUrls: ['./registryLock.component.scss'],
+})
+export class RegistryLockComponent {
+  readonly isLocked = computed(() =>
+    this.registryLockService.domainsLocks.some(
+      (dl) => dl.domainName === this.domainListService.selectedDomain
+    )
+  );
+
+  relockOptions = [
+    { name: '1 hour', duration: 3600000 },
+    { name: '6 hours', duration: 21600000 },
+    { name: '24 hours', duration: 86400000 },
+    { name: 'Never', duration: undefined },
+  ];
+
+  lockDomain = new FormGroup({
+    password: new FormControl(''),
+  });
+
+  unlockDomain = new FormGroup({
+    password: new FormControl(''),
+    relockTime: new FormControl(undefined),
+  });
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected domainListService: DomainListService,
+    protected registryLockService: RegistryLockService,
+    protected userDataService: UserDataService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  goBack() {
+    this.domainListService.selectedDomain = undefined;
+    this.domainListService.activeActionComponent = null;
+  }
+
+  save(isLock: boolean) {
+    let request;
+    if (!isLock) {
+      request = this.registryLockService.registryLockDomain(
+        this.domainListService.selectedDomain || '',
+        this.unlockDomain.value.password || '',
+        this.unlockDomain.value.relockTime || undefined,
+        isLock
+      );
+    } else {
+      request = this.registryLockService.registryLockDomain(
+        this.domainListService.selectedDomain || '',
+        this.lockDomain.value.password || '',
+        undefined,
+        isLock
+      );
+    }
+
+    request.subscribe({
+      complete: () => {
+        this.goBack();
+      },
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error);
+      },
+    });
+  }
+}

console-webapp/src/app/domains/registryLock.service.ts

@@ -0,0 +1,59 @@
+// 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 { Injectable } from '@angular/core';
+import { tap } from 'rxjs';
+import { RegistrarService } from '../registrar/registrar.service';
+import { BackendService } from '../shared/services/backend.service';
+
+export interface DomainLocksResult {
+  domainName: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegistryLockService {
+  public domainsLocks: DomainLocksResult[] = [];
+
+  constructor(
+    private backendService: BackendService,
+    private registrarService: RegistrarService
+  ) {}
+
+  retrieveLocks() {
+    return this.backendService
+      .getLocks(this.registrarService.registrarId())
+      .pipe(
+        tap((domainLocksResult) => {
+          this.domainsLocks = domainLocksResult;
+        })
+      );
+  }
+
+  registryLockDomain(
+    domainName: string,
+    password: string,
+    relockDurationMillis: number | undefined,
+    isLock: boolean
+  ) {
+    return this.backendService.registryLockDomain(
+      domainName,
+      password,
+      relockDurationMillis,
+      this.registrarService.registrarId(),
+      isLock
+    );
+  }
+}

console-webapp/src/app/header/header.component.scss

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -16,25 +16,24 @@
   &__logo {
     color: inherit;
     text-decoration: none;
+    margin-left: -15px;
+  }
+  &__menu-btn {
+    width: 30px;
+    height: 30px;
+    padding: 0;
   }
   &__header {
     margin-top: 0;
-    margin-bottom: 10px;
-    @media (max-width: 599px) {
-      .mat-toolbar {
-        padding: 0;
-      }
-      .console-app__logo {
-        font-size: 16px;
-      }
-      button {
-        padding-left: 0;
-        padding-right: 0;
-        width: 30px;
-      }
+    margin-bottom: 15px;
+
+    .mat-toolbar {
+      background: transparent;
+      margin-bottom: 10px;
+    }
+
+    &-user-icon {
+      margin-left: 20px;
     }
   }
 }
-.spacer {
-  flex: 1;
-}

console-webapp/src/app/header/header.component.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Component, EventEmitter, Output } from '@angular/core';
+import { BreakPointObserverService } from '../shared/services/breakPoint.service';
 
 @Component({
   selector: 'app-header',
@@ -22,6 +23,8 @@ import { Component, EventEmitter, Output } from '@angular/core';
 export class HeaderComponent {
   private isNavOpen = false;
 
+  constructor(protected breakpointObserver: BreakPointObserverService) {}
+
   @Output() toggleNavOpen = new EventEmitter<boolean>();
 
   toggleNavPane() {

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

@@ -1,13 +1,55 @@
-<div class="console-app__home">
-  <h1>Welcome to the Google Registry Console</h1>
+<div
+  class="console-app__home"
+  [class.console-app__home_tablet]="breakPointObserverService.isTabletView()"
+>
+  <h1 class="mat-headline-4">Dashboard</h1>
   <div class="console-app__home-widgets">
-    <div app-domains-widget class="console-app__widget-wrapper__wide"></div>
-    <div app-contact-widget class="console-app__widget-wrapper__wide"></div>
-    <div app-tlds-widget></div>
-    <div app-promotions-widget class="console-app__widget-wrapper__wide"></div>
-    <div app-settings-widget class="console-app__widget-wrapper__wide"></div>
-    <div app-resources-widget></div>
-    <div app-billing-widget></div>
-    <div app-epp-widget></div>
+    <mat-card appearance="outlined">
+      <mat-card-content>
+        <h3>
+          <mat-icon class="secondary-text">view_list</mat-icon>
+          DUMs
+        </h3>
+        <p class="secondary-text">View Domains Under Management</p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button color="primary" (click)="viewDums()">
+          View DUMs
+        </button>
+      </mat-card-actions>
+    </mat-card>
+
+    <mat-card appearance="outlined">
+      <mat-card-content>
+        <h3>
+          <mat-icon class="secondary-text">settings</mat-icon>
+          EPP Passwords
+        </h3>
+        <p class="secondary-text">View / Update EPP Password</p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button color="primary" (click)="updateEppPassword()">
+          Update EPP Password
+        </button>
+      </mat-card-actions>
+    </mat-card>
+
+    <mat-card
+      appearance="outlined"
+      [elementId]="getElementIdForRegistrarsBlock()"
+    >
+      <mat-card-content>
+        <h3>
+          <mat-icon class="secondary-text">account_circle</mat-icon>
+          Registrars
+        </h3>
+        <p class="secondary-text">View all registrars</p>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button color="primary" (click)="viewRegistrars()">
+          Manage Registrars
+        </button>
+      </mat-card-actions>
+    </mat-card>
   </div>
 </div>

console-webapp/src/app/home/home.component.scss

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,25 +13,23 @@
 // limitations under the License.
 
 .console-app {
-  &__home {
-    margin-top: 1rem;
-  }
   &__home-widgets {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    grid-gap: 20px;
-    grid-auto-flow: dense;
-
+    display: flex;
+    gap: 1rem;
+    h3 {
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
     mat-card {
-      height: 100%;
-      h1 {
-        margin-top: 1rem;
-      }
+      flex: 1;
     }
   }
-  @media (max-width: 510px) {
-    .console-app__widget-wrapper__wide {
-      grid-column: initial;
+  &__home_tablet {
+    .console-app__home-widgets {
+      flex-direction: column;
     }
   }
 }

console-webapp/src/app/home/home.component.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,12 +12,42 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { DomainListComponent } from '../domains/domainList.component';
+import { RegistrarComponent } from '../registrar/registrarsTable.component';
+import SecurityComponent from '../settings/security/security.component';
+import { SettingsComponent } from '../settings/settings.component';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
+import { BreakPointObserverService } from '../shared/services/breakPoint.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
-  encapsulation: ViewEncapsulation.None,
 })
-export class HomeComponent {}
+export class HomeComponent {
+  constructor(
+    protected breakPointObserverService: BreakPointObserverService,
+    private router: Router
+  ) {}
+  getElementIdForRegistrarsBlock() {
+    return RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT;
+  }
+  viewRegistrars() {
+    this.router.navigate([RegistrarComponent.PATH], {
+      queryParamsHandling: 'merge',
+    });
+  }
+  updateEppPassword() {
+    this.router.navigate(
+      [SettingsComponent.PATH + '/' + SecurityComponent.PATH],
+      { queryParamsHandling: 'merge' }
+    );
+  }
+  viewDums() {
+    this.router.navigate([DomainListComponent.PATH], {
+      queryParamsHandling: 'merge',
+    });
+  }
+}

console-webapp/src/app/home/widgets/billingWidget.component.html

@@ -1,22 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <a
-        class="console-app__widget_left"
-        href="{{ driveFolderUrl }}"
-        (click)="openBillingDetails($event)"
-      >
-        <mat-icon class="console-app__widget-icon">account_balance</mat-icon>
-        <h1 class="console-app__widget-title">Billing Info</h1>
-        <h4 class="secondary-text text-center">
-          <span *ngIf="driveFolderUrl; else noDriveFolderUrl">
-            View important billing and payments information.
-          </span>
-          <ng-template #noDriveFolderUrl>
-            <span> Your billing folder is pending allocation. </span>
-          </ng-template>
-        </h4>
-      </a>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/contactWidget.component.html

@@ -1,29 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">call</mat-icon>
-        <h1 class="console-app__widget-title">Contact Support</h1>
-        <h4 class="secondary-text text-center">
-          Let us know if you have any questions
-        </h4>
-      </div>
-      <div class="console-app__widget_right">
-        <div class="console-app__widget-section-header">Give us a Call</div>
-        <p class="secondary-text">
-          Call {{ userDataService.userData?.productName }} support at
-          <a href="tel:{{ userDataService.userData?.supportPhoneNumber }}">{{
-            userDataService.userData?.supportPhoneNumber
-          }}</a>
-        </p>
-        <div class="console-app__widget-section-header">Send us an Email</div>
-        <p class="secondary-text">
-          Email {{ userDataService.userData?.productName }} at
-          <a href="mailto:{{ userDataService.userData?.supportEmail }}">{{
-            userDataService.userData?.supportEmail
-          }}</a>
-        </p>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/domainsWidget.component.html

@@ -1,30 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">view_list</mat-icon>
-        <h1 class="console-app__widget-title">Domains</h1>
-        <h4 class="secondary-text text-center">
-          Manage domain names and registry lock settings.
-        </h4>
-      </div>
-      <div class="console-app__widget_right">
-        <button mat-button color="primary" class="console-app__widget-link">
-          Create a Domain
-        </button>
-        <p class="secondary-text">Register a new domain name</p>
-        <button
-          mat-button
-          color="primary"
-          class="console-app__widget-link"
-          (click)="openDomainsPage()"
-        >
-          View DUMs
-        </button>
-        <p class="secondary-text">
-          Download a csv of all domains under management
-        </p>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/eppWidget.component.html

@@ -1,13 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">computer</mat-icon>
-        <h1 class="console-app__widget-title">EPP Console</h1>
-        <h4 class="secondary-text text-center">
-          Test run and execute EPP commands using XML files.
-        </h4>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/promotionsWidget.component.html

@@ -1,27 +0,0 @@
-<mat-card class="console-app__widget-wrapper__wide">
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">subject</mat-icon>
-        <h1 class="console-app__widget-title">Promotions</h1>
-        <h4 class="secondary-text text-center">
-          Manage Google Registry promotions and view onboarding process.
-        </h4>
-      </div>
-      <div class="console-app__widget_right">
-        <button mat-button color="primary" class="console-app__widget-link">
-          Manage Preferred Partner Program
-        </button>
-        <p class="secondary-text">
-          Onboard or view current preferred partner status
-        </p>
-        <button mat-button color="primary" class="console-app__widget-link">
-          Manage Registry Lock Program
-        </button>
-        <p class="secondary-text">
-          Onboard or view current registry lock status
-        </p>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/resourcesWidget.component.html

@@ -1,17 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <a
-        class="console-app__widget_left"
-        href="{{ userDataService.userData?.technicalDocsUrl }}"
-        target="_blank"
-      >
-        <mat-icon class="console-app__widget-icon">menu_book</mat-icon>
-        <h1 class="console-app__widget-title">Resources</h1>
-        <h4 class="secondary-text text-center">
-          Use Google Drive to view onboarding FAQs, and technical documentation.
-        </h4>
-      </a>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/settingsWidget.component.html

@@ -1,53 +0,0 @@
-<mat-card class="console-app__widget-wrapper__wide">
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">settings</mat-icon>
-        <h1 class="console-app__widget-title">Settings</h1>
-        <h4 class="secondary-text text-center">
-          Configure registrar settings, manage console users, and view activity
-          log.
-        </h4>
-      </div>
-      <div class="console-app__widget_right">
-        <button
-          mat-button
-          color="primary"
-          class="console-app__widget-link"
-          (click)="openContactsPage()"
-        >
-          Contact Information
-        </button>
-        <p class="secondary-text">Manage Primary, Technical, etc contacts.</p>
-        <button
-          mat-button
-          color="primary"
-          class="console-app__widget-link"
-          (click)="openSecurityPage()"
-        >
-          Security
-        </button>
-        <p class="secondary-text">
-          Manage IP allow lists and SSL certificates.
-        </p>
-        <button mat-button color="primary" class="console-app__widget-link">
-          Nomulus Password
-        </button>
-        <p class="secondary-text">Reset your Nomulus password.</p>
-        <button mat-button color="primary" class="console-app__widget-link">
-          User Management
-        </button>
-        <p class="secondary-text">Create and manage console user accounts</p>
-        <button
-          mat-button
-          color="primary"
-          class="console-app__widget-link"
-          (click)="openRegistrarsPage()"
-        >
-          Registrar Management
-        </button>
-        <p class="secondary-text">Create and manage registrar accounts</p>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/home/widgets/settingsWidget.component.ts

@@ -1,44 +0,0 @@
-// 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 { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { RegistrarComponent } from 'src/app/registrar/registrarsTable.component';
-import ContactComponent from 'src/app/settings/contact/contact.component';
-import SecurityComponent from 'src/app/settings/security/security.component';
-import { SettingsComponent } from 'src/app/settings/settings.component';
-
-@Component({
-  selector: '[app-settings-widget]',
-  templateUrl: './settingsWidget.component.html',
-})
-export class SettingsWidgetComponent {
-  constructor(private router: Router) {}
-
-  openRegistrarsPage() {
-    this.navigate(RegistrarComponent.PATH);
-  }
-
-  openSecurityPage() {
-    this.navigate(SecurityComponent.PATH);
-  }
-
-  openContactsPage() {
-    this.navigate(ContactComponent.PATH);
-  }
-
-  private navigate(route: string) {
-    this.router.navigate([SettingsComponent.PATH, route]);
-  }
-}

console-webapp/src/app/home/widgets/tldsWidget.component.html

@@ -1,13 +0,0 @@
-<mat-card>
-  <mat-card-content>
-    <div class="console-app__widget">
-      <div class="console-app__widget_left">
-        <mat-icon class="console-app__widget-icon">list_alt</mat-icon>
-        <h1 class="console-app__widget-title">TLDs</h1>
-        <h4 class="secondary-text text-center">
-          View launch phase information for all onboarded and available TLDs.
-        </h4>
-      </div>
-    </div>
-  </mat-card-content>
-</mat-card>

console-webapp/src/app/lock/registryLockVerify.component.html

@@ -0,0 +1,28 @@
+@if (isLoading) {
+<div class="console-app__registry-lock-verify-spinner">
+  <mat-spinner />
+</div>
+} @else if (domainName) {
+<h1 class="mat-headline-4">Success!</h1>
+<div class="console-app__registry-lock-content">
+  <div class="console-app__registry-lock-subhead">
+    The domain {{ domainName }} has been successfully {{ action }}ed.
+  </div>
+</div>
+<div>
+  <a
+    class="text-l"
+    routerLink="{{ DOMAIN_LIST_COMPONENT_PATH }}"
+    [queryParams]="{ registrarId: this.registrarService.registrarId() }"
+    >Return to the list of domains</a
+  >
+</div>
+} @else {
+<h1 class="mat-headline-4">Failure</h1>
+<div class="console-app__registry-lock-content">
+  <div class="console-app__registry-lock-subhead">
+    An error occurred: {{ errorMessage }}.<br /><br />Please double-check the
+    verification code and try again.
+  </div>
+</div>
+}

console-webapp/src/app/lock/registryLockVerify.component.scss

@@ -0,0 +1,9 @@
+.console-app__registry-lock {
+  &-content {
+    margin-top: 30px;
+  }
+  &-subhead {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}

console-webapp/src/app/lock/registryLockVerify.component.ts

@@ -0,0 +1,65 @@
+// 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 { RegistrarService } from '../registrar/registrar.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { RegistryLockVerifyService } from './registryLockVerify.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { take } from 'rxjs';
+import { DomainListComponent } from '../domains/domainList.component';
+
+@Component({
+  selector: 'app-registry-lock-verify',
+  templateUrl: './registryLockVerify.component.html',
+  styleUrls: ['./registryLockVerify.component.scss'],
+  providers: [RegistryLockVerifyService],
+})
+export class RegistryLockVerifyComponent {
+  public static PATH = 'registry-lock-verify';
+
+  readonly DOMAIN_LIST_COMPONENT_PATH = `/${DomainListComponent.PATH}`;
+
+  isLoading = true;
+  domainName?: string;
+  action?: string;
+  errorMessage?: string;
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected registryLockVerifyService: RegistryLockVerifyService,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParamMap.pipe(take(1)).subscribe((params: ParamMap) => {
+      this.registryLockVerifyService
+        .verifyRequest(params.get('lockVerificationCode') || '')
+        .subscribe({
+          error: (err: HttpErrorResponse) => {
+            this.isLoading = false;
+            this.errorMessage = err.error;
+          },
+          next: (verificationResponse) => {
+            this.domainName = verificationResponse.domainName;
+            this.action = verificationResponse.action;
+            this.registrarService.registrarId.set(
+              verificationResponse.registrarId
+            );
+            this.isLoading = false;
+          },
+        });
+    });
+  }
+}

console-webapp/src/app/lock/registryLockVerify.service.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,13 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
-import { UserDataService } from 'src/app/shared/services/userData.service';
+import { Injectable } from '@angular/core';
+import { BackendService } from '../shared/services/backend.service';
 
-@Component({
-  selector: '[app-contact-widget]',
-  templateUrl: './contactWidget.component.html',
-})
-export class ContactWidgetComponent {
-  constructor(public userDataService: UserDataService) {}
+export interface RegistryLockVerificationResponse {
+  action: string;
+  domainName: string;
+  registrarId: string;
+}
+
+@Injectable()
+export class RegistryLockVerifyService {
+  constructor(private backendService: BackendService) {}
+
+  verifyRequest(lockVerificationCode: string) {
+    return this.backendService.verifyRegistryLockRequest(lockVerificationCode);
+  }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -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,23 +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';
 
 @NgModule({
   exports: [
@@ -83,6 +85,8 @@ import { MatChipsModule } from '@angular/material/chips';
     MatSnackBarModule,
     MatPaginatorModule,
     MatChipsModule,
+    MatAutocompleteModule,
+    ReactiveFormsModule,
   ],
 })
 export class MaterialModule {}

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

@@ -0,0 +1,45 @@
+<mat-tree
+  [dataSource]="dataSource"
+  [treeControl]="treeControl"
+  class="console-app__nav-tree"
+>
+  <mat-tree-node
+    *matTreeNodeDef="let node"
+    matTreeNodeToggle
+    (click)="onClick(node)"
+    [class.active]="router.url.includes(node.path)"
+    [elementId]="getElementId(node)"
+  >
+    <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
+      {{ node.iconName }}
+    </mat-icon>
+    {{ node.title }}
+  </mat-tree-node>
+  <mat-nested-tree-node
+    *matTreeNodeDef="let node; when: hasChild"
+    (click)="onClick(node)"
+  >
+    <div class="mat-tree-node" [class.active]="router.url.includes(node.path)">
+      <button
+        class="console-app__nav-icon_expand"
+        mat-icon-button
+        matTreeNodeToggle
+        [attr.aria-label]="'Toggle ' + node.title"
+      >
+        <mat-icon>
+          {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
+        </mat-icon>
+      </button>
+      <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
+        {{ node.iconName }}
+      </mat-icon>
+      {{ node.title }}
+    </div>
+    <div
+      [class.console-app__nav-tree_invisible]="!treeControl.isExpanded(node)"
+      role="group"
+    >
+      <ng-container matTreeNodeOutlet></ng-container>
+    </div>
+  </mat-nested-tree-node>
+</mat-tree>

console-webapp/src/app/navigation/navigation.component.scss

@@ -0,0 +1,71 @@
+// 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.
+
+$expand-icon-size: 26px;
+
+.console-app {
+  &__sidebar {
+    min-width: 300px;
+    border: 0;
+  }
+
+  &__nav-icon {
+    width: $expand-icon-size;
+    height: $expand-icon-size;
+    color: var(--secondary) !important;
+    margin-right: $expand-icon-size;
+
+    &_expand {
+      position: absolute;
+      left: 0;
+      margin: auto;
+      padding: 0px;
+      width: $expand-icon-size;
+      height: $expand-icon-size;
+    }
+  }
+
+  &__nav-tree {
+    .mat-tree-node {
+      cursor: pointer;
+      padding-left: $expand-icon-size;
+      position: relative;
+
+      &:hover {
+        background-color: var(--light-highlight);
+        border-radius: 0 15px 15px 0;
+      }
+      &.active {
+        border-radius: 0 15px 15px 0;
+        background-color: var(--lightest);
+      }
+    }
+
+    div[role="group"] > .mat-tree-node {
+      // expand icon + regular icon + spacing = 3 * $expand-icon-size
+      padding-left: calc($expand-icon-size * 3);
+    }
+
+    ul,
+    li {
+      margin-top: 0;
+      margin-bottom: 0;
+      list-style-type: none;
+    }
+
+    &_invisible {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+// 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 { NestedTreeControl } from '@angular/cdk/tree';
+import { Component } from '@angular/core';
+import { MatTreeNestedDataSource } from '@angular/material/tree';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { RouteWithIcon, routes } from '../app-routing.module';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
+
+interface NavMenuNode extends RouteWithIcon {
+  parentRoute?: RouteWithIcon;
+}
+
+/**
+ * This component is responsible for rendering navigation menu based on the allowed routes
+ * and keeping UI in sync when route changes (eg highlights selected route in the menu).
+ */
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss'],
+})
+export class NavigationComponent {
+  renderRouter: boolean = true;
+  treeControl = new NestedTreeControl<RouteWithIcon>((node) => node.children);
+  dataSource = new MatTreeNestedDataSource<RouteWithIcon>();
+  private subscription!: Subscription;
+
+  hasChild = (_: number, node: RouteWithIcon) =>
+    !!node.children && node.children.length > 0;
+
+  constructor(protected router: Router) {
+    this.dataSource.data = this.ngRoutesToNavMenuNodes(routes);
+  }
+
+  ngOnInit() {
+    this.subscription = this.router.events.subscribe((navigationParams) => {
+      if (navigationParams instanceof NavigationEnd) {
+        this.syncExpandedNavigationWithRoute(navigationParams.url);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  getElementId(node: RouteWithIcon) {
+    return node.path === 'registrars'
+      ? RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT
+      : null;
+  }
+
+  syncExpandedNavigationWithRoute(url: string) {
+    const maybeComponentWithChildren = this.dataSource.data.find((menuNode) => {
+      return (
+        // @ts-ignore - optional function added to components with children,
+        // there's no availble tools to get current active router component
+        typeof menuNode.component?.matchesUrl === 'function' &&
+        // @ts-ignore
+        menuNode.component?.matchesUrl(url)
+      );
+    });
+    if (maybeComponentWithChildren) {
+      this.treeControl.expand(maybeComponentWithChildren);
+    }
+  }
+
+  onClick(node: NavMenuNode) {
+    if (node.parentRoute) {
+      this.router.navigate([node.parentRoute.path + '/' + node.path], {
+        queryParamsHandling: 'merge',
+      });
+    } else {
+      this.router.navigate([node.path], { queryParamsHandling: 'merge' });
+    }
+  }
+
+  /**
+   * We only want to use routes with titles and we want to provide easy reference to parent node
+   */
+  ngRoutesToNavMenuNodes(routes: RouteWithIcon[]): NavMenuNode[] {
+    return routes
+      .filter((r) => r.title)
+      .map((r) => {
+        if (r.children) {
+          return {
+            ...r,
+            children: r.children
+              .filter((r) => r.title)
+              .map((childRoute) => {
+                return {
+                  ...childRoute,
+                  parentRoute: r,
+                };
+              }),
+          };
+        }
+        return r;
+      });
+  }
+}

console-webapp/src/app/registrar/emptyRegistrar.component.html

@@ -1,7 +0,0 @@
-<div class="console-app__emty-registrar">
-  <h1>
-    <mat-icon class="console-app__emty-registrar-icon">block</mat-icon>
-  </h1>
-  <h1>No registrar selected</h1>
-  <h4 class="mat-body-2">Please select a registrar</h4>
-</div>

console-webapp/src/app/registrar/emptyRegistrar.component.ts

@@ -1,37 +0,0 @@
-// 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 { Component, effect } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { RegistrarService } from './registrar.service';
-
-@Component({
-  selector: 'app-empty-registrar',
-  templateUrl: './emptyRegistrar.component.html',
-  styleUrls: ['./emptyRegistrar.component.scss'],
-})
-export class EmptyRegistrar {
-  constructor(
-    private route: ActivatedRoute,
-    protected registrarService: RegistrarService,
-    private router: Router
-  ) {
-    effect(() => {
-      if (registrarService.registrarId()) {
-        this.router.navigate([this.route.snapshot.paramMap.get('nextUrl')]);
-      }
-    });
-  }
-}

console-webapp/src/app/registrar/newRegistrar.component.html

@@ -0,0 +1,182 @@
+<div class="console-new-registrar">
+  <button
+    mat-icon-button
+    aria-label="Back to registrars list"
+    (click)="goBack()"
+  >
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <div class="spacer"></div>
+  <h1>Create a registrar</h1>
+  <form (ngSubmit)="save($event)" #form>
+    <h2>General</h2>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Registrar Name: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.registrarName"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Registrar ID: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.registrarId"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Registrar email address: </mat-label>
+        <input
+          matInput
+          type="email"
+          [required]="true"
+          [(ngModel)]="newRegistrar.emailAddress"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Billing Accounts: </mat-label>
+        <textarea
+          matInput
+          required="true"
+          placeholder="USD=billing-id-for-usd
+JPY=billing-id-for-yen"
+          [ngModel]="billingAccountMap"
+          (ngModelChange)="onBillingAccountMapChange($event)"
+          [ngModelOptions]="{ standalone: true }"
+        ></textarea>
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>IANA ID: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.ianaIdentifier"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>ICANN referral email: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          type="email"
+          [(ngModel)]="newRegistrar.icannReferralEmail"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Drive ID: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.driveFolderId"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <h2>Contact Info</h2>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Street address (Line 1): </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="localizedAddressStreet.line1"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Street address (Line 2)</mat-label>
+        <input
+          matInput
+          [required]="false"
+          [(ngModel)]="localizedAddressStreet.line2"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Street address (Line 3)</mat-label>
+        <input
+          matInput
+          [required]="false"
+          [(ngModel)]="localizedAddressStreet.line3"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>City: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.localizedAddress.city"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>State/Region: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.localizedAddress.state"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>ZIP/Postal Code: </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.localizedAddress.zip"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <section>
+      <mat-form-field appearance="outline">
+        <mat-label>Country Code (e.g. US): </mat-label>
+        <input
+          matInput
+          [required]="true"
+          [(ngModel)]="newRegistrar.localizedAddress.countryCode"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+    </section>
+    <button
+      class="console-new-registrar__submit"
+      mat-flat-button
+      color="primary"
+      type="submit"
+    >
+      Save
+    </button>
+  </form>
+</div>

console-webapp/src/app/registrar/newRegistrar.component.scss

@@ -0,0 +1,20 @@
+.console-new-registrar {
+  max-width: 616px;
+
+  h2 {
+    margin: 40px 0 25px 0 !important;
+  }
+
+  section {
+    margin-bottom: 20px;
+  }
+
+  mat-form-field {
+    display: block;
+    width: 100%;
+  }
+
+  &__submit {
+    margin: 30px 0;
+  }
+}

console-webapp/src/app/registrar/newRegistrar.component.ts

@@ -0,0 +1,99 @@
+// 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 { HttpErrorResponse } from '@angular/common/http';
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Registrar, RegistrarService } from './registrar.service';
+
+interface LocalizedAddressStreet {
+  line1: string;
+  line2: string;
+  line3: string;
+}
+
+@Component({
+  selector: 'app-new-registrar',
+  templateUrl: './newRegistrar.component.html',
+  styleUrls: ['./newRegistrar.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export default class NewRegistrarComponent {
+  protected newRegistrar: Registrar;
+  protected localizedAddressStreet: LocalizedAddressStreet;
+  protected billingAccountMap: String = '';
+
+  @ViewChild('form') form!: ElementRef;
+  constructor(
+    private registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {
+    this.newRegistrar = {
+      registrarId: '',
+      url: '',
+      whoisServer: '',
+      registrarName: '',
+      icannReferralEmail: '',
+      localizedAddress: {
+        city: '',
+        state: '',
+        zip: '',
+        countryCode: '',
+      },
+    };
+    this.localizedAddressStreet = {
+      line1: '',
+      line2: '',
+      line3: '',
+    };
+  }
+
+  onBillingAccountMapChange(val: String) {
+    const billingAccountMap: { [key: string]: string } = {};
+    this.newRegistrar.billingAccountMap = val.split('\n').reduce((acc, val) => {
+      const [currency, billingCode] = val.split('=');
+      acc[currency] = billingCode;
+      return acc;
+    }, billingAccountMap);
+  }
+
+  save(e: SubmitEvent) {
+    e.preventDefault();
+    if (this.form.nativeElement.checkValidity()) {
+      const { line1, line2, line3 } = this.localizedAddressStreet;
+      this.newRegistrar.localizedAddress.street = [line1, line2, line3].filter(
+        (v) => !!v
+      );
+      this.registrarService.createRegistrar(this.newRegistrar).subscribe({
+        complete: () => {
+          this.goBack();
+        },
+        error: (err: HttpErrorResponse) => {
+          this._snackBar.open(err.error);
+        },
+      });
+    } else {
+      this.form.nativeElement.reportValidity();
+    }
+  }
+
+  goBack() {
+    this.registrarService.inNewRegistrarMode.set(false);
+  }
+}

console-webapp/src/app/registrar/registrar.guard.spec.ts

@@ -1,68 +0,0 @@
-// 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 { TestBed } from '@angular/core/testing';
-
-import { RegistrarGuard } from './registrar.guard';
-import {
-  ActivatedRouteSnapshot,
-  Router,
-  RouterStateSnapshot,
-} from '@angular/router';
-import { RegistrarService } from './registrar.service';
-
-describe('RegistrarGuard', () => {
-  let guard: RegistrarGuard;
-  let dummyRegistrarService: RegistrarService;
-  let routeSpy: Router;
-  let dummyRoute: RouterStateSnapshot;
-
-  beforeEach(() => {
-    routeSpy = jasmine.createSpyObj<Router>('Router', ['navigate']);
-    dummyRegistrarService = { activeRegistrarId: '' } as RegistrarService;
-    dummyRoute = { url: '/value' } as RouterStateSnapshot;
-
-    TestBed.configureTestingModule({
-      providers: [
-        RegistrarGuard,
-        { provide: Router, useValue: routeSpy },
-        { provide: RegistrarService, useValue: dummyRegistrarService },
-      ],
-    });
-  });
-
-  it('should not be able to activate when activeRegistrarId is empty', () => {
-    guard = TestBed.inject(RegistrarGuard);
-    const res = guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
-    expect(res).toBeFalsy();
-  });
-
-  it('should be able to activate when activeRegistrarId is not empty', () => {
-    TestBed.overrideProvider(RegistrarService, {
-      useValue: { activeRegistrarId: 'value' },
-    });
-    guard = TestBed.inject(RegistrarGuard);
-    const res = guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
-    expect(res).toBeTrue();
-  });
-
-  it('should navigate to empty-registrar screen when activeRegistrarId is empty', () => {
-    guard = TestBed.inject(RegistrarGuard);
-    guard.canActivate(new ActivatedRouteSnapshot(), dummyRoute);
-    expect(routeSpy.navigate).toHaveBeenCalledOnceWith([
-      '/empty-registrar',
-      { nextUrl: dummyRoute.url },
-    ]);
-  });
-});

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

@@ -1,45 +0,0 @@
-// 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 {
-  ActivatedRouteSnapshot,
-  Router,
-  RouterStateSnapshot,
-} from '@angular/router';
-
-import { RegistrarService } from './registrar.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class RegistrarGuard {
-  constructor(
-    private router: Router,
-    private registrarService: RegistrarService
-  ) {}
-
-  canActivate(
-    _: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot
-  ): Promise<boolean> | boolean {
-    if (this.registrarService.registrarId()) {
-      return true;
-    }
-    return this.router.navigate([
-      `/empty-registrar`,
-      { nextUrl: state.url || '' },
-    ]);
-  }
-}

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,18 +14,24 @@
 
 import { TestBed } from '@angular/core/testing';
 
-import { RegistrarService } from './registrar.service';
-import { BackendService } from '../shared/services/backend.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { BackendService } from '../shared/services/backend.service';
+import { RegistrarService } from './registrar.service';
 
 describe('RegistrarService', () => {
   let service: RegistrarService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
-      providers: [BackendService, MatSnackBar],
+      imports: [],
+      providers: [
+        BackendService,
+        MatSnackBar,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     });
     service = TestBed.inject(RegistrarService);
   });

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,64 +13,106 @@
 // limitations under the License.
 
 import { Injectable, computed, signal } from '@angular/core';
-import { Observable, tap } from 'rxjs';
+import { Observable, switchMap, tap } from 'rxjs';
 
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
 import { BackendService } from '../shared/services/backend.service';
 import {
   GlobalLoader,
   GlobalLoaderService,
 } from '../shared/services/globalLoader.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
-export interface Address {
-  street?: string[];
-  city?: string;
-  countryCode?: string;
-  zip?: string;
-  state?: string;
+export interface IpAllowListItem {
+  value: string;
 }
 
-export interface Registrar {
+export interface Address {
+  city?: string;
+  countryCode?: string;
+  state?: string;
+  street?: string[];
+  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;
+  localizedAddress: Address;
+  registrarId: string;
+  url: string;
+  whoisServer: string;
+}
+
+export interface Registrar
+  extends WhoisRegistrarFields,
+    SecuritySettingsBackendModel {
   allowedTlds?: 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({
   providedIn: 'root',
 })
 export class RegistrarService implements GlobalLoader {
-  registrarId = signal<string>('');
+  registrarId = signal<string>(
+    new URLSearchParams(document.location.hash.split('?')[1]).get(
+      'registrarId'
+    ) || ''
+  );
   registrars = signal<Registrar[]>([]);
   registrar = computed<Registrar | undefined>(() =>
     this.registrars().find((r) => r.registrarId === this.registrarId())
   );
 
+  inNewRegistrarMode = signal(false);
+
+  registrarsLoaded: Promise<void>;
+
   constructor(
     private backend: BackendService,
     private globalLoader: GlobalLoaderService,
-    private _snackBar: MatSnackBar
+    private _snackBar: MatSnackBar,
+    private router: Router
   ) {
-    this.loadRegistrars().subscribe((r) => {
-      this.globalLoader.stopGlobalLoader(this);
+    this.registrarsLoaded = new Promise((resolve) => {
+      this.loadRegistrars().subscribe((r) => {
+        this.globalLoader.stopGlobalLoader(this);
+        resolve();
+      });
     });
     this.globalLoader.startGlobalLoader(this);
   }
 
   public updateSelectedRegistrar(registrarId: string) {
-    this.registrarId.set(registrarId);
+    if (registrarId !== this.registrarId()) {
+      this.registrarId.set(registrarId);
+      // add registrarId to url query params, so that we can pick it up after page refresh
+      this.router.navigate([], {
+        queryParams: { registrarId },
+        queryParamsHandling: 'merge',
+      });
+    }
   }
 
   public loadRegistrars(): Observable<Registrar[]> {
@@ -83,6 +125,27 @@ export class RegistrarService implements GlobalLoader {
     );
   }
 
+  createRegistrar(registrar: Registrar) {
+    return this.backend
+      .createRegistrar(registrar)
+      .pipe(switchMap((_) => this.loadRegistrars()));
+  }
+
+  updateRegistrar(updatedRegistrar: Registrar) {
+    return this.backend.updateRegistrar(updatedRegistrar).pipe(
+      tap(() => {
+        this.registrars.set(
+          this.registrars().map((r) => {
+            if (r.registrarId === updatedRegistrar.registrarId) {
+              return updatedRegistrar;
+            }
+            return r;
+          })
+        );
+      })
+    );
+  }
+
   loadingTimeout() {
     this._snackBar.open('Timeout loading registrars');
   }

console-webapp/src/app/registrar/registrarDetails.component.html

@@ -1,40 +1,99 @@
-<div class="registrarDetails" *ngIf="registrarInEdit">
-  <h3 mat-dialog-title>Edit Registrar: {{ registrarInEdit.registrarId }}</h3>
-  <div mat-dialog-content>
+<div class="console-app__registrar-view">
+  <h1 class="mat-headline-4">Registrars</h1>
+  <mat-divider></mat-divider>
+  <div class="console-app__registrar-view-content">
+    <div class="console-app__registrar-view-controls">
+      <button mat-icon-button aria-label="Back to registrars list" backButton>
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <div class="spacer"></div>
+      @if(!inEdit && !registrarNotFound) {
+      <button
+        mat-flat-button
+        color="primary"
+        aria-label="Edit Registrar"
+        (click)="inEdit = true"
+      >
+        <mat-icon>edit</mat-icon>
+        Edit
+      </button>
+      <button mat-icon-button aria-label="Delete Registrar">
+        <mat-icon>delete</mat-icon>
+      </button>
+      }
+    </div>
+    @if(registrarNotFound) {
+    <h1>Registrar not found</h1>
+    } @else {
+    <h1>{{ registrarInEdit.registrarId }}</h1>
+    <h2 *ngIf="registrarInEdit.registrarName !== registrarInEdit.registrarId">
+      {{ registrarInEdit.registrarName }}
+    </h2>
+    @if(inEdit) {
     <form (ngSubmit)="saveAndClose()">
-      <mat-form-field class="registrarDetails__input">
-        <mat-label>Registry Lock:</mat-label>
-        <mat-select
-          [(ngModel)]="registrarInEdit.registryLockAllowed"
-          name="registryLockAllowed"
-        >
-          <mat-option [value]="true">True</mat-option>
-          <mat-option [value]="false">False</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field class="registrarDetails__input">
-        <mat-label>Onboarded TLDs: </mat-label>
-        <mat-chip-grid #chipGrid aria-label="Enter TLD">
-          <mat-chip-row
-            *ngFor="let tld of registrarInEdit.allowedTlds"
-            (removed)="removeTLD(tld)"
+      <div>
+        <mat-form-field appearance="outline">
+          <mat-label>Registry Lock:</mat-label>
+          <mat-select
+            [(ngModel)]="registrarInEdit.registryLockAllowed"
+            name="registryLockAllowed"
           >
-            {{ tld }}
-            <button matChipRemove aria-label="'remove ' + tld">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
-        </mat-chip-grid>
-        <input
-          placeholder="New tld..."
-          [matChipInputFor]="chipGrid"
-          (matChipInputTokenEnd)="addTLD($event)"
-        />
-      </mat-form-field>
-      <mat-dialog-actions>
-        <button mat-button (click)="this.params?.close()">Cancel</button>
-        <button type="submit" mat-button color="primary">Save</button>
-      </mat-dialog-actions>
+            <mat-option [value]="true">True</mat-option>
+            <mat-option [value]="false">False</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <div>
+        <mat-form-field appearance="outline">
+          <mat-label>Onboarded TLDs: </mat-label>
+          <mat-chip-grid #chipGrid aria-label="Enter TLD">
+            <mat-chip-row
+              *ngFor="let tld of registrarInEdit.allowedTlds"
+              (removed)="removeTLD(tld)"
+            >
+              {{ tld }}
+              <button matChipRemove aria-label="'remove ' + tld">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          </mat-chip-grid>
+          <input
+            placeholder="New tld..."
+            [matChipInputFor]="chipGrid"
+            (matChipInputTokenEnd)="addTLD($event)"
+          />
+        </mat-form-field>
+      </div>
+      <button
+        mat-flat-button
+        color="primary"
+        aria-label="Edit Registrar"
+        type="submit"
+      >
+        Save
+      </button>
     </form>
+    } @else {
+    <mat-card appearance="outlined">
+      <mat-card-content>
+        <mat-list role="list">
+          <mat-list-item role="listitem">
+            <h2>Registrar details</h2>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+          @for (column of columns; track column.columnDef) {
+          <mat-list-item role="listitem">
+            <span class="console-app__list-key">{{ column.header }} </span>
+            <span
+              class="console-app__list-value"
+              [innerHTML]="column.cell(registrarInEdit).replace('<br/>', ' ')"
+            ></span>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+          }
+        </mat-list>
+      </mat-card-content>
+    </mat-card>
+    } }
   </div>
 </div>

console-webapp/src/app/registrar/registrarDetails.component.scss

@@ -1,8 +1,19 @@
-.registrarDetails {
-  min-width: 30vw;
-
-  &__input {
-    display: block;
-    margin-top: 0.5rem;
+.console-app {
+  &__registrar-view {
+    &-controls {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+    }
+  }
+  &__registrar-view-content {
+    max-width: 616px;
+    mat-divider:last-child {
+      display: none;
+    }
+    mat-form-field {
+      margin-bottom: 20px;
+      width: 100%;
+    }
   }
 }

console-webapp/src/app/registrar/registrarDetails.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,45 +12,62 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
-import { Registrar, RegistrarService } from './registrar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material/chips';
-import { DialogBottomSheetContent } from '../shared/components/dialogBottomSheet.component';
-
-type RegistrarDetailsParams = {
-  close: Function;
-  data: {
-    registrar: Registrar;
-  };
-};
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { Registrar, RegistrarService } from './registrar.service';
+import { RegistrarComponent, columns } from './registrarsTable.component';
 
 @Component({
   selector: 'app-registrar-details',
   templateUrl: './registrarDetails.component.html',
   styleUrls: ['./registrarDetails.component.scss'],
 })
-export class RegistrarDetailsComponent implements DialogBottomSheetContent {
+export class RegistrarDetailsComponent implements OnInit {
+  public static PATH = 'registrars/:id';
+  inEdit: boolean = false;
   registrarInEdit!: Registrar;
-  params?: RegistrarDetailsParams;
+  registrarNotFound: boolean = false;
+  columns = columns.filter((c) => !c.hiddenOnDetailsCard);
+  private subscription!: Subscription;
 
-  constructor(protected registrarService: RegistrarService) {}
+  constructor(
+    protected registrarService: RegistrarService,
+    private route: ActivatedRoute,
+    private _snackBar: MatSnackBar,
+    private router: Router
+  ) {}
 
-  init(params: RegistrarDetailsParams) {
-    this.params = params;
-    this.registrarInEdit = JSON.parse(
-      JSON.stringify(this.params.data.registrar)
-    );
-  }
-
-  saveAndClose() {
-    this.params?.close();
+  ngOnInit(): void {
+    this.registrarService.registrarsLoaded.then(() => {
+      this.subscription = this.route.paramMap.subscribe((params: ParamMap) => {
+        this.registrarInEdit = structuredClone(
+          this.registrarService
+            .registrars()
+            .filter((r) => r.registrarId === params.get('id'))[0]
+        );
+        if (!this.registrarInEdit) {
+          this._snackBar.open(
+            `Registrar with id ${params.get('id')} is not available`
+          );
+          this.registrarNotFound = true;
+        } else {
+          this.registrarNotFound = false;
+        }
+      });
+    });
   }
 
   addTLD(e: MatChipInputEvent) {
+    this.registrarInEdit.allowedTlds = this.registrarInEdit.allowedTlds || [];
     this.removeTLD(e.value); // Prevent dups
-    this.registrarInEdit.allowedTlds = this.registrarInEdit.allowedTlds?.concat(
-      [e.value.toLowerCase()]
-    );
+    this.registrarInEdit.allowedTlds = [
+      ...this.registrarInEdit.allowedTlds,
+      e.value.toLowerCase(),
+    ];
   }
 
   removeTLD(tld: string) {
@@ -58,4 +75,22 @@ export class RegistrarDetailsComponent implements DialogBottomSheetContent {
       (v) => v != tld
     );
   }
+
+  saveAndClose() {
+    this.registrarService.updateRegistrar(this.registrarInEdit).subscribe({
+      complete: () => {
+        this.router.navigate([RegistrarComponent.PATH], {
+          queryParamsHandling: 'merge',
+        });
+      },
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error);
+      },
+    });
+    this.inEdit = false;
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }

console-webapp/src/app/registrar/registrarSelector.component.html

@@ -1,29 +1,29 @@
 <div class="console-app__registrar">
-  <button
-    mat-button
-    [routerLink]="'/settings/registrars'"
-    routerLinkActive="active"
-    *ngIf="isMobile; else desktop"
-  >
-    {{ registrarService.registrarId() || "Select registrar" }}
-    <mat-icon>open_in_new</mat-icon>
-  </button>
-  <ng-template #desktop>
-    <mat-form-field class="mat-form-field-density-5" appearance="fill">
-      <mat-label>Registrar</mat-label>
-      <mat-select
-        [ngModel]="registrarService.registrarId()"
-        (selectionChange)="
-          registrarService.updateSelectedRegistrar($event.value)
-        "
+  <mat-form-field class="field-small" appearance="outline">
+    <mat-label>Registrar</mat-label>
+    <input
+      type="text"
+      placeholder=""
+      aria-label="Select Registrar"
+      matInput
+      [ngModel]="registrarInput()"
+      (ngModelChange)="registrarInput.set($event)"
+      [ngModelOptions]="{ standalone: true }"
+      (focus)="onFocus()"
+      [matAutocomplete]="auto"
+    />
+    <mat-autocomplete
+      autoActiveFirstOption
+      #auto="matAutocomplete"
+      (optionSelected)="onSelect($event.option.value)"
+    >
+      @for (registrarId of filteredOptions; track registrarId) {
+      <mat-option
+        [value]="registrarId"
+        selected="registrarId === registrarService.registrarId()"
+        >{{ registrarId }}</mat-option
       >
-        <mat-option
-          *ngFor="let registrar of registrarService.registrars()"
-          [value]="registrar.registrarId"
-        >
-          {{ registrar.registrarId }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
-  </ng-template>
+      }
+    </mat-autocomplete>
+  </mat-form-field>
 </div>

console-webapp/src/app/registrar/registrarSelector.component.scss

@@ -3,16 +3,5 @@
     display: flex;
     justify-content: center;
     align-items: baseline;
-    // Fix for angular v15 label issue
-    // https://github.com/angular/components/issues/26579
-    .mat-mdc-floating-label {
-      display: inline !important;
-    }
-    .mat-mdc-select-arrow-wrapper {
-      transform: translateY(0) !important;
-    }
-  }
-  &__title {
-    margin-right: 1rem;
   }
 }

console-webapp/src/app/registrar/registrarSelector.component.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,11 +14,12 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegistrarSelectorComponent } from './registrarSelector.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
 import { BackendService } from '../shared/services/backend.service';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RegistrarSelectorComponent } from './registrarSelector.component';
 
 describe('RegistrarSelectorComponent', () => {
   let component: RegistrarSelectorComponent;
@@ -26,13 +27,13 @@ describe('RegistrarSelectorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
-      providers: [BackendService],
       declarations: [RegistrarSelectorComponent],
+      imports: [MaterialModule, BrowserAnimationsModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RegistrarSelectorComponent);

console-webapp/src/app/registrar/registrarSelector.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,35 +12,36 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit } from '@angular/core';
+import { Component, computed, effect, signal } from '@angular/core';
 import { RegistrarService } from './registrar.service';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { distinctUntilChanged } from 'rxjs';
-
-const MOBILE_LAYOUT_BREAKPOINT = '(max-width: 599px)';
 
 @Component({
   selector: 'app-registrar-selector',
   templateUrl: './registrarSelector.component.html',
   styleUrls: ['./registrarSelector.component.scss'],
 })
-export class RegistrarSelectorComponent implements OnInit {
-  protected isMobile: boolean = false;
+export class RegistrarSelectorComponent {
+  registrarInput = signal<string>(this.registrarService.registrarId());
+  filteredOptions?: string[];
+  allRegistrarIds = computed(() =>
+    this.registrarService.registrars().map((r) => r.registrarId)
+  );
 
-  readonly breakpoint$ = this.breakpointObserver
-    .observe([MOBILE_LAYOUT_BREAKPOINT])
-    .pipe(distinctUntilChanged());
-
-  constructor(
-    protected registrarService: RegistrarService,
-    protected breakpointObserver: BreakpointObserver
-  ) {}
-
-  ngOnInit(): void {
-    this.breakpoint$.subscribe(() => this.breakpointChanged());
+  constructor(protected registrarService: RegistrarService) {
+    effect(() => {
+      const filterValue = this.registrarInput().toLowerCase();
+      this.filteredOptions = this.allRegistrarIds().filter((option) =>
+        option.toLowerCase().includes(filterValue)
+      );
+    });
   }
 
-  private breakpointChanged() {
-    this.isMobile = this.breakpointObserver.isMatched(MOBILE_LAYOUT_BREAKPOINT);
+  onFocus() {
+    // We reset the list of options after selection, so that user doesn't have to clear it out
+    this.filteredOptions = this.allRegistrarIds();
+  }
+
+  onSelect(registrarId: string) {
+    this.registrarService.updateSelectedRegistrar(registrarId);
   }
 }

console-webapp/src/app/registrar/registrarsTable.component.html

@@ -1,54 +1,63 @@
+@if(registrarService.inNewRegistrarMode()) {
+<app-new-registrar />
+} @else {
 <div class="console-app__registrars">
-  <mat-form-field class="console-app__registrars-filter">
-    <mat-label>Search</mat-label>
-    <input
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="..."
-      type="search"
-    />
-    <mat-icon matPrefix>search</mat-icon>
-  </mat-form-field>
-  <mat-table
-    [dataSource]="dataSource"
-    class="mat-elevation-z8"
-    class="console-app__registrars-table"
-    matSort
-  >
-    <ng-container matColumnDef="edit">
-      <mat-header-cell *matHeaderCellDef></mat-header-cell>
-      <mat-cell *matCellDef="let row">
-        <button
-          mat-icon-button
-          color="primary"
-          aria-label="Edit registrar"
-          (click)="openDetails($event, row)"
-        >
-          <mat-icon>edit</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
-
-    <ng-container
-      *ngFor="let column of columns"
-      [matColumnDef]="column.columnDef"
+  <div class="console-app__registrars-header">
+    <h1 class="mat-headline-4">Registrars</h1>
+    <button
+      mat-flat-button
+      color="primary"
+      (click)="openNewRegistrar()"
+      aria-label="Add new registrar"
     >
-      <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
-      <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
-    </ng-container>
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row
-      *matRowDef="let row; columns: displayedColumns"
-      (click)="registrarService.updateSelectedRegistrar(row.registrarId)"
-    ></mat-row>
-  </mat-table>
+      <mat-icon>add</mat-icon>
+      Add new registrar
+    </button>
+  </div>
+  <div class="console-app__scrollable-wrapper">
+    <div class="console-app__scrollable">
+      <mat-form-field class="console-app__registrars-filter">
+        <mat-label>Search</mat-label>
+        <input
+          matInput
+          (keyup)="applyFilter($event)"
+          placeholder="..."
+          type="search"
+        />
+        <mat-icon matPrefix>search</mat-icon>
+      </mat-form-field>
+      <mat-table
+        [dataSource]="dataSource"
+        class="mat-elevation-z0"
+        class="console-app__registrars-table"
+        matSort
+      >
+        <ng-container
+          *ngFor="let column of columns"
+          [matColumnDef]="column.columnDef"
+        >
+          <mat-header-cell *matHeaderCellDef>
+            {{ column.header }}
+          </mat-header-cell>
+          <mat-cell
+            *matCellDef="let row"
+            [innerHTML]="column.cell(row)"
+          ></mat-cell>
+        </ng-container>
+        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+        <mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          (click)="openDetails(row.registrarId)"
+        ></mat-row>
+      </mat-table>
 
-  <mat-paginator
-    class="mat-elevation-z8"
-    [pageSizeOptions]="[5, 10, 20]"
-    showFirstLastButtons
-  ></mat-paginator>
-  <app-dialog-bottom-sheet-wrapper
-    #registrarDetailsView
-  ></app-dialog-bottom-sheet-wrapper>
+      <mat-paginator
+        class="mat-elevation-z0"
+        [pageSizeOptions]="[5, 10, 20]"
+        showFirstLastButtons
+      ></mat-paginator>
+    </div>
+  </div>
 </div>
+
+}

console-webapp/src/app/registrar/registrarsTable.component.scss

@@ -1,12 +1,6 @@
 .console-app {
   $min-width: 756px;
 
-  &__registrars {
-    margin-top: 1.5rem;
-    width: 100%;
-    overflow: auto;
-  }
-
   &__registrars-filter {
     min-width: $min-width !important;
     width: 100%;
@@ -16,6 +10,11 @@
     min-width: $min-width !important;
   }
 
+  &__registrars-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .mat-mdc-paginator {
     min-width: $min-width !important;
   }
@@ -27,7 +26,7 @@
     }
     &-driveId {
       min-width: 200px;
-      word-break: break-all;
+      word-break: break-word;
     }
     &-registryLockAllowed {
       max-width: 80px;

console-webapp/src/app/registrar/registrarsTable.component.spec.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,12 +14,13 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RegistrarComponent } from './registrarsTable.component';
-import { BackendService } from '../shared/services/backend.service';
-import { ActivatedRoute } from '@angular/router';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
 import { MaterialModule } from '../material.module';
+import { BackendService } from '../shared/services/backend.service';
+import { RegistrarComponent } from './registrarsTable.component';
 
 describe('RegistrarComponent', () => {
   let component: RegistrarComponent;
@@ -28,14 +29,12 @@ describe('RegistrarComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [RegistrarComponent],
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
+      imports: [MaterialModule, BrowserAnimationsModule],
       providers: [
         BackendService,
         { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     }).compileComponents();
 

console-webapp/src/app/registrar/registrarsTable.component.ts

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,13 +12,63 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Registrar, RegistrarService } from './registrar.service';
+import { Component, effect, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { RegistrarDetailsComponent } from './registrarDetails.component';
-import { DialogBottomSheetWrapper } from '../shared/components/dialogBottomSheet.component';
+import { Router } from '@angular/router';
+import { Registrar, RegistrarService } from './registrar.service';
+
+export const columns = [
+  {
+    columnDef: 'registrarId',
+    header: 'Registrar Id',
+    cell: (record: Registrar) => `${record.registrarId || ''}`,
+    hiddenOnDetailsCard: true,
+  },
+  {
+    columnDef: 'registrarName',
+    header: 'Name',
+    cell: (record: Registrar) => `${record.registrarName || ''}`,
+    hiddenOnDetailsCard: true,
+  },
+  {
+    columnDef: 'allowedTlds',
+    header: 'TLDs',
+    cell: (record: Registrar) => `${(record.allowedTlds || []).join(', ')}`,
+  },
+  {
+    columnDef: 'emailAddress',
+    header: 'Username',
+    cell: (record: Registrar) => `${record.emailAddress || ''}`,
+  },
+  {
+    columnDef: 'ianaIdentifier',
+    header: 'IANA ID',
+    cell: (record: Registrar) => `${record.ianaIdentifier || ''}`,
+  },
+  {
+    columnDef: 'billingAccountMap',
+    header: 'Billing Accounts',
+    cell: (record: Registrar) =>
+      `${Object.entries(record.billingAccountMap || {}).reduce(
+        (acc, [key, val]) => {
+          return `${acc}${key}=${val}<br/>`;
+        },
+        ''
+      )}`,
+  },
+  {
+    columnDef: 'registryLockAllowed',
+    header: 'Registry Lock',
+    cell: (record: Registrar) => `${record.registryLockAllowed}`,
+  },
+  {
+    columnDef: 'driveId',
+    header: 'Drive ID',
+    cell: (record: Registrar) => `${record.driveFolderId || ''}`,
+  },
+];
 
 @Component({
   selector: 'app-registrar',
@@ -29,66 +79,23 @@ import { DialogBottomSheetWrapper } from '../shared/components/dialogBottomSheet
 export class RegistrarComponent {
   public static PATH = 'registrars';
   dataSource: MatTableDataSource<Registrar>;
-  columns = [
-    {
-      columnDef: 'registrarId',
-      header: 'Registrar Id',
-      cell: (record: Registrar) => `${record.registrarId || ''}`,
-    },
-    {
-      columnDef: 'registrarName',
-      header: 'Name',
-      cell: (record: Registrar) => `${record.registrarName || ''}`,
-    },
-    {
-      columnDef: 'allowedTlds',
-      header: 'TLDs',
-      cell: (record: Registrar) => `${(record.allowedTlds || []).join(', ')}`,
-    },
-    {
-      columnDef: 'emailAddress',
-      header: 'Username',
-      cell: (record: Registrar) => `${record.emailAddress || ''}`,
-    },
-    {
-      columnDef: 'ianaIdentifier',
-      header: 'IANA ID',
-      cell: (record: Registrar) => `${record.ianaIdentifier || ''}`,
-    },
-    {
-      columnDef: 'billingAccountMap',
-      header: 'Billing Accounts',
-      cell: (record: Registrar) =>
-        // @ts-ignore - completely legit line, but TS keeps complaining
-        `${Object.entries(record.billingAccountMap).reduce(
-          (acc, [key, val]) => {
-            return `${acc}${key}=${val}<br/>`;
-          },
-          ''
-        )}`,
-    },
-    {
-      columnDef: 'registryLockAllowed',
-      header: 'Registry Lock',
-      cell: (record: Registrar) => `${record.registryLockAllowed}`,
-    },
-    {
-      columnDef: 'driveId',
-      header: 'Drive ID',
-      cell: (record: Registrar) => `${record.driveFolderId || ''}`,
-    },
-  ];
-  displayedColumns = ['edit'].concat(this.columns.map((c) => c.columnDef));
+  columns = columns;
+
+  displayedColumns = this.columns.map((c) => c.columnDef);
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
-  @ViewChild('registrarDetailsView')
-  detailsComponentWrapper!: DialogBottomSheetWrapper;
 
-  constructor(protected registrarService: RegistrarService) {
+  constructor(
+    protected registrarService: RegistrarService,
+    private router: Router
+  ) {
     this.dataSource = new MatTableDataSource<Registrar>(
       registrarService.registrars()
     );
+    effect(() => {
+      this.dataSource.data = registrarService.registrars();
+    });
   }
 
   ngAfterViewInit() {
@@ -96,16 +103,19 @@ export class RegistrarComponent {
     this.dataSource.sort = this.sort;
   }
 
-  openDetails(event: MouseEvent, registrar: Registrar) {
-    event.stopPropagation();
-    this.detailsComponentWrapper.open<RegistrarDetailsComponent>(
-      RegistrarDetailsComponent,
-      { registrar }
-    );
+  openDetails(registrarId: string) {
+    this.router.navigate(['registrars/', registrarId], {
+      queryParamsHandling: 'merge',
+    });
   }
 
   applyFilter(event: Event) {
     const filterValue = (event.target as HTMLInputElement).value;
+    // TODO: consider filteing out only by registrar name
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }
+
+  openNewRegistrar() {
+    this.registrarService.inNewRegistrarMode.set(true);
+  }
 }

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

@@ -0,0 +1,16 @@
+<h1 class="mat-headline-4">Resources</h1>
+<div class="console-app__resources">
+  <div>
+    <div class="console-app__resources-subhead">Technical resources</div>
+    <a
+      class="text-l"
+      href="{{ userDataService.userData()?.technicalDocsUrl }}"
+      target="_blank"
+      >View onboarding FAQs, TLD information, and technical documentation on
+      Google Drive</a
+    >
+  </div>
+  <div>
+    <img src="./assets/resources.png" />
+  </div>
+</div>

console-webapp/src/app/resources/resources.component.scss

@@ -0,0 +1,22 @@
+.console-app__resources {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  > div {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: left;
+    max-width: 300px;
+    min-width: 200px;
+    margin-top: 30px;
+  }
+  img {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+  }
+  &-subhead {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,12 +13,14 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { UserDataService } from 'src/app/shared/services/userData.service';
+import { UserDataService } from '../shared/services/userData.service';
 
 @Component({
-  selector: '[app-resources-widget]',
-  templateUrl: './resourcesWidget.component.html',
+  selector: 'app-resources',
+  templateUrl: './resources.component.html',
+  styleUrls: ['./resources.component.scss'],
 })
-export class ResourcesWidgetComponent {
-  constructor(public userDataService: UserDataService) {}
+export class ResourcesComponent {
+  public static PATH = 'resources';
+  constructor(protected userDataService: UserDataService) {}
 }

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

@@ -1,48 +1,40 @@
-@if (loading) {
-<div class="contact__loading">
-  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-</div>
+@if(contactService.isContactDetailsView || contactService.isContactNewView) {
+<app-contact-details></app-contact-details>
 } @else {
-<div>
+<div class="console-app__contacts-controls">
+  <button
+    mat-flat-button
+    color="primary"
+    (click)="openNewContact()"
+    aria-label="Add new contact"
+  >
+    <mat-icon>add</mat-icon>
+    Add new contact
+  </button>
+</div>
+<div class="console-app__contacts">
   @if (contactService.contacts().length === 0) {
-  <div class="contact__empty-contacts">
-    <mat-icon class="contact__empty-contacts-icon secondary-text"
+  <div class="console-app__empty-contacts">
+    <mat-icon class="console-app__empty-contacts-icon secondary-text"
       >apps_outage</mat-icon
     >
     <h1>No contacts found</h1>
   </div>
-  } @else { @for (group of groupedContacts(); track group.emailAddress) {
-  <div class="contact__cards-wrapper">
-    <h3>{{ group.label }}s</h3>
-    <mat-divider></mat-divider>
-    <div class="contact__cards">
-      <mat-card class="contact__card" *ngFor="let contact of group.contacts">
-        <mat-card-title>{{ contact.name }}</mat-card-title>
-        <p *ngIf="contact.phoneNumber">{{ contact.phoneNumber }}</p>
-        <p *ngIf="contact.emailAddress">{{ contact.emailAddress }}</p>
-        <mat-card-actions class="contact__card-actions">
-          <button
-            mat-button
-            color="primary"
-            (click)="openDetails($event, contact)"
-          >
-            <mat-icon>edit</mat-icon>Edit
-          </button>
-          <button mat-button color="accent" (click)="deleteContact(contact)">
-            <mat-icon>delete</mat-icon>Delete
-          </button>
-        </mat-card-actions>
-      </mat-card>
-    </div>
-  </div>
-  } }
-  <div class="contact__actions">
-    <button mat-raised-button color="primary" (click)="openCreateNew($event)">
-      <mat-icon>add</mat-icon>Create a Contact
-    </button>
-  </div>
-  <app-dialog-bottom-sheet-wrapper
-    #contactDetailsWrapper
-  ></app-dialog-bottom-sheet-wrapper>
+  } @else {
+  <mat-table [dataSource]="dataSource" class="mat-elevation-z0">
+    <ng-container
+      *ngFor="let column of columns"
+      [matColumnDef]="column.columnDef"
+    >
+      <mat-header-cell *matHeaderCellDef> {{ column.header }} </mat-header-cell>
+      <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
+    </ng-container>
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row
+      *matRowDef="let row; columns: displayedColumns"
+      (click)="openDetails(row)"
+    ></mat-row>
+  </mat-table>
+  }
 </div>
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,30 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.contact {
-  &__cards-wrapper {
-    margin-top: 22px;
-  }
-  &__card {
-    width: 400px;
-    padding: 15px;
-  }
-  &__card-actions {
-    padding: 0;
-  }
-  &__loading {
-    margin: 2rem 0;
-  }
-  &__cards {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-top: 20px;
-  }
-  &__actions {
-    display: flex;
-    justify-content: flex-start;
-    margin: 2rem 0;
+.console-app {
+  &__contacts {
+    margin-top: -10px;
+    width: 100%;
+    overflow: auto;
+    mat-table {
+      min-width: 800px;
+    }
+    .contact__name-column-title {
+      color: #5f6368;
+      font-weight: 500;
+      padding: 10px 0;
+    }
+    .contact__name-column-roles {
+      margin-bottom: 10px;
+    }
   }
   &__empty-contacts {
     display: flex;
@@ -49,22 +41,9 @@
     font-size: 4rem;
     margin-top: 1.5rem;
   }
-}
-.contact-details {
-  &__input {
-    width: 100%;
-  }
-  &__group {
-    margin: 20px 0;
-    display: flex;
-    align-items: baseline;
-  }
-  &__group-content {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 450px;
-    * {
-      min-width: 200px;
-    }
+  &__contacts-controls {
+    position: absolute;
+    right: 20px;
+    top: 5px;
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,10 +14,11 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import ContactComponent from './contact.component';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { MaterialModule } from 'src/app/material.module';
 import { BackendService } from 'src/app/shared/services/backend.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import ContactComponent from './contact.component';
 
 describe('ContactComponent', () => {
   let component: ContactComponent;
@@ -26,8 +27,12 @@ describe('ContactComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ContactComponent],
-      imports: [HttpClientTestingModule, MaterialModule],
-      providers: [BackendService],
+      imports: [MaterialModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
     fixture = TestBed.createComponent(ContactComponent);
     component = fixture.componentInstance;

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,164 +12,85 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild, computed } from '@angular/core';
-import { Contact, ContactService } from './contact.service';
-import { HttpErrorResponse } from '@angular/common/http';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { Component, effect, ViewEncapsulation } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { take } from 'rxjs';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
 import {
-  DialogBottomSheetContent,
-  DialogBottomSheetWrapper,
-} from 'src/app/shared/components/dialogBottomSheet.component';
-
-enum Operations {
-  DELETE,
-  ADD,
-  UPDATE,
-}
-
-interface GroupedContacts {
-  value: string;
-  label: string;
-  contacts: Array<Contact>;
-}
-
-type ContactDetailsParams = {
-  close: Function;
-  data: {
-    contact: Contact;
-    operation: Operations;
-  };
-};
-
-const contactTypes: Array<GroupedContacts> = [
-  { value: 'ADMIN', label: 'Primary contact', contacts: [] },
-  { value: 'ABUSE', label: 'Abuse contact', contacts: [] },
-  { value: 'BILLING', label: 'Billing contact', contacts: [] },
-  { value: 'LEGAL', label: 'Legal contact', contacts: [] },
-  { value: 'MARKETING', label: 'Marketing contact', contacts: [] },
-  { value: 'TECH', label: 'Technical contact', contacts: [] },
-  { value: 'WHOIS', label: 'WHOIS-Inquiry contact', contacts: [] },
-];
-
-@Component({
-  selector: 'app-contact-details-dialog',
-  templateUrl: 'contactDetails.component.html',
-  styleUrls: ['./contact.component.scss'],
-})
-export class ContactDetailsDialogComponent implements DialogBottomSheetContent {
-  contact?: Contact;
-  contactTypes = contactTypes;
-  contactIndex?: number;
-
-  params?: ContactDetailsParams;
-
-  constructor(
-    public contactService: ContactService,
-    private _snackBar: MatSnackBar
-  ) {}
-
-  init(params: ContactDetailsParams) {
-    this.params = params;
-    this.contactIndex = this.contactService
-      .contacts()
-      .findIndex((c) => c === params.data.contact);
-    this.contact = JSON.parse(JSON.stringify(params.data.contact));
-  }
-
-  close() {
-    this.params?.close();
-  }
-
-  saveAndClose(e: SubmitEvent) {
-    e.preventDefault();
-    if (!this.contact || this.contactIndex === undefined) return;
-    if (!(e.target as HTMLFormElement).checkValidity()) {
-      return;
-    }
-    const operation = this.params?.data.operation;
-    let operationObservable;
-    if (operation === Operations.ADD) {
-      operationObservable = this.contactService.addContact(this.contact);
-    } else if (operation === Operations.UPDATE) {
-      operationObservable = this.contactService.updateContact(
-        this.contactIndex,
-        this.contact
-      );
-    } else {
-      throw 'Unknown operation type';
-    }
-
-    operationObservable.subscribe({
-      complete: () => this.close(),
-      error: (err: HttpErrorResponse) => {
-        this._snackBar.open(err.error);
-      },
-    });
-  }
-}
+  ContactService,
+  contactTypeToViewReadyContact,
+  ViewReadyContact,
+} from './contact.service';
 
 @Component({
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export default class ContactComponent {
   public static PATH = 'contact';
-  public groupedContacts = computed(() => {
-    return this.contactService.contacts().reduce((acc, contact) => {
-      contact.types.forEach((contactType) => {
-        acc
-          .find((group: GroupedContacts) => group.value === contactType)
-          ?.contacts.push(contact);
-      });
-      return acc;
-    }, JSON.parse(JSON.stringify(contactTypes)));
-  });
 
-  @ViewChild('contactDetailsWrapper')
-  detailsComponentWrapper!: DialogBottomSheetWrapper;
+  dataSource: MatTableDataSource<ViewReadyContact> =
+    new MatTableDataSource<ViewReadyContact>([]);
+  columns = [
+    {
+      columnDef: 'name',
+      header: 'Name',
+      cell: (contact: ViewReadyContact) => `
+        <div class="contact__name-column">
+          <div class="contact__name-column-title">${contact.name}</div>
+          <div class="contact__name-column-roles">${contact.userFriendlyTypes.join(
+            ' • '
+          )}</div>
+          </div>
+      `,
+    },
+    {
+      columnDef: 'emailAddress',
+      header: 'Email',
+      cell: (contact: ViewReadyContact) => `${contact.emailAddress || ''}`,
+    },
+    {
+      columnDef: 'phoneNumber',
+      header: 'Phone',
+      cell: (contact: ViewReadyContact) => `${contact.phoneNumber || ''}`,
+    },
+    {
+      columnDef: 'faxNumber',
+      header: 'Fax',
+      cell: (contact: ViewReadyContact) => `${contact.faxNumber || ''}`,
+    },
+  ];
+  displayedColumns = this.columns.map((c) => c.columnDef);
 
-  loading: boolean = false;
   constructor(
     public contactService: ContactService,
-    private _snackBar: MatSnackBar
+    private registrarService: RegistrarService
   ) {
-    // TODO: Refactor to registrarId service
-    this.loading = true;
-    this.contactService.fetchContacts().subscribe(() => {
-      this.loading = false;
+    effect(() => {
+      if (this.contactService.contacts()) {
+        this.dataSource = new MatTableDataSource<ViewReadyContact>(
+          this.contactService.contacts()
+        );
+      }
+    });
+    effect(() => {
+      if (this.registrarService.registrarId()) {
+        this.contactService.isContactDetailsView = false;
+        this.contactService.isContactNewView = false;
+        this.contactService.fetchContacts().pipe(take(1)).subscribe();
+      }
     });
   }
 
-  deleteContact(contact: Contact) {
-    if (confirm(`Please confirm contact ${contact.name} delete`)) {
-      this.contactService.deleteContact(contact).subscribe({
-        error: (err: HttpErrorResponse) => {
-          this._snackBar.open(err.error);
-        },
-      });
-    }
+  openDetails(contact: ViewReadyContact) {
+    this.contactService.setEditableContact(contact);
+    this.contactService.isContactDetailsView = true;
   }
 
-  openCreateNew(e: MouseEvent) {
-    const newContact: Contact = {
-      name: '',
-      phoneNumber: '',
-      emailAddress: '',
-      types: [contactTypes[0].value],
-    };
-    this.openDetails(e, newContact, Operations.ADD);
-  }
-
-  openDetails(
-    e: MouseEvent,
-    contact: Contact,
-    operation: Operations = Operations.UPDATE
-  ) {
-    e.preventDefault();
-    this.detailsComponentWrapper.open<ContactDetailsDialogComponent>(
-      ContactDetailsDialogComponent,
-      { contact, operation }
-    );
+  openNewContact() {
+    this.contactService.setEditableContact();
+    this.contactService.isContactNewView = true;
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,65 +13,103 @@
 // limitations under the License.
 
 import { Injectable, signal } from '@angular/core';
-import { Observable, tap } from 'rxjs';
+import { Observable, switchMap, tap } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { BackendService } from 'src/app/shared/services/backend.service';
 
+export type contactType =
+  | 'ADMIN'
+  | 'ABUSE'
+  | 'BILLING'
+  | 'LEGAL'
+  | 'MARKETING'
+  | 'TECH'
+  | 'WHOIS';
+
+type contactTypesToUserFriendlyTypes = { [type in contactType]: string };
+
+export const contactTypeToTextMap: contactTypesToUserFriendlyTypes = {
+  ADMIN: 'Primary contact',
+  ABUSE: 'Abuse contact',
+  BILLING: 'Billing contact',
+  LEGAL: 'Legal contact',
+  MARKETING: 'Marketing contact',
+  TECH: 'Technical contact',
+  WHOIS: 'WHOIS-Inquiry contact',
+};
+
+type UserFriendlyType = (typeof contactTypeToTextMap)[contactType];
+
 export interface Contact {
   name: string;
-  phoneNumber: string;
+  phoneNumber?: string;
   emailAddress: string;
   registrarId?: string;
   faxNumber?: string;
-  types: Array<string>;
+  types: Array<contactType>;
   visibleInWhoisAsAdmin?: boolean;
   visibleInWhoisAsTech?: boolean;
   visibleInDomainWhoisAsAbuse?: boolean;
 }
 
+export interface ViewReadyContact extends Contact {
+  userFriendlyTypes: Array<UserFriendlyType>;
+}
+
+export function contactTypeToViewReadyContact(c: Contact): ViewReadyContact {
+  return {
+    ...c,
+    userFriendlyTypes: c.types?.map((cType) => contactTypeToTextMap[cType]),
+  };
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class ContactService {
-  contacts = signal<Contact[]>([]);
+  contacts = signal<ViewReadyContact[]>([]);
+  contactInEdit!: ViewReadyContact;
+  isContactDetailsView: boolean = false;
+  isContactNewView: boolean = false;
 
   constructor(
     private backend: BackendService,
     private registrarService: RegistrarService
   ) {}
 
-  // TODO: Come up with a better handling for registrarId
+  setEditableContact(contact?: ViewReadyContact) {
+    this.contactInEdit = contact
+      ? contact
+      : contactTypeToViewReadyContact({
+          emailAddress: '',
+          name: '',
+          types: ['ADMIN'],
+          faxNumber: '',
+          phoneNumber: '',
+          registrarId: '',
+        });
+  }
+
   fetchContacts(): Observable<Contact[]> {
     return this.backend.getContacts(this.registrarService.registrarId()).pipe(
-      tap((contacts = []) => {
-        this.contacts.set(contacts);
+      tap((contacts) => {
+        this.contacts.set(contacts.map(contactTypeToViewReadyContact));
       })
     );
   }
 
-  saveContacts(contacts: Contact[]): Observable<Contact[]> {
+  saveContacts(contacts: ViewReadyContact[]): Observable<Contact[]> {
     return this.backend
       .postContacts(this.registrarService.registrarId(), contacts)
-      .pipe(
-        tap((_) => {
-          this.contacts.set(contacts);
-        })
-      );
+      .pipe(switchMap((_) => this.fetchContacts()));
   }
 
-  updateContact(index: number, contact: Contact) {
-    const newContacts = this.contacts().map((c, i) =>
-      i === index ? contact : c
-    );
-    return this.saveContacts(newContacts);
-  }
-
-  addContact(contact: Contact) {
+  addContact(contact: ViewReadyContact) {
     const newContacts = this.contacts().concat([contact]);
     return this.saveContacts(newContacts);
   }
 
-  deleteContact(contact: Contact) {
+  deleteContact(contact: ViewReadyContact) {
     const newContacts = this.contacts().filter((c) => c !== contact);
     return this.saveContacts(newContacts);
   }

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

@@ -1,104 +1,201 @@
-<h3 mat-dialog-title>Contact details</h3>
-<div mat-dialog-content *ngIf="contact">
-  <form (ngSubmit)="saveAndClose($event)">
-    <p>
-      <mat-form-field class="contact-details__input">
+<div class="console-app__contact" *ngIf="contactService.contactInEdit">
+  <div class="console-app__contact-controls">
+    <button
+      mat-icon-button
+      aria-label="Back to contacts list"
+      (click)="goBack()"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <div class="spacer"></div>
+    @if(!isEditing && !contactService.isContactNewView) {
+    <button
+      mat-flat-button
+      color="primary"
+      aria-label="Edit Contact"
+      (click)="isEditing = true"
+    >
+      <mat-icon>edit</mat-icon>
+      Edit
+    </button>
+    <button mat-icon-button aria-label="Delete Contact">
+      <mat-icon>delete</mat-icon>
+    </button>
+    }
+  </div>
+
+  @if(isEditing || contactService.isContactNewView) {
+  <h1>Contact Details</h1>
+  <form (ngSubmit)="save($event)">
+    <section>
+      <mat-form-field appearance="outline">
         <mat-label>Name: </mat-label>
         <input
           matInput
           [required]="true"
-          [(ngModel)]="contact.name"
+          [(ngModel)]="contactService.contactInEdit.name"
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </p>
 
-    <p>
-      <mat-form-field class="contact-details__input">
+      <mat-form-field appearance="outline">
         <mat-label>Primary account email: </mat-label>
         <input
           type="email"
           matInput
           [email]="true"
           [required]="true"
-          [(ngModel)]="contact.emailAddress"
+          [(ngModel)]="contactService.contactInEdit.emailAddress"
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </p>
 
-    <p>
-      <mat-form-field class="contact-details__input">
+      <mat-form-field appearance="outline">
         <mat-label>Phone: </mat-label>
         <input
           matInput
-          [(ngModel)]="contact.phoneNumber"
+          [(ngModel)]="contactService.contactInEdit.phoneNumber"
           [ngModelOptions]="{ standalone: true }"
+          placeholder="+0.0000000000"
         />
       </mat-form-field>
-    </p>
 
-    <p>
-      <mat-form-field class="contact-details__input">
+      <mat-form-field appearance="outline">
         <mat-label>Fax: </mat-label>
         <input
           matInput
-          [(ngModel)]="contact.faxNumber"
+          [(ngModel)]="contactService.contactInEdit.faxNumber"
           [ngModelOptions]="{ standalone: true }"
         />
       </mat-form-field>
-    </p>
+    </section>
 
-    <div class="contact-details__group">
-      <label>Contact type:</label>
-      <div class="contact-details__group-content">
+    <section>
+      <h1>Contact Type</h1>
+      <p class="console-app__contact-required">
+        <mat-icon color="accent">error</mat-icon>Required to select at least one
+      </p>
+      <div class="">
         <mat-checkbox
-          *ngFor="let contactType of contactTypes"
-          [checked]="contact.types.includes(contactType.value)"
-          (change)="
-            $event.checked
-              ? contact.types.push(contactType.value)
-              : contact.types.splice(
-                  contact.types.indexOf(contactType.value),
-                  1
-                )
-          "
-          [disabled]="
-            contact.types.length === 1 && contact.types[0] === contactType.value
-          "
+          *ngFor="let contactType of contactTypeToTextMap | keyvalue"
+          [checked]="checkboxIsChecked(contactType.key)"
+          (change)="checkboxOnChange($event, contactType.key)"
+          [disabled]="checkboxIsDisabled(contactType.key)"
         >
-          {{ contactType.label }}
+          {{ contactType.value }}
         </mat-checkbox>
       </div>
-    </div>
-
-    <section>
-      <mat-checkbox
-        [(ngModel)]="contact.visibleInWhoisAsAdmin"
-        [ngModelOptions]="{ standalone: true }"
-        >Show in Registrar WHOIS record as admin contact</mat-checkbox
-      >
     </section>
 
     <section>
-      <mat-checkbox
-        [(ngModel)]="contact.visibleInWhoisAsTech"
-        [ngModelOptions]="{ standalone: true }"
-        >Show in Registrar WHOIS record as technical contact</mat-checkbox
-      >
-    </section>
+      <h1>WHOIS Preferences</h1>
+      <div>
+        <mat-checkbox
+          [(ngModel)]="contactService.contactInEdit.visibleInWhoisAsAdmin"
+          [ngModelOptions]="{ standalone: true }"
+          >Show in Registrar WHOIS record as admin contact</mat-checkbox
+        >
+      </div>
 
-    <section>
-      <mat-checkbox
-        [(ngModel)]="contact.visibleInDomainWhoisAsAbuse"
-        [ngModelOptions]="{ standalone: true }"
-        >Show Phone and Email in Domain WHOIS Record as registrar abuse contact
-        (per CL&D requirements)</mat-checkbox
-      >
+      <div>
+        <mat-checkbox
+          [(ngModel)]="contactService.contactInEdit.visibleInWhoisAsTech"
+          [ngModelOptions]="{ standalone: true }"
+          >Show in Registrar WHOIS record as technical contact</mat-checkbox
+        >
+      </div>
+
+      <div>
+        <mat-checkbox
+          [(ngModel)]="contactService.contactInEdit.visibleInDomainWhoisAsAbuse"
+          [ngModelOptions]="{ standalone: true }"
+          >Show Phone and Email in Domain WHOIS Record as registrar abuse
+          contact (per CL&D requirements)</mat-checkbox
+        >
+      </div>
     </section>
-    <mat-dialog-actions>
-      <button mat-button (click)="close()">Cancel</button>
-      <button type="submit" mat-button>Save</button>
-    </mat-dialog-actions>
+    <button
+      class="console-app__contact-submit"
+      mat-flat-button
+      color="primary"
+      type="submit"
+    >
+      Save
+    </button>
   </form>
+  } @else {
+  <h1>{{ contactService.contactInEdit.name }}</h1>
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list role="list">
+        <mat-list-item role="listitem">
+          <h2>Contact details</h2>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Email</span>
+          <span class="console-app__list-value">{{
+            contactService.contactInEdit.emailAddress
+          }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Phone</span>
+          <span class="console-app__list-value">{{
+            contactService.contactInEdit.phoneNumber
+          }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Fax</span>
+          <span class="console-app__list-value">{{
+            contactService.contactInEdit.faxNumber
+          }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Type:</span>
+          <span class="console-app__list-value">{{
+            contactService.contactInEdit.userFriendlyTypes.join(", ")
+          }}</span>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list role="list">
+        <mat-list-item role="listitem">
+          <h2>WHOIS Preferences</h2>
+        </mat-list-item>
+        @if(contactService.contactInEdit.visibleInWhoisAsAdmin) {
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value"
+            >Show in Registrar WHOIS record as admin contact</span
+          >
+        </mat-list-item>
+        } @if(contactService.contactInEdit.visibleInWhoisAsTech) {
+        <mat-divider></mat-divider>
+        <mat-list-item
+          role="listitem"
+          *ngIf="contactService.contactInEdit.visibleInWhoisAsTech"
+        >
+          <span class="console-app__list-value"
+            >Show in Registrar WHOIS record as technical contact</span
+          >
+        </mat-list-item>
+        } @if(contactService.contactInEdit.visibleInDomainWhoisAsAbuse) {
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value"
+            >Show Phone and Email in Domain WHOIS Record as registrar abuse
+            contact (per CL&D requirements)</span
+          >
+        </mat-list-item>
+        }
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+  }
 </div>

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

@@ -0,0 +1,31 @@
+.console-app__contact {
+  max-width: 616px;
+  section {
+    margin-bottom: 40px;
+  }
+  &-required {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &-submit {
+    margin: 30px 0;
+  }
+
+  &-controls {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+  }
+
+  mat-card {
+    margin-bottom: 30px;
+  }
+
+  mat-form-field {
+    display: block;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}

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

@@ -0,0 +1,104 @@
+// 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 { HttpErrorResponse } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { first } from 'rxjs';
+import {
+  ContactService,
+  contactType,
+  contactTypeToTextMap,
+} from './contact.service';
+
+@Component({
+  selector: 'app-contact-details',
+  templateUrl: './contactDetails.component.html',
+  styleUrls: ['./contactDetails.component.scss'],
+})
+export class ContactDetailsComponent {
+  protected contactTypeToTextMap = contactTypeToTextMap;
+  isEditing: boolean = false;
+
+  constructor(
+    protected contactService: ContactService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  deleteContact() {
+    if (
+      confirm(
+        `Please confirm deletion of contact ${this.contactService.contactInEdit.name}`
+      )
+    ) {
+      this.contactService
+        .deleteContact(this.contactService.contactInEdit)
+        .pipe(first())
+        .subscribe({
+          error: (err: HttpErrorResponse) => {
+            this._snackBar.open(err.error);
+          },
+        });
+    }
+  }
+
+  goBack() {
+    if (this.isEditing) {
+      this.isEditing = false;
+    } else {
+      this.contactService.isContactNewView = false;
+      this.contactService.isContactDetailsView = false;
+    }
+  }
+
+  save(e: SubmitEvent) {
+    e.preventDefault();
+    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) {
+    return this.contactService.contactInEdit.types.includes(
+      type as contactType
+    );
+  }
+
+  checkboxIsDisabled(type: string) {
+    return (
+      this.contactService.contactInEdit.types.length === 1 &&
+      this.contactService.contactInEdit.types[0] === (type as contactType)
+    );
+  }
+
+  checkboxOnChange(event: MatCheckboxChange, type: string) {
+    if (event.checked) {
+      this.contactService.contactInEdit.types.push(type as contactType);
+    } else {
+      this.contactService.contactInEdit.types =
+        this.contactService.contactInEdit.types.filter(
+          (t) => t != (type as contactType)
+        );
+    }
+  }
+}

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,122 @@
+// 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 { HttpErrorResponse } from '@angular/common/http';
+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 {
+      // latest angular just won't detect the error without setTimeout
+      setTimeout(() => {
+        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() {
+    const { oldPassword, newPassword, newPasswordRepeat } =
+      this.passwordUpdateForm.value;
+    if (!oldPassword || !newPassword || !newPasswordRepeat) return;
+    this.securityService
+      .saveEppPassword({
+        registrarId: this.registrarService.registrarId(),
+        oldPassword,
+        newPassword,
+        newPasswordRepeat,
+      })
+      .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,98 +1,123 @@
-<div *ngIf="loading" class="settings-security__loading">
-  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
-</div>
-<div class="settings-security" *ngIf="!loading">
-  <div class="settings-security__section">
-    <div class="settings-security__section-description">
-      <h2>IP Allowlist</h2>
-      <p>
-        Restrict access to EPP production servers to the following IP/IPv6
-        addresses, or ranges like 1.1.1.0/24
-      </p>
-    </div>
-    <div class="settings-security__section-form">
-      <div
-        *ngIf="
-          dataSource.ipAddressAllowList &&
-          dataSource.ipAddressAllowList.length > 0
-        "
-      >
-        <div
-          *ngFor="let item of dataSource.ipAddressAllowList; index as index"
-          class="settings-security__ipRecord"
-        >
-          <mat-form-field>
-            <input
-              matInput
-              type="text"
-              class="settings-security__ip-allowlist"
-              [(ngModel)]="item.value"
-              [disabled]="!inEdit"
-            />
+@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
-              *ngIf="inEdit"
-              matSuffix
-              mat-icon-button
-              aria-label="Remove"
-              (click)="removeIpEntry(index)"
+              mat-flat-button
+              color="primary"
+              aria-label="Edit EPP Password"
+              (click)="editEppPassword()"
             >
-              <mat-icon>close</mat-icon>
+              <mat-icon>edit</mat-icon>
+              Edit
             </button>
-          </mat-form-field>
-        </div>
-      </div>
-      <button mat-stroked-button (click)="enableEdit(); createIpEntry()">
-        Add IP
-      </button>
-    </div>
-  </div>
-  <div class="settings-security__section">
-    <div class="settings-security__section-description">
-      <h2>SSL Certificate</h2>
-      <p>X.509 PEM certificate for EPP production access.</p>
-    </div>
-    <div class="settings-security__section-form">
-      <textarea
-        matInput
-        class="settings-security__clientCertificate"
-        [(ngModel)]="dataSource.clientCertificate"
-        [disabled]="!inEdit"
-      ></textarea>
-    </div>
-  </div>
-  <div class="settings-security__section">
-    <div class="settings-security__section-description">
-      <h2>Failover SSL Certificate</h2>
-      <p>X.509 PEM backup certificate for EPP Production Access.</p>
-    </div>
-    <div class="settings-security__section-form">
-      <textarea
-        matInput
-        [(ngModel)]="dataSource.failoverClientCertificate"
-        [disabled]="!inEdit"
-      ></textarea>
-    </div>
-  </div>
-  <div class="settings-security__actions">
-    <ng-template [ngIf]="inEdit" [ngIfElse]="inView">
-      <button
-        class="settings-security__actions-save"
-        mat-raised-button
-        color="primary"
-        (click)="save()"
-      >
-        Save
-      </button>
-      <button
-        class="settings-security__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>
+        </mat-list-item>
+        <mat-list-item role="listitem" lines="3">
+          <span class="console-app__list-value"
+            >Change the password used for EPP logins</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">
+        <!-- IP Allowlist Start -->
+        <mat-list-item role="listitem">
+          <div class="settings-security__section-header">
+            <h2>IP Allowlist</h2>
+            <button
+              mat-flat-button
+              color="primary"
+              aria-label="Edit security settings"
+              (click)="editSecurity()"
+            >
+              <mat-icon>edit</mat-icon>
+              Edit
+            </button>
+          </div>
+        </mat-list-item>
+        <mat-list-item role="listitem" lines="3">
+          <span class="console-app__list-value"
+            >Restrict access to EPP production servers to the following IP/IPv6
+            addresses, or ranges like 1.1.1.0/24</span
+          >
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        @for (item of dataSource.ipAddressAllowList; track item.value) {
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value">{{ item.value }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        } @empty {
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value">No IP addresses on file.</span>
+        </mat-list-item>
+        }
+        <mat-list-item role="listitem"></mat-list-item>
+        <!-- IP Allowlist End -->
+
+        <!-- SSL Certificate Start -->
+        <mat-list-item role="listitem">
+          <h2>SSL Certificate</h2>
+        </mat-list-item>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value"
+            >X.509 PEM certificate for EPP production access</span
+          >
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem" lines="10">
+          <span class="console-app__list-value">{{
+            dataSource.clientCertificate || "No client certificate on file."
+          }}</span>
+        </mat-list-item>
+        <mat-list-item role="listitem"> </mat-list-item>
+        <!-- SSL Certificate End -->
+
+        <!-- Failover SSL Certificate Start -->
+        <mat-list-item role="listitem">
+          <h2>Failover SSL Certificate</h2>
+        </mat-list-item>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-value"
+            >X.509 PEM backup certificate for EPP production access</span
+          >
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem" lines="10">
+          <span class="console-app__list-value">{{
+            dataSource.failoverClientCertificate ||
+              "No failover certificate on file."
+          }}</span>
+        </mat-list-item>
+        <!-- Failover SSL Certificate End -->
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
 </div>
+}

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -13,41 +13,14 @@
 // limitations under the License.
 
 .settings-security {
-  margin-top: 1.5rem;
-  h1 {
-    margin: 0;
+  max-width: 616px;
+  mat-card {
+    margin-bottom: 40px;
   }
-  &__ipRecord {
-    margin-bottom: 1rem;
-  }
-  &__section {
+  &__section-header {
     display: flex;
-    align-items: stretch;
-    margin-bottom: 3rem;
-    flex-wrap: wrap;
-  }
-  &__section-description {
-    flex: 1;
-    min-width: 300px;
-  }
-  &__section-form {
-    flex: 1;
-    min-width: 300px;
-    textarea {
-      min-height: 100%;
-      min-width: 100%;
-      box-sizing: border-box;
-      min-height: 100px;
-    }
-  }
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-    button {
-      margin-left: 20px;
-    }
-  }
-  &__loading {
-    margin: 2rem 0;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,18 +14,19 @@
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import SecurityComponent from './security.component';
-import { SecurityService, apiToUiConverter } from './security.service';
-import { BackendService } from 'src/app/shared/services/backend.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { MaterialModule } from 'src/app/material.module';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
-import { FormsModule } from '@angular/forms';
+import { MaterialModule } from 'src/app/material.module';
 import {
   Registrar,
   RegistrarService,
 } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import SecurityComponent from './security.component';
+import { SecurityService, apiToUiConverter } from './security.service';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
@@ -50,16 +51,13 @@ describe('SecurityComponent', () => {
     } as RegistrarService;
 
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-        FormsModule,
-      ],
       declarations: [SecurityComponent],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
         { provide: RegistrarService, useValue: dummyRegistrarService },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     })
       .overrideComponent(SecurityComponent, {

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,70 +12,38 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, effect } from '@angular/core';
 import {
-  SecurityService,
+  RegistrarService,
   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';
+} from 'src/app/registrar/registrar.service';
+import { SecurityService, apiToUiConverter } from './security.service';
 
 @Component({
   selector: 'app-security',
   templateUrl: './security.component.html',
   styleUrls: ['./security.component.scss'],
-  providers: [SecurityService],
 })
 export default class SecurityComponent {
   public static PATH = 'security';
-
-  loading: boolean = false;
-  inEdit: boolean = false;
   dataSource: SecuritySettings = {};
-
   constructor(
     public securityService: SecurityService,
-    private _snackBar: MatSnackBar,
     public registrarService: RegistrarService
   ) {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar());
-  }
-
-  enableEdit() {
-    this.inEdit = true;
-  }
-
-  cancel() {
-    this.inEdit = false;
-    this.resetDataSource();
-  }
-
-  createIpEntry() {
-    this.dataSource.ipAddressAllowList?.push({ value: '' });
-  }
-
-  save() {
-    this.loading = true;
-    this.securityService.saveChanges(this.dataSource).subscribe({
-      complete: () => {
-        this.loading = false;
-        this.resetDataSource();
-      },
-      error: (err: HttpErrorResponse) => {
-        this._snackBar.open(err.error);
-      },
+    effect(() => {
+      if (this.registrarService.registrar()) {
+        this.dataSource = apiToUiConverter(this.registrarService.registrar());
+        this.securityService.isEditingSecurity = false;
+      }
     });
-    this.cancel();
   }
 
-  removeIpEntry(index: number) {
-    this.dataSource.ipAddressAllowList =
-      this.dataSource.ipAddressAllowList?.filter((_, i) => i != index);
+  editSecurity() {
+    this.securityService.isEditingSecurity = true;
   }
 
-  resetDataSource() {
-    this.dataSource = apiToUiConverter(this.registrarService.registrar());
+  editEppPassword() {
+    this.securityService.isEditingPassword = true;
   }
 }

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,6 +14,11 @@
 
 import { TestBed } from '@angular/core/testing';
 
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import SecurityComponent from './security.component';
 import {
   SecurityService,
   SecuritySettings,
@@ -21,10 +26,6 @@ import {
   apiToUiConverter,
   uiToApiConverter,
 } from './security.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import SecurityComponent from './security.component';
-import { BackendService } from 'src/app/shared/services/backend.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
 describe('SecurityService', () => {
   const uiMockData: SecuritySettings = {
@@ -42,9 +43,15 @@ describe('SecurityService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
       declarations: [SecurityComponent],
-      providers: [MatSnackBar, SecurityService, BackendService],
+      imports: [],
+      providers: [
+        MatSnackBar,
+        SecurityService,
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     });
     service = TestBed.inject(SecurityService);
   });

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -14,22 +14,19 @@
 
 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';
 
-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 interface EppPasswordBackendModel {
+  registrarId: string;
+  oldPassword: string;
+  newPassword: string;
+  newPasswordRepeat: string;
 }
 
 export function apiToUiConverter(
@@ -48,13 +45,17 @@ export function uiToApiConverter(
   return Object.assign({}, securitySettings, {
     ipAddressAllowList: (securitySettings.ipAddressAllowList || [])
       .filter((s) => s.value)
-      .map((ipAllowItem: ipAllowListItem) => ipAllowItem.value),
+      .map((ipAllowItem: IpAllowListItem) => ipAllowItem.value),
   });
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root',
+})
 export class SecurityService {
   securitySettings: SecuritySettings = {};
+  isEditingSecurity: boolean = false;
+  isEditingPassword: boolean = false;
 
   constructor(
     private backend: BackendService,
@@ -73,4 +74,12 @@ export class SecurityService {
         })
       );
   }
+
+  saveEppPassword(data: EppPasswordBackendModel) {
+    return this.backend.postEppPasswordUpdate(data).pipe(
+      switchMap(() => {
+        return this.registrarService.loadRegistrars();
+      })
+    );
+  }
 }

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

@@ -0,0 +1,60 @@
+<div class="settings-security__edit">
+  <h1>IP Allowlist</h1>
+  <p>
+    Restrict access to EPP production servers to the following IP/IPv6
+    addresses, or ranges like 1.1.1.0/24
+  </p>
+  <form (ngSubmit)="save()">
+    @for (ip of dataSource.ipAddressAllowList; track ip.value) {
+    <div class="settings-security__edit-ip">
+      <mat-form-field appearance="outline">
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="ip.value"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+      <button
+        matSuffix
+        mat-icon-button
+        aria-label="Remove"
+        (click)="removeIpEntry(ip)"
+      >
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    }
+    <button mat-button color="primary" (click)="createIpEntry()" type="button">
+      + Add IP
+    </button>
+
+    <h1>SSL Certificate</h1>
+    <p>X.509 PEM certificate for EPP production access.</p>
+    <mat-form-field appearance="outline">
+      <textarea
+        matInput
+        [(ngModel)]="dataSource.clientCertificate"
+        [ngModelOptions]="{ standalone: true }"
+      ></textarea>
+    </mat-form-field>
+    <h1>Failover SSL Certificate</h1>
+    <p>X.509 PEM backup certificate for EPP Production Access.</p>
+    <mat-form-field appearance="outline">
+      <textarea
+        matInput
+        [(ngModel)]="dataSource.failoverClientCertificate"
+        [ngModelOptions]="{ standalone: true }"
+      ></textarea>
+    </mat-form-field>
+    <button
+      mat-flat-button
+      color="primary"
+      aria-label="Save security settings"
+      type="submit"
+      class="settings-security__edit-save"
+    >
+      Save
+    </button>
+  </form>
+</div>

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -12,12 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
-
-@Component({
-  selector: '[app-promotions-widget]',
-  templateUrl: './promotionsWidget.component.html',
-})
-export class PromotionsWidgetComponent {
-  constructor() {}
+.settings-security__edit {
+  max-width: 616px;
+  h1 {
+    margin-top: 30px;
+  }
+  mat-form-field {
+    width: 100%;
+    flex: 1;
+  }
+  &-ip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  &-save {
+    margin-top: 30px;
+  }
 }

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

@@ -0,0 +1,64 @@
+// 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 { HttpErrorResponse } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import {
+  IpAllowListItem,
+  RegistrarService,
+  SecuritySettings,
+} from 'src/app/registrar/registrar.service';
+import { SecurityService, apiToUiConverter } from './security.service';
+
+@Component({
+  selector: 'app-security-edit',
+  templateUrl: './securityEdit.component.html',
+  styleUrls: ['./securityEdit.component.scss'],
+})
+export default class SecurityEditComponent {
+  dataSource: SecuritySettings = {};
+
+  constructor(
+    public securityService: SecurityService,
+    private _snackBar: MatSnackBar,
+    public registrarService: RegistrarService
+  ) {
+    this.dataSource = apiToUiConverter(registrarService.registrar());
+  }
+
+  createIpEntry() {
+    this.dataSource.ipAddressAllowList?.push({ value: '' });
+  }
+
+  save() {
+    this.securityService.saveChanges(this.dataSource).subscribe({
+      complete: () => {
+        this.goBack();
+      },
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error);
+      },
+    });
+  }
+
+  goBack() {
+    this.securityService.isEditingSecurity = false;
+  }
+
+  removeIpEntry(ip: IpAllowListItem) {
+    this.dataSource.ipAddressAllowList =
+      this.dataSource.ipAddressAllowList?.filter((item) => item !== ip);
+  }
+}

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

@@ -1,24 +1,36 @@
-<div class="console-settings">
-  <h1>Settings</h1>
-  <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-    <a mat-tab-link routerLink="contact" routerLinkActive="active-link"
-      >Contact Info</a
+<app-selected-registrar-wrapper>
+  <div class="console-settings">
+    <h1 class="mat-headline-4">Settings</h1>
+    <nav
+      mat-tab-nav-bar
+      mat-stretch-tabs="false"
+      mat-align-tabs="start"
+      [tabPanel]="tabPanel"
     >
-    <a mat-tab-link routerLink="whois" routerLinkActive="active-link"
-      >WHOIS Info</a
-    >
-    <a mat-tab-link routerLink="security" routerLinkActive="active-link"
-      >Security</a
-    >
-    <a mat-tab-link routerLink="epp-password" routerLinkActive="active-link"
-      >EPP Password</a
-    >
-    <a mat-tab-link routerLink="users" routerLinkActive="active-link">Users</a>
-    <a mat-tab-link routerLink="registrars" routerLinkActive="active-link"
-      >Registrars</a
-    >
-  </nav>
-  <mat-tab-nav-panel #tabPanel>
-    <router-outlet></router-outlet>
-  </mat-tab-nav-panel>
-</div>
+      <a
+        mat-tab-link
+        routerLink="contact"
+        routerLinkActive="active-link"
+        queryParamsHandling="merge"
+        >Contacts</a
+      >
+      <a
+        mat-tab-link
+        routerLink="whois"
+        routerLinkActive="active-link"
+        queryParamsHandling="merge"
+        >WHOIS Info</a
+      >
+      <a
+        mat-tab-link
+        routerLink="security"
+        routerLinkActive="active-link"
+        queryParamsHandling="merge"
+        >Security</a
+      >
+    </nav>
+    <mat-tab-nav-panel #tabPanel>
+      <router-outlet></router-outlet>
+    </mat-tab-nav-panel>
+  </div>
+</app-selected-registrar-wrapper>

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+// 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.
@@ -21,4 +21,7 @@
       }
     }
   }
+  nav {
+    margin-bottom: 40px;
+  }
 }