Merge pull request #366 from YunoHost/config-panel

New config panel with file and other nice formitem

app/package.json

@@ -18,10 +18,12 @@
     "firacode": "^5.2.0",
     "fontsource-firago": "^3.1.5",
     "fork-awesome": "^1.1.7",
+    "simple-evaluate": "^1.4.3",
     "vue": "^2.6.12",
     "vue-i18n": "^8.24.1",
     "vue-router": "^3.5.1",
     "vuelidate": "^0.7.6",
+    "vue-showdown": "^2.4.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

app/src/api/errors.js

@@ -49,6 +49,7 @@ class APIBadRequestError extends APIError {
     super(method, response, errorData)
     this.name = 'APIBadRequestError'
     this.key = errorData.error_key
+    this.data = errorData
   }
 }
 

app/src/components/globals/CardForm.vue

@@ -11,8 +11,8 @@
 
         <slot name="server-error">
           <b-alert
-            variant="danger" class="my-3"
+            variant="danger" class="my-3" icon="ban"
-            :show="serverError !== ''" v-html="serverError"
+            :show="errorFeedback !== ''" v-html="errorFeedback"
           />
         </slot>
       </b-form>
@@ -46,7 +46,13 @@ export default {
 
   computed: {
     disabled () {
-      return this.validation ? this.validation.$invalid : false
+      return false // this.validation ? this.validation.$invalid : false
+    },
+    errorFeedback () {
+      if (this.serverError) return this.serverError
+      else if (this.validation && this.validation.$anyError) {
+        return this.$i18n.t('form_errors.invalid_form')
+      } else return ''
     }
   },
 

app/src/components/globals/FormField.vue

@@ -26,18 +26,17 @@
 
     <template #description>
       <!-- Render description -->
-      <template v-if="description || example || link">
+      <template v-if="description || link">
         <div class="d-flex">
-          <span v-if="example">{{ $t('form_input_example', { example }) }}</span>
+          <b-link v-if="link" :to="link" :href="link.href"
-
+                  class="ml-auto"
-          <b-link v-if="link" :to="link" class="ml-auto">
+          >
             {{ link.text }}
           </b-link>
         </div>
 
-        <div
+        <vue-showdown :markdown="description" flavor="github" v-if="description"
-          v-if="description" v-html="description"
+                      :class="{ ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant }"
-          :class="{ ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant }"
         />
       </template>
       <!-- Slot available to overwrite the one above -->
@@ -57,7 +56,6 @@ export default {
     id: { type: String, default: null },
     description: { type: String, default: null },
     descriptionVariant: { type: String, default: null },
-    example: { type: String, default: null },
     link: { type: Object, default: null },
     // Rendered field component props
     component: { type: String, default: 'InputItem' },

app/src/components/globals/formItems/FileItem.vue

@@ -1,15 +1,23 @@
 <template>
-  <b-form-file
+  <b-button-group class="w-100">
-    :id="id"
+    <b-button @click="clearFiles" variant="danger" v-if="!this.required && this.value !== null && !this.value._removed">
-    v-model="file"
+      <icon iname="trash" />
-    v-on="$listeners"
+    </b-button>
-    :placeholder="placeholder"
+    <b-form-file
-    :drop-placeholder="dropPlaceholder"
+      v-model="file"
-    :state="state"
+      ref="input-file"
-    :required="required"
+      :id="id"
-    :browse-text="$t('words.browse')"
+      v-on="$listeners"
-    @focusout.native="$parent.$emit('touch', name)"
+      :required="required"
-  />
+      :placeholder="_placeholder"
+      :accept="accept"
+      :drop-placeholder="dropPlaceholder"
+      :state="state"
+      :browse-text="$t('words.browse')"
+      @blur="$parent.$emit('touch', name)"
+      @focusout.native="$parent.$emit('touch', name)"
+    />
+  </b-button-group>
 </template>
 
 <script>
@@ -17,17 +25,41 @@ export default {
   name: 'FileItem',
 
   data () {
-    return { file: null }
+    return {
+      file: this.value
+    }
   },
 
   props: {
     id: { type: String, default: null },
-    placeholder: { type: String, default: null },
+    value: { type: [File, null], default: null },
+    placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
-    required: { type: Boolean, default: false },
+    accept: { type: String, default: null },
     state: { type: Boolean, default: null },
-    name: { type: String, default: null },
+    required: { type: Boolean, default: false },
-    accept: { type: String, default: null }
+    name: { type: String, default: null }
+  },
+
+  computed: {
+    _placeholder: function () {
+        return (this.value === null) ? this.placeholder : this.value.name
+    }
+  },
+
+  methods: {
+    clearFiles () {
+      const f = new File([''], this.placeholder)
+      f._removed = true
+      if (this.value && this.value.currentfile) {
+        this.$refs['input-file'].reset()
+        this.$emit('input', f)
+      } else {
+        this.$refs['input-file'].setFiles([f])
+        this.file = f
+        this.$emit('input', f)
+      }
+    }
   }
 }
 </script>

app/src/components/globals/formItems/InputItem.vue

@@ -7,14 +7,25 @@
     :type="type"
     :state="state"
     :required="required"
+    :min="min"
+    :max="max"
+    :step="step"
+    :trim="trim"
+    :autocomplete="autocomplete_"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
 
 <script>
+
 export default {
   name: 'InputItem',
 
+  data () {
+    return {
+      autocomplete_: (this.autocomplete) ? this.autocomplete : (this.type === 'password') ? 'new-password' : null
+    }
+  },
   props: {
     value: { type: [String, Number], default: null },
     id: { type: String, default: null },
@@ -22,6 +33,12 @@ export default {
     type: { type: String, default: 'text' },
     required: { type: Boolean, default: false },
     state: { type: Boolean, default: null },
+    min: { type: Number, default: null },
+    max: { type: Number, default: null },
+    step: { type: Number, default: null },
+    trim: { type: Boolean, default: true },
+    autocomplete: { type: String, default: null },
+    pattern: { type: Object, default: null },
     name: { type: String, default: null }
   }
 }

app/src/components/globals/formItems/MarkdownItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <vue-showdown :markdown="label" flavor="github" />
+</template>
+
+<script>
+export default {
+  name: 'MarkdownItem',
+
+  props: {
+    id: { type: String, default: null },
+    label: { type: String, default: null }
+  }
+}
+</script>
+

app/src/components/globals/formItems/ReadOnlyAlertItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <b-alert :variant="type" show>
+    <icon :iname="icon_" />
+    <vue-showdown :markdown="label" flavor="github"
+                  tag="span" class="markdown"
+    />
+  </b-alert>
+</template>
+
+<script>
+export default {
+  name: 'ReadOnlyAlertItem',
+
+  data () {
+    const icons = {
+      success: 'thumbs-up',
+      info: 'info',
+      warning: 'warning',
+      danger: 'ban'
+      }
+    return {
+      icon_: (this.icon) ? this.icon : icons[this.type]
+    }
+  },
+
+  props: {
+    id: { type: String, default: null },
+    label: { type: String, default: null },
+    type: { type: String, default: null },
+    icon: { type: String, default: null }
+  }
+}
+</script>
+
+<style lang="scss">
+.icon + span.markdown > *:first-child {
+  display: inline-block;
+}
+.alert p:last-child {
+  margin-bottom: 0;
+}
+</style>

app/src/components/globals/formItems/TagsItem.vue

@@ -0,0 +1,36 @@
+<template>
+  <b-form-tags
+    v-model="tags"
+    :id="id"
+    :placeholder="placeholder"
+    :required="required"
+    separator=" ,;"
+    :limit="limit"
+    remove-on-delete
+    :state="state"
+    v-on="$listeners"
+    @blur="$parent.$emit('touch', name)"
+  />
+</template>
+
+<script>
+export default {
+  name: 'TagsItem',
+
+  data () {
+    return {
+      tags: this.value
+    }
+  },
+  props: {
+    value: { type: Array, default: null },
+    id: { type: String, default: null },
+    placeholder: { type: String, default: null },
+    limit: { type: Number, default: null },
+    required: { type: Boolean, default: false },
+    state: { type: Boolean, default: null },
+    name: { type: String, default: null }
+  }
+}
+</script>
+

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -67,12 +67,15 @@
 
 <script>
 export default {
-  name: 'TagsSelectize',
+  name: 'TagsSelectizeItem',
 
   props: {
     value: { type: Array, required: true },
     options: { type: Array, required: true },
     id: { type: String, required: true },
+    placeholder: { type: String, default: null },
+    limit: { type: Number, default: null },
+    name: { type: String, default: null },
     itemsName: { type: String, required: true },
     disabledItems: { type: Array, default: () => ([]) },
     // By default `addTag` and `removeTag` have to be executed manually by listening to 'tag-update'.

app/src/components/globals/formItems/TextAreaItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <b-form-textarea
+    v-model="value"
+    :id="id"
+    :placeholder="placeholder"
+    :required="required"
+    :state="state"
+    rows="4"
+    v-on="$listeners"
+    @blur="$parent.$emit('touch', name)"
+  />
+</template>
+
+<script>
+export default {
+  name: 'TextAreaItem',
+
+  props: {
+    value: { type: String, default: null },
+    id: { type: String, default: null },
+    placeholder: { type: String, default: null },
+    type: { type: String, default: 'text' },
+    required: { type: Boolean, default: false },
+    state: { type: Boolean, default: null },
+    name: { type: String, default: null }
+  }
+}
+</script>

app/src/helpers/validators/customValidators.js

@@ -67,7 +67,6 @@ const unique = items => item => helpers.withParams(
   item => items ? !helpers.req(item) || !items.includes(item) : true
 )(item)
 
-
 export {
   alphalownum_,
   domain,

app/src/helpers/yunohostArguments.js

@@ -56,85 +56,201 @@ export function adressToFormValue (address) {
  * @return {Object} an formated argument containing formItem props, validation and base value.
  */
 export function formatYunoHostArgument (arg) {
-  let value = null
+  let value = (arg.value !== undefined) ? arg.value : (arg.current_value !== undefined) ? arg.current_value : null
   const validation = {}
+  const error = { message: null }
+  arg.ask = formatI18nField(arg.ask)
   const field = {
     component: undefined,
-    label: formatI18nField(arg.ask),
+    label: arg.ask,
     props: {}
   }
-
+  const defaultProps = ['id:name', 'placeholder:example']
-  if (arg.type === 'boolean') {
+  const components = [
-    field.id = arg.name
+    {
-  } else {
+      types: [undefined, 'string', 'path'],
-    field.props.id = arg.name
+      name: 'InputItem',
-  }
+      props: defaultProps.concat(['autocomplete', 'trim'])
-
+    },
-  // Some apps has an argument type `string` as type but expect a select since it has `choices`
+    {
-  if (arg.choices !== undefined) {
+      types: ['email', 'url', 'date', 'time', 'color'],
-    field.component = 'SelectItem'
+      name: 'InputItem',
-    field.props.choices = arg.choices
+      props: defaultProps.concat(['type', 'trim'])
-  // Input
+    },
-  } else if ([undefined, 'string', 'number', 'password', 'email'].includes(arg.type)) {
+    {
-    field.component = 'InputItem'
+      types: ['password'],
-    if (![undefined, 'string'].includes(arg.type)) {
+      name: 'InputItem',
-      field.props.type = arg.type
+      props: defaultProps.concat(['type', 'autocomplete', 'trim']),
-      if (arg.type === 'password') {
+      callback: function () {
-        field.description = i18n.t('good_practices_about_admin_password')
+        if (!arg.help) {
-        field.placeholder = '••••••••'
+          arg.help = 'good_practices_about_admin_password'
+        }
+        arg.example = '••••••••••••'
         validation.passwordLenght = validators.minLength(8)
       }
+    },
+    {
+      types: ['number', 'range'],
+      name: 'InputItem',
+      props: defaultProps.concat(['type', 'min', 'max', 'step']),
+      callback: function () {
+        if (!isNaN(parseInt(arg.min))) {
+          validation.minValue = validators.minValue(parseInt(arg.min))
+        }
+        if (!isNaN(parseInt(arg.max))) {
+          validation.maxValue = validators.maxValue(parseInt(arg.max))
+        }
+        validation.numValue = validators.helpers.regex('Please provide an integer', new RegExp('^-?[0-9]+$'))
+      }
+    },
+    {
+      types: ['select'],
+      name: 'SelectItem',
+      props: ['id:name', 'choices']
+    },
+    {
+      types: ['user', 'domain'],
+      name: 'SelectItem',
+      props: ['id:name', 'choices'],
+      callback: function () {
+        field.link = { name: arg.type + '-list', text: i18n.t(`manage_${arg.type}s`) }
+        field.props.choices = store.getters[arg.type + 'sAsChoices']
+        if (value) {
+          return
+        }
+        if (arg.type === 'domain') {
+          value = store.getters.mainDomain
+        } else {
+          value = field.props.choices.length ? field.props.choices[0].value : null
+        }
+      }
+    },
+    {
+      types: ['file'],
+      name: 'FileItem',
+      props: defaultProps.concat(['accept']),
+      callback: function () {
+        if (value) {
+          value = new File([''], value)
+          value.currentfile = true
+        }
+      }
+    },
+    {
+      types: ['text'],
+      name: 'TextAreaItem',
+      props: defaultProps
+    },
+    {
+      types: ['tags'],
+      name: 'TagsItem',
+      props: defaultProps.concat(['limit', 'placeholder', 'options:choices', 'tagIcon:icon']),
+      callback: function () {
+        if (arg.choices) {
+            this.name = 'TagsSelectizeItem'
+            field.props.auto = true
+            field.props.itemsName = ''
+            field.props.label = arg.placeholder
+        }
+        if (typeof value === 'string') {
+          value = value.split(',')
+        } else if (!value) {
+          value = []
+        }
+      }
+    },
+    {
+      types: ['boolean'],
+      name: 'CheckboxItem',
+      props: ['id:name', 'choices'],
+      callback: function () {
+        if (value !== null && value !== undefined) {
+          value = ['1', 'yes', 'y', 'true'].includes(String(value).toLowerCase())
+        } else if (arg.default !== null && arg.default !== undefined) {
+          value = ['1', 'yes', 'y', 'true'].includes(String(arg.default).toLowerCase())
+        }
+      }
+    },
+    {
+      types: ['alert'],
+      name: 'ReadOnlyAlertItem',
+      props: ['type:style', 'label:ask', 'icon'],
+      readonly: true
+    },
+    {
+      types: ['markdown', 'display_text'],
+      name: 'MarkdownItem',
+      props: ['label:ask'],
+      readonly: true
     }
-  // Checkbox
+  ]
-  } else if (arg.type === 'boolean') {
-    field.component = 'CheckboxItem'
-    if (typeof arg.default === 'number') {
-      value = arg.default === 1
-    } else {
-      value = arg.default || false
-    }
-  // Special (store related)
-  } else if (['user', 'domain'].includes(arg.type)) {
-    field.component = 'SelectItem'
-    field.link = { name: arg.type + '-list', text: i18n.t(`manage_${arg.type}s`) }
-    field.props.choices = store.getters[arg.type + 'sAsChoices']
-    if (arg.type === 'domain') {
-      value = store.getters.mainDomain
-    } else {
-      value = field.props.choices.length ? field.props.choices[0].value : null
-    }
 
-  // Unknown from the specs, try to display it as an input[text]
+  // Default type management if no one is filled
-  // FIXME throw an error instead ?
+  if (arg.type === undefined) {
-  } else {
+    arg.type = (arg.choices === undefined) ? 'string' : 'select'
-    field.component = 'InputItem'
   }
-
+  // Search the component bind to the type
+  const component = components.find(element => element.types.includes(arg.type))
+  if (component === undefined) throw new TypeError('Unknown type: ' + arg.type)
+  // Callback use for specific behaviour
+  if (component.callback) component.callback()
+  field.component = component.name
+  // Affect properties to the field Item
+  for (let prop of component.props) {
+    prop = prop.split(':')
+    const propName = prop[0]
+    const argName = prop.slice(-1)[0]
+    if (argName in arg) {
+      field.props[propName] = arg[argName]
+    }
+  }
+  // We don't want to display a label html item as this kind or field contains
+  // already the text to display
+  if (component.readonly) delete field.label
   // Required (no need for checkbox its value can't be null)
-  if (field.component !== 'CheckboxItem' && arg.optional !== true) {
+  else if (field.component !== 'CheckboxItem' && arg.optional !== true) {
     validation.required = validators.required
   }
+  if (arg.pattern) {
+    // validation.pattern = validators.helpers.withMessage(arg.pattern.error,
+    validation.pattern = validators.helpers.regex(arg.pattern.error, new RegExp(arg.pattern.regexp))
+  }
+  validation.remote = validators.helpers.withParams(error, (v) => {
+    const result = !error.message
+    error.message = null
+    return result
+  })
+
+
+  // field.props['title'] = field.pattern.error
   // Default value if still `null`
+  if (value === null && arg.current_value) {
+    value = arg.current_value
+  }
   if (value === null && arg.default) {
     value = arg.default
   }
+
   // Help message
   if (arg.help) {
     field.description = formatI18nField(arg.help)
   }
-  // Example
+
-  if (arg.example) {
+  // Help message
-    field.example = arg.example
+  if (arg.helpLink) {
-    if (field.component === 'InputItem') {
+    field.link = { href: arg.helpLink.href, text: i18n.t(arg.helpLink.text) }
-      field.props.placeholder = field.example
+  }
-    }
+
+  if (arg.visible) {
+    field.visible = arg.visible
   }
 
   return {
     value,
     field,
     // Return null instead of empty object if there's no validation
-    validation: Object.keys(validation).length === 0 ? null : validation
+    validation: Object.keys(validation).length === 0 ? null : validation,
+    error
   }
 }
 
@@ -148,10 +264,10 @@ export function formatYunoHostArgument (arg) {
  * @return {Object} an object containing all parsed values to be used in vue views.
  */
 export function formatYunoHostArguments (args, name = null) {
-  let disclaimer = null
   const form = {}
   const fields = {}
   const validations = {}
+  const errors = {}
 
   // FIXME yunohost should add the label field by default
   if (name) {
@@ -163,20 +279,35 @@ export function formatYunoHostArguments (args, name = null) {
   }
 
   for (const arg of args) {
-    if (arg.type === 'display_text') {
+    const { value, field, validation, error } = formatYunoHostArgument(arg)
-      disclaimer = formatI18nField(arg.ask)
+    fields[arg.name] = field
-    } else {
+    form[arg.name] = value
-      const { value, field, validation } = formatYunoHostArgument(arg)
+    if (validation) validations[arg.name] = validation
-      fields[arg.name] = field
+    errors[arg.name] = error
-      form[arg.name] = value
-      if (validation) validations[arg.name] = validation
-    }
   }
 
-  return { form, fields, validations, disclaimer }
+  return { form, fields, validations, errors }
 }
 
-
+export function pFileReader (file, output, key, base64 = true) {
+    return new Promise((resolve, reject) => {
+        const fr = new FileReader()
+        fr.onerror = reject
+        fr.onload = () => {
+          output[key] = fr.result
+          if (base64) {
+            output[key] = fr.result.replace(/data:[^;]*;base64,/, '')
+          }
+          output[key + '[name]'] = file.name
+          resolve()
+        }
+        if (base64) {
+          fr.readAsDataURL(file)
+        } else {
+          fr.readAsText(file)
+        }
+    })
+}
 /**
  * Format helper for a form value.
  * Convert Boolean to (1|0) and concatenate adresses.
@@ -206,12 +337,13 @@ export function formatFormDataValue (value) {
  */
 export function formatFormData (
   formData,
-  { extract = null, flatten = false, removeEmpty = true } = {}
+  { extract = null, flatten = false, removeEmpty = true, removeNull = false, promise = false } = {}
 ) {
   const output = {
     data: {},
     extracted: {}
   }
+  const promises = []
   for (const key in formData) {
     const type = extract && extract.includes(key) ? 'extracted' : 'data'
     const value = Array.isArray(formData[key])
@@ -220,6 +352,16 @@ export function formatFormData (
 
     if (removeEmpty && isEmptyValue(value)) {
       continue
+    } else if (removeNull && (value === null || value === undefined)) {
+      continue
+    } else if (value instanceof File) {
+      if (value.currentfile) {
+          continue
+      } else if (value._removed) {
+          output[type][key] = ''
+          continue
+      }
+      promises.push(pFileReader(value, output[type], key))
     } else if (flatten && isObjectLiteral(value)) {
       flattenObjectLiteral(value, output[type])
     } else {
@@ -227,5 +369,13 @@ export function formatFormData (
     }
   }
   const { data, extracted } = output
-  return extract ? { data, ...extracted } : data
+  if (promises.length > 0 || promise) {
+    return new Promise((resolve, reject) => {
+      Promise.all(promises).then((value) => {
+        resolve(data)
+      })
+    })
+  } else {
+    return extract ? { data, ...extracted } : data
+  }
 }

app/src/i18n/locales/en.json

@@ -176,11 +176,15 @@
         "githubLink": "URL must be a valid GitHub link to a repository",
         "name": "Names may not includes special characters except <code> ,.'-</code>",
         "minValue": "Value must be a number equal or greater than {min}.",
+        "maxValue": "Value must be a number equal or lesser than {max}.",
         "notInUsers": "The user '{value}' already exists.",
         "number": "Value must be a number.",
         "passwordLenght": "Password must be at least 8 characters long.",
         "passwordMatch": "Passwords don't match.",
-        "required": "Field is required."
+        "required": "Field is required.",
+        "remote": "{message}",
+        "pattern": "{type}",
+        "invalid_form": "The form contains some errors."
     },
     "form_input_example": "Example: {example}",
     "from_to": "from {0} to {1}",

app/src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
+import VueShowdown from 'vue-showdown'
 
 import i18n from './i18n'
 import router from './router'
@@ -11,7 +12,6 @@ import { registerGlobalErrorHandlers } from './api'
 
 Vue.config.productionTip = false
 
-
 // Styles are imported in `src/App.vue` <style>
 Vue.use(BootstrapVue, {
   BSkeleton: { animation: 'none' },
@@ -24,6 +24,11 @@ Vue.use(BootstrapVue, {
   }
 })
 
+Vue.use(VueShowdown, {
+  options: {
+    emoji: true
+  }
+})
 
 // Ugly wrapper for `$bvModal.msgBoxConfirm` to set default i18n button titles
 // FIXME find or wait for a better way
@@ -46,13 +51,14 @@ requireComponent.keys().forEach((fileName) => {
   Vue.component(component.name, component)
 })
 
-
 registerGlobalErrorHandlers()
 
 
-new Vue({
+const app = new Vue({
   i18n,
   router,
   store,
   render: h => h(App)
-}).$mount('#app')
+})
+
+app.$mount('#app')

app/src/views/app/AppActions.vue

@@ -15,14 +15,6 @@
         :validation="$v.actions[i]" :id="action.id + '-form'" :server-error="action.serverError"
         @submit.prevent="performAction(action)" :submit-text="$t('perform')"
       >
-        <template #disclaimer>
-          <div
-            v-if="action.formDisclaimer"
-            class="alert alert-info" v-html="action.formDisclaimer"
-          />
-          <b-card-text v-if="action.description" v-html="action.description" />
-        </template>
-
         <form-field
           v-for="(field, fname) in action.fields" :key="fname" label-cols="0"
           v-bind="field" v-model="action.form[fname]" :validation="$v.actions[i][fname]"
@@ -85,11 +77,10 @@ export default {
         const action = { name, id, serverError: '' }
         if (description) action.description = formatI18nField(description)
         if (arguments_ && arguments_.length) {
-          const { form, fields, validations, disclaimer } = formatYunoHostArguments(arguments_)
+          const { form, fields, validations } = formatYunoHostArguments(arguments_)
           action.form = form
           action.fields = fields
           if (validations) action.validations = validations
-          if (disclaimer) action.formDisclaimer = disclaimer
         }
         return action
       })

app/src/views/app/AppConfigPanel.vue

@@ -1,30 +1,40 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-form-skeleton">
     <template v-if="panels" #default>
-      <b-alert variant="warning" class="mb-4">
+      <b-tabs pills card vertical>
-        <icon iname="exclamation-triangle" /> {{ $t('experimental_warning') }}
+        <b-tab v-for="{ name, id: id_, sections, help, serverError } in panels"
-      </b-alert>
+               :key="id_"
+               :title="name"
+        >
+          <template #title>
+            <icon iname="wrench" /> {{ name }}
+          </template>
+          <card-form
+            :key="id_"
+            :title="name" icon="wrench" title-tag="h2"
+            :validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
+            @submit.prevent="applyConfig(id_)"
+          >
+            <template v-if="help" #disclaimer>
+              <div class="alert alert-info" v-html="help" />
+            </template>
 
-      <card-form
+            <template v-for="section in sections">
-        v-for="{ name, id: id_, sections, help, serverError } in panels" :key="id_"
+              <div :key="section.id" class="mb-5" v-if="isVisible(section.visible)">
-        :title="name" icon="wrench" title-tag="h4"
+                <b-card-title v-if="section.name" title-tag="h3">
-        :validation="$v.forms[id_]" :id="id_ + '-form'" :server-error="serverError"
+                  {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
-        collapsable
+                </b-card-title>
-        @submit.prevent="applyConfig(id_)"
+                <template v-for="(field, fname) in section.fields">
-      >
+                  <form-field :key="fname" v-model="forms[id_][fname]"
-        <template v-if="help" #disclaimer>
+                              :validation="$v.forms[id_][fname]"
-          <div class="alert alert-info" v-html="help" />
+                              v-if="isVisible(field.visible)" v-bind="field"
-        </template>
+                  />
-
+                </template>
-        <div v-for="section in sections" :key="section.id" class="mb-5">
+              </div>
-          <b-card-title>{{ section.name }} <small v-if="section.help">{{ section.help }}</small></b-card-title>
+            </template>
-
+          </card-form>
-          <form-field
+        </b-tab>
-            v-for="(field, fname) in section.fields" :key="fname" label-cols="0"
+      </b-tabs>
-            v-bind="field" v-model="forms[id_][fname]" :validation="$v.forms[id_][fname]"
-          />
-        </div>
-      </card-form>
     </template>
 
     <!-- if no config panel -->
@@ -36,10 +46,11 @@
 
 <script>
 import { validationMixin } from 'vuelidate'
+import evaluate from 'simple-evaluate'
 
 // FIXME needs test and rework
 import api, { objectToParams } from '@/api'
-import { formatI18nField, formatYunoHostArguments, formatFormData } from '@/helpers/yunohostArguments'
+import { formatI18nField, formatYunoHostArguments, formatFormData, pFileReader } from '@/helpers/yunohostArguments'
 
 export default {
   name: 'AppConfigPanel',
@@ -53,13 +64,14 @@ export default {
   data () {
     return {
       queries: [
-        ['GET', `apps/${this.id}/config-panel`],
+        ['GET', `apps/${this.id}/config-panel?full`],
         ['GET', { uri: 'domains' }],
         ['GET', { uri: 'domains/main', storeKey: 'main_domain' }],
         ['GET', { uri: 'users' }]
       ],
       panels: undefined,
       forms: undefined,
+      errors: undefined,
       validations: null
     }
   },
@@ -69,27 +81,71 @@ export default {
   },
 
   methods: {
+    isVisible (expression) {
+      if (!expression) return true
+      const context = {}
+
+      const promises = []
+      for (const args of Object.values(this.forms)) {
+        for (const shortname in args) {
+          if (args[shortname] instanceof File) {
+            if (expression.includes(shortname)) {
+              promises.push(pFileReader(args[shortname], context, shortname, false))
+            }
+          } else {
+            context[shortname] = args[shortname]
+          }
+        }
+      }
+      // Allow to use match(var,regexp) function
+      const matchRe = new RegExp('match\\(\\s*(\\w+)\\s*,\\s*"([^"]+)"\\s*\\)', 'g')
+      let i = 0
+      return new Promise((resolve, reject) => {
+        i = 2
+        resolve(false)
+        Promise.all(promises).then((value) => {
+          for (const matched of expression.matchAll(matchRe)) {
+              i++
+              const varName = matched[1] + '__re' + i.toString()
+              context[varName] = new RegExp(matched[2]).test(context[matched[1]])
+              expression = expression.replace(matched[0], varName)
+          }
+
+          try {
+              resolve(evaluate(context, expression))
+          } catch (error) {
+              resolve(false)
+          }
+        })
+      })
+    },
     onQueriesResponse (data) {
-      if (!data.config_panel || data.config_panel.length === 0) {
+      if (!data.panels || data.panels.length === 0) {
         this.panels = null
         return
       }
 
       const forms = {}
       const validations_ = {}
+      const errors_ = {}
       const panels_ = []
-      for (const { id, name, help, sections } of data.config_panel.panel) {
+      for (const { id, name, help, sections } of data.panels) {
-        const panel_ = { id, name, sections: [] }
+        const panel_ = { id, sections: [] }
+        if (name) panel_.name = formatI18nField(name)
         if (help) panel_.help = formatI18nField(help)
         forms[id] = {}
         validations_[id] = {}
-        for (const { name, help, options } of sections) {
+        errors_[id] = {}
-          const section_ = { name }
+        for (const { id_, name, help, visible, options } of sections) {
+          const section_ = { id: id_, visible }
           if (help) section_.help = formatI18nField(help)
-          const { form, fields, validations } = formatYunoHostArguments(options)
+          if (name) section_.name = formatI18nField(name)
+          const { form, fields, validations, errors } = formatYunoHostArguments(options)
           Object.assign(forms[id], form)
           Object.assign(validations_[id], validations)
-          panel_.sections.push({ name, fields })
+          Object.assign(errors_[id], errors)
+          section_.fields = fields
+          panel_.sections.push(section_)
         }
         panels_.push(panel_)
       }
@@ -97,23 +153,34 @@ export default {
       this.forms = forms
       this.validations = { forms: validations_ }
       this.panels = panels_
+      this.errors = errors_
     },
 
     applyConfig (id_) {
-      const args = objectToParams(formatFormData(this.forms[id_]))
+      formatFormData(this.forms[id_], { promise: true, removeEmpty: false, removeNull: true }).then((formatedData) => {
+        const args = objectToParams(formatedData)
 
-      api.put(
+        api.put(
-        `apps/${this.id}/config`, { args }, { key: 'apps.update_config', name: this.id }
+          `apps/${this.id}/config`, { key: id_, args }, { key: 'apps.update_config', name: this.id }
-      ).then(response => {
+        ).then(response => {
-        // FIXME what should be done ?
+        }).catch(err => {
-        /* eslint-disable-next-line */
+          if (err.name !== 'APIBadRequestError') throw err
-        console.log('SUCCESS', response)
+          const panel = this.panels.find(({ id }) => id_ === id)
-      }).catch(err => {
+          if (err.data.name) {
-        if (err.name !== 'APIBadRequestError') throw err
+            this.errors[id_][err.data.name].message = err.message
-        const panel = this.panels.find(({ id }) => id_ === id)
+          } else this.$set(panel, 'serverError', err.message)
-        this.$set(panel, 'serverError', err.message)
+        })
       })
     }
   }
 }
 </script>
+<style>
+h3.card-title {
+  margin-bottom: 1em;
+  border-bottom: solid 1px #aaa;
+}
+.form-control::placeholder, .form-file-text {
+  color: #6d7780;
+}
+</style>

app/src/views/app/AppInstall.vue

@@ -23,10 +23,6 @@
         :validation="$v" :server-error="serverError"
         @submit.prevent="performInstall"
       >
-        <template v-if="formDisclaimer" #disclaimer>
-          <div class="alert alert-info" v-html="formDisclaimer" />
-        </template>
-
         <form-field
           v-for="(field, fname) in fields" :key="fname" label-cols="0"
           v-bind="field" v-model="form[fname]" :validation="$v.form[fname]"
@@ -75,6 +71,7 @@ export default {
       form: undefined,
       fields: undefined,
       validations: null,
+      errors: undefined,
       serverError: ''
     }
   },
@@ -94,15 +91,15 @@ export default {
       manifest.multi_instance = this.$i18n.t(manifest.multi_instance ? 'yes' : 'no')
       this.infos = Object.fromEntries(infosKeys.map(key => [key, manifest[key]]))
 
-      const { form, fields, validations, disclaimer } = formatYunoHostArguments(
+      const { form, fields, validations, errors } = formatYunoHostArguments(
         manifest.arguments.install,
         manifest.name
       )
 
-      this.formDisclaimer = disclaimer
       this.fields = fields
       this.form = form
       this.validations = { form: validations }
+      this.errors = errors
     },
 
     async performInstall () {
@@ -120,7 +117,9 @@ export default {
         this.$router.push({ name: 'app-list' })
       }).catch(err => {
         if (err.name !== 'APIBadRequestError') throw err
-        this.serverError = err.message
+        if (err.data.name) {
+          this.errors[err.data.name].message = err.message
+        } else this.serverError = err.message
       })
     }
   }

app/src/views/group/GroupList.vue

@@ -44,7 +44,7 @@
             </p>
           </template>
           <template v-else>
-            <tags-selectize
+            <tags-selectize-item
               v-model="group.members" :options="usersOptions"
               :id="groupName + '-users'" :label="$t('group_add_member')"
               tag-icon="user" items-name="users"
@@ -60,7 +60,7 @@
           <strong>{{ $t('permissions') }}</strong>
         </b-col>
         <b-col>
-          <tags-selectize
+          <tags-selectize-item
             v-model="group.permissions" :options="permissionsOptions"
             :id="groupName + '-perms'" :label="$t('group_add_permission')"
             tag-icon="key-modern" items-name="permissions"
@@ -83,7 +83,7 @@
           </b-col>
 
           <b-col>
-            <tags-selectize
+            <tags-selectize-item
               v-model="userGroups[userName].permissions" :options="permissionsOptions"
               :id="userName + '-perms'" :label="$t('group_add_permission')"
               tag-icon="key-modern" items-name="permissions"
@@ -94,7 +94,7 @@
         <hr :key="index">
       </template>
 
-      <tags-selectize
+      <tags-selectize-item
         v-model="activeUserGroups" :options="usersOptions"
         id="user-groups" :label="$t('group_add_member')"
         no-tags items-name="users"
@@ -109,7 +109,7 @@ import Vue from 'vue'
 
 import api from '@/api'
 import { isEmptyValue } from '@/helpers/commons'
-import TagsSelectize from '@/components/TagsSelectize'
+import TagsSelectizeItem from '@/components/globals/formItems/TagsSelectizeItem'
 
 // TODO add global search with type (search by: group, user, permission)
 // TODO add vuex store update on inputs ?
@@ -117,7 +117,7 @@ export default {
   name: 'GroupList',
 
   components: {
-    TagsSelectize
+    TagsSelectizeItem
   },
 
   data () {

app/src/views/user/UserEdit.vue

@@ -205,12 +205,12 @@ export default {
           label: this.$i18n.t('password'),
           description: this.$i18n.t('good_practices_about_user_password'),
           descriptionVariant: 'warning',
-          props: { id: 'change_password', type: 'password', placeholder: '••••••••', autocomplete: "new-password" }
+          props: { id: 'change_password', type: 'password', placeholder: '••••••••', autocomplete: 'new-password' }
         },
 
         confirmation: {
           label: this.$i18n.t('password_confirmation'),
-          props: { id: 'confirmation', type: 'password', placeholder: '••••••••', autocomplete: "new-password" }
+          props: { id: 'confirmation', type: 'password', placeholder: '••••••••', autocomplete: 'new-password' }
         }
       }
     }

app/src/views/user/UserList.vue

@@ -26,7 +26,6 @@
           <icon iname="download" /> {{ $t('users_export') }}
         </b-dropdown-item>
       </b-dropdown>
-
     </template>
 
     <b-list-group>

app/vue.config.js

@@ -1,4 +1,5 @@
 const webpack = require('webpack')
+const fs = require('fs');
 
 const dateFnsLocales = [
   'ar',
@@ -58,17 +59,20 @@ module.exports = {
   },
   publicPath: '/yunohost/admin',
   devServer: {
+    public: fs.readFileSync('/etc/yunohost/current_host', 'utf8'),
     https: false,
     disableHostCheck: true,
     proxy: {
       '^/yunohost': {
         target: `http://${process.env.VUE_APP_IP}`,
         ws: true,
-        logLevel: 'debug'
+        logLevel: 'info'
       }
     },
     watchOptions: {
-      ignored: /node_modules/
+      ignored: /node_modules/,
-    }
+      aggregateTimeout: 300,
+      poll: 1000
+    },
   }
 }