add customizable password and domain component to be used in multiples views

app/src/components/reusableForms/DomainForm.vue

@@ -0,0 +1,191 @@
+<template>
+  <b-card header-tag="h2" class="basic-form">
+    <template v-slot:header>
+      <h2><icon iname="globe" /> {{ title }}</h2>
+    </template>
+
+    <b-form id="domain-form" @submit.prevent="onSubmit">
+      <slot name="message" />
+
+      <!-- DOMAIN -->
+      <b-form-radio
+        v-model="selected" name="domain-type" value="domain"
+        :class="domainIsVisible ? null : 'collapsed'"
+        :aria-expanded="domainIsVisible ? 'true' : 'false'"
+        aria-controls="collapse-domain"
+      >
+        {{ $t('domain_add_panel_with_domain') }}
+      </b-form-radio>
+
+      <b-collapse id="collapse-domain" :visible.sync="domainIsVisible">
+        <small v-html="$t('domain_add_dns_doc')" />
+
+        <b-form-group
+          label-cols="auto" class="mt-2"
+          :label="$t('domain_name')" label-for="input-domain" label-tag="strong"
+        >
+          <b-input
+            id="input-domain" :placeholder="$t('placeholder.domain')"
+            aria-describedby="domain-feedback"
+            v-model="form.domain" :state="isValid.domain"
+            @input="validateDomainName($event)"
+          />
+
+          <b-form-invalid-feedback id="domain-feedback" :state="isValid.domain">
+            {{ this.error.domain }}
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-collapse>
+
+      <!-- DYN DOMAIN -->
+      <b-form-radio
+        v-model="selected" name="domain-type" value="dynDomain"
+        :disabled="dynDnsForbiden"
+        :class="dynDomainIsVisible ? null : 'collapsed'"
+        :aria-expanded="dynDomainIsVisible ? 'true' : 'false'"
+        aria-controls="collapse-dynDomain"
+      >
+        {{ $t('domain_add_panel_without_domain') }}
+      </b-form-radio>
+
+      <b-collapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
+        <small>{{ $t('domain_add_dyndns_doc') }}</small>
+
+        <b-form-group
+          label-cols="auto" class="mt-2"
+          :label="$t('domain_name')" label-for="input-dynDomain"
+        >
+          <adress-input-select
+            id="input-dynDomain" feedback-id="dynDomain-feedback"
+            v-model="form.dynDomain" :options="dynDomains"
+            :state="isValid.dynDomain" :placeholder="$t('myserver')"
+            separator="."
+            @input="validateDomainName($event)"
+          />
+
+          <b-form-invalid-feedback id="dynDomain-feedback" :state="isValid.dynDomain">
+            {{ this.error.dynDomain }}
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-collapse>
+    </b-form>
+
+    <template v-slot:footer>
+      <b-button
+        type="submit" form="domain-form" variant="success"
+        :disabled="!everythingValid"
+      >
+        {{ submitText ? submitText : $t('add') }}
+      </b-button>
+    </template>
+  </b-card>
+</template>
+
+<script>
+import AdressInputSelect from '@/components/AdressInputSelect'
+
+export default {
+  name: 'DomainForm',
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    submitText: {
+      type: String,
+      default: null
+    },
+    isValid: {
+      type: Object,
+      default: () => ({
+        domainname: undefined,
+        dynDomainname: undefined
+      })
+    },
+    error: {
+      type: Object,
+      default: () => ({
+        domain: '',
+        dynDomain: ''
+      })
+    }
+  },
+
+  data () {
+    return {
+      selected: '',
+      dynDomains: ['nohost.me', 'noho.st', 'ynh.fr'],
+      form: {
+        domain: '',
+        dynDomain: ['', 'nohost.me']
+      }
+    }
+  },
+
+  computed: {
+    domains () {
+      return this.$store.state.data.domains
+    },
+
+    dynDnsForbiden () {
+      if (!this.domains) return true
+      return this.domains.some(domain => {
+        return this.dynDomains.some(dynDomain => domain.includes(dynDomain))
+      })
+    },
+
+    domainIsVisible () {
+      return this.selected === 'domain'
+    },
+
+    dynDomainIsVisible () {
+      return this.selected === 'dynDomain'
+    },
+
+    everythingValid () {
+      const domain = this.form[this.selected]
+      if (!domain || !domain[0]) return false
+      this.validateDomainName(domain)
+      return this.isValid[this.selected] !== false
+    }
+  },
+
+  methods: {
+    onSubmit () {
+      if (!this.everythingValid) return
+
+      const domainType = this.selected
+      const domain = this.form[domainType]
+      this.$emit('submit', {
+        domain: domainType === 'dynDomain' ? domain.join('.') : domain,
+        domainType
+      })
+    },
+
+    validateDomainName (name) {
+      const domainType = this.selected
+      const domainname = domainType === 'domain' ? name : name[0]
+      const regex = domainType === 'domain' ? '^[.a-z0-9-]+$' : '^[a-z0-9-]+$'
+      let error = ''
+      if (!domainname.match(regex) || (domainType === 'domain' ? !domainname.includes('.') : false)) {
+        error = this.$i18n.t(`form_errors.${domainType}_syntax`)
+      }
+      this.error[this.selected] = error
+      this.isValid[this.selected] = error === '' ? null : false
+    }
+  },
+
+  created () {
+    this.$store.dispatch('FETCH', { uri: 'domains' }).then(() => {
+      if (this.dynDnsForbiden) {
+        this.selected = 'domain'
+      }
+    })
+  },
+
+  components: {
+    AdressInputSelect
+  }
+}
+</script>

