From abfd018a46de69f88680cf4ac362e91523e92054 Mon Sep 17 00:00:00 2001
From: ljf <ljf+git@grimaud.me>
Date: Mon, 13 Sep 2021 02:36:16 +0200
Subject: [PATCH] [enh] Improve UX in validation

---
 app/src/components/globals/CardForm.vue                    | 6 +++---
 app/src/components/globals/FormField.vue                   | 2 +-
 app/src/components/globals/formItems/ReadOnlyAlertItem.vue | 3 ++-
 app/src/helpers/yunohostArguments.js                       | 2 +-
 app/src/i18n/locales/en.json                               | 3 ++-
 app/src/views/user/UserList.vue                            | 1 -
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/src/components/globals/CardForm.vue b/app/src/components/globals/CardForm.vue
index 8dde1180..5bf3b128 100644
--- a/app/src/components/globals/CardForm.vue
+++ b/app/src/components/globals/CardForm.vue
@@ -46,12 +46,12 @@ 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.$invalid) {
-        return this.$t('invalid_form')
+      else if (this.validation && this.validation.$anyError) {
+        return this.$i18n.t('form_errors.invalid_form')
       } else return ''
     }
   },
diff --git a/app/src/components/globals/FormField.vue b/app/src/components/globals/FormField.vue
index 9a067eda..d7be17e1 100644
--- a/app/src/components/globals/FormField.vue
+++ b/app/src/components/globals/FormField.vue
@@ -36,7 +36,7 @@
         </div>
 
         <vue-showdown :markdown="description" flavor="github" v-if="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 -->
diff --git a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
index 8d73f0b0..2d7ffa42 100644
--- a/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
+++ b/app/src/components/globals/formItems/ReadOnlyAlertItem.vue
@@ -2,7 +2,8 @@
   <b-alert :variant="type" show>
     <icon :iname="icon_" />
     <vue-showdown :markdown="label" flavor="github"
-                  tag="span" class="markdown" />
+                  tag="span" class="markdown"
+    />
   </b-alert>
 </template>
 
diff --git a/app/src/helpers/yunohostArguments.js b/app/src/helpers/yunohostArguments.js
index bb2e23b2..44486987 100644
--- a/app/src/helpers/yunohostArguments.js
+++ b/app/src/helpers/yunohostArguments.js
@@ -100,7 +100,7 @@ export function formatYunoHostArgument (arg) {
         if (!isNaN(parseInt(arg.max))) {
           validation.maxValue = validators.maxValue(parseInt(arg.max))
         }
-        validation.numValue = validators.numeric
+        validation.numValue = validators.helpers.regex('Please provide an integer', new RegExp('^-?[0-9]+$'))
       }
     },
     {
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 345489b8..2e90353c 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -183,7 +183,8 @@
         "passwordMatch": "Passwords don't match.",
         "required": "Field is required.",
         "remote": "{message}",
-        "pattern": "{type}"
+        "pattern": "{type}",
+        "invalid_form": "The form contains some errors."
     },
     "form_input_example": "Example: {example}",
     "from_to": "from {0} to {1}",
diff --git a/app/src/views/user/UserList.vue b/app/src/views/user/UserList.vue
index 26f3cac3..98989745 100644
--- a/app/src/views/user/UserList.vue
+++ b/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>