Improve console accessibility (#2649)

https://b.corp.google.com/issues/390053672

This makes it easier to identify what file you're looking at, at a
glance

.github/workflows/codeql.yml

@@ -6,8 +6,6 @@ on:
   pull_request:
     # The branches below must be a subset of the branches above
     branches: [ 'master' ]
-  schedule:
-    - cron: '24 4 * * *'
 
 jobs:
   analyze:
@@ -49,13 +47,13 @@ jobs:
 
     # Build with Gradle
     - name: Setup Gradle
-      uses: gradle/actions/setup-gradle@v3
+      uses: gradle/actions/setup-gradle@v4
       with:
         build-scan-publish: true
-        build-scan-terms-of-service-url: "https://gradle.com/terms-of-service"
-        build-scan-terms-of-service-agree: "yes"
+        build-scan-terms-of-use-url: "https://gradle.com/terms-of-service"
+        build-scan-terms-of-use-agree: "yes"
     - name: Execute Gradle build
-      run: ./gradlew build -x test -x jIFC
+      run: ./gradlew --no-daemon --no-build-cache --no-configuration-cache --rerun-tasks clean build -x test -x jIFC
 
     # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)

CONTRIBUTORS

@@ -34,6 +34,8 @@ Guy Bensky <guyben@google.com>
 Weimin Yu <weiminyu@google.com>
 Shicong Huang <shicong@google.com>
 Gustav Brodman <gbrodman@google.com>
+Aman Sanger <sangera@google.com>
 Sarah Botwinick <sarahbot@google.com>
 Legina Chen <legina@google.com>
 Rachel Guan <rachelguan@google.com>
+Juan Celhay <jicelhay@google.com>

appengine_war.gradle

@@ -47,20 +47,9 @@ war {
 
 if (project.path == ":services:default") {
     war {
-        from("${coreResourcesDir}/google/registry/ui") {
-            include "registrar_bin.js"
-            if (environment != "production") {
-                include "registrar_bin.js.map"
-            }
-            into("assets/js")
-        }
-        from("${coreResourcesDir}/google/registry/ui/css") {
-            include "registrar*"
-            into("assets/css")
-        }
-        from("${coreResourcesDir}/google/registry/ui/assets/images") {
-            include "**/*"
-            into("assets/images")
+        from("${coreResourcesDir}/google/registry/ui/html") {
+            include "*.html"
+            into("registrar")
         }
     }
 }
@@ -104,7 +93,6 @@ appengineDeployAll.finalizedBy ':deployCloudSchedulerAndQueue'
 rootProject.deploy.dependsOn appengineDeployAll
 
 rootProject.stage.dependsOn appengineStage
-tasks['war'].dependsOn ':core:compileProdJS'
 tasks['war'].dependsOn ':core:processResources'
 tasks['war'].dependsOn ':core:jar'
 

build.gradle

@@ -60,7 +60,7 @@ dependencyLocking {
 
 node {
   download = false
-  version = "20.10.0"
+  version = "22.7.0"
 }
 
 wrapper {
@@ -119,6 +119,7 @@ if (environment == '') {
 
 rootProject.ext.environment = environment
 rootProject.ext.gcpProject = gcpProject
+rootProject.ext.baseDomain = baseDomains[environment]
 rootProject.ext.prodOrSandboxEnv = environment in ['production', 'sandbox']
 
 // Function to verify that the deployment parameters have been set.
@@ -274,6 +275,11 @@ subprojects {
           attributes 'Main-Class': mainClass
         }
       }
+      // Build as a multi-release jar since we've got member jars (e.g., dnsjava
+      // and snakeyaml) that are multi-release.
+      manifest {
+        attributes 'Multi-Release': true
+      }
       zip64 = true
       archiveClassifier = ''
       archiveVersion = ''

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,22 +24,23 @@ 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.2.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.4=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
 info.picocli:picocli:4.6.2=checkstyle
 io.github.eisop:dataflow-errorprone:3.34.0-eisop1=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-io.github.java-diff-utils:java-diff-utils:4.12=annotationProcessor,compileClasspath,deploy_jar,errorprone,runtimeClasspath,testAnnotationProcessor,testCompileClasspath,testRuntimeClasspath,testing,testingAnnotationProcessor,testingCompileClasspath
+io.github.java-diff-utils:java-diff-utils:4.12=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
+io.github.java-diff-utils:java-diff-utils:4.15=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 jakarta.inject:jakarta.inject-api:1.0.5=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 javax.inject:javax.inject:1=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
-joda-time:joda-time:2.12.7=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+joda-time:joda-time:2.13.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 junit:junit:4.13.2=testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 net.sf.saxon:Saxon-HE:10.6=checkstyle
 org.antlr:antlr4-runtime:4.9.3=checkstyle
@@ -49,20 +50,21 @@ org.checkerframework:checker-qual:3.12.0=checkstyle
 org.checkerframework:checker-qual:3.33.0=annotationProcessor,errorprone,testAnnotationProcessor,testingAnnotationProcessor
 org.checkerframework:checker-qual:3.42.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
 org.hamcrest:hamcrest-core:1.3=testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
-org.jacoco:org.jacoco.agent:0.8.11=jacocoAgent,jacocoAnt
-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.jacoco:org.jacoco.agent:0.8.12=jacocoAgent,jacocoAnt
+org.jacoco:org.jacoco.ant:0.8.12=jacocoAnt
+org.jacoco:org.jacoco.core:0.8.12=jacocoAnt
+org.jacoco:org.jacoco.report:0.8.12=jacocoAnt
 org.javassist:javassist:3.28.0-GA=checkstyle
-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.jspecify:jspecify:0.3.0=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath,testing,testingCompileClasspath
+org.junit.jupiter:junit-jupiter-api:5.11.4=testCompileClasspath,testRuntimeClasspath
+org.junit.jupiter:junit-jupiter-engine:5.11.4=testCompileClasspath,testRuntimeClasspath
+org.junit.platform:junit-platform-commons:1.11.4=testCompileClasspath,testRuntimeClasspath
+org.junit.platform:junit-platform-engine:1.11.4=testCompileClasspath,testRuntimeClasspath
+org.junit:junit-bom:5.11.4=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-commons:9.7=jacocoAnt
+org.ow2.asm:asm-tree:9.7=jacocoAnt
+org.ow2.asm:asm:9.7=compileClasspath,deploy_jar,jacocoAnt,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

config/dependency-license/allowed_licenses.json

@@ -27,6 +27,9 @@
     {
       "moduleLicense": "Apache License V2.0"
     },
+    {
+      "moduleLicense": "Apache License Version 2.0"
+    },
     {
       "moduleLicense": "Apache License, Version 2.0"
     },
@@ -102,6 +105,12 @@
     {
       "moduleLicense": "BSD-2-Clause"
     },
+    {
+      "moduleLicense": "BSD 3-Clause \"New\" or \"Revised\" License (BSD-3-Clause)"
+    },
+    {
+      "moduleLicense": "BSD licence"
+    },
     {
       "moduleLicense": "New BSD License"
     },
@@ -141,6 +150,9 @@
     {
       "moduleLicense": "\\n                Dual license consisting of the CDDL v1.1 and GPL v2\\n            "
     },
+    {
+      "moduleLicense": "EPL-2.0"
+    },
     {
       "moduleLicense": "Eclipse Distribution License (New BSD License)"
     },
@@ -192,6 +204,9 @@
     {
       "moduleLicense": "GNU GENERAL PUBLIC LICENSE, Version 2 + Classpath Exception"
     },
+    {
+      "moduleLicense": "(GPL-2.0-only WITH Classpath-exception-2.0)"
+    },
     {
       "moduleLicense": "GNU Library General Public License v2.1 or later"
     },
@@ -265,6 +280,9 @@
     {
       "moduleLicense": "Unicode-3.0"
     },
+    {
+      "moduleLicense": "The W3C Software License"
+    },
     {
       "moduleLicense": "Public Domain",
       "moduleName": "aopalliance:aopalliance"
@@ -277,12 +295,6 @@
       "moduleLicense": "Public Domain",
       "moduleName": "org.json:json"
     },
-    {
-      // "Apache License, Version 2.0".
-      "moduleLicense": null,
-      "moduleVersion": "2.10.0",
-      "moduleName": "com.google.gwt:gwt-user"
-    },
     {
       // "Apache License, Version 2.0". The plugin is able to parse up to
       // 2.11.3 correctly but then something changed with 2.12.* and it no
@@ -290,6 +302,11 @@
       "moduleLicense": null,
       "moduleName": "com.fasterxml.jackson:jackson-bom"
     },
+    {
+      // "Apache License, Version 2.0".
+      "moduleLicense": null,
+      "moduleName": "com.google.cloud:libraries-bom"
+    },
     {
       // Part of Guava with "Apache License, Version 2.0". The plugin is unable
       // to parse its license for unknown reason.
@@ -297,38 +314,27 @@
       "moduleName": "com.google.guava:guava-parent"
     },
     {
-      // "Apache License, Version 2.0". The plugin is able to parse up to
-      // 2.0.33.Final but not this verson.
+      // "Apache License, Version 2.0".
       "moduleLicense": null,
-      "moduleVersion": "2.0.46.Final",
-      "moduleName": "io.netty:netty-tcnative-classes"
-    },
-    {
-      // Actually Eclipse Public License v2.0
-      "moduleLicense": null,
-      "moduleName": "org.junit:junit-bom"
-    },
-    {
-      "moduleLicense": "The W3C Software License"
+      "moduleVersion": "2.10.0",
+      "moduleName": "com.google.gwt:gwt-user"
     },
     {
       // "Apache License, Version 2.0".
       "moduleLicense": null,
       "moduleName": "com.squareup.okhttp3:okhttp"
     },
+    {
+      // "Apache License, Version 2.0".
+      "moduleLicense": null,
+      "moduleVersion": "1.15.1",
+      "moduleName": "com.squareup:kotlinpoet"
+    },
     {
       // "Apache License, Version 2.0".
       "moduleLicense": null,
       "moduleName": "com.squareup.okio:okio"
     },
-    {
-      "moduleLicense": "(GPL-2.0-only WITH Classpath-exception-2.0)",
-      "moduleName": "io.github.eisop:dataflow-errorprone"
-    },
-    {
-      "moduleLicense": "GNU General Public License, version 2 (GPL2), with the classpath exception",
-      "moduleName": "io.github.eisop:dataflow-errorprone"
-    },
     {
       // "Apache License, Version 2.0".
       "moduleLicense": null,
@@ -354,15 +360,27 @@
       "moduleName": "com.squareup.wire:wire-schema"
     },
     {
-      // "Apache License, Version 2.0".
+      // "Apache License, Version 2.0". The plugin is able to parse up to
+      // 2.0.33.Final but not this verson.
       "moduleLicense": null,
-      "moduleVersion": "1.15.1",
-      "moduleName": "com.squareup:kotlinpoet"
+      "moduleVersion": "2.0.46.Final",
+      "moduleName": "io.netty:netty-tcnative-classes"
+    },
+    // "Apache License, Version 2.0".
+    {
+      "moduleLicense": null,
+      "moduleName": "io.opentelemetry:opentelemetry-bom"
     },
     {
-      "moduleLicense": "Apache License Version 2.0",
-      "moduleVersion": "3.0.0.M2",
-      "moduleName": "io.apicurio:apicurio-registry-protobuf-schema-utilities"
+      // "Apache License, Version 2.0".
+      "moduleLicense": null,
+      "moduleVersion": "1.4",
+      "moduleName": "jakarta-regexp:jakarta-regexp"
+    },
+    {
+      // Actually Eclipse Public License v2.0
+      "moduleLicense": null,
+      "moduleName": "org.junit:junit-bom"
     },
     {
       // "Apache License, Version 2.0".
@@ -393,12 +411,6 @@
       "moduleLicense": null,
       "moduleVersion": "1.0.1",
       "moduleName": "org.jetbrains.kotlinx:kotlinx-serialization-core"
-    },
-    {
-      // "Apache License, Version 2.0".
-      "moduleLicense": null,
-      "moduleVersion": "1.4",
-      "moduleName": "jakarta-regexp:jakarta-regexp"
     }
   ]
 }

console-webapp/README.md

@@ -13,7 +13,7 @@ Webapp is deployed with the nomulus default service war to Google App Engine.
 During nomulus default service war build task, gradle script triggers the
 following:
 
-1) Console webapp build script `buildConsoleWebappProd`, which installs
+1) Console webapp build script `buildConsoleWebapp`, which installs
    dependencies, assembles a compiled ts -> js, minified, optimized static
    artifact (html, css, js)
 2) Artifact assembled in step 1 then gets copied to core project web artifact

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": {
@@ -58,10 +63,41 @@
               ],
               "outputHashing": "all"
             },
