Work in progress

client/components/forms/validation/Alert.js

@@ -0,0 +1,21 @@
+export default {
+  props: {
+    form: {
+      type: Object,
+      required: true
+    },
+
+    dismissible: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  methods: {
+    dismiss () {
+      if (this.dismissible) {
+        this.form.clear()
+      }
+    }
+  }
+}

client/components/forms/validation/AlertError.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-if="form.errors.any()" class="alert alert-danger alert-dismissible" role="alert">
+    <button v-if="dismissible" type="button" class="close" aria-label="Close" @click="dismiss">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
+    <slot>
+      <div v-if="form.errors.has('error')" v-html="form.errors.get('error')"/>
+      <div v-else v-html="message"/>
+    </slot>
+  </div>
+</template>
+
+<script>
+import Alert from './Alert.js'
+
+export default {
+  name: 'AlertError',
+
+  extends: Alert,
+
+  props: {
+    message: {
+      type: String,
+      default: 'There were some problems with your input.'
+    }
+  }
+}
+</script>

client/components/forms/validation/AlertSuccess.vue

@@ -0,0 +1,37 @@
+<template>
+  <transition name="fade">
+    <div v-if="form.successful" class="bg-green-200 border-green-600 text-green-600 border-l-4 p-4 relative rounded-lg"
+         role="alert">
+      <button v-if="dismissible"
+              type="button"
+              @click.prevent="dismiss()"
+              class="absolute right-2 top-0 -mr-1 flex-shrink-0 flex p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 sm:-mr-2">
+        <span class="sr-only">
+            Dismiss
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="h-6 w-6 text-green-500"
+             viewBox="0 0 1792 1792">
+          <path
+            d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z">
+          </path>
+        </svg>
+      </button>
+      <p class="font-bold">
+        Success
+      </p>
+      <div v-html="message"/>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Alert from './Alert.js'
+
+export default {
+  name: 'AlertSuccess',
+  extends: Alert,
+  props: {
+    message: { type: String, default: '' }
+  }
+}
+</script>

client/components/forms/validation/HasError.vue

@@ -0,0 +1,43 @@
+<template>
+  <transition name="fade">
+    <div v-if="errorMessage" class="has-error text-sm text-red-500 -bottom-3"
+         v-html="errorMessage"
+    />
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'HasError',
+  props: {
+    form: {
+      type: Object,
+      required: true
+    },
+    field: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    errorMessage () {
+      if (!this.form || !this.form.errors || !this.form.errors.any()) return null
+      const subErrorsKeys = Object.keys(this.form.errors.all()).filter((key) => {
+        return key.startsWith(this.field) && key !== this.field
+      })
+      const baseError = this.form.errors.get(this.field) ?? (subErrorsKeys.length ? 'This field has some errors:' : null)
+      // If no error and no sub errors, return
+      if (!baseError) return null
+
+      return `<p class="text-red-500">${baseError}</p><ul class="list-disc list-inside">${subErrorsKeys.map((key) => {
+        return '<li>' + this.getSubError(key) + '</li>'
+      })}</ul>`
+    }
+  },
+  methods: {
+    getSubError (subErrorKey) {
+      return this.form.errors.get(subErrorKey).replace(subErrorKey, 'item')
+    }
+  }
+}
+</script>