WL-11 - Add submission feedback

components/Contact.vue

@@ -1,6 +1,40 @@
 <template>
   <div id="contact-me" class="container mx-auto p-16">
     <h2 class="text-4xl mb-6">Contact me !</h2>
+
+    <!-- Feedback Message -->
+    <div
+      v-if="showFeedback"
+      :class="
+        (feedback.hasError
+          ? 'bg-red-100 border-red-400 text-red-700'
+          : 'bg-green-100 border-green-400 text-green-700') +
+          ' border px-4 py-3 rounded relative w-3/4 sm:w-1/2 max-w-lg mx-auto mb-2'
+      "
+      role="alert"
+    >
+      <strong class="font-bold">{{
+        feedback.hasError ? "Error !" : "Thanks !"
+      }}</strong>
+      <span class="block sm:inline">{{ feedback.message }}</span>
+      <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
+        <svg
+          :class="
+            (feedback.hasError ? 'text-red-500' : 'text-green-500') +
+              ' fill-current h-6 w-6 '
+          "
+          role="button"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+        >
+          <title>Close</title>
+          <path
+            d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
+          />
+        </svg>
+      </span>
+    </div>
+
     <form
       class="w-3/4 sm:w-1/2 max-w-lg mx-auto p-6 rounded shadow-xl flex flex-col items-center bg-gradient-to-br from-indigo-800 to-blue-800"
       name="contact"
@@ -81,6 +115,11 @@ export default {
         email: "",
         message: "",
         honeypot: null
+      },
+      showFeedback: false,
+      feedback: {
+        hasError: false,
+        message: ""
       }
     };
   },
@@ -106,10 +145,14 @@ export default {
           axiosConfig
         )
         .then(res => {
-          console.log(res);
+          this.feedback.message = "You'll receive an answer soon :)";
         })
         .catch(err => {
-          console.log(err);
+          this.feedback.hasError = true;
+          this.feedback.message = err.message;
+        })
+        .finally(() => {
+          this.showFeedback = true;
         });
     }
   }