update BasicForm to receive validations object and some base behavior

app/src/components/BasicForm.vue

@@ -1,13 +1,26 @@
 <template>
-  <b-card :header="header" header-tag="h2" class="basic-form">
-    <b-form :id="id" @submit="$emit('submit', $event)">
-      <slot />
+  <b-card class="basic-form">
+    <template v-slot:header>
+      <h2><icon v-if="icon" :iname="icon" /> {{ title }}</h2>
+    </template>
+
+    <slot name="disclaimer"></slot>
+
+    <b-form :id="id" @submit.prevent="onSubmit" novalidate>
+      <slot name="default" />
+
+      <slot name="server-error">
+        <b-alert variant="danger" :show="serverError !== ''" v-html="serverError" />
+      </slot>
     </b-form>
 
     <template v-if="!noFooter" v-slot:footer>
       <slot name="buttons">
-        <b-button type="submit" :form="id" variant="success">
-          {{ submit ? submit : $t('save') }}
+        <b-button
+          type="submit" variant="success"
+          :form="id" :disabled="disabled"
+        >
+          {{ submitText ? submitText : $t('save') }}
         </b-button>
       </slot>
     </template>
@@ -15,14 +28,35 @@
 </template>
 
 <script>
+
 export default {
   name: 'BasicForm',
 
   props: {
-    header: { type: String, required: true },
     id: { type: String, default: 'ynh-form' },
-    submit: { type: String, default: null },
-    noFooter: { type: Boolean, default: false }
+    title: { type: String, required: true },
+    icon: { type: String, default: null },
+    submitText: { type: String, default: null },
+    noFooter: { type: Boolean, default: false },
+    validation: { type: Object, default: null },
+    serverError: { type: String, default: '' }
+  },
+
+  computed: {
+    disabled () {
+      return this.validation ? this.validation.$invalid : false
+    }
+  },
+
+  methods: {
+    onSubmit (e) {
+      const v = this.validation
+      if (v) {
+        v.$touch()
+        if (v.$pending || v.$invalid) return
+      }
+      this.$emit('submit', e)
+    }
   }
 }
 </script>