ui: Display associated record types to services

model/usersettings.go

@@ -59,13 +59,17 @@ type UserSettings struct {
 
 	// ZoneView keeps the view of the zone wanted by the user.
 	ZoneView int `json:"zoneview"`
+
+	// ShowRRTypes tells if we show equivalent RRTypes in interface (for advanced users).
+	ShowRRTypes bool `json:"showrrtypes,omitempty"`
 }
 
 func DefaultUserSettings() *UserSettings {
 	return &UserSettings{
-		Language:   "en",
-		Newsletter: false,
-		FieldHint:  FIELDHINT_FOCUSED,
-		ZoneView:   ZONEVIEW_GRID,
+		Language:    "en",
+		Newsletter:  false,
+		FieldHint:   FIELDHINT_FOCUSED,
+		ZoneView:    ZONEVIEW_GRID,
+		ShowRRTypes: false,
 	}
 }

services/caa.go

@@ -252,7 +252,7 @@ func init() {
 		},
 		caa_analyze,
 		ServiceInfos{
-			Name:        "Certification Authority Authorization (CAA)",
+			Name:        "Certification Authority Authorization",
 			Description: "Indicate to certificate authorities whether they are authorized to issue digital certificates for a particular domain name.",
 			Categories: []string{
 				"tls",

ui/src/lib/components/ServiceSelectorItem.svelte

@@ -6,7 +6,9 @@
      ListGroupItem,
  } from 'sveltestrap';
 
+ import { nsrrtype } from '$lib/dns';
  import type { ServiceInfos } from '$lib/model/service_specs';
+ import { userSession } from '$lib/stores/usersession';
 
  const dispatch = createEventDispatcher();
 
@@ -46,5 +48,15 @@
                 </Badge>
             {/each}
         {/if}
+        {#if svc.record_types && $userSession.settings && $userSession.settings.showrrtypes}
+            {#each svc.record_types as rtype}
+                <Badge
+                    color="info"
+                    class="float-end ms-1"
+                >
+                    {nsrrtype(rtype)}
+                </Badge>
+            {/each}
+        {/if}
     </div>
 </ListGroupItem>

ui/src/lib/components/UserSettingsForm.svelte

@@ -119,6 +119,12 @@
             </Button>
         </ButtonGroup>
     </div>
+    <div class="mb-3">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="showrrtypes" bind:checked={settings.showrrtypes}>
+            <label class="form-check-label" for="showrrtypes">{$t('settings.showrrtypes')}</label>
+        </div>
+    </div>
     <div class="d-flex justify-content-around">
         <Button
             type="submit"

ui/src/lib/components/domains/Service.svelte

@@ -16,6 +16,7 @@
  } from 'sveltestrap';
 
  import { deleteZoneService, getServiceRecords, updateZoneService } from '$lib/api/zone';
+ import { nsrrtype } from '$lib/dns';
  import Record from '$lib/components/domains/Record.svelte';
  import ResourceInput from '$lib/components/ResourceInput.svelte';
  import type { Domain, DomainInList } from '$lib/model/domain';
@@ -88,14 +89,22 @@
         </div>
     {:else if $userSession.settings.zoneview === ZoneViewGrid}
         <CardBody>
-            {#if service && $servicesSpecs[service._svctype].categories && $servicesSpecs[service._svctype].categories.length}
+            {#if service && $servicesSpecs[service._svctype].categories && $servicesSpecs[service._svctype].categories.length && !$userSession.settings.showrrtypes}
                 <div class="float-end">
                     {#each $servicesSpecs[service._svctype].categories as category}
-                        <Badge color="info" class="me-1">
+                        <Badge color="secondary" class="me-1">
                             {category}
                         </Badge>
                     {/each}
                 </div>
+            {:else if $userSession.settings.showrrtypes && service && $servicesSpecs[service._svctype].record_types && $servicesSpecs[service._svctype].record_types.length}
+                <div class="float-end">
+                    {#each $servicesSpecs[service._svctype].record_types as rrtype}
+                        <Badge color="info" class="me-1">
+                            {nsrrtype(rrtype)}
+                        </Badge>
+                    {/each}
+                </div>
             {/if}
             <CardTitle>
                 {#if service}

ui/src/lib/locales/en.json

@@ -292,9 +292,10 @@
         },
         "language": "Language",
         "save": "Save settings",
-        "title": "Settings",
+        "showrrtypes": "Show resource type associated with services (for users familiar with DNS)",
         "success": "Continue to enjoy happyDomain.",
         "success-change": "Your settings has been saved.",
+        "title": "Settings",
         "zoneview": {
             "grid": "Grid view (easiest)",
             "list": "List view (fastest)",

ui/src/lib/locales/fr.json

@@ -265,9 +265,10 @@
         },
         "language": "Langue",
         "save": "Enregistrer les paramètres",
-        "title": "Paramètres",
+        "showrrtypes": "Afficher les types d'enregistrement associés aux services (pour les utilisateurs familiers de la terminologie DNS)",
         "success": "Vous pouvez continuer d'apprécier happyDomain.",
         "success-change": "Vos paramètres ont été sauvegardés.",
+        "title": "Paramètres",
         "zoneview": {
             "grid": "Vue en grille (la plus lisible)",
             "list": "Vue en liste (la plus rapide)",

ui/src/lib/model/service_specs.ts

@@ -39,7 +39,7 @@ export function passRestrictions(svcinfo: ServiceInfos, provider_specs: Provider
 
             for (const needType of svcinfo.restrictions.needTypes) {
                 if (availableResourceTypes.indexOf(needType) < 0) {
-                    return 'is not available on svcinfo domain name hosting provider.';
+                    return 'is not available on this domain name hosting provider.';
                 }
             }
         }

ui/src/lib/model/usersettings.ts

@@ -12,4 +12,5 @@ export interface UserSettings {
     newsletter: boolean;
     fieldhint: number;
     zoneview: number;
+    showrrtypes: boolean;
 }