feat(webapp): also display DNSKEY in domain info, closes #475

webapp/src/views/Console/DomainDetailsDialog.vue

@@ -23,10 +23,10 @@
         Your domain <b>{{ name }}</b> has been successfully created!
       </v-alert>
       <v-card-text>
+        <div class="mt-2 subtitle-1"><v-icon>mdi-numeric-1-circle</v-icon> Delegate your domain</div>
         <p>
-          Please forward the following information to the organization/person where you bought the domain
-          <code>{{name}}</code>
-          (usually your provider or technical administrator):
+          Forward the following information to the organization/person where you bought the domain
+          <strong>{{name}}</strong> (usually your provider or technical administrator):
         </p>
         <v-layout flex align-end>
           <div class="caption font-weight-medium">NS records</div>
@@ -48,6 +48,17 @@
                 v-clipboard:error="() => (copied = '')"
         >{{ ns.join('\n') }}</pre>
 
+        <p>
+          Once your provider processes this information, the Internet will start directing DNS queries to deSEC.
+        </p>
+
+        <div class="subtitle-1"><v-icon>mdi-numeric-2-circle</v-icon> Enable DNSSEC</div>
+        <p>
+          You also need to forward <strong>either the <span class="code">DS</span> records <em>or</em> the
+          <span class="code">DNSKEY</span> record(s)</strong> to your domain provider (depending on what they accept).
+          This is required to enable DNSSEC security.
+        </p>
+
         <div v-if="ds.length > 0">
           <v-layout flex align-end>
             <div class="caption font-weight-medium">DS records</div>
@@ -74,7 +85,31 @@
           <p>(unavailable, please contact support)</p>
         </div>
 
-        <p>Once your domain registrar processes this information, your deSEC DNS setup will be ready to use.</p>
+        <div v-if="dnskey.length > 0">
+          <v-layout flex align-end>
+            <div class="caption font-weight-medium">DNSKEY records</div>
+            <!--v-spacer></v-spacer>
+            <div v-if="copied != 'dnskey'">
+              <v-icon
+                      small
+                      v-clipboard:copy="dnskey.join('\n')"
+                      v-clipboard:success="() => (copied = 'dnskey')"
+                      v-clipboard:error="() => (copied = '')"
+              >mdi-content-copy</v-icon>
+            </div>
+            <div v-else>copied! <v-icon small>mdi-check</v-icon></div-->
+          </v-layout>
+          <pre
+                  class="mb-3 pa-3"
+                  v-clipboard:copy="dnskey.join('\n')"
+                  v-clipboard:success="() => (copied = 'dnskey')"
+                  v-clipboard:error="() => (copied = '')"
+          >{{ dnskey.join('\n') }}</pre>
+        </div>
+        <div v-else>
+          <div class="caption font-weight-medium">DNSKEY records</div>
+          <p>(unavailable, please contact support)</p>
+        </div>
 
         <div v-if="this.LOCAL_PUBLIC_SUFFIXES.some((suffix) => name.endsWith(`.${suffix}`))">
           <v-divider class="pb-3"></v-divider>
@@ -88,6 +123,13 @@
           </ul>
         </div>
         <p>
+          All set up correctly? <a :href="`https://dnssec-analyzer.verisignlabs.com/${name}`" target="_blank">Take a
+          look at DNSSEC Analyzer to check the status of your domain.</a>
+        </p>
+
+        <v-divider></v-divider>
+
+        <p class="mt-4">
           The DNS information of this domain was last changed {{ published ? timeAgo.format(new Date(published)) : 'never' }}.
         </p>
       </v-card-text>
@@ -126,6 +168,10 @@ export default {
       type: Array,
       required: true,
     },
+    dnskey: {
+      type: Array,
+      required: true,
+    },
     ns: {
       type: Array,
       default: () => process.env.VUE_APP_DESECSTACK_NS.split(' '),
@@ -171,6 +217,9 @@ export default {
   .caption {
     text-transform: uppercase;
   }
+  .code {
+    font-family: monospace;
+  }
   pre {
     background: lightgray;
     overflow: auto;

webapp/src/views/DomainList.vue

@@ -83,7 +83,8 @@ export default {
           }
           let ds = d.keys.map(key => key.ds);
           ds = ds.concat.apply([], ds)
-          this.extraComponentBind = {'name': d.name, 'ds': ds, 'published': d.published, 'is-new': isNew};
+          let dnskey = d.keys.map(key => key.dnskey);
+          this.extraComponentBind = {'name': d.name, 'ds': ds, 'dnskey': dnskey, 'published': d.published, 'is-new': isNew};
           if (process.env.VUE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ').some((suffix) => d.name.endsWith(`.${suffix}`))) {
             this.extraComponentBind['ips'] = [];
             await withWorking(this.error, async (o) => {