-            "development": {
-              "buildOptimizer": false,
+            "sandbox": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.sandbox.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "crash": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "alpha": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "development": {
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -75,6 +111,15 @@
             "production": {
               "buildTarget": "console-webapp:build:production"
             },
+            "alpha": {
+              "buildTarget": "console-webapp:build:alpha"
+            },
+            "crash": {
+              "buildTarget": "console-webapp:build:crash"
+            },
+            "sandbox": {
+              "buildTarget": "console-webapp:build:sandbox"
+            },
             "development": {
               "buildTarget": "console-webapp:build:development"
             }

console-webapp/build.gradle

@@ -37,17 +37,16 @@ task runConsoleWebappUnitTests(type: Exec) {
   args 'run', 'test'
 }
 
-task buildConsoleWebappNonProd(type: Exec) {
+task buildConsoleWebapp(type: Exec) {
   workingDir "${consoleDir}/"
   executable 'npm'
-  args 'run', 'build'
-}
-
-// Keeping the same as non prod for now before we figure out optimization we want to include
-task buildConsoleWebappProd(type: Exec) {
-  workingDir "${consoleDir}/"
-  executable 'npm'
-  args 'run', 'build'
+  def configuration = project.hasProperty('configuration') ?
+    project.getProperty('configuration') :
+    'production'
+  args 'run', "build", "--configuration=${configuration}"
+  doFirst {
+    println "Building console for environment: ${configuration}"
+  }
 }
 
 task applyFormatting(type: Exec) {
@@ -68,8 +67,10 @@ task deploy(type: Exec) {
   args 'app', 'deploy', "${projectParam}", '--quiet'
 }
 
-tasks.buildConsoleWebappProd.dependsOn(tasks.npmInstallDeps)
+tasks.buildConsoleWebapp.dependsOn(tasks.npmInstallDeps)
+tasks.runConsoleWebappUnitTests.dependsOn(tasks.npmInstallDeps)
 tasks.applyFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.checkFormatting.dependsOn(tasks.npmInstallDeps)
 tasks.build.dependsOn(tasks.checkFormatting)
-tasks.deploy.dependsOn(tasks.buildConsoleWebappProd)
+tasks.build.dependsOn(tasks.runConsoleWebappUnitTests)
+tasks.deploy.dependsOn(tasks.buildConsoleWebapp)

console-webapp/gradle.lockfile

@@ -34,14 +34,14 @@ net.sf.saxon:Saxon-HE:10.6=checkstyle
 org.antlr:antlr4-runtime:4.9.3=checkstyle
 org.checkerframework:checker-qual:3.12.0=checkstyle
 org.checkerframework:checker-qual:3.33.0=annotationProcessor,errorprone,testAnnotationProcessor
-org.jacoco:org.jacoco.agent:0.8.11=jacocoAgent,jacocoAnt
-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.jacoco:org.jacoco.agent:0.8.12=jacocoAgent,jacocoAnt
+org.jacoco:org.jacoco.ant:0.8.12=jacocoAnt
+org.jacoco:org.jacoco.core:0.8.12=jacocoAnt
+org.jacoco:org.jacoco.report:0.8.12=jacocoAnt
 org.javassist:javassist:3.28.0-GA=checkstyle
-org.ow2.asm:asm-commons:9.6=jacocoAnt
-org.ow2.asm:asm-tree:9.6=jacocoAnt
-org.ow2.asm:asm:9.6=jacocoAnt
+org.ow2.asm:asm-commons:9.7=jacocoAnt
+org.ow2.asm:asm-tree:9.7=jacocoAnt
+org.ow2.asm:asm:9.7=jacocoAnt
 org.pcollections:pcollections:3.1.4=annotationProcessor,errorprone,testAnnotationProcessor
 org.reflections:reflections:0.10.2=checkstyle
 empty=compileClasspath,deploy_jar,runtimeClasspath,testCompileClasspath,testRuntimeClasspath

console-webapp/karma.conf.js

@@ -3,6 +3,17 @@
 
 module.exports = function (config) {
   config.set({
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--no-sandbox',
+          '--disable-gpu',
+          '--headless',
+          '--remote-debugging-port=9222'
+        ]
+      }
+    },
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [

console-webapp/package.json

@@ -4,9 +4,9 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config dev-proxy.config.json",
-    "build": "ng build --base-href=/console/ --output-path=staged/dist",
+    "build": "ng build --base-href=/console/ --configuration=$npm_config_configuration",
     "build:local": "ng build --base-href=/default/console/",
-    "watch": "ng build --watch --configuration development",
+    "watch": "ng build --watch --configuration=development",
     "test": "ng test --browsers=ChromeHeadless --watch=false",
     "run:dev": "",
     "prettify": "npx prettier --write ./src/",
@@ -16,29 +16,29 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.5",
-    "@angular/cdk": "^17.3.5",
-    "@angular/common": "^17.3.5",
-    "@angular/compiler": "^17.3.5",
-    "@angular/core": "^17.3.5",
-    "@angular/forms": "^17.3.5",
-    "@angular/material": "^17.3.5",
-    "@angular/platform-browser": "^17.3.5",
-    "@angular/platform-browser-dynamic": "^17.3.5",
-    "@angular/router": "^17.3.5",
+    "@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.3.5",
-    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "~17.3.5",
-    "@angular/compiler-cli": "^17.3.5",
+    "@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": "^7.2.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

@@ -17,13 +17,13 @@ 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 { RegistryLockVerifyComponent } from './lock/registryLockVerify.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';
 
@@ -31,8 +31,27 @@ export interface RouteWithIcon extends Route {
   iconName?: string;
 }
 
+export const PATHS = {
+  NewOteComponent: 'new-ote',
+  OteStatusComponent: 'ote-status/:registrarId',
+  UsersComponent: 'users',
+};
 export const routes: RouteWithIcon[] = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
+  {
+    path: RegistryLockVerifyComponent.PATH,
+    component: RegistryLockVerifyComponent,
+  },
+  {
+    path: PATHS.NewOteComponent,
+    loadComponent: () =>
+      import('./ote/newOte.component').then((mod) => mod.NewOteComponent),
+  },
+  {
+    path: PATHS.OteStatusComponent,
+    loadComponent: () =>
+      import('./ote/oteStatus.component').then((mod) => mod.OteStatusComponent),
+  },
   { path: 'registrars', component: RegistrarComponent },
   {
     path: 'home',
@@ -73,10 +92,6 @@ export const routes: RouteWithIcon[] = [
         component: SecurityComponent,
         title: 'Security',
       },
-      {
-        path: UsersComponent.PATH,
-        component: UsersComponent,
-      },
     ],
   },
   // {
@@ -107,6 +122,13 @@ export const routes: RouteWithIcon[] = [
     title: 'Resources',
     iconName: 'description',
   },
+  {
+    path: PATHS.UsersComponent,
+    title: 'Users',
+    iconName: 'manage_accounts',
+    loadComponent: () =>
+      import('./users/users.component').then((mod) => mod.UsersComponent),
+  },
   {
     path: SupportComponent.PATH,
     component: SupportComponent,

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

@@ -1,6 +1,17 @@
 <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-content class="console-app__content-wrapper">
+      <div class="console-app__content" role="main">
+        <router-outlet></router-outlet>
+      </div>
+    </mat-sidenav-content>
     <mat-sidenav
       [mode]="breakpointObserver.isMobileView() ? 'over' : 'side'"
       [opened]="!breakpointObserver.isMobileView()"
@@ -9,13 +20,5 @@
     >
       <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">
-        <router-outlet></router-outlet>
-      </div>
-    </mat-sidenav-content>
   </mat-sidenav-container>
 </div>

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

@@ -40,6 +40,7 @@
     padding: 0 16px;
   }
   &__global-spinner {
-    margin-bottom: 2rem;
+    position: absolute;
+    width: 100%;
   }
 }

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

@@ -12,30 +12,37 @@
 // 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 { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { BackendService } from './shared/services/backend.service';
+import { AppRoutingModule } from './app-routing.module';
+import { AppModule } from './app.module';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      declarations: [AppComponent],
       imports: [
-        HttpClientTestingModule,
-        RouterTestingModule,
         MaterialModule,
         BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
-      providers: [BackendService],
-      declarations: [AppComponent],
     }).compileComponents();
   });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });

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

@@ -23,13 +23,20 @@ import { MaterialModule } from './material.module';
 
 import { BackendService } from './shared/services/backend.service';
 
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { BillingInfoComponent } from './billingInfo/billingInfo.component';
-import { DomainListComponent } from './domains/domainList.component';
+import {
+  DomainListComponent,
+  ReasonDialogComponent,
+  ResponseDialogComponent,
+} from './domains/domainList.component';
+import { RegistryLockComponent } from './domains/registryLock.component';
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
+import { RegistryLockVerifyComponent } from './lock/registryLockVerify.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';
@@ -45,6 +52,7 @@ 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';
@@ -52,6 +60,14 @@ import { SnackBarModule } from './snackbar.module';
 import { SupportComponent } from './support/support.component';
 import { TldsComponent } from './tlds/tlds.component';
 
+@NgModule({
+  declarations: [SelectedRegistrarWrapper],
+  imports: [MaterialModule],
+  exports: [SelectedRegistrarWrapper],
+  providers: [],
+})
+export class SelectedRegistrarModule {}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -62,30 +78,36 @@ import { TldsComponent } from './tlds/tlds.component';
     HeaderComponent,
     HomeComponent,
     LocationBackDirective,
+    UserLevelVisibility,
     NavigationComponent,
+    NewRegistrarComponent,
     NotificationsComponent,
     RegistrarComponent,
     RegistrarDetailsComponent,
+    RegistryLockComponent,
     RegistrarSelectorComponent,
+    RegistryLockVerifyComponent,
     ResourcesComponent,
     SecurityComponent,
     SecurityEditComponent,
-    SelectedRegistrarWrapper,
     SettingsComponent,
     SettingsContactComponent,
     SupportComponent,
     TldsComponent,
     WhoisComponent,
     WhoisEditComponent,
+    ReasonDialogComponent,
+    ResponseDialogComponent,
   ],
+  bootstrap: [AppComponent],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
     FormsModule,
-    HttpClientModule,
     MaterialModule,
     SnackBarModule,
+    SelectedRegistrarModule,
   ],
   providers: [
     BackendService,
@@ -98,7 +120,7 @@ import { TldsComponent } from './tlds/tlds.component';
         subscriptSizing: 'dynamic',
       },
     },
+    provideHttpClient(),
   ],
-  bootstrap: [AppComponent],
 })
 export class AppModule {}

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

@@ -1,7 +1,19 @@
 <app-selected-registrar-wrapper>
-  <div class="console-domains">
+  <div class="console-app-domains">
     <h1 class="mat-headline-4">Domains</h1>
-    @if (totalResults === 0) {
+
+    <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"
@@ -10,76 +22,179 @@
       </h1>
       <h1>No domains found</h1>
     </div>
-    } @else if(isLoading) {
-    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     } @else {
-    <a
-      mat-stroked-button
-      color="primary"
-      href="/console-api/dum-download?registrarId={{
-        registrarService.registrarId()
-      }}"
-      class="console-app-domains__download"
+    <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"
     >
-      <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>
+      <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>
 
-      <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>
+          <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>
 
-      <ng-container matColumnDef="registrationExpirationTime">
-        <mat-header-cell *matHeaderCellDef>Expiration Time</mat-header-cell>
-        <mat-cell *matCellDef="let element">
-          {{ element.registrationExpirationTime }}
-        </mat-cell>
-      </ng-container>
+          <div
+            class="console-app__domains-selection"
+            [elementId]="getElementIdForBulkDelete()"
+            [ngClass]="{ active: selection.hasValue() }"
+          >
+            <div class="console-app__domains-selection-text">
+              {{ selection.selected.length }} Selected
+            </div>
+            <div class="console-app__domains-selection-actions">
+              <button
+                mat-flat-button
+                aria-label="Delete Selected Domains"
+                (click)="deleteSelectedDomains()"
+              >
+                Delete Selected Domains
+              </button>
+            </div>
+          </div>
 
