domain: add third domain add choice for local/test domains

app/src/i18n/locales/en.json

@@ -247,6 +247,8 @@
             "from_registrar_desc": "You will need to manually configure DNS records on your registrar to finalize this domain's configuration. YunoHost's diagnosis will guide you about what DNS records to configure exactly.",
             "from_yunohost": "I don't own a domain, I want to register/use a free DynDNS domain provided by the YunoHost project",
             "from_yunohost_desc": "The YunoHost project maintains a free 'DynDNS' service. It is limited to one such domain per server (though you can also add sub-domains later using the other 'Add a domain I own, or a subdomain' option above). The DNS configuration will be automatically handled by YunoHost. This is ideal when starting up with self-hosting in general and you don't want to invest in a domain name yet. However, on the medium/long-term, we recommend buying your very own domain name to some registrar to have full ownership of your domain.",
+            "from_local": "I want a domain for local usage / test only",
+            "from_local_desc": "if you don't want an \"actual\" public domain name, you can use anything ending in <code>.local</code> or <code>.test</code>. Domain names ending in <code>.local</code> are special in the sense that they may automatically be resolved on the local network, assuming the clients support the Bonjour protocol. Alternatively, you may need to tweak the <code>/etc/hosts</code> file (or equivalent on Windows) on every client that you want to use this domain from, or to configure local DNS entries on your internet router.",
             "dyn_dns_password": "Domain recovery password",
             "dyn_dns_password_desc": "This password will allow you to later recover control of the domain if you reinstall your system. If you already registered this domain previously, use your recovery password here to reclaim it."
         },

app/src/views/_partials/DomainForm.vue

@@ -13,6 +13,7 @@
       :class="domainIsVisible ? null : 'collapsed'"
       :aria-expanded="domainIsVisible ? 'true' : 'false'"
       aria-controls="collapse-domain"
+      class="mb-2"
     >
       {{ $t('domain.add.from_registrar') }}
     </b-form-radio>
@@ -35,13 +36,14 @@
       :class="dynDomainIsVisible ? null : 'collapsed'"
       :aria-expanded="dynDomainIsVisible ? 'true' : 'false'"
       aria-controls="collapse-dynDomain"
+      class="mb-2"
     >
       {{ $t('domain.add.from_yunohost') }}
     </b-form-radio>
 
     <b-collapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
       <p class="mt-2 alert alert-info">
-        <icon iname='info-circle' />
+        <icon iname="info-circle" />
         {{ $t('domain.add.from_yunohost_desc') }}
       </p>
 
@@ -64,6 +66,28 @@
       />
     </b-collapse>
     <div v-if="dynDnsForbiden" class="alert alert-warning mt-2" v-html="$t('domain_add_dyndns_forbidden')" />
+
+    <b-form-radio
+      v-model="selected" name="domain-type" value="localDomain"
+      :class="localDomainIsVisible ? null : 'collapsed'"
+      :aria-expanded="localDomainIsVisible ? 'true' : 'false'"
+      aria-controls="collapse-localDomain"
+    >
+      {{ $t('domain.add.from_local') }}
+    </b-form-radio>
+
+    <b-collapse id="collapse-localDomain" :visible.sync="localDomainIsVisible">
+      <p class="mt-2 alert alert-info">
+        <icon iname='info-circle' />
+        <span v-html="$t('domain.add.from_local_desc')" />
+      </p>
+
+      <form-field v-bind="fields.localDomain" :validation="$v.form.localDomain" class="mt-3">
+        <template #default="{ self }">
+          <adress-input-select v-bind="self" v-model="form.localDomain" />
+        </template>
+      </form-field>
+    </b-collapse>
   </card-form>
 </template>
 
@@ -92,7 +116,8 @@ export default {
         domain: '',
         dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
         dynDomainPassword: '',
-        dynDomainPasswordConfirmation: ''
+        dynDomainPasswordConfirmation: '',
+        localDomain: { localPart: '', separator: '.', domain: 'local' },
       },
 
       fields: {
@@ -108,7 +133,7 @@ export default {
           label: this.$i18n.t('domain_name'),
           props: {
             id: 'dyn-domain',
-            placeholder: this.$i18n.t('myserver'),
+            placeholder: this.$i18n.t('placeholder.domain').split(".")[0],
             type: 'domain',
             choices: ['nohost.me', 'noho.st', 'ynh.fr']
           }
@@ -131,6 +156,16 @@ export default {
             placeholder: '••••••••',
             type: 'password'
           }
+        },
+
+        localDomain: {
+          label: this.$i18n.t('domain_name'),
+          props: {
+            id: 'dyn-domain',
+            placeholder: this.$i18n.t('placeholder.domain').split(".")[0],
+            type: 'domain',
+            choices: ['local', 'test']
+          }
         }
       }
     }
@@ -153,14 +188,22 @@ export default {
 
     dynDomainIsVisible () {
       return this.selected === 'dynDomain'
+    },
+
+    localDomainIsVisible () {
+      return this.selected === 'localDomain'
     }
   },
 
   validations () {
     return {
       selected: { required },
-      form: this.selected === 'domain'
-        ? { domain: { required, domain } }
+      form: ['domain', 'localDomain'].includes(this.selected)
+        ? {
+          [this.selected]: this.selected === 'domain'
+            ? { required, domain }
+            : { localPart: { required, dynDomain } }
+        }
         : {
           dynDomain: { localPart: { required, dynDomain } },
           dynDomainPassword: { passwordLenght: minLength(8) },