display both a-labels and u-labels for idn

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "zonemaster-gui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "zonemaster-gui",
-      "version": "4.1.0",
+      "version": "4.1.1",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@angular/animations": "^13.3.11",
@@ -22,6 +22,7 @@
         "bootstrap": "^5.2.0",
         "file-saver": "^2.0.2",
         "fork-awesome": "^1.2.0",
+        "punycode": "^2.3.1",
         "rxjs": "^6.6.0",
         "showdown": "^1.9.1",
         "tslib": "^2.0.0",
@@ -10061,10 +10062,9 @@
       "optional": true
     },
     "node_modules/punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "engines": {
         "node": ">=6"
       }
@@ -19506,10 +19506,9 @@
       "optional": true
     },
     "punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="
     },
     "qs": {
       "version": "6.11.0",

package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^5.2.0",
     "file-saver": "^2.0.2",
     "fork-awesome": "^1.2.0",
+    "punycode": "^2.3.1",
     "rxjs": "^6.6.0",
     "showdown": "^1.9.1",
     "tslib": "^2.0.0",

src/app/components/result/result.component.html

@@ -8,9 +8,13 @@
 <section class="result">
   <div>
     <div>
-      <h2><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<strong>{{ form.domain }}</strong></h2>
+      <h2>
+        <ng-container i18n="result subheader">Test result for</ng-container>
+        <strong> {{ unicodeDomain }}</strong>
+        <ng-container *ngIf="form.domain !== unicodeDomain"> ({{ form.domain }})</ng-container>
+      </h2>
       <div class="result-metadata">
-        <p class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container>&nbsp;<time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''">{{ test.creation_time | date:'medium' }}</time></p>
+        <p class="result-test-datetime"><ng-container i18n="result test metadata">Created on</ng-container><time [dateTime]="test.creation_time ? test.creation_time.toISOString() : ''"> {{ test.creation_time | date:'medium' }}</time></p>
 
         <div class="actions-btn">
           <div>

src/app/components/result/result.component.ts

@@ -9,6 +9,7 @@ import { AlertService } from '../../services/alert.service';
 import { NavigationService } from '../../services/navigation.service';
 import { formatDate, Location } from '@angular/common';
 import { Title } from '@angular/platform-browser';
+import * as punycode from 'punycode/';
 
 @Component({
   selector: 'app-result',
@@ -24,6 +25,7 @@ export class ResultComponent implements OnInit, OnDestroy {
 
   public displayForm = false;
   public form = {ipv4: true, ipv6: true, profile: 'default_profile', domain: ''};
+  public unicodeDomain = '';
   public result = [];
   public modules: any;
   public severity_icons = {
@@ -136,6 +138,7 @@ export class ResultComponent implements OnInit, OnDestroy {
       this.historyQuery = data['params'];
       this.result = data['results'];
       this.form = data['params'];
+      this.unicodeDomain = punycode.toUnicode(this.form.domain);
       this.testCaseDescriptions = data['testcase_descriptions'];
 
       this.testCasesCount = this.displayResult(this.result, resetCollapsed);
@@ -164,7 +167,7 @@ export class ResultComponent implements OnInit, OnDestroy {
           });
       }
 
-      this.titleService.setTitle(`${this.form.domain} · Zonemaster`);
+      this.titleService.setTitle(`${this.unicodeDomain} · Zonemaster`);
     }, error => {
       this.alertService.error($localize `No data for this test.`)
     });

src/app/components/run-test/run-test.component.ts

@@ -6,6 +6,7 @@ import { AlertService } from '../../services/alert.service';
 import { AppService } from '../../services/app.service';
 import { Title } from '@angular/platform-browser';
 import { FormComponent } from '../form/form.component';
+import * as punycode from 'punycode/';
 
 @Component({
   selector: 'app-run-test',
@@ -71,7 +72,9 @@ export class RunTestComponent implements OnInit {
       testId = id as string;
       this.showProgressBar = true;
 
-      this.titleService.setTitle(`${data['domain']} · Zonemaster`);
+      const unicodeDomain = punycode.toUnicode(data['domain']);
+
+      this.titleService.setTitle(`${unicodeDomain} · Zonemaster`);
 
       const handle = setInterval(() => {
         self.dnsCheckService.testProgress(testId).then(res => {