feat: handle missing FORMSPREE_URL and some errors

Author: bdrtsky

components/Button.vue

@@ -3,12 +3,16 @@ defineProps({
   type: {
     type: String,
     default: 'submit'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
   }
 })
 </script>
 
 <template>
-  <button :type="type">
+  <button :type="type" :disabled="disabled">
     <slot />
   </button>
 </template>
@@ -33,6 +37,9 @@ css({
     '@dark': {
       backgroundColor: '{color.gray.100}',
       color: '{color.gray.900}',
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
     }
   }
 })

components/content/ContactForm.vue

@@ -5,10 +5,14 @@ const alpine = useAppConfig().alpine
 
 const { FORMSPREE_URL } = useRuntimeConfig().public
 
+if (!FORMSPREE_URL) {
+  console.warn('No FORMSPREE_URL provided')
+}
+
 const status = ref()
 
 const props = defineProps({
-  sendButton: {
+  submitButtonText: {
     type: String,
     default: 'Send message'
   },
@@ -56,6 +60,8 @@ const onSend = async (e: any) => {
   e.preventDefault()
   const data = new FormData(e.target)
 
+  status.value = 'Sending...'
+
   fetch(e.target.action, {
     method: e.target.method,
     body: data,
@@ -70,7 +76,11 @@ const onSend = async (e: any) => {
       // Handle errors from API
       response.json().then(data => {
         if (Object.hasOwn(data, 'errors')) {
+          status.value = data["errors"][0].message
           console.error(data["errors"].map((error: any) => error["message"]).join(", "))
+          setTimeout(() => {
+            status.value = 'Send message'
+          }, 2000)
         } else {
           console.error("There was a problem submitting your form")
         }
@@ -90,8 +100,8 @@ const onSend = async (e: any) => {
       <Input v-for="(field, index) in form" :key="index" v-model="field.data" :field="field" />
     </div>
     <div>
-      <Button type="submit">
-        {{ status ? status : sendButton }}
+      <Button type="submit" :disabled="!FORMSPREE_URL">
+        {{ status ? status : submitButtonText }}
       </Button>
     </div>
   </form>

components/data-entry/Input.vue

@@ -57,7 +57,8 @@ css({
       fontSize: '{text.base.fontSize}',
       lineHeight: '{text.base.lineHeight}',
       fontWeight: '{fontWeight.semibold}',
-      marginBottom: '{space.2}'
+      marginBottom: '{space.2}',
+      cursor: 'pointer',
     },
     'input, textarea': {
       backgroundColor: 'transparent',