-      <ng-container matColumnDef="statuses">
-        <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
-        <mat-cell *matCellDef="let element">{{ element.statuses }}</mat-cell>
-      </ng-container>
+          <mat-table
+            [dataSource]="dataSource"
+            class="mat-elevation-z0"
+            class="console-app__domains-table"
+          >
+            <!-- Checkbox Column -->
+            <ng-container matColumnDef="select">
+              <mat-header-cell *matHeaderCellDef>
+                <mat-checkbox
+                  (change)="$event ? toggleAllRows() : null"
+                  [checked]="selection.hasValue() && isAllSelected"
+                  [indeterminate]="selection.hasValue() && !isAllSelected"
+                  [aria-label]="checkboxLabel()"
+                  [elementId]="getElementIdForBulkDelete()"
+                >
+                </mat-checkbox>
+              </mat-header-cell>
+              <mat-cell *matCellDef="let row">
+                <mat-checkbox
+                  (click)="$event.stopPropagation()"
+                  (change)="$event ? selection.toggle(row) : null"
+                  [checked]="selection.isSelected(row)"
+                  [aria-label]="checkboxLabel(row)"
+                  [elementId]="getElementIdForBulkDelete()"
+                >
+                </mat-checkbox>
+              </mat-cell>
+            </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+            <ng-container matColumnDef="domainName">
+              <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
+              <mat-cell *matCellDef="let element">
+                <mat-icon
+                  *ngIf="getOperationMessage(element.domainName)"
+                  [matTooltip]="getOperationMessage(element.domainName)"
+                  matTooltipPosition="above"
+                  class="primary-text"
+                  >info</mat-icon
+                >
+                <span>{{ element.domainName }}</span>
+              </mat-cell>
+            </ng-container>
 
-      <!-- Row shown when there is no matching data. -->
-      <mat-row *matNoDataRow>
-        <mat-cell colspan="4">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>
+            <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">
+                <span>{{ element.statuses?.join(", ") }}</span>
+              </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>
 </app-selected-registrar-wrapper>

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

@@ -12,18 +12,26 @@
     }
   }
 