app/src/components/reusableForms/PasswordForm.vue

@@ -0,0 +1,119 @@
+<template>
+  <b-card header-tag="h2" class="basic-form">
+    <template v-slot:header>
+      <h2><icon iname="key-modern" /> {{ title }}</h2>
+    </template>
+
+    <b-form id="password-form" @submit.prevent="onSubmit">
+      <b-alert variant="warning" show>
+        {{ $t('good_practices_about_admin_password') }}
+      </b-alert>
+
+      <slot name="message" />
+
+      <hr>
+
+      <slot name="input" />
+
+      <!-- PASSWORD -->
+      <input-helper
+        id="password" type="password" :label="$t('password_new')"
+        v-model="form.password" :placeholder="$t('tools_adminpw_new_placeholder')"
+        :state="isValid.password" :error="error.password"
+        @input="validateNewPassword"
+      />
+
+      <!-- PASSWORD CONFIRMATION -->
+      <input-helper
+        id="confirmation" type="password" :label="$t('password_confirmation')"
+        v-model="form.confirmation" :placeholder="$t('tools_adminpw_confirm_placeholder')"
+        :state="isValid.confirmation" :error="$t('passwords_dont_match')"
+        @input="validateNewPassword"
+      />
+    </b-form>
+
+    <template v-slot:footer>
+      <b-button
+        type="submit" form="password-form" variant="success"
+        :disabled="!everythingValid"
+      >
+        {{ submitText ? submitText : $t('save') }}
+      </b-button>
+    </template>
+  </b-card>
+</template>
+
+<script>
+import InputHelper from '@/components/InputHelper'
+
+export default {
+  name: 'PasswordForm',
+
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    submitText: {
+      type: String,
+      default: null
+    },
+    isValid: {
+      type: Object,
+      default: () => ({
+        password: null,
+        confirmation: null
+      })
+    },
+    error: {
+      type: Object,
+      default: () => ({
+        password: '',
+        confirmation: ''
+      })
+    }
+  },
+
+  data () {
+    return {
+      form: {
+        password: '',
+        confirmation: ''
+      }
+    }
+  },
+
+  computed: {
+    everythingValid () {
+      for (const key in this.isValid) {
+        if (this.form[key] === '') return false
+        if (this.isValid[key] === false) return false
+      }
+      return true
+    }
+  },
+
+  methods: {
+    onSubmit () {
+      if (this.everythingValid) {
+        this.$emit('submit', this.form.password)
+      }
+    },
+
+    isValidPassword (password) {
+      return password.length >= 8 ? null : false
+    },
+
+    validateNewPassword () {
+      const { password, confirmation } = this.form
+      this.error.password = this.$i18n.t('passwords_too_short')
+      this.isValid.password = this.isValidPassword(password)
+      this.isValid.confirmation = password === confirmation ? null : false
+    }
+  },
+
+  components: {
+    InputHelper
+  }
+}
+</script>

