From 679cbde646a688d7d298d40d8746e1e9588af809 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 15:55:21 +0100
Subject: [PATCH 1/6] clean CardForm old disable mecanism

---
 app/src/components/globals/CardForm.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 5bf3b128..784851c0 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -19,10 +19,7 @@
     </template>
 
     <slot v-if="!noFooter" name="buttons" slot="buttons">
-      <b-button
-        type="submit" variant="success"
-        :form="id" :disabled="disabled"
-      >
+      <b-button type="submit" variant="success" :form="id">
         {{ submitText ? submitText : $t('save') }}
       </b-button>
     </slot>
@@ -45,9 +42,6 @@ export default {
   },
 
   computed: {
-    disabled () {
-      return false // this.validation ? this.validation.$invalid : false
-    },
     errorFeedback () {
       if (this.serverError) return this.serverError
       else if (this.validation && this.validation.$anyError) {

From fd21c9f406fafc064585afcafb014309c9392c4f Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 15:56:14 +0100
Subject: [PATCH 2/6] allow i18n error messages with pattern validation

---
 app/src/helpers/yunohostArguments.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index 06eb385e..0fc02bbd 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -218,8 +218,7 @@ export function formatYunoHostArgument (arg) {
     validation.required = validators.required
   }
   if (arg.pattern && arg.type !== 'tags') {
-    // validation.pattern = validators.helpers.withMessage(arg.pattern.error,
-    validation.pattern = validators.helpers.regex(arg.pattern.error, new RegExp(arg.pattern.regexp))
+    validation.pattern = validators.helpers.regex(formatI18nField(arg.pattern.error), new RegExp(arg.pattern.regexp))
   }
   validation.remote = validators.helpers.withParams(error, (v) => {
     const result = !error.message

From 4547427ac3782db2c85e3a94f9325fc0e46ddbc5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 15:56:39 +0100
Subject: [PATCH 3/6] improve TopBar buttons responsiveness

---
 app/src/components/globals/TopBar.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/src/components/globals/TopBar.vue b/app/src/components/globals/TopBar.vue
index a02ecab4..18fb7db2 100644
--- a/app/src/components/globals/TopBar.vue
+++ b/app/src/components/globals/TopBar.vue
@@ -47,28 +47,29 @@ export default {
 
 <style lang="scss" scoped>
 #top-bar {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   flex-wrap: wrap-reverse;
 
   .top-bar-group {
     display: flex;
+    margin-bottom: 1rem;
   }
 
   @include media-breakpoint-down(xs) {
     .top-bar-group {
       flex-direction: column-reverse;
     }
-
-    ::v-deep .btn:not(:first-of-type) {
-      margin-bottom: .25rem;
-    }
   }
 
   @include media-breakpoint-down(sm) {
     flex-direction: column-reverse;
 
-    #top-bar-left ~ #top-bar-right {
-      margin-bottom: 1rem;
+    #top-bar-right {
+      margin-bottom: .75rem;
+
+      ::v-deep > * {
+        margin-bottom: .25rem;
+      }
     }
 
     .top-bar-group {

From 343966a2aeb63139986d5af4ed796b4f367a4b8e Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 17:43:07 +0100
Subject: [PATCH 4/6] move FileItem specific style to its component

---
 app/src/components/globals/formItems/FileItem.vue | 10 ++++++++++
 app/src/views/app/AppConfigPanel.vue              |  7 ++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index bbc4f9f4..8dca3b7b 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -63,3 +63,13 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+::v-deep .custom-file-label {
+  color: $input-placeholder-color;
+
+  .btn-danger + .b-form-file & {
+    color: $input-color;
+  }
+}
+</style>
diff --git a/app/src/views/app/AppConfigPanel.vue b/app/src/views/app/AppConfigPanel.vue
index 4df0021e..274a6e2d 100644
--- a/app/src/views/app/AppConfigPanel.vue
+++ b/app/src/views/app/AppConfigPanel.vue
@@ -182,12 +182,9 @@ export default {
   }
 }
 </script>
-<style>
-h3.card-title {
+<style lang="scss" scoped>
+h3 {
   margin-bottom: 1em;
   border-bottom: solid 1px #aaa;
 }
-.form-control::placeholder, .form-file-text {
-  color: #6d7780;
-}
 </style>

From a19f57c6d6f1fdaf3334ad9affcf04ef1507ee9c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 18:32:01 +0100
Subject: [PATCH 5/6] add TabForm component that act like CardForm

---
 app/src/components/globals/TabForm.vue | 82 ++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 app/src/components/globals/TabForm.vue

diff --git a/app/src/components/globals/TabForm.vue b/app/src/components/globals/TabForm.vue
new file mode 100644
index 00000000..2d8c3d7a
--- /dev/null
+++ b/app/src/components/globals/TabForm.vue
@@ -0,0 +1,82 @@
+<template>
+  <b-tab no-body>
+    <template #title>
+      <icon :iname="icon" /> {{ name }}
+    </template>
+
+    <b-card-body>
+      <slot name="disclaimer" />
+
+
+      <b-form
+        :id="id" :inline="inline" :class="formClasses"
+        @submit.prevent="onSubmit" novalidate
+      >
+        <slot name="default" />
+
+        <slot name="server-error">
+          <b-alert
+            variant="danger" class="my-3" icon="ban"
+            :show="errorFeedback !== ''" v-html="errorFeedback"
+          />
+        </slot>
+      </b-form>
+    </b-card-body>
+
+    <b-card-footer>
+      <b-button type="submit" variant="success" :form="id">
+        {{ submitText ? submitText : $t('save') }}
+      </b-button>
+    </b-card-footer>
+  </b-tab>
+</template>
+
+<script>
+
+export default {
+  name: 'TabForm',
+
+  props: {
+    id: { type: String, default: 'ynh-form' },
+    submitText: { type: String, default: null },
+    validation: { type: Object, default: null },
+    serverError: { type: String, default: '' },
+    inline: { type: Boolean, default: false },
+    formClasses: { type: [Array, String, Object], default: null },
+    name: { type: String, required: true },
+    icon: { type: String, default: 'wrench' }
+  },
+
+  computed: {
+    errorFeedback () {
+      if (this.serverError) return this.serverError
+      else if (this.validation && this.validation.$anyError) {
+        return this.$i18n.t('form_errors.invalid_form')
+      } else return ''
+    }
+  },
+
+  methods: {
+    onSubmit (e) {
+      const v = this.validation
+      if (v) {
+        v.$touch()
+        if (v.$pending || v.$invalid) return
+      }
+      this.$emit('submit', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  & > *:not(:first-child) {
+    margin-left: .5rem;
+  }
+}
+</style>

From 71f1e672897362beee6f9e49e34af89315d723bd Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 5 Jan 2022 18:34:24 +0100
Subject: [PATCH 6/6] update AppConfigPanel with TabForm

---
 app/src/views/app/AppConfigPanel.vue | 57 ++++++++++++----------------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/app/src/views/app/AppConfigPanel.vue b/app/src/views/app/AppConfigPanel.vue
index 274a6e2d..4983d40f 100644
--- a/app/src/views/app/AppConfigPanel.vue
+++ b/app/src/views/app/AppConfigPanel.vue
@@ -1,41 +1,32 @@
 <template>
   <view-base :queries="queries" @queries-response="onQueriesResponse" skeleton="card-form-skeleton">
-    <template v-if="panels" #default>
-      <b-tabs pills card vertical>
-        <b-tab v-for="{ name, id: id_, sections, help, serverError } in panels"
-               :key="id_"
-               :title="name"
+    <b-card v-if="panels" no-body>
+      <b-tabs fill pills card>
+        <tab-form
+          v-for="{ name, id: id_, sections, help, serverError } in panels" :key="id_"
+          v-bind="{ name, id: id_ + '-form', validation: $v.forms[id_], serverError }"
         >
-          <template #title>
-            <icon iname="wrench" /> {{ name }}
+          <template v-if="help" #disclaimer>
+            <div class="alert alert-info" v-html="help" />
           </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>
 
-            <template v-for="section in sections">
-              <div :key="section.id" class="mb-5" v-if="isVisible(section.visible, section)">
-                <b-card-title v-if="section.name" title-tag="h3">
-                  {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
-                </b-card-title>
-                <template v-for="(field, fname) in section.fields">
-                  <form-field :key="fname" v-model="forms[id_][fname]"
-                              :validation="$v.forms[id_][fname]"
-                              v-if="isVisible(field.visible, field)" v-bind="field"
-                  />
-                </template>
-              </div>
-            </template>
-          </card-form>
-        </b-tab>
+          <template v-for="section in sections">
+            <div v-if="isVisible(section.visible, section)" :key="section.id" class="mb-5">
+              <b-card-title v-if="section.name" title-tag="h3">
+                {{ section.name }} <small v-if="section.help">{{ section.help }}</small>
+              </b-card-title>
+
+              <template v-for="(field, fname) in section.fields">
+                <form-field
+                  v-if="isVisible(field.visible, field)" :key="fname"
+                  v-model="forms[id_][fname]" v-bind="field" :validation="$v.forms[id_][fname]"
+                />
+              </template>
+            </div>
+          </template>
+        </tab-form>
       </b-tabs>
-    </template>
+    </b-card>
 
     <!-- if no config panel -->
     <b-alert v-else-if="panels === null" variant="warning">
@@ -117,6 +108,7 @@ export default {
       // This value should be updated magically when vuejs will detect isVisible changed
       return field.isVisible
     },
+
     onQueriesResponse (data) {
       if (!data.panels || data.panels.length === 0) {
         this.panels = null
@@ -182,6 +174,7 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
 h3 {
   margin-bottom: 1em;