ui: New page to list providers features

ui/src/lib/components/Header.svelte

@@ -144,6 +144,9 @@
                         {$t('menu.my-providers')}
                     </DropdownItem>
                     <DropdownItem divider />
+                    <DropdownItem href="/providers/features">
+                        {$t('menu.provider-features')}
+                    </DropdownItem>
                     <DropdownItem href="/resolver">
                         {$t('menu.dns-resolver')}
                     </DropdownItem>

ui/src/lib/locales/en.json

@@ -184,6 +184,7 @@
         "dns-resolver": "DNS resolver",
         "my-account": "My account",
         "logout": "Sign out",
+        "provider-features": "Supported providers",
         "signup": "Sign up",
         "signin": "Sign in",
         "quick-menu": "Quick Access"
@@ -297,6 +298,7 @@
     "record": {
         "A": "IPv4 address",
         "AAAA": "IPv6 address",
+        "common-records": "Common records",
         "Expire": "Expire",
         "Mbox": "Administration e-mail",
         "Minttl": "Negative cache TTL",

ui/src/lib/locales/fr.json

@@ -177,6 +177,7 @@
         "dns-resolver": "Résolveur DNS",
         "my-account": "Mon compte",
         "logout": "Se déconnecter",
+        "provider-features": "Fournisseurs supportés",
         "signup": "S'inscrire",
         "signin": "S'identifier",
         "quick-menu": "Accès rapide",
@@ -270,6 +271,7 @@
     "record": {
         "A": "Adresse IPv4",
         "AAAA": "Adresse IPv6",
+        "common-records": "Enregistrements courants",
         "Expire": "Expiration",
         "Mbox": "E-mail de l'administrateur",
         "Minttl": "Cache TTL négatif",

ui/src/routes/providers/features/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+ import {
+     Container,
+     Icon,
+     Table,
+     Spinner,
+ } from 'sveltestrap';
+
+ import { listProviders } from '$lib/api/provider_specs';
+ import ImgProvider from '$lib/components/providers/ImgProvider.svelte';
+ import { t } from '$lib/translations';
+
+ const capabilities = [
+     "ListDomains",
+     "rr-1-A",
+     "rr-257-CAA",
+     "rr-61-OPENPGPKEY",
+     "rr-12-PTR",
+     "rr-33-SRV",
+     "rr-44-SSHFP",
+     "rr-52-TLSA",
+ ];
+</script>
+
+<Container class="d-flex flex-column flex-fill" fluid>
+    {#await listProviders()}
+        <Spinner size="lg" />
+    {:then providers}
+        <div
+            style="overflow-x: scroll"
+        >
+        <Table
+            hover
+        >
+            <thead>
+                <tr>
+                    <th>Fournisseurs</th>
+                    {#each capabilities as cap}
+                        <th class="text-center" style="white-space: nowrap;">
+                            {#if cap == 'rr-1-A'}
+                                {$t('record.common-records')}
+                            {:else if cap.startsWith('rr-')}
+                                {$t('common.records', { n: 2, type: cap.slice(cap.lastIndexOf('-')+1) })}
+                            {:else}
+                                {$t('provider.capability.' + cap, { default: cap })}
+                            {/if}
+                        </th>
+                    {/each}
+                </tr>
+            </thead>
+            <tbody>
+                {#each Object.keys(providers) as ptype (ptype)}
+                    {@const provider = providers[ptype]}
+                    <tr>
+                        <td class="text-center">
+                            <ImgProvider
+                                {ptype}
+                                style="max-width: 100%; max-height: 2.5em"
+                            /><br>
+                            <strong>
+                                {provider.name}
+                            </strong>
+                        </td>
+                        {#each capabilities as cap}
+                            <td
+                                class="align-middle text-center"
+                                class:table-danger={!provider.capabilities.includes(cap)}
+                                class:table-success={provider.capabilities.includes(cap)}
+                            >
+                                {#if provider.capabilities.includes(cap)}
+                                    <Icon name="check-lg" />
+                                {:else}
+                                    <Icon name="x-lg" />
+                                {/if}
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            </tbody>
+        </Table>
+        </div>
+    {/await}
+</Container>