domain: add recovery password in DomainForm

app/src/i18n/locales/en.json

@@ -242,6 +242,14 @@
     "disabled": "Disabled",
     "dns": "DNS",
     "domain": {
+        "add": {
+            "from_registrar": "I want to add a domain I own",
+            "from_registrar_desc": "Depending on your registrar, you'll have different ways of <a href='//yunohost.org/dns_config' target='_blank'>setting up the DNS configuration</a>. YunoHost's diagnosis will guide you about what DNS records to configure",
+            "from_yunohost": "I want to add or register a YunoHost's free service domain",
+            "from_yunohost_desc": "YunoHost domain service will automatically handle the DNS configuration for you.",
+            "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, use your password here to reclaim it."
+        },
         "cert": {
             "types": {
                 "letsencrypt": "Let's Encrypt",
@@ -289,11 +297,7 @@
         }
     },
     "domain_add": "Add domain",
-    "domain_add_dns_doc": "… and I have <a href='//yunohost.org/dns_config' target='_blank'>set my DNS correctly</a>.",
-    "domain_add_dyndns_doc": "… and I want a dynamic DNS service.",
     "domain_add_dyndns_forbidden": "You have already subscribed to a DynDNS domain, you can ask to remove your current DynDNS domain on the forum <a href='//forum.yunohost.org/t/nohost-domain-recovery-suppression-de-domaine-en-nohost-me-noho-st-et-ynh-fr/442'>in the dedicated thread</a>.",
-    "domain_add_panel_with_domain": "I already have a domain name…",
-    "domain_add_panel_without_domain": "I don't have a domain name…",
     "domain_default_desc": "The default domain is the connection domain where users log in.",
     "domain_default_longdesc": "This is your default domain.",
     "domain_delete_forbidden_desc": "You cannot remove '{domain}' since it's the default domain, you need to choose another domain (or <a href='#/domains/add'>add a new one</a>) and set it as the default domain to be able to remove this one.",

app/src/views/PostInstall.vue

@@ -86,6 +86,7 @@ import { validationMixin } from 'vuelidate'
 import api from '@/api'
 import { DomainForm } from '@/views/_partials'
 import Login from '@/views/Login.vue'
+import { formatFormData } from '@/helpers/yunohostArguments'
 import { alphalownum_, required, minLength, name, sameAs } from '@/helpers/validators'
 
 export default {
@@ -103,6 +104,7 @@ export default {
       step: 'start',
       serverError: '',
       domain: undefined,
+      dyndns_recovery_password: '',
       user: {
         username: '',
         fullname: '',
@@ -142,8 +144,9 @@ export default {
       this.step = step
     },
 
-    setDomain ({ domain }) {
+    setDomain ({ domain, dyndns_recovery_password }) {
       this.domain = domain
+      this.dyndns_recovery_password = dyndns_recovery_password
       this.goToStep('user')
     },
 
@@ -155,13 +158,15 @@ export default {
       this.performPostInstall()
     },
 
-    performPostInstall (force = false) {
+    async performPostInstall (force = false) {
-      const data = {
+      const data = await formatFormData({
         domain: this.domain,
+        dyndns_recovery_password: this.dyndns_recovery_password,
         username: this.user.username,
         fullname: this.user.fullname,
-        password: this.user.password
+        password: this.user.password,
-      }
+      })
+
       // FIXME does the api will throw an error for bad passwords ?
       api.post(
         'postinstall' + (force ? '?force_diskspace' : ''),

app/src/views/_partials/DomainForm.vue

@@ -14,11 +14,11 @@
       :aria-expanded="domainIsVisible ? 'true' : 'false'"
       aria-controls="collapse-domain"
     >
-      {{ $t('domain_add_panel_with_domain') }}
+      {{ $t('domain.add.from_registrar') }}
     </b-form-radio>
 
     <b-collapse id="collapse-domain" :visible.sync="domainIsVisible">
-      <small v-html="$t('domain_add_dns_doc')" />
+      <small v-html="$t('domain.add.from_registrar_desc')" />
 
       <form-field
         v-bind="fields.domain" v-model="form.domain"
@@ -33,17 +33,29 @@
       :aria-expanded="dynDomainIsVisible ? 'true' : 'false'"
       aria-controls="collapse-dynDomain"
     >
-      {{ $t('domain_add_panel_without_domain') }}
+      {{ $t('domain.add.from_yunohost') }}
     </b-form-radio>
 
     <b-collapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
-      <small>{{ $t('domain_add_dyndns_doc') }}</small>
+      <small>{{ $t('domain.add.from_yunohost_desc') }}</small>
 
       <form-field v-bind="fields.dynDomain" :validation="$v.form.dynDomain" class="mt-3">
         <template #default="{ self }">
           <adress-input-select v-bind="self" v-model="form.dynDomain" />
         </template>
       </form-field>
+
+      <form-field
+        v-bind="fields.dynDomainPassword"
+        :validation="$v.form.dynDomainPassword"
+        v-model="form.dynDomainPassword"
+      />
+
+      <form-field
+        v-bind="fields.dynDomainPasswordConfirmation"
+        :validation="$v.form.dynDomainPasswordConfirmation"
+        v-model="form.dynDomainPasswordConfirmation"
+      />
     </b-collapse>
     <div v-if="dynDnsForbiden" class="alert alert-warning mt-2" v-html="$t('domain_add_dyndns_forbidden')" />
   </card-form>
@@ -54,8 +66,8 @@ import { mapGetters } from 'vuex'
 import { validationMixin } from 'vuelidate'
 
 import AdressInputSelect from '@/components/AdressInputSelect.vue'
-import { formatFormDataValue } from '@/helpers/yunohostArguments'
+import { formatFormData } from '@/helpers/yunohostArguments'
-import { required, domain, dynDomain } from '@/helpers/validators'
+import { required, domain, dynDomain, minLength, sameAs } from '@/helpers/validators'
 
 export default {
   name: 'DomainForm',
@@ -72,7 +84,9 @@ export default {
 
       form: {
         domain: '',
-        dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' }
+        dynDomain: { localPart: '', separator: '.', domain: 'nohost.me' },
+        dynDomainPassword: '',
+        dynDomainPasswordConfirmation: ''
       },
 
       fields: {
@@ -92,6 +106,25 @@ export default {
             type: 'domain',
             choices: ['nohost.me', 'noho.st', 'ynh.fr']
           }
+        },
+
+        dynDomainPassword: {
+          label: this.$i18n.t('domain.add.dyn_dns_password'),
+          description: this.$i18n.t('domain.add.dyn_dns_password_desc'),
+          props: {
+            id: 'dyn-dns-password',
+            placeholder: '••••••••',
+            type: 'password'
+          }
+        },
+
+        dynDomainPasswordConfirmation: {
+          label: this.$i18n.t('password_confirmation'),
+          props: {
+            id: 'dyn-dns-password-confirmation',
+            placeholder: '••••••••',
+            type: 'password'
+          }
         }
       }
     }
@@ -120,18 +153,26 @@ export default {
   validations () {
     return {
       selected: { required },
-      form: {
+      form: this.selected === 'domain'
-        domain: this.selected === 'domain' ? { required, domain } : {},
+        ? { domain: { required, domain } }
-        dynDomain: { localPart: this.selected === 'dynDomain' ? { required, dynDomain } : {} }
+        : {
-      }
+          dynDomain: { localPart: { required, dynDomain } },
+          dynDomainPassword: { passwordLenght: minLength(8) },
+          dynDomainPasswordConfirmation: { passwordMatch: sameAs('dynDomainPassword') }
+        }
     }
   },
 
   methods: {
     async onSubmit () {
       const domainType = this.selected
-      const domain = await formatFormDataValue(this.form[domainType])
+      const form = await formatFormData({
-      this.$emit('submit', { domain, domainType })
+        domain: this.form[domainType],
+        dyndns_recovery_password: domainType === 'dynDomain'
+          ? this.form.dynDomainPassword
+          : ''
+      })
+      this.$emit('submit', form)
     }
   },
 

app/src/views/domain/DomainAdd.vue

@@ -24,11 +24,11 @@ export default {
   },
 
   methods: {
-    onSubmit ({ domain, domainType }) {
+    onSubmit (data) {
-      const uri = 'domains' + (domainType === 'dynDomain' ? '?dyndns' : '')
       api.post(
-        { uri, storeKey: 'domains' }, { domain }, { key: 'domains.add', name: domain }
+        'domains', data, { key: 'domains.add', name: data.domain }
       ).then(() => {
+        this.$store.dispatch('RESET_CACHE_DATA', ['domains'])
         this.$router.push({ name: 'domain-list' })
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err