feat(webapp): add SVCB, HTTPS input validation

webapp/src/components/Field/Record.vue

@@ -12,7 +12,7 @@
         :class="hideLabel ? 'pt-0' : ''"
         :disabled="disabled"
         :readonly="readonly"
-        :placeholder="required ? ' ' : '(optional)'"
+        :placeholder="required && !field.optional ? ' ' : '(optional)'"
         :hide-details="!content.length || !($v.fields.$each[index].$invalid || $v.fields[index].$invalid)"
         :error="$v.fields.$each[index].$invalid || $v.fields[index].$invalid"
         :error-messages="fieldErrorMessages(index)"
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { required as requiredValidator } from 'vuelidate/lib/validators';
+import { requiredUnless } from 'vuelidate/lib/validators';
 
 export default {
   name: 'Record',
@@ -104,7 +104,7 @@ export default {
     const validations = {
       fields: {
         $each: {
-          value: this.required ? { requiredValidator } : {},
+          value: this.required ? { required: requiredUnless('optional') } : {},
         },
       },
     };

webapp/src/components/Field/Record/HTTPS.vue

@@ -0,0 +1,8 @@
+<script>
+import RecordSVCB from './SVCB.vue';
+
+export default {
+  name: 'RecordHTTPS',
+  extends: RecordSVCB,
+};
+</script>

webapp/src/components/Field/Record/SVCB.vue

@@ -0,0 +1,29 @@
+<script>
+import { helpers, integer, between } from 'vuelidate/lib/validators';
+import Record from '../Record.vue';
+
+// Allow for root label only
+const hostname = helpers.regex('hostname', /^((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))?[.]?$/);
+const trailingDot = helpers.regex('trailingDot', /[.]$/);
+
+const MAX16 = 65535;
+const int16 = between(0, MAX16);
+
+export default {
+  name: 'RecordDNSKEY',
+  extends: Record,
+  data: () => ({
+    fields: [
+      { label: 'Priority', validations: { integer, int16 } },
+      { label: 'Target Name', validations: { hostname, trailingDot } },
+      { label: 'Service Parameters', validations: { }, optional: true },
+    ],
+    errors: {
+      integer: 'Please enter an integer.',
+      int16: `0 ≤ … ≤ ${MAX16}`,
+      hostname: 'Please enter a valid hostname.',
+      trailingDot: 'Hostname must end with a dot.',
+    },
+  }),
+};
+</script>

webapp/src/components/Field/RecordList.vue

@@ -39,12 +39,14 @@ import RecordCDS from './Record/CDS.vue';
 import RecordCNAME from './Record/CNAME.vue';
 import RecordDNSKEY from './Record/DNSKEY.vue';
 import RecordDS from './Record/DS.vue';
+import RecordHTTPS from './Record/HTTPS.vue';
 import RecordMX from './Record/MX.vue';
 import RecordNS from './Record/NS.vue';
 import RecordOPENPGPKEY from './Record/OPENPGPKEY.vue';
 import RecordPTR from './Record/PTR.vue';
 import RecordSMIMEA from './Record/SMIMEA.vue';
 import RecordSRV from './Record/SRV.vue';
+import RecordSVCB from './Record/SVCB.vue';
 import RecordTLSA from './Record/TLSA.vue';
 import RecordTXT from './Record/TXT.vue';
 import RecordSubnet from './Record/Subnet.vue';
@@ -61,12 +63,14 @@ export default {
     RecordCNAME,
     RecordDNSKEY,
     RecordDS,
+    RecordHTTPS,
     RecordMX,
     RecordNS,
     RecordOPENPGPKEY,
     RecordPTR,
     RecordSMIMEA,
     RecordSRV,
+    RecordSVCB,
     RecordTLSA,
     RecordTXT,
     RecordSubnet,
@@ -109,6 +113,7 @@ export default {
         'CNAME',
         'DNSKEY',
         'DS',
+        'HTTPS',
         'MX',
         'NS',
         'OPENPGPKEY',
@@ -116,6 +121,7 @@ export default {
         'SMIMEA',
         'SPF',
         'SRV',
+        'SVCB',
         'TLSA',
         'TXT',
         'Subnet'