-  &-domains {
-    position: relative;
-    &__download {
-      position: absolute;
-      top: 0;
-      right: 0;
+  &__domains-selection {
+    height: 60px;
+    max-height: 0;
+    transition: max-height 0.2s linear;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    gap: 20px;
+    &-text {
+      font-weight: bold;
+    }
+    &.active {
+      max-height: 60px;
     }
   }
 
-  &__domains {
-    width: 100%;
-    overflow: auto;
+  &-domains__download {
+    position: absolute;
+    top: -55px;
+    right: 0;
   }
 
   &__domains-filter {
@@ -31,8 +39,51 @@
     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;
+    }
+    .mat-column-statuses span {
+      padding: 10px 0;
+      overflow: hidden;
+      word-break: break-word;
+    }
+    .mat-column-select {
+      max-width: 60px;
+      padding-left: 15px;
+    }
+    .mat-column-domainName {
+      position: relative;
+      padding-left: 25px;
+      mat-icon {
+        position: absolute;
+        left: 0;
+      }
+    }
+    mat-cell:has([style*="display: none"]),
+    mat-header-cell:has([style*="display: none"]) {
+      display: none;
+    }
+  }
+
+  &__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 {

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

@@ -14,11 +14,14 @@
 
 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';
+import { FormsModule } from '@angular/forms';
+import { AppModule } from '../app.module';
 
 describe('DomainListComponent', () => {
   let component: DomainListComponent;
@@ -28,11 +31,16 @@ describe('DomainListComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [DomainListComponent],
       imports: [
-        HttpClientTestingModule,
         MaterialModule,
         BrowserAnimationsModule,
+        FormsModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
-      providers: [BackendService],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DomainListComponent);

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

@@ -12,34 +12,114 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { HttpErrorResponse } from '@angular/common/http';
-import { Component, ViewChild, effect } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
+import { Component, ViewChild, effect, Inject } 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 { Subject, debounceTime, take, filter } from 'rxjs';
 import { RegistrarService } from '../registrar/registrar.service';
-import { BackendService } from '../shared/services/backend.service';
 import { Domain, DomainListService } from './domainList.service';
+import { RegistryLockComponent } from './registryLock.component';
+import { RegistryLockService } from './registryLock.service';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
+
+interface DomainResponse {
+  message: string;
+  responseCode: string;
+}
+
+interface DomainData {
+  [domain: string]: DomainResponse;
+}
+
+@Component({
+  selector: 'app-response-dialog',
+  template: `
+    <h2 mat-dialog-title>{{ data.title }}</h2>
+    <mat-dialog-content [innerHTML]="data.content" />
+    <mat-dialog-actions>
+      <button mat-button (click)="onClose()">Close</button>
+    </mat-dialog-actions>
+  `,
+})
+export class ResponseDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ReasonDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { title: string; content: string }
+  ) {}
+
+  onClose(): void {
+    this.dialogRef.close();
+  }
+}
+
+@Component({
+  selector: 'app-reason-dialog',
+  template: `
+    <h2 mat-dialog-title>
+      Please provide a reason for {{ data.operation }} the domain(s):
+    </h2>
+    <mat-dialog-content>
+      <mat-form-field appearance="outline" style="width:100%">
+        <textarea matInput [(ngModel)]="reason" rows="4"></textarea>
+      </mat-form-field>
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button (click)="onCancel()">Cancel</button>
+      <button mat-button color="warn" (click)="onDelete()" [disabled]="!reason">
+        Delete
+      </button>
+    </mat-dialog-actions>
+  `,
+})
+export class ReasonDialogComponent {
+  reason: string = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<ReasonDialogComponent>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: { operation: 'deleting' | 'suspending' }
+  ) {}
+
+  onDelete(): void {
+    this.dialogRef.close(this.reason);
+  }
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+}
 
 @Component({
   selector: 'app-domain-list',
   templateUrl: './domainList.component.html',
   styleUrls: ['./domainList.component.scss'],
-  providers: [DomainListService],
 })
 export class DomainListComponent {
   public static PATH = 'domain-list';
   private readonly DEBOUNCE_MS = 500;
+  isAllSelected = false;
 
   displayedColumns: string[] = [
+    'select',
     'domainName',
     'creationTime',
     'registrationExpirationTime',
     'statuses',
+    'registryLock',
+    'actions',
   ];
 
   dataSource: MatTableDataSource<Domain> = new MatTableDataSource();
+  selection = new SelectionModel<Domain>(true, [], undefined, this.isChecked());
   isLoading = true;
 
   searchTermSubject = new Subject<string>();
@@ -49,18 +129,24 @@ export class DomainListComponent {
   resultsPerPage = 50;
   totalResults?: number = 0;
 
+  reason: string = '';
+
+  operationResult: DomainData | undefined;
+
   @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
 
   constructor(
-    private backendService: BackendService,
-    private domainListService: DomainListService,
+    protected domainListService: DomainListService,
     protected registrarService: RegistrarService,
-    private _snackBar: MatSnackBar
+    protected registryLockService: RegistryLockService,
+    private _snackBar: MatSnackBar,
+    private dialog: MatDialog
   ) {
     effect(() => {
+      this.pageNumber = 0;
+      this.totalResults = 0;
       if (this.registrarService.registrarId()) {
-        this.pageNumber = 0;
-        this.totalResults = 0;
+        this.loadLocks();
         this.reloadData();
       }
     });
@@ -80,6 +166,28 @@ export class DomainListComponent {
     this.searchTermSubject.complete();
   }
 
+  openRegistryLock(domainName: string) {
+    this.domainListService.selectedDomain = domainName;
+    this.domainListService.activeActionComponent = RegistryLockComponent;
+  }
+
+  loadLocks() {
+    this.registryLockService.retrieveLocks().subscribe({
+      error: (err: HttpErrorResponse) => {
+        if (err.status !== HttpStatusCode.Forbidden) {
+          // Some users may not have registry lock permissions and that's OK
+          this._snackBar.open(err.message);
+        }
+      },
+    });
+  }
+
+  isDomainLocked(domainName: string) {
+    return this.registryLockService.domainsLocks.some(
+      (d) => d.domainName === domainName
+    );
+  }
+
   reloadData() {
     this.isLoading = true;
     this.domainListService
@@ -95,7 +203,7 @@ export class DomainListComponent {
           this.isLoading = false;
         },
         next: (domainListResult) => {
-          this.dataSource.data = (domainListResult || {}).domains;
+          this.dataSource.data = this.domainListService.domainsList;
           this.totalResults = (domainListResult || {}).totalResults || 0;
           this.isLoading = false;
         },
@@ -109,6 +217,98 @@ export class DomainListComponent {
   onPageChange(event: PageEvent) {
     this.pageNumber = event.pageIndex;
     this.resultsPerPage = event.pageSize;
+    this.selection.clear();
     this.reloadData();
   }
+
+  toggleAllRows() {
+    if (this.isAllSelected) {
+      this.selection.clear();
+      this.isAllSelected = false;
+      return;
+    }
+
+    this.selection.select(...this.dataSource.data);
+    this.isAllSelected = true;
+  }
+
+  checkboxLabel(row?: Domain): string {
+    if (!row) {
+      return `${this.isAllSelected ? 'deselect' : 'select'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${
+      row.domainName
+    }`;
+  }
+
+  private isChecked(): ((o1: Domain, o2: Domain) => boolean) | undefined {
+    return (o1: Domain, o2: Domain) => {
+      if (!o1.domainName || !o2.domainName) {
+        return false;
+      }
+
+      return this.isAllSelected || o1.domainName === o2.domainName;
+    };
+  }
+
+  getElementIdForBulkDelete() {
+    return RESTRICTED_ELEMENTS.BULK_DELETE;
+  }
+
+  getOperationMessage(domain: string) {
+    if (this.operationResult && this.operationResult[domain])
+      return this.operationResult[domain].message;
+    return '';
+  }
+
+  sendDeleteRequest(reason: string) {
+    this.isLoading = true;
+    this.domainListService
+      .deleteDomains(
+        this.selection.selected,
+        reason,
+        this.registrarService.registrarId()
+      )
+      .pipe(take(1))
+      .subscribe({
+        next: (result: DomainData) => {
+          this.isLoading = false;
+          const successCount = Object.keys(result).filter((domainName) =>
+            result[domainName].responseCode.toString().startsWith('1')
+          ).length;
+          const failureCount = Object.keys(result).length - successCount;
+          this.dialog.open(ResponseDialogComponent, {
+            data: {
+              title: 'Domain Deletion Results',
+              content: `Successfully deleted - ${successCount} domain(s)<br/>Failed to delete - ${failureCount} domain(s)<br/>${
+                failureCount
+                  ? 'Some domains could not be deleted due to ongoing processes or server errors. '
+                  : ''
+              }Please check the table for more information.`,
+            },
+          });
+          this.selection.clear();
+          this.operationResult = result;
+          this.reloadData();
+        },
+        error: (err: HttpErrorResponse) =>
+          this._snackBar.open(err.error || err.message),
+      });
+  }
+
+  deleteSelectedDomains() {
+    const dialogRef = this.dialog.open(ReasonDialogComponent, {
+      data: {
+        operation: 'deleting',
+      },
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(
+        take(1),
+        filter((reason) => !!reason)
+      )
+      .subscribe(this.sendDeleteRequest.bind(this));
+  }
 }

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 import { tap } from 'rxjs';
 import { RegistrarService } from '../registrar/registrar.service';
 import { BackendService } from '../shared/services/backend.service';
@@ -35,15 +35,19 @@ 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,
     private registrarService: RegistrarService
   ) {}
-
   retrieveDomains(
     pageNumber?: number,
     resultsPerPage?: number,
@@ -62,7 +66,17 @@ export class DomainListService {
       .pipe(
         tap((domainListResult: DomainListResult) => {
           this.checkpointTime = domainListResult?.checkpointTime;
+          this.domainsList = domainListResult?.domains;
         })
       );
   }
+
+  deleteDomains(domains: Domain[], reason: string, registrarId: string) {
+    return this.backendService.bulkDomainAction(
+      domains.map((d) => d.domainName),
+      reason,
+      'DELETE',
+      registrarId
+    );
+  }
 }

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.html

@@ -12,6 +12,7 @@
     <a
       [routerLink]="'/home'"
       routerLinkActive="active"
+      aria-label="Google Registry logo"
       class="console-app__logo"
     >
       <svg

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

@@ -16,11 +16,11 @@
   &__logo {
     color: inherit;
     text-decoration: none;
-    margin-left: -10px;
+    margin-left: -15px;
   }
   &__menu-btn {
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     padding: 0;
   }
   &__header {
@@ -32,9 +32,6 @@
       margin-bottom: 10px;
     }
 
-    @media (max-width: 480px) {
-    }
-
     &-user-icon {
       margin-left: 20px;
     }

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

@@ -17,6 +17,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { HeaderComponent } from './header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '../material.module';
+import { ActivatedRoute } from '@angular/router';
+import { AppModule, SelectedRegistrarModule } from '../app.module';
+import { AppRoutingModule } from '../app-routing.module';
+import { BackendService } from '../shared/services/backend.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -24,7 +30,19 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [
+        SelectedRegistrarModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
       declarations: [HeaderComponent],
     }).compileComponents();
 

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

@@ -34,7 +34,10 @@
       </mat-card-actions>
     </mat-card>
 
-    <mat-card appearance="outlined">
+    <mat-card
+      appearance="outlined"
+      [elementId]="getElementIdForRegistrarsBlock()"
+    >
       <mat-card-content>
         <h3>
           <mat-icon class="secondary-text">account_circle</mat-icon>

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

@@ -16,6 +16,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 import { MaterialModule } from '../material.module';
+import { AppModule } from '../app.module';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -23,7 +24,7 @@ describe('HomeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [MaterialModule, AppModule],
       declarations: [HomeComponent],
     }).compileComponents();
 

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

@@ -18,6 +18,7 @@ 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({
@@ -30,6 +31,9 @@ export class HomeComponent {
     protected breakPointObserverService: BreakPointObserverService,
     private router: Router
   ) {}
+  getElementIdForRegistrarsBlock() {
+    return RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT;
+  }
   viewRegistrars() {
     this.router.navigate([RegistrarComponent.PATH], {
       queryParamsHandling: 'merge',

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

@@ -12,25 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Injectable } from '@angular/core';
+import { BackendService } from '../shared/services/backend.service';
 
-import UsersComponent from './users.component';
+export interface RegistryLockVerificationResponse {
+  action: string;
+  domainName: string;
+  registrarId: string;
+}
 
-describe('UsersComponent', () => {
-  let component: UsersComponent;
-  let fixture: ComponentFixture<UsersComponent>;
+@Injectable()
+export class RegistryLockVerifyService {
+  constructor(private backendService: BackendService) {}
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [UsersComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(UsersComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+  verifyRequest(lockVerificationCode: string) {
+    return this.backendService.verifyRegistryLockRequest(lockVerificationCode);
+  }
+}

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

@@ -6,8 +6,11 @@
   <mat-tree-node
     *matTreeNodeDef="let node"
     matTreeNodeToggle
+    tabindex="0"
     (click)="onClick(node)"
+    (keyup.enter)="onClick(node)"
     [class.active]="router.url.includes(node.path)"
+    [elementId]="getElementId(node)"
   >
     <mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
       {{ node.iconName }}

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

@@ -44,10 +44,10 @@ $expand-icon-size: 26px;
 
       &:hover {
         background-color: var(--light-highlight);
-        border-radius: 0 25px 25px 0;
+        border-radius: 0 15px 15px 0;
       }
       &.active {
-        border-radius: 0 25px 25px 0;
+        border-radius: 0 15px 15px 0;
         background-color: var(--lightest);
       }
     }

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

@@ -17,7 +17,9 @@ 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 { RouteWithIcon, routes, PATHS } from '../app-routing.module';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
+import { RegistrarComponent } from '../registrar/registrarsTable.component';
 
 interface NavMenuNode extends RouteWithIcon {
   parentRoute?: RouteWithIcon;
@@ -37,6 +39,7 @@ export class NavigationComponent {
   treeControl = new NestedTreeControl<RouteWithIcon>((node) => node.children);
   dataSource = new MatTreeNestedDataSource<RouteWithIcon>();
   private subscription!: Subscription;
+
   hasChild = (_: number, node: RouteWithIcon) =>
     !!node.children && node.children.length > 0;
 
@@ -56,6 +59,15 @@ export class NavigationComponent {
     this.subscription.unsubscribe();
   }
 
+  getElementId(node: RouteWithIcon) {
+    if (node.path === RegistrarComponent.PATH) {
+      return RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT;
+    } else if (node.path === PATHS.UsersComponent) {
+      return RESTRICTED_ELEMENTS.USERS;
+    }
+    return null;
+  }
+
   syncExpandedNavigationWithRoute(url: string) {
     const maybeComponentWithChildren = this.dataSource.data.find((menuNode) => {
       return (

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

@@ -0,0 +1,36 @@
+<h1 class="mat-headline-4">Generate OT&E Accounts</h1>
+<div class="console-app__new-ote">
+  @if (oteCreateResponseFormatted()) {
+  <h1>Generated Successfully</h1>
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>Epp Credentials</mat-card-title>
+      <mat-card-subtitle
+        >Copy and paste this into an email to the registrars</mat-card-subtitle
+      >
+    </mat-card-header>
+    <mat-card-content>
+      <p>{{ oteCreateResponseFormatted() }}</p>
+    </mat-card-content>
+  </mat-card>
+  } @else {
+  <form (ngSubmit)="onSubmit()" [formGroup]="createOte">
+    <p>
+      <mat-form-field name="registrarId" appearance="outline">
+        <mat-label>Base Registrar Id: </mat-label>
+        <input matInput type="text" formControlName="registrarId" required />
+      </mat-form-field>
+    </p>
+    <p>
+      <mat-form-field name="registrarEmail" appearance="outline">
+        <mat-label>Contact Email: </mat-label>
+        <input matInput type="text" formControlName="registrarEmail" required />
+        <mat-hint
+          >Will be granted web-console access to the OTE registrars.</mat-hint
+        >
+      </mat-form-field>
+    </p>
+    <button mat-flat-button color="primary" type="submit">Save</button>
+  </form>
+  }
+</div>

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

@@ -0,0 +1,11 @@
+.console-app__new-ote {
+  max-width: 720px;
+  mat-card-content {
+    white-space: break-spaces;
+    padding: 20px;
+  }
+  mat-form-field {
+    width: 100%;
+    max-width: 350px;
+  }
+}

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

@@ -0,0 +1,83 @@
+// 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, signal } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { RegistrarService } from '../registrar/registrar.service';
+import { MaterialModule } from '../material.module';
+import { SnackBarModule } from '../snackbar.module';
+
+export interface OteCreateResponse extends Map<string, string> {
+  password: string;
+}
+
+@Component({
+  selector: 'app-ote',
+  standalone: true,
+  imports: [MaterialModule, SnackBarModule],
+  templateUrl: './newOte.component.html',
+  styleUrls: ['./newOte.component.scss'],
+})
+export class NewOteComponent {
+  oteCreateResponse = signal<OteCreateResponse | undefined>(undefined);
+
+  readonly oteCreateResponseFormatted = computed(() => {
+    const oteCreateResponse = this.oteCreateResponse();
+    if (oteCreateResponse) {
+      const { password } = oteCreateResponse;
+      return Object.entries(oteCreateResponse)
+        .filter((entry) => entry[0] !== 'password')
+        .map(
+          ([login, tld]) =>
+            `Login: ${login}\t\tPassword: ${password}\t\tTLD: ${tld}`
+        )
+        .join('\n');
+    }
+    return undefined;
+  });
+
+  createOte = new FormGroup({
+    registrarId: new FormControl('', [Validators.required]),
+    registrarEmail: new FormControl('', [Validators.required]),
+  });
+
+  constructor(
+    protected registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  onSubmit() {
+    if (this.createOte.valid) {
+      const { registrarId, registrarEmail } = this.createOte.value;
+      this.registrarService
+        .generateOte(
+          {
+            registrarId,
+            registrarEmail,
+          },
+          registrarId || ''
+        )
+        .subscribe({
+          next: (oteCreateResponse: OteCreateResponse) => {
+            this.oteCreateResponse.set(oteCreateResponse);
+          },
+          error: (err: HttpErrorResponse) => {
+            this._snackBar.open(err.error || err.message);
+          },
+        });
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+<h1 class="mat-headline-4">OT&E Status Check</h1>
+@if(registrarId() === null) {
+<h1>Missing registrarId param</h1>
+} @else if(isOte()) {
+<h1 *ngIf="oteStatusResponse().length">
+  Status:
+  <span>{{ oteStatusUnfinished().length ? "Unfinished" : "Completed" }}</span>
+</h1>
+<div class="console-app__ote-status">
+  @if(oteStatusCompleted().length) {
+  <div class="console-app__ote-status_completed">
+    <h1>Completed</h1>
+    <div *ngFor="let entry of oteStatusCompleted()">
+      <mat-icon>check_box</mat-icon>{{ entry.description }}
+    </div>
+  </div>
+  } @if(oteStatusUnfinished().length) {
+  <div class="console-app__ote-status_unfinished">
+    <h1>Unfinished</h1>
+    <div *ngFor="let entry of oteStatusUnfinished()">
+      <mat-icon>check_box_outline_blank</mat-icon>{{ entry.description }}
+    </div>
+  </div>
+  }
+</div>
+} @else {
+<h1>Registrar {{ registrarId() }} is not an OT&E registrar</h1>
+}

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

@@ -0,0 +1,28 @@
+.console-app__ote-status {
+  max-width: 730px;
+  display: flex;
+  flex-wrap: wrap;
+  &_completed,
+  &_unfinished {
+    border: 1px solid #ddd;
+    padding: 20px;
+    border-radius: 10px;
+    margin: 0 20px 30px 0;
+    div {
+      display: flex;
+      min-width: 300px;
+      align-items: flex-start;
+      max-width: 300px;
+      margin-bottom: 10px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #ddd;
+      &:last-child {
+        border: none;
+      }
+    }
+
+    mat-icon {
+      min-width: 30px;
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+// 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, OnInit, signal } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { RegistrarService } from '../registrar/registrar.service';
+import { MaterialModule } from '../material.module';
+import { SnackBarModule } from '../snackbar.module';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { take } from 'rxjs';
+
+export interface OteStatusResponse {
+  description: string;
+  requirement: number;
+  timesPerformed: number;
+  completed: boolean;
+}
+
+@Component({
+  selector: 'app-ote-status',
+  standalone: true,
+  imports: [MaterialModule, SnackBarModule, CommonModule],
+  templateUrl: './oteStatus.component.html',
+  styleUrls: ['./oteStatus.component.scss'],
+})
+export class OteStatusComponent implements OnInit {
+  registrarId = signal<string | null>(null);
+  oteStatusResponse = signal<OteStatusResponse[]>([]);
+
+  oteStatusCompleted = computed(() =>
+    this.oteStatusResponse().filter((v) => v.completed)
+  );
+  oteStatusUnfinished = computed(() =>
+    this.oteStatusResponse().filter((v) => !v.completed)
+  );
+  isOte = computed(
+    () =>
+      this.registrarService
+        .registrars()
+        .find((r) => r.registrarId === this.registrarId())
+        ?.type?.toLowerCase() === 'ote'
+  );
+
+  constructor(
+    private route: ActivatedRoute,
+    protected registrarService: RegistrarService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.pipe(take(1)).subscribe((params: ParamMap) => {
+      this.registrarId.set(params.get('registrarId'));
+      const registrarId = this.registrarId();
+      if (!registrarId) throw 'Missing registrarId param';
+
+      this.registrarService.oteStatus(registrarId).subscribe({
+        next: (oteStatusResponse: OteStatusResponse[]) => {
+          this.oteStatusResponse.set(oteStatusResponse);
+        },
+        error: (err: HttpErrorResponse) => {
+          this._snackBar.open(err.error || err.message);
+        },
+      });
+    });
+  }
+}

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.service.spec.ts

@@ -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

@@ -13,10 +13,12 @@
 // 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 { OteCreateResponse } from '../ote/newOte.component';
+import { OteStatusResponse } from '../ote/oteStatus.component';
 import { BackendService } from '../shared/services/backend.service';
 import {
   GlobalLoader,
@@ -69,6 +71,7 @@ export interface Registrar
   registrarId: string;
   registrarName: string;
   registryLockAllowed?: boolean;
+  type?: string;
 }
 
 @Injectable({
@@ -85,14 +88,21 @@ export class RegistrarService implements GlobalLoader {
     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 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);
   }
@@ -118,19 +128,23 @@ export class RegistrarService implements GlobalLoader {
     );
   }
 
-  saveRegistrar(registrar: Registrar) {
-    return this.backend.postRegistrar(registrar).pipe(
-      tap((registrar) => {
-        if (registrar) {
-          this.registrars.set(
-            this.registrars().map((r) => {
-              if (r.registrarId === registrar.registrarId) {
-                return registrar;
-              }
-              return r;
-            })
-          );
-        }
+  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;
+          })
+        );
       })
     );
   }
@@ -138,4 +152,17 @@ export class RegistrarService implements GlobalLoader {
   loadingTimeout() {
     this._snackBar.open('Timeout loading registrars');
   }
+
+  generateOte(
+    oteForm: Object,
+    registrarId: string
+  ): Observable<OteCreateResponse> {
+    return this.backend
+      .generateOte(oteForm, registrarId)
+      .pipe(tap((_) => this.loadRegistrars()));
+  }
+
+  oteStatus(registrarId: string): Observable<OteStatusResponse[]> {
+    return this.backend.getOteStatus(registrarId);
+  }
 }

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

@@ -1,4 +1,8 @@
-<div class="console-app__registrar-view">
+<div
+  class="console-app__registrar-view"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <h1 class="mat-headline-4">Registrars</h1>
   <mat-divider></mat-divider>
   <div class="console-app__registrar-view-content">
@@ -8,6 +12,15 @@
       </button>
       <div class="spacer"></div>
       @if(!inEdit && !registrarNotFound) {
+      <button
+        *ngIf="oteButtonVisible"
+        mat-stroked-button
+        (click)="checkOteStatus()"
+        aria-label="Check OT&E account"
+        [elementId]="getElementIdForOteBlock()"
+      >
+        Check OT&E Status
+      </button>
       <button
         mat-flat-button
         color="primary"

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

@@ -18,8 +18,10 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
 import { Registrar, RegistrarService } from './registrar.service';
 import { RegistrarComponent, columns } from './registrarsTable.component';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-registrar-details',
@@ -29,8 +31,9 @@ import { RegistrarComponent, columns } from './registrarsTable.component';
 export class RegistrarDetailsComponent implements OnInit {
   public static PATH = 'registrars/:id';
   inEdit: boolean = false;
+  oteButtonVisible = environment.sandbox;
   registrarInEdit!: Registrar;
-  registrarNotFound: boolean = false;
+  registrarNotFound: boolean = true;
   columns = columns.filter((c) => !c.hiddenOnDetailsCard);
   private subscription!: Subscription;
 
@@ -42,28 +45,42 @@ export class RegistrarDetailsComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    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.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]
         );
-        this.registrarNotFound = true;
-      } else {
-        this.registrarNotFound = false;
-      }
+        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(),
+    ];
+  }
+
+  checkOteStatus() {
+    this.router.navigate(['ote-status/', this.registrarInEdit.registrarId], {
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  getElementIdForOteBlock() {
+    return RESTRICTED_ELEMENTS.OTE;
   }
 
   removeTLD(tld: string) {
@@ -73,7 +90,7 @@ export class RegistrarDetailsComponent implements OnInit {
   }
 
   saveAndClose() {
-    this.registrarService.saveRegistrar(this.registrarInEdit).subscribe({
+    this.registrarService.updateRegistrar(this.registrarInEdit).subscribe({
       complete: () => {
         this.router.navigate([RegistrarComponent.PATH], {
           queryParamsHandling: 'merge',
@@ -87,6 +104,6 @@ export class RegistrarDetailsComponent implements OnInit {
   }
 
   ngOnDestroy() {
-    this.subscription.unsubscribe();
+    this.subscription && this.subscription.unsubscribe();
   }
 }

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

@@ -1,9 +1,5 @@
 <div class="console-app__registrar">
-  <mat-form-field
-    class="example-full-width"
-    class="mat-form-field-density-5"
-    appearance="outline"
-  >
+  <mat-form-field class="field-small" appearance="outline">
     <mat-label>Registrar</mat-label>
     <input
       type="text"
@@ -15,6 +11,7 @@
       [ngModelOptions]="{ standalone: true }"
       (focus)="onFocus()"
       [matAutocomplete]="auto"
+      spellcheck="false"
     />
     <mat-autocomplete
       autoActiveFirstOption

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

@@ -14,11 +14,13 @@
 
 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';
+import { FormsModule } from '@angular/forms';
 
 describe('RegistrarSelectorComponent', () => {
   let component: RegistrarSelectorComponent;
@@ -26,13 +28,13 @@ describe('RegistrarSelectorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
-      providers: [BackendService],
       declarations: [RegistrarSelectorComponent],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
+      providers: [
+        BackendService,
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(RegistrarSelectorComponent);

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

@@ -1,38 +1,76 @@
+@if(registrarService.inNewRegistrarMode()) {
+<app-new-registrar />
+} @else {
 <div class="console-app__registrars">
-  <h1 class="mat-headline-4">Registrars</h1>
-  <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"
+  <div class="console-app__registrars-header">
+    <h1 class="mat-headline-4">Registrars</h1>
+    <div class="spacer"></div>
+    <button
+      mat-stroked-button
+      *ngIf="oteButtonVisible"
+      (click)="createOteAccount()"
+      aria-label="Generate OT&E accounts"
+      [elementId]="getElementIdForOteBlock()"
     >
-      <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>
+      Create OT&E accounts
+    </button>
+    <button
+      class="console-app__registrars-new"
+      mat-flat-button
+      color="primary"
+      (click)="openNewRegistrar()"
+      aria-label="Add new registrar"
+    >
+      <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)"
+          tabindex="0"
+          (keyup.enter)="openDetails(row.registrarId)"
+        ></mat-row>
+      </mat-table>
 
-  <mat-paginator
-    class="mat-elevation-z0"
-    [pageSizeOptions]="[5, 10, 20]"
-    showFirstLastButtons
-  ></mat-paginator>
+      <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,11 +1,6 @@
 .console-app {
   $min-width: 756px;
 
-  &__registrars {
-    width: 100%;
-    overflow: auto;
-  }
-
   &__registrars-filter {
     min-width: $min-width !important;
     width: 100%;
@@ -15,6 +10,15 @@
     min-width: $min-width !important;
   }
 
+  &__registrars-new {
+    margin-left: 20px;
+  }
+
+  &__registrars-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .mat-mdc-paginator {
     min-width: $min-width !important;
   }

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

@@ -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

@@ -12,12 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+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 { Router } from '@angular/router';
+import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.directive';
 import { Registrar, RegistrarService } from './registrar.service';
+import { PATHS } from '../app-routing.module';
+import { environment } from '../../environments/environment';
 
 export const columns = [
   {
@@ -80,7 +83,7 @@ export class RegistrarComponent {
   public static PATH = 'registrars';
   dataSource: MatTableDataSource<Registrar>;
   columns = columns;
-
+  oteButtonVisible = environment.sandbox;
   displayedColumns = this.columns.map((c) => c.columnDef);
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
@@ -93,6 +96,9 @@ export class RegistrarComponent {
     this.dataSource = new MatTableDataSource<Registrar>(
       registrarService.registrars()
     );
+    effect(() => {
+      this.dataSource.data = registrarService.registrars();
+    });
   }
 
   ngAfterViewInit() {
@@ -100,6 +106,14 @@ export class RegistrarComponent {
     this.dataSource.sort = this.sort;
   }
 
+  createOteAccount() {
+    this.router.navigate([PATHS.NewOteComponent]);
+  }
+
+  getElementIdForOteBlock() {
+    return RESTRICTED_ELEMENTS.OTE;
+  }
+
   openDetails(registrarId: string) {
     this.router.navigate(['registrars/', registrarId], {
       queryParamsHandling: 'merge',
@@ -111,4 +125,8 @@ export class RegistrarComponent {
     // 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

@@ -4,7 +4,7 @@
     <div class="console-app__resources-subhead">Technical resources</div>
     <a
       class="text-l"
-      href="{{ userDataService.userData.technicalDocsUrl }}"
+      href="{{ userDataService.userData()?.technicalDocsUrl }}"
       target="_blank"
       >View onboarding FAQs, TLD information, and technical documentation on
       Google Drive</a

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

@@ -32,7 +32,9 @@
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row
       *matRowDef="let row; columns: displayedColumns"
+      tabindex="0"
       (click)="openDetails(row)"
+      (keyup.enter)="openDetails(row)"
     ></mat-row>
   </mat-table>
   }

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

@@ -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/contactDetails.component.html

@@ -1,4 +1,9 @@
-<div class="console-app__contact" *ngIf="contactService.contactInEdit">
+<div
+  class="console-app__contact"
+  *ngIf="contactService.contactInEdit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <div class="console-app__contact-controls">
     <button
       mat-icon-button
@@ -18,7 +23,11 @@
       <mat-icon>edit</mat-icon>
       Edit
     </button>
-    <button mat-icon-button aria-label="Delete Contact">
+    <button
+      mat-icon-button
+      aria-label="Delete Contact"
+      (click)="deleteContact()"
+    >
       <mat-icon>delete</mat-icon>
     </button>
     }

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

@@ -26,6 +26,6 @@
   mat-form-field {
     display: block;
     width: 100%;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
   }
 }

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

@@ -50,6 +50,9 @@ export class ContactDetailsComponent {
           error: (err: HttpErrorResponse) => {
             this._snackBar.open(err.error);
           },
+          complete: () => {
+            this.goBack();
+          },
         });
     }
   }

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

@@ -1,4 +1,8 @@
-<div class="settings-security__edit-password">
+<div
+  class="settings-security__edit-password"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <p>
     <button
       mat-icon-button

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

@@ -14,25 +14,24 @@
 
 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 {
-  Registrar,
-  RegistrarService,
-} from 'src/app/registrar/registrar.service';
+import { MaterialModule } from 'src/app/material.module';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import SecurityComponent from './security.component';
+import { SecurityService } from './security.service';
+import SecurityEditComponent from './securityEdit.component';
+import { MOCK_REGISTRAR_SERVICE } from 'src/testdata/registrar/registrar.service.mock';
 
 describe('SecurityComponent', () => {
   let component: SecurityComponent;
   let fixture: ComponentFixture<SecurityComponent>;
   let fetchSecurityDetailsSpy: Function;
   let saveSpy: Function;
-  let dummyRegistrarService: RegistrarService;
 
   beforeEach(async () => {
     const securityServiceSpy = jasmine.createSpyObj(SecurityService, [
@@ -43,23 +42,17 @@ describe('SecurityComponent', () => {
     fetchSecurityDetailsSpy =
       securityServiceSpy.fetchSecurityDetails.and.returnValue(of());
 
-    saveSpy = securityServiceSpy.saveChanges;
-
-    dummyRegistrarService = {
-      registrar: { ipAddressAllowList: ['123.123.123.123'] },
-    } as RegistrarService;
+    saveSpy = securityServiceSpy.saveChanges.and.returnValue(of());
 
     await TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-        FormsModule,
-      ],
-      declarations: [SecurityComponent],
+      declarations: [SecurityEditComponent, SecurityComponent],
+      imports: [MaterialModule, BrowserAnimationsModule, FormsModule],
       providers: [
         BackendService,
-        { provide: RegistrarService, useValue: dummyRegistrarService },
+        SecurityService,
+        { provide: RegistrarService, useValue: MOCK_REGISTRAR_SERVICE },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     })
       .overrideComponent(SecurityComponent, {
@@ -80,78 +73,65 @@ describe('SecurityComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render ip allow list', waitForAsync(() => {
-    component.enableEdit();
+  it('should render security elements', waitForAsync(() => {
+    fixture.detectChanges();
     fixture.whenStable().then(() => {
-      expect(
-        Array.from(
-          fixture.nativeElement.querySelectorAll(
-            '.settings-security__ip-allowlist'
-          )
-        )
-      ).toHaveSize(1);
-      expect(
-        fixture.nativeElement.querySelector('.settings-security__ip-allowlist')
-          .value
-      ).toBe('123.123.123.123');
+      let listElems: Array<HTMLElement> = Array.from(
+        fixture.nativeElement.querySelectorAll('span.console-app__list-value')
+      );
+      expect(listElems).toHaveSize(8);
+      expect(listElems.map((e) => e.textContent)).toEqual([
+        'Change the password used for EPP logins',
+        '••••••••••••••',
+        'Restrict access to EPP production servers to the following IP/IPv6 addresses, or ranges like 1.1.1.0/24',
+        '123.123.123.123',
+        'X.509 PEM certificate for EPP production access',
+        'No client certificate on file.',
+        'X.509 PEM backup certificate for EPP production access',
+        'No failover certificate on file.',
+      ]);
     });
   }));
 
   it('should remove ip', waitForAsync(() => {
-    expect(
-      Array.from(
-        fixture.nativeElement.querySelectorAll(
-          '.settings-security__ip-allowlist'
-        )
-      )
-    ).toHaveSize(1);
-    component.removeIpEntry(0);
+    component.dataSource.ipAddressAllowList =
+      component.dataSource.ipAddressAllowList?.splice(1);
     fixture.whenStable().then(() => {
       fixture.detectChanges();
-      expect(
-        Array.from(
-          fixture.nativeElement.querySelectorAll(
-            '.settings-security__ip-allowlist'
-          )
-        )
-      ).toHaveSize(0);
+      let listElems: Array<HTMLElement> = Array.from(
+        fixture.nativeElement.querySelectorAll('span.console-app__list-value')
+      );
+      expect(listElems.map((e) => e.textContent)).toContain(
+        'No IP addresses on file.'
+      );
     });
   }));
 
-  it('should toggle inEdit', () => {
-    expect(component.inEdit).toBeFalse();
-    component.enableEdit();
-    expect(component.inEdit).toBeTrue();
+  it('should toggle isEditingSecurity', () => {
+    expect(component.securityService.isEditingSecurity).toBeFalse();
+    component.editSecurity();
+    expect(component.securityService.isEditingSecurity).toBeTrue();
   });
 
-  it('should create temporary data structure', () => {
-    expect(component.dataSource).toEqual(
-      apiToUiConverter(dummyRegistrarService.registrar)
-    );
-    component.removeIpEntry(0);
-    expect(component.dataSource).toEqual({ ipAddressAllowList: [] });
-    expect(dummyRegistrarService.registrar).toEqual({
-      ipAddressAllowList: ['123.123.123.123'],
-    } as Registrar);
-    component.cancel();
-    expect(component.dataSource).toEqual(
-      apiToUiConverter(dummyRegistrarService.registrar)
-    );
+  it('should toggle isEditingPassword', () => {
+    expect(component.securityService.isEditingPassword).toBeFalse();
+    component.editEppPassword();
+    expect(component.securityService.isEditingPassword).toBeTrue();
   });
 
   it('should call save', waitForAsync(async () => {
-    component.enableEdit();
-    fixture.detectChanges();
+    component.editSecurity();
     await fixture.whenStable();
+    fixture.detectChanges();
     const el = fixture.nativeElement.querySelector(
-      '.settings-security__clientCertificate'
+      '.console-app__clientCertificateValue'
     );
     el.value = 'test';
     el.dispatchEvent(new Event('input'));
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.nativeElement
-      .querySelector('.settings-security__actions-save')
+      .querySelector('.settings-security__edit-save')
       .click();
     expect(saveSpy).toHaveBeenCalledOnceWith({
       ipAddressAllowList: [{ value: '123.123.123.123' }],

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

@@ -35,6 +35,7 @@ export default class SecurityComponent {
       if (this.registrarService.registrar()) {
         this.dataSource = apiToUiConverter(this.registrarService.registrar());
         this.securityService.isEditingSecurity = false;
+        this.securityService.isEditingPassword = false;
       }
     });
   }

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

@@ -14,17 +14,20 @@
 
 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,
-  SecuritySettingsBackendModel,
   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';
+import {
+  SecuritySettings,
+  SecuritySettingsBackendModel,
+} from 'src/app/registrar/registrar.service';
 
 describe('SecurityService', () => {
   const uiMockData: SecuritySettings = {
@@ -42,9 +45,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

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Injectable } from '@angular/core';
-import { switchMap } from 'rxjs';
+import { switchMap, timeout } from 'rxjs';
 import {
   IpAllowListItem,
   RegistrarService,
@@ -69,6 +69,7 @@ export class SecurityService {
         uiToApiConverter(newSecuritySettings)
       )
       .pipe(
+        timeout(2000),
         switchMap(() => {
           return this.registrarService.loadRegistrars();
         })

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

@@ -1,4 +1,8 @@
-<div class="settings-security__edit">
+<div
+  class="settings-security__edit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <h1>IP Allowlist</h1>
   <p>
     Restrict access to EPP production servers to the following IP/IPv6
@@ -10,6 +14,7 @@
       <mat-form-field appearance="outline">
         <input
           matInput
+          [disabled]="isUpdating"
           type="text"
           [(ngModel)]="ip.value"
           [ngModelOptions]="{ standalone: true }"
@@ -20,12 +25,19 @@
         mat-icon-button
         aria-label="Remove"
         (click)="removeIpEntry(ip)"
+        [disabled]="isUpdating"
       >
         <mat-icon>close</mat-icon>
       </button>
     </div>
     }
-    <button mat-button color="primary" (click)="createIpEntry()" type="button">
+    <button
+      mat-button
+      [disabled]="isUpdating"
+      color="primary"
+      (click)="createIpEntry()"
+      type="button"
+    >
       + Add IP
     </button>
 
@@ -33,7 +45,9 @@
     <p>X.509 PEM certificate for EPP production access.</p>
     <mat-form-field appearance="outline">
       <textarea
+        class="console-app__clientCertificateValue"
         matInput
+        [disabled]="isUpdating"
         [(ngModel)]="dataSource.clientCertificate"
         [ngModelOptions]="{ standalone: true }"
       ></textarea>
@@ -43,6 +57,7 @@
     <mat-form-field appearance="outline">
       <textarea
         matInput
+        [disabled]="isUpdating"
         [(ngModel)]="dataSource.failoverClientCertificate"
         [ngModelOptions]="{ standalone: true }"
       ></textarea>
@@ -50,6 +65,7 @@
     <button
       mat-flat-button
       color="primary"
+      [disabled]="isUpdating"
       aria-label="Save security settings"
       type="submit"
       class="settings-security__edit-save"

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

@@ -29,6 +29,7 @@ import { SecurityService, apiToUiConverter } from './security.service';
 })
 export default class SecurityEditComponent {
   dataSource: SecuritySettings = {};
+  isUpdating = false;
 
   constructor(
     public securityService: SecurityService,
@@ -43,12 +44,15 @@ export default class SecurityEditComponent {
   }
 
   save() {
+    this.isUpdating = true;
     this.securityService.saveChanges(this.dataSource).subscribe({
       complete: () => {
+        this.isUpdating = false;
         this.goBack();
       },
       error: (err: HttpErrorResponse) => {
-        this._snackBar.open(err.error);
+        this._snackBar.open(err.error || err.message);
+        this.isUpdating = false;
       },
     });
   }

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

@@ -10,26 +10,31 @@
       <a
         mat-tab-link
         routerLink="contact"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla="routerLinkActive"
+        [active]="rla.isActive"
         >Contacts</a
       >
       <a
         mat-tab-link
         routerLink="whois"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla2="routerLinkActive"
+        [active]="rla2.isActive"
         >WHOIS Info</a
       >
       <a
         mat-tab-link
         routerLink="security"
-        routerLinkActive="active-link"
+        routerLinkActive
         queryParamsHandling="merge"
+        #rla3="routerLinkActive"
+        [active]="rla3.isActive"
         >Security</a
       >
     </nav>
-    <mat-divider></mat-divider>
     <mat-tab-nav-panel #tabPanel>
       <router-outlet></router-outlet>
     </mat-tab-nav-panel>

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

@@ -13,15 +13,7 @@
 // limitations under the License.
 
 .console-settings {
-  > mat-divider {
+  nav {
     margin-bottom: 40px;
   }
-  .mdc-tab {
-    &.active-link {
-      border-bottom: 2px solid var(--primary);
-      .mdc-tab__text-label {
-        color: var(--primary);
-      }
-    }
-  }
 }

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

@@ -17,6 +17,12 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SettingsComponent } from './settings.component';
 import { MaterialModule } from '../material.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ActivatedRoute } from '@angular/router';
+import { AppModule, SelectedRegistrarModule } from '../app.module';
+import { BackendService } from '../shared/services/backend.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { AppRoutingModule } from '../app-routing.module';
 
 describe('SettingsComponent', () => {
   let component: SettingsComponent;
@@ -24,7 +30,19 @@ describe('SettingsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MaterialModule, BrowserAnimationsModule],
+      imports: [
+        SelectedRegistrarModule,
+        MaterialModule,
+        BrowserAnimationsModule,
+        AppRoutingModule,
+        AppModule,
+      ],
+      providers: [
+        BackendService,
+        { provide: ActivatedRoute, useValue: {} as ActivatedRoute },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
       declarations: [SettingsComponent],
     }).compileComponents();
 

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

@@ -1 +0,0 @@
-<p>users works!</p>

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

@@ -5,7 +5,7 @@
     display: flex;
     align-items: center;
     gap: 1rem;
-    margin: 20px 0;
+    margin-bottom: 20px;
     button {
       flex-shrink: 0;
     }

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

@@ -14,12 +14,13 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import WhoisComponent from './whois.component';
-import { MaterialModule } from 'src/app/material.module';
-import { BackendService } from 'src/app/shared/services/backend.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MaterialModule } from 'src/app/material.module';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
+import { BackendService } from 'src/app/shared/services/backend.service';
+import WhoisComponent from './whois.component';
 
 describe('WhoisComponent', () => {
   let component: WhoisComponent;
@@ -28,14 +29,19 @@ describe('WhoisComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [WhoisComponent],
-      imports: [
-        HttpClientTestingModule,
-        MaterialModule,
-        BrowserAnimationsModule,
-      ],
+      imports: [MaterialModule, BrowserAnimationsModule],
       providers: [
         BackendService,
-        { provide: RegistrarService, useValue: { registrar: {} } },
+        {
+          provide: RegistrarService,
+          useValue: {
+            registrar: function () {
+              return {};
+            },
+          },
+        },
+        provideHttpClient(),
+        provideHttpClientTesting(),
       ],
     }).compileComponents();
 

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

@@ -1,4 +1,9 @@
-<div class="console-app__whois-edit" *ngIf="registrarInEdit">
+<div
+  class="console-app__whois-edit"
+  *ngIf="registrarInEdit"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
   <button
     mat-icon-button
     class="console-app__whois-edit-back"
@@ -132,6 +137,18 @@
         />
       </mat-form-field>
 
+      @if((userDataService.userData()?.globalRole || 'NONE') !== "NONE") {
+      <mat-form-field appearance="outline">
+        <mat-label>ICANN Referral Email: </mat-label>
+        <input
+          matInput
+          type="text"
+          [(ngModel)]="registrarInEdit.icannReferralEmail"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
+      }
+
       <button mat-flat-button color="primary" type="submit">Save</button>
     </form>
   </div>

console-webapp/src/app/settings/whois/whoisEdit.component.ts

@@ -19,6 +19,7 @@ import {
   Registrar,
   RegistrarService,
 } from 'src/app/registrar/registrar.service';
+import { UserDataService } from 'src/app/shared/services/userData.service';
 import { WhoisService } from './whois.service';
 
 @Component({
@@ -30,6 +31,7 @@ export default class WhoisEditComponent {
   registrarInEdit: Registrar | undefined;
 
   constructor(
+    public userDataService: UserDataService,
     public whoisService: WhoisService,
     public registrarService: RegistrarService,
     private _snackBar: MatSnackBar

console-webapp/src/app/shared/directives/userLevelVisiblity.directive.ts

@@ -0,0 +1,63 @@
+// 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 { Directive, ElementRef, Input, effect } from '@angular/core';
+import { UserDataService } from '../services/userData.service';
+
+export enum RESTRICTED_ELEMENTS {
+  REGISTRAR_ELEMENT,
+  OTE,
+  USERS,
+  BULK_DELETE,
+}
+
+export const DISABLED_ELEMENTS_PER_ROLE = {
+  NONE: [
+    RESTRICTED_ELEMENTS.REGISTRAR_ELEMENT,
+    RESTRICTED_ELEMENTS.OTE,
+    RESTRICTED_ELEMENTS.USERS,
+    RESTRICTED_ELEMENTS.BULK_DELETE,
+  ],
+  SUPPORT_LEAD: [RESTRICTED_ELEMENTS.USERS],
+  SUPPORT_AGENT: [RESTRICTED_ELEMENTS.USERS],
+};
+
+@Directive({
+  selector: '[elementId]',
+})
+export class UserLevelVisibility {
+  @Input() elementId!: RESTRICTED_ELEMENTS | null;
+
+  constructor(
+    private userDataService: UserDataService,
+    private el: ElementRef
+  ) {
+    effect(this.processElement.bind(this));
+  }
+
+  processElement() {
+    const globalRole = this.userDataService?.userData()?.globalRole || 'NONE';
+    if (this.elementId === null) {
+      return;
+    }
+    if (
+      // @ts-ignore
+      (DISABLED_ELEMENTS_PER_ROLE[globalRole] || []).includes(this.elementId)
+    ) {
+      this.el.nativeElement.style.display = 'none';
+    } else {
+      this.el.nativeElement.style.display = '';
+    }
+  }
+}

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

@@ -17,6 +17,11 @@ import { Injectable } from '@angular/core';
 import { Observable, catchError, of, throwError } from 'rxjs';
 
 import { DomainListResult } from 'src/app/domains/domainList.service';
+import { DomainLocksResult } from 'src/app/domains/registryLock.service';
+import { RegistryLockVerificationResponse } from 'src/app/lock/registryLockVerify.service';
+import { OteCreateResponse } from 'src/app/ote/newOte.component';
+import { OteStatusResponse } from 'src/app/ote/oteStatus.component';
+import { User } from 'src/app/users/users.service';
 import {
   Registrar,
   SecuritySettingsBackendModel,
@@ -110,7 +115,13 @@ export class BackendService {
       .pipe(catchError((err) => this.errorCatcher<Registrar[]>(err)));
   }
 
-  postRegistrar(registrar: Registrar): Observable<Registrar> {
+  createRegistrar(registrar: Registrar): Observable<Registrar> {
+    return this.http
+      .post<Registrar>('/console-api/registrars', registrar)
+      .pipe(catchError((err) => this.errorCatcher<Registrar>(err)));
+  }
+
+  updateRegistrar(registrar: Registrar): Observable<Registrar> {
     return this.http
       .post<Registrar>('/console-api/registrar', registrar)
       .pipe(catchError((err) => this.errorCatcher<Registrar>(err)));
@@ -149,6 +160,49 @@ export class BackendService {
     );
   }
 
+  getUsers(registrarId: string): Observable<User[]> {
+    return this.http
+      .get<User[]>(`/console-api/users?registrarId=${registrarId}`)
+      .pipe(catchError((err) => this.errorCatcher<User[]>(err)));
+  }
+
+  createUser(registrarId: string, maybeUser: User | null): Observable<User> {
+    return this.http
+      .post<User>(`/console-api/users?registrarId=${registrarId}`, maybeUser)
+      .pipe(catchError((err) => this.errorCatcher<User>(err)));
+  }
+
+  deleteUser(registrarId: string, user: User): Observable<any> {
+    return this.http
+      .delete<any>(`/console-api/users?registrarId=${registrarId}`, {
+        body: JSON.stringify(user),
+      })
+      .pipe(catchError((err) => this.errorCatcher<any>(err)));
+  }
+
+  bulkDomainAction(
+    domainNames: string[],
+    reason: string,
+    bulkDomainAction: string,
+    registrarId: string
+  ) {
+    return this.http
+      .post<any>(
+        `/console-api/bulk-domain?registrarId=${registrarId}&bulkDomainAction=${bulkDomainAction}`,
+        {
+          domainList: domainNames,
+          reason,
+        }
+      )
+      .pipe(catchError((err) => this.errorCatcher<any>(err)));
+  }
+
+  updateUser(registrarId: string, updatedUser: User): Observable<any> {
+    return this.http
+      .put<User>(`/console-api/users?registrarId=${registrarId}`, updatedUser)
+      .pipe(catchError((err) => this.errorCatcher<any>(err)));
+  }
+
   getUserData(): Observable<UserData> {
     return this.http
       .get<UserData>('/console-api/userdata')
@@ -163,4 +217,54 @@ export class BackendService {
       whoisRegistrarFields
     );
   }
+
+  registryLockDomain(
+    domainName: string,
+    password: string | undefined,
+    relockDurationMillis: number | undefined,
+    registrarId: string,
+    isLock: boolean
+  ) {
+    return this.http.post(
+      `/console-api/registry-lock?registrarId=${registrarId}`,
+      {
+        domainName,
+        password,
+        isLock,
+        relockDurationMillis,
+      }
+    );
+  }
+
+  getLocks(registrarId: string): Observable<DomainLocksResult[]> {
+    return this.http
+      .get<DomainLocksResult[]>(
+        `/console-api/registry-lock?registrarId=${registrarId}`
+      )
+      .pipe(catchError((err) => this.errorCatcher<DomainLocksResult[]>(err)));
+  }
+
+  generateOte(
+    oteForm: Object,
+    registrarId: string
+  ): Observable<OteCreateResponse> {
+    return this.http.post<OteCreateResponse>(
+      `/console-api/ote?registrarId=${registrarId}`,
+      oteForm
+    );
+  }
+
+  getOteStatus(registrarId: string) {
+    return this.http
+      .get<OteStatusResponse[]>(`/console-api/ote?registrarId=${registrarId}`)
+      .pipe(catchError((err) => this.errorCatcher<OteStatusResponse[]>(err)));
+  }
+
+  verifyRegistryLockRequest(
+    lockVerificationCode: string
+  ): Observable<RegistryLockVerificationResponse> {
+    return this.http.get<RegistryLockVerificationResponse>(
+      `/console-api/registry-lock-verify?lockVerificationCode=${lockVerificationCode}`
+    );
+  }
 }

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable, tap } from 'rxjs';
 import { BackendService } from './backend.service';
@@ -27,13 +27,14 @@ export interface UserData {
   supportEmail: string;
   supportPhoneNumber: string;
   technicalDocsUrl: string;
+  userRoles?: Map<string, string>;
 }
 
 @Injectable({
   providedIn: 'root',
 })
 export class UserDataService implements GlobalLoader {
-  public userData!: UserData;
+  userData = signal<UserData | undefined>(undefined);
   constructor(
     private backend: BackendService,
     protected globalLoader: GlobalLoaderService,
@@ -48,7 +49,7 @@ export class UserDataService implements GlobalLoader {
   getUserData(): Observable<UserData> {
     return this.backend.getUserData().pipe(
       tap((userData: UserData) => {
-        this.userData = userData;
+        this.userData.set(userData);
       })
     );
   }

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

@@ -17,9 +17,11 @@
     For general purpose questions once you are integrated with our registry
     system. If the issue is urgent, please put "Urgent" in the email title.
   </p>
-  <a class="text-l" href="mailto:{{ userDataService.userData.supportEmail }}">{{
-    userDataService.userData.supportEmail
-  }}</a>
+  <a
+    class="text-l"
+    href="mailto:{{ userDataService.userData()?.supportEmail }}"
+    >{{ userDataService.userData()?.supportEmail }}</a
+  >
   <p class="secondary-text">
     Note: You may receive occasional service announcements via
     registrar-announcement&#64;google.com. You will not be able to reply to
@@ -29,13 +31,13 @@
   <p class="text-l">For general support inquiries 24/7:</p>
   <a
     class="text-l"
-    href="tel:{{ userDataService.userData.supportPhoneNumber }}"
-    >{{ userDataService.userData.supportPhoneNumber }}</a
+    href="tel:{{ userDataService.userData()?.supportPhoneNumber }}"
+    >{{ userDataService.userData()?.supportPhoneNumber }}</a
   >
-  @if (userDataService.userData.passcode) {
+  @if (userDataService.userData()?.passcode) {
   <p class="text-l">Your telephone passcode:</p>
   <p class="text-l console-app__support-passcode">
-    {{ userDataService.userData.passcode }}
+    {{ userDataService.userData()?.passcode }}
   </p>
   <p class="secondary-text">
     Note: Please be ready with your account name and telephone passcode when

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

@@ -0,0 +1,109 @@
+<div
+  class="console-app__user-details"
+  cdkTrapFocus
+  [cdkTrapFocusAutoCapture]="true"
+>
+  @if(isEditing) {
+  <h1 class="mat-headline-4">Editing {{ userDetails().emailAddress }}</h1>
+  <mat-divider></mat-divider>
+  <div class="console-app__user-details-controls">
+    <button
+      mat-icon-button
+      aria-label="Back to view user"
+      (click)="isEditing = false"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+  </div>
+  <app-user-edit-form
+    [user]="userDetails()"
+    (onEditComplete)="saveEdit($event)"
+  />
+  } @else { @if(isNewUser) {
+  <h1 class="mat-headline-4">
+    {{ userDetails().emailAddress + " successfully created" }}
+  </h1>
+  } @else {
+  <h1 class="mat-headline-4">User details</h1>
+  }
+  <mat-divider></mat-divider>
+  <div class="console-app__user-details-controls">
+    <button mat-icon-button aria-label="Back to users list" (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <div class="spacer"></div>
+    <button
+      mat-flat-button
+      color="primary"
+      aria-label="Edit User"
+      (click)="isEditing = true"
+    >
+      <mat-icon>edit</mat-icon>
+      Edit
+    </button>
+    <button
+      mat-icon-button
+      aria-label="Delete User"
+      (click)="deleteUser()"
+      [disabled]="isLoading"
+    >
+      <mat-icon>delete</mat-icon>
+    </button>
+  </div>
+  <div *ngIf="isNewUser" class="console-app__user-details-save-password">
+    <mat-icon>priority_high</mat-icon>
+    Please save the password. For your security, we do not store passwords in a
+    recoverable format.
+  </div>
+
+  <p *ngIf="isLoading">
+    <mat-progress-bar mode="query"></mat-progress-bar>
+  </p>
+
+  <mat-card appearance="outlined">
+    <mat-card-content>
+      <mat-list role="list">
+        <mat-list-item role="listitem">
+          <h2>User details</h2>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">User email</span>
+          <span class="console-app__list-value">{{
+            userDetails().emailAddress
+          }}</span>
+        </mat-list-item>
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">User role</span>
+          <span class="console-app__list-value">{{
+            roleToDescription(userDetails().role)
+          }}</span>
+        </mat-list-item>
+        @if (userDetails().password) {
+        <mat-divider></mat-divider>
+        <mat-list-item role="listitem">
+          <span class="console-app__list-key">Password</span>
+          <span
+            class="console-app__list-value console-app__user-details-password"
+          >
+            <input
+              [type]="isPasswordVisible ? 'text' : 'password'"
+              [value]="userDetails().password"
+              disabled
+            />
+            <button
+              mat-button
+              aria-label="Show password"
+              (click)="isPasswordVisible = !isPasswordVisible"
+            >
+              {{ isPasswordVisible ? "Hide" : "View" }} password
+            </button>
+          </span>
+        </mat-list-item>
+        }
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+  }
+</div>

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

@@ -1,4 +1,4 @@
-// Copyright 2020 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,22 +12,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-package google.registry.persistence.converter;
-
-import javax.persistence.AttributeConverter;
-import javax.persistence.Converter;
-
-/** JPA {@link AttributeConverter} for storing/retrieving {@code Set<String>}. */
-@Converter(autoApply = true)
-public class StringSetConverter extends StringSetConverterBase<String> {
-
-  @Override
-  String toString(String element) {
-    return element;
-  }
-
-  @Override
-  String fromString(String value) {
-    return value;
+.console-app {
+  &__user-details {
+    &-controls {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+    }
+    &-password {
+      input {
+        border: none;
+        background: transparent;
+      }
+    }
+    &-save-password {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 15px 10px;
+      margin-bottom: 20px;
+      border: 1px solid #ddd;
+      border-radius: 10px;
+    }
+    max-width: 616px;
   }
 }

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

@@ -0,0 +1,101 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CommonModule } from '@angular/common';
+import { Component, computed } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SelectedRegistrarModule } from '../app.module';
+import { MaterialModule } from '../material.module';
+import { RegistrarService } from '../registrar/registrar.service';
+import { SnackBarModule } from '../snackbar.module';
+import { UsersService, roleToDescription, User } from './users.service';
+import { FormsModule } from '@angular/forms';
+import { UserEditFormComponent } from './userEditForm.component';
+
+@Component({
+  selector: 'app-user-edit',
+  templateUrl: './userDetails.component.html',
+  styleUrls: ['./userDetails.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MaterialModule,
+    SnackBarModule,
+    CommonModule,
+    SelectedRegistrarModule,
+    UserEditFormComponent,
+  ],
+  providers: [],
+})
+export class UserDetailsComponent {
+  isEditing = false;
+  isPasswordVisible = false;
+  isNewUser = false;
+  isLoading = false;
+
+  userDetails = computed(() => {
+    return this.usersService
+      .users()
+      .filter(
+        (u) => u.emailAddress === this.usersService.currentlyOpenUserEmail()
+      )[0];
+  });
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected usersService: UsersService,
+    private _snackBar: MatSnackBar
+  ) {
+    if (this.usersService.isNewUser) {
+      this.isNewUser = true;
+      this.usersService.isNewUser = false;
+    }
+  }
+
+  roleToDescription(role: string) {
+    return roleToDescription(role);
+  }
+
+  deleteUser() {
+    this.isLoading = true;
+    this.usersService.deleteUser(this.userDetails()).subscribe({
+      error: (err) => {
+        this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
+      },
+      complete: () => {
+        this.isLoading = false;
+        this.goBack();
+      },
+    });
+  }
+
+  goBack() {
+    this.usersService.currentlyOpenUserEmail.set('');
+  }
+
+  saveEdit(user: User) {
+    this.isLoading = true;
+    this.usersService.updateUser(user).subscribe({
+      error: (err) => {
+        this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
+      },
+      complete: () => {
+        this.isLoading = false;
+        this.isEditing = false;
+      },
+    });
+  }
+}

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

@@ -0,0 +1,39 @@
+<form (ngSubmit)="saveEdit($event)" #form>
+  <p *ngIf="isNew()">
+    <mat-form-field appearance="outline">
+      <mat-label
+        >User name prefix:
+        <mat-icon
+          matTooltip="Prefix will be combined with registrar ID to create a unique user name - {prefix}.{registrarId}@registry.google"
+          >help_outline</mat-icon
+        ></mat-label
+      >
+      <input
+        matInput
+        minlength="3"
+        maxlength="3"
+        [required]="true"
+        [(ngModel)]="user().emailAddress"
+        [ngModelOptions]="{ standalone: true }"
+      />
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field appearance="outline">
+      <mat-label
+        >User Role:
+        <mat-icon
+          matTooltip="Viewer role doesn't allow making updates; Editor role allows updates, like Contacts delete or SSL certificate change"
+          >help_outline</mat-icon
+        ></mat-label
+      >
+      <mat-select [(ngModel)]="user().role" name="userRole">
+        <mat-option value="PRIMARY_CONTACT">Editor</mat-option>
+        <mat-option value="ACCOUNT_MANAGER">Viewer</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </p>
+  <button mat-flat-button color="primary" aria-label="Save user" type="submit">
+    Save
+  </button>
+</form>

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

@@ -0,0 +1,58 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { MaterialModule } from '../material.module';
+import { FormsModule } from '@angular/forms';
+import { User } from './users.service';
+
+@Component({
+  selector: 'app-user-edit-form',
+  templateUrl: './userEditForm.component.html',
+  styleUrls: ['./userEditForm.component.scss'],
+  standalone: true,
+  imports: [FormsModule, MaterialModule, CommonModule],
+  providers: [],
+})
+export class UserEditFormComponent {
+  @ViewChild('form') form!: ElementRef;
+  isNew = input<boolean>(false);
+  user = input<User>(
+    {
+      emailAddress: '',
+      role: 'ACCOUNT_MANAGER',
+    },
+    // @ts-ignore - legit option, typescript fails to match it to a proper type
+    { transform: (user: User) => structuredClone(user) }
+  );
+
+  @Output() onEditComplete = new EventEmitter<User>();
+
+  saveEdit(e: SubmitEvent) {
+    e.preventDefault();
+    if (this.form.nativeElement.checkValidity()) {
+      this.onEditComplete.emit(this.user());
+    } else {
+      this.form.nativeElement.reportValidity();
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+<app-selected-registrar-wrapper cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
+  @if(isLoading) {
+  <div class="console-app__users-spinner">
+    <mat-spinner />
+  </div>
+  } @else if(selectingExistingUser) {
+  <div class="console-app__users">
+    <h1 class="mat-headline-4">Add existing user</h1>
+    <p>
+      <button
+        mat-icon-button
+        aria-label="Back to users list"
+        (click)="selectingExistingUser = false"
+      >
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+    </p>
+    <h1>Select registrar from which to add a new user</h1>
+    <p>
+      <mat-form-field appearance="outline">
+        <mat-label>Registrar</mat-label>
+        <mat-select
+          [(ngModel)]="selectedRegistrarId"
+          name="selectedRegistrarId"
+          (selectionChange)="onRegistrarSelectionChange($event)"
+        >
+          @for (registrar of registrarService.registrars(); track registrar) {
+          <mat-option [value]="registrar.registrarId">{{
+            registrar.registrarId
+          }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </p>
+    @if(usersSelection.length) {
+    <app-users-list
+      [users]="usersSelection"
+      (onSelect)="existingUserSelected($event)"
+    />
+    <p class="console-app__users-add-existing">
+      <button
+        mat-flat-button
+        color="primary"
+        aria-label="Add user"
+        (click)="submitExistingUser()"
+        [disabled]="!selectedExistingUser"
+      >
+        Add user
+      </button>
+      <button
+        mat-stroked-button
+        aria-label="Cancel adding existing user"
+        (click)="selectingExistingUser = false"
+      >
+        Cancel
+      </button>
+    </p>
+    }
+  </div>
+  } @else if(usersService.currentlyOpenUserEmail()) {
+  <app-user-edit></app-user-edit>
+  } @else if(isNew) {
+  <h1 class="mat-headline-4">New User Form</h1>
+  <div class="spacer"></div>
+  <p>
+    <button
+      mat-icon-button
+      aria-label="Back to users list"
+      (click)="isNew = false"
+    >
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+  </p>
+  <app-user-edit-form [isNew]="true" (onEditComplete)="createNewUser($event)" />
+  } @else {
+  <div class="console-app__users">
+    <div class="console-app__users-header">
+      <h1 class="mat-headline-4">Users</h1>
+      <div class="spacer"></div>
+      <div class="console-app__users-header-buttons">
+        <button
+          class="console-app__users-header-add"
+          mat-stroked-button
+          (click)="addExistingUser()"
+          aria-label="Create new user"
+          color="primary"
+        >
+          <mat-icon>add</mat-icon>
+          Add existing user
+        </button>
+        <button
+          mat-flat-button
+          (click)="isNew = true"
+          aria-label="Create new user"
+          color="primary"
+        >
+          Create New User
+        </button>
+      </div>
+    </div>
+    <app-users-list
+      [users]="usersService.users()"
+      (onSelect)="openDetails($event)"
+    />
+  </div>
+  }
+</app-selected-registrar-wrapper>

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

@@ -0,0 +1,49 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.console-app {
+  &__users {
+    max-width: 1024px;
+    overflow-x: auto;
+  }
+
+  &__users-spinner {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__users-new {
+    margin-left: 20px;
+  }
+
+  &__users-add-existing {
+    margin-top: 20px;
+    > button {
+      margin-right: 15px;
+    }
+  }
+  &__users-header {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    &-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      button {
+        margin: 0 15px 15px 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,141 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CommonModule } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, effect } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { SelectedRegistrarModule } from '../app.module';
+import { MaterialModule } from '../material.module';
+import { RegistrarService } from '../registrar/registrar.service';
+import { SnackBarModule } from '../snackbar.module';
+import { UserDetailsComponent } from './userDetails.component';
+import { User, UsersService } from './users.service';
+import { UserDataService } from '../shared/services/userData.service';
+import { FormsModule } from '@angular/forms';
+import { UsersListComponent } from './usersList.component';
+import { MatSelectChange } from '@angular/material/select';
+import { UserEditFormComponent } from './userEditForm.component';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss'],
+  standalone: true,
+  imports: [
+    FormsModule,
+    MaterialModule,
+    SnackBarModule,
+    CommonModule,
+    SelectedRegistrarModule,
+    UsersListComponent,
+    UserEditFormComponent,
+    UserDetailsComponent,
+  ],
+  providers: [UsersService],
+})
+export class UsersComponent {
+  isLoading = false;
+  isNew = false;
+  selectingExistingUser = false;
+  selectedRegistrarId = '';
+  usersSelection: User[] = [];
+  selectedExistingUser: User | undefined;
+
+  constructor(
+    protected registrarService: RegistrarService,
+    protected usersService: UsersService,
+    private userDataService: UserDataService,
+    private _snackBar: MatSnackBar
+  ) {
+    effect(() => {
+      if (registrarService.registrarId()) {
+        this.loadUsers();
+      }
+    });
+  }
+
+  addExistingUser() {
+    this.selectingExistingUser = true;
+    this.selectedRegistrarId = '';
+    this.usersSelection = [];
+    this.selectedExistingUser = undefined;
+  }
+
+  existingUserSelected(user: User) {
+    this.selectedExistingUser = user;
+  }
+
+  loadUsers() {
+    this.isLoading = true;
+    this.usersService.fetchUsers().subscribe({
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
+      },
+      complete: () => {
+        this.isLoading = false;
+      },
+    });
+  }
+
+  createNewUser(user: User) {
+    this.isLoading = true;
+    this.usersService.createOrAddNewUser(user).subscribe({
+      error: (err: HttpErrorResponse) => {
+        this._snackBar.open(err.error || err.message);
+        this.isLoading = false;
+      },
+      complete: () => {
+        this.isLoading = false;
+      },
+    });
+  }
+
+  openDetails(user: User) {
+    this.usersService.currentlyOpenUserEmail.set(user.emailAddress);
+  }
+
+  onRegistrarSelectionChange(e: MatSelectChange) {
+    if (e.value) {
+      this.usersService.fetchUsersForRegistrar(e.value).subscribe({
+        error: (err) => {
+          this._snackBar.open(err.error || err.message);
+        },
+        next: (users) => {
+          this.usersSelection = users;
+        },
+      });
+    }
+  }
+
+  submitExistingUser() {
+    this.isLoading = true;
+    if (this.selectedExistingUser) {
+      this.usersService
+        .createOrAddNewUser(this.selectedExistingUser)
+        .subscribe({
+          error: (err) => {
+            this._snackBar.open(err.error || err.message);
+            this.isLoading = false;
+          },
+          complete: () => {
+            this.isLoading = false;
+            this.selectingExistingUser = false;
+            this.loadUsers();
+          },
+        });
+    }
+  }
+}

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

@@ -0,0 +1,88 @@
+// 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, signal } from '@angular/core';
+import { switchMap, tap } from 'rxjs';
+import { RegistrarService } from '../registrar/registrar.service';
+import { BackendService } from '../shared/services/backend.service';
+
+export const roleToDescription = (role: string) => {
+  if (!role) return 'N/A';
+  else if (role === 'ACCOUNT_MANAGER') {
+    return 'Viewer';
+  }
+  return 'Editor';
+};
+
+export interface CreateAutoTimestamp {
+  creationTime: string;
+}
+
+export interface User {
+  emailAddress: string;
+  role: string;
+  password?: string;
+}
+
+@Injectable()
+export class UsersService {
+  users = signal<User[]>([]);
+  currentlyOpenUserEmail = signal<string>('');
+  isNewUser: boolean = false;
+
+  constructor(
+    private backendService: BackendService,
+    private registrarService: RegistrarService
+  ) {}
+
+  fetchUsersForRegistrar(registrarId: string) {
+    return this.backendService.getUsers(registrarId);
+  }
+
+  fetchUsers() {
+    return this.backendService
+      .getUsers(this.registrarService.registrarId())
+      .pipe(
+        tap((users: User[]) => {
+          this.users.set(users);
+        })
+      );
+  }
+
+  createOrAddNewUser(user: User) {
+    return this.backendService
+      .createUser(this.registrarService.registrarId(), user)
+      .pipe(
+        tap((newUser: User) => {
+          if (newUser) {
+            this.users.set([...this.users(), newUser]);
+            this.currentlyOpenUserEmail.set(newUser.emailAddress);
+            this.isNewUser = true;
+          }
+        })
+      );
+  }
+
+  deleteUser(user: User) {
+    return this.backendService
+      .deleteUser(this.registrarService.registrarId(), user)
+      .pipe(switchMap((_) => this.fetchUsers()));
+  }
+
+  updateUser(updatedUser: User) {
+    return this.backendService
+      .updateUser(this.registrarService.registrarId(), updatedUser)
+      .pipe(switchMap((_) => this.fetchUsers()));
+  }
+}

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

@@ -0,0 +1,26 @@
+<div class="console-app__users-table-wrapper">
+  <mat-table
+    [dataSource]="dataSource"
+    class="mat-elevation-z0"
+    class="console-app__users-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"
+      [class.rowSelected]="isRowSelected(row)"
+      (click)="onClick(row)"
+      (keyup.enter)="onClick(row)"
+      tabindex="0"
+    ></mat-row>
+  </mat-table>
+</div>

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

@@ -0,0 +1,14 @@
+.console-app {
+  &__users-table {
+    min-width: 616px;
+    .rowSelected {
+      background-color: var(--light-highlight);
+      font-weight: bold;
+    }
+  }
+
+  &__users-table-wrapper {
+    width: 100%;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,78 @@
+// Copyright 2024 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  effect,
+  EventEmitter,
+  input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { MaterialModule } from '../material.module';
+import { User, roleToDescription } from './users.service';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+
+export const columns = [
+  {
+    columnDef: 'emailAddress',
+    header: 'User email',
+    cell: (record: User) => `${record.emailAddress || ''}`,
+  },
+  {
+    columnDef: 'role',
+    header: 'User role',
+    cell: (record: User) => `${roleToDescription(record.role)}`,
+  },
+];
+
+@Component({
+  selector: 'app-users-list',
+  templateUrl: './usersList.component.html',
+  styleUrls: ['./usersList.component.scss'],
+  standalone: true,
+  imports: [MaterialModule, CommonModule],
+  providers: [],
+})
+export class UsersListComponent {
+  columns = columns;
+  displayedColumns = this.columns.map((c) => c.columnDef);
+  dataSource: MatTableDataSource<User>;
+  selectedRow!: User;
+  users = input<User[]>([]);
+  @Output() onSelect = new EventEmitter<User>();
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor() {
+    this.dataSource = new MatTableDataSource<User>(this.users());
+    effect(() => {
+      this.dataSource.data = this.users();
+    });
+  }
+
+  ngAfterViewInit() {
+    this.dataSource.sort = this.sort;
+  }
+
+  onClick(row: User) {
+    this.selectedRow = row;
+    this.onSelect.emit(row);
+  }
+
+  isRowSelected(row: User) {
+    return row === this.selectedRow;
+  }
+}

console-webapp/src/environments/environment.prod.ts

@@ -14,4 +14,5 @@
 
 export const environment = {
   production: true,
+  sandbox: false,
 };

console-webapp/src/environments/environment.sandbox.ts

@@ -11,3 +11,8 @@
 // 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.
+
+export const environment = {
+  production: false,
+  sandbox: true,
+};

console-webapp/src/environments/environment.ts

@@ -18,6 +18,7 @@
 
 export const environment = {
   production: false,
+  sandbox: false,
 };
 
 /*