app/src/components/reusableForms/index.js

@@ -0,0 +1,2 @@
+export { default as PasswordForm } from './PasswordForm'
+export { default as DomainForm } from './DomainForm'

app/src/store/info.js

@@ -37,8 +37,8 @@ export default {
     'DISCONNECT' ({ commit }, route) {
       commit('SET_CONNECTED', false)
       commit('SET_YUNOHOST_INFOS', null)
-      // Do not redirect if the current route is `login` so the view can display an error.
-      if (router.currentRoute.name === 'login') return
+      // Do not redirect if the current route needs to display an error.
+      if (['login', 'tool-adminpw'].includes(router.currentRoute.name)) return
       router.push({
         name: 'login',
         // Add a redirect query if next route is not unknown (like `logout`) or `login`
@@ -63,6 +63,7 @@ export default {
     'CHECK_INSTALL' ({ dispatch }, retry = 2) {
       // this action will try to query the `/installed` route 3 times every 5 s with
       // a timeout of the same delay.
+      // FIXME need testing with api not responding
       return timeout(api.get('installed'), 5000).then(({ installed }) => {
         return installed
       }).catch(err => {

app/src/views/domain/DomainAdd.vue

@@ -1,90 +1,22 @@
 <template lang="html">
-  <basic-form
-    :header="$t('domain_add')" :submit="$t('add')"
-    @submit.prevent="onSubmit"
-  >
-    <!-- DOMAIN -->
-    <b-form-radio
-      v-model="selected" name="domain-type" value="domain"
-      :class="domainIsVisible ? null : 'collapsed'"
-      :aria-expanded="domainIsVisible ? 'true' : 'false'"
-      aria-controls="collapse-domain"
-    >
-      {{ $t('domain_add_panel_with_domain') }}
-    </b-form-radio>
-
-    <b-collapse id="collapse-domain" :visible.sync="domainIsVisible">
-      <small v-html="$t('domain_add_dns_doc')" />
-
-      <b-form-group
-        label-cols="auto"
-        :label="$t('domain_name')" label-for="input-domain" label-tag="strong"
-      >
-        <b-input
-          id="input-domain" :placeholder="$t('placeholder.domain')"
-          aria-describedby="domain-feedback"
-          v-model="form.domain" :state="isValid.domain"
-          @input="validateDomainName($event)"
+  <domain-form
+    :title="$t('domain_add')"
+    :error="error" :is-valid="isValid"
+    @submit="onSubmit"
   />
-
-        <b-form-invalid-feedback id="domain-feedback" :state="isValid.domain">
-          {{ this.error.domain }}
-        </b-form-invalid-feedback>
-      </b-form-group>
-    </b-collapse>
-
-    <!-- DYN DOMAIN -->
-    <b-form-radio
-      v-model="selected" name="domain-type" value="dynDomain"
-      :disabled="dynDnsForbiden"
-      :class="dynDomainIsVisible ? null : 'collapsed'"
-      :aria-expanded="dynDomainIsVisible ? 'true' : 'false'"
-      aria-controls="collapse-dynDomain"
-    >
-      {{ $t('domain_add_panel_without_domain') }}
-    </b-form-radio>
-
-    <b-collapse id="collapse-dynDomain" :visible.sync="dynDomainIsVisible">
-      <small>{{ $t('domain_add_dyndns_doc') }}</small>
-
-      <b-form-group
-        label-cols="auto"
-        :label="$t('domain_name')" label-for="input-dynDomain"
-      >
-        <adress-input-select
-          id="input-dynDomain" feedback-id="dynDomain-feedback"
-          v-model="form.dynDomain" :options="dynDomains"
-          :state="isValid.dynDomain" :placeholder="$t('myserver')"
-          separator="."
-          @input="validateDomainName($event)"
-        />
-
-        <b-form-invalid-feedback id="dynDomain-feedback" :state="isValid.dynDomain">
-          {{ this.error.dynDomain }}
-        </b-form-invalid-feedback>
-      </b-form-group>
-    </b-collapse>
-  </basic-form>
 </template>
 
 <script>
-import BasicForm from '@/components/BasicForm'
-import AdressInputSelect from '@/components/AdressInputSelect'
+import { DomainForm } from '@/components/reusableForms'
 
 export default {
   name: 'DomainAdd',
 
   data () {
     return {
-      selected: '',
-      dynDomains: ['nohost.me', 'noho.st', 'ynh.fr'],
-      form: {
-        domain: '',
-        dynDomain: ['', 'nohost.me']
-      },
       isValid: {
-        domainname: null,
-        dynDomainname: null
+        domainname: undefined,
+        dynDomainname: undefined
       },
       error: {
         domain: '',
@@ -93,77 +25,25 @@ export default {
     }
   },
 
-  computed: {
-    domains () {
-      return this.$store.state.data.domains
-    },
-
-    dynDnsForbiden () {
-      if (!this.domains) return true
-      return this.domains.some(domain => {
-        return this.dynDomains.some(dynDomain => domain.includes(dynDomain))
-      })
-    },
-
-    domainIsVisible () {
-      return this.selected === 'domain'
-    },
-
-    dynDomainIsVisible () {
-      return this.selected === 'dynDomain'
-    }
-  },
-
   methods: {
-    onSubmit () {
-      const domainType = this.selected
-      this.validateDomainName(this.form[domainType])
-      if (this.isValid[domainType] === false) return
-
+    onSubmit ({ domain, domainType }) {
       const query = {
-        uri: 'domains',
-        data: { domain: this.form[domainType] },
+        uri: 'domains' + (domainType === 'dynDomain' ? '?dyndns' : ''),
+        data: { domain: domain },
         storeKey: 'domains'
       }
-      if (domainType === 'dynDomain') {
-        query.uri += '?dyndns'
-        query.data.domain = query.data.domain.join('.')
-      }
+
       this.$store.dispatch('POST', query).then(() => {
         this.$router.push({ name: 'domain-list' })
       }).catch(error => {
         this.error[domainType] = error.message
         this.isValid[domainType] = false
       })
-    },
-
-    validateDomainName (name) {
-      const domainType = this.selected
-      const domainname = domainType === 'domain' ? name : name[0]
-      const regex = domainType === 'domain' ? '^[.a-z0-9-]+$' : '^[a-z0-9-]+$'
-      let error = ''
-      if (!domainname.match(regex)) {
-        error = this.$i18n.t(`form_errors.${domainType}_syntax`)
     }
-      this.error[this.selected] = error
-      this.isValid[this.selected] = error === '' ? null : false
-    }
-  },
-
-  created () {
-    this.$store.dispatch('FETCH', { uri: 'domains' }).then(() => {
-      if (this.dynDnsForbiden) {
-        this.selected = 'domain'
-      }
-    })
   },
 
   components: {
-    AdressInputSelect,
-    BasicForm
+    DomainForm
   }
 }
 </script>
-
-<style lang="scss" scoped>
-</style>

app/src/views/tool/ToolAdminpw.vue

@@ -1,39 +1,25 @@
 <template>
-  <basic-form :header="$t('tools_adminpw')" @submit.prevent="onSubmit">
-    <b-alert variant="warning" show>
-      {{ $t('good_practices_about_admin_password') }}
-    </b-alert>
-
+  <password-form
+    :title="$t('postinstall_set_password')" :submit-text="$t('next')"
+    :error="error" :is-valid="isValid"
+    @submit="onSubmit"
+  >
+    <template v-slot:input>
       <!-- CURRENT ADMIN PASSWORD -->
       <input-helper
         id="current-password" type="password" :label="$t('tools_adminpw_current')"
-      v-model="form.currentPassword" :placeholder="$t('tools_adminpw_current_placeholder')"
+        v-model="currentPassword" :placeholder="$t('tools_adminpw_current_placeholder')"
         :state="isValid.currentPassword" :error="error.currentPassword"
         @input="validateCurrentPassword"
       />
-
       <hr>
-    <!-- NEW ADMIN PASSWORD -->
-    <input-helper
-      id="password" type="password" :label="$t('password_new')"
-      v-model="form.password" :placeholder="$t('tools_adminpw_new_placeholder')"
-      :state="isValid.password" :error="error.password"
-      @input="validateNewPassword"
-    />
-
-    <!-- NEW ADMIN PASSWORD CONFIRMATION -->
-    <input-helper
-      id="confirmation" type="password" :label="$t('password_confirmation')"
-      v-model="form.confirmation" :placeholder="$t('tools_adminpw_confirm_placeholder')"
-      :state="isValid.confirmation" :error="$t('passwords_dont_match')"
-      @input="validateNewPassword"
-    />
-  </basic-form>
+    </template>
+  </password-form>
 </template>
 
 <script>
 import api from '@/helpers/api'
-import BasicForm from '@/components/BasicForm'
+import { PasswordForm } from '@/components/reusableForms'
 import InputHelper from '@/components/InputHelper'
 
 export default {
@@ -41,34 +27,28 @@ export default {
 
   data () {
     return {
-      form: {
       currentPassword: '',
-        password: '',
-        confirmation: ''
-      },
       isValid: {
         currentPassword: null,
         password: null,
         confirmation: null
       },
       error: {
-        currentPassword: this.$i18n.t('passwords_too_short'),
-        password: this.$i18n.t('passwords_too_short')
+        currentPassword: '',
+        password: '',
+        confirmation: ''
       }
     }
   },
 
   methods: {
-    onSubmit () {
-      for (const key in this.isValid) {
-        if (this.isValid[key] === false) return
-      }
-      const { currentPassword, password } = this.form
-      api.post('login', { password: currentPassword }).then(() => {
+    onSubmit (password) {
+      if (this.isValid.currentPassword === false) return
+
+      api.post('login', { password: this.currentPassword }).then(() => {
         api.put('adminpw', { new_password: password }).then(() => {
-          this.$store.dispatch('LOGOUT').then(() => {
+          this.$store.dispatch('DISCONNECT')
           this.$router.push({ name: 'login' })
-          })
         }).catch(err => {
           this.error.password = err.message
           this.isValid.password = false
@@ -79,26 +59,15 @@ export default {
       })
     },
 
-    isValidPassword (password) {
-      return password.length >= 8 ? null : false
-    },
-
     validateCurrentPassword () {
       this.error.currentPassword = this.$i18n.t('passwords_too_short')
-      this.isValid.currentPassword = this.isValidPassword(this.form.currentPassword)
-    },
-
-    validateNewPassword () {
-      const { password, confirmation } = this.form
-      this.error.password = this.$i18n.t('passwords_too_short')
-      this.isValid.password = this.isValidPassword(password)
-      this.isValid.confirmation = password === confirmation ? null : false
+      this.isValid.currentPassword = this.currentPassword.length >= 8 ? null : false
     }
   },
 
   components: {
     InputHelper,
-    BasicForm
+    PasswordForm
   }
 }
 </script>