- edit contact section

src/components/sections/contacts/MailContact.vue

@@ -8,71 +8,72 @@ function emailValidate (mailObj) {
 }
 
 async function postData (url = '', data = {}) {
-  const response = await fetch(url, {
+  return await fetch(url, {
     method: 'POST',
     cache: 'no-cache',
     headers: {
       'Content-Type': 'application/json',
+      'Accept': 'application/json',
     },
     body: JSON.stringify(data),
-  })
+  }).then(r =>  r.json().then(response => ({ status: r.status, data: response })) );
-  return response.json();
 }
 
-const buttonDisabled = ref(false)
+const buttonDisabled = ref(false);
-const statusError = ref(0)
+const isError = ref(false);
-const emailValue = ref('')
+const email = ref(null);
-const messageValue = ref('')
+const message = ref(null);
-const senderValue = ref('')
+const sender = ref(null);
-
-const messageError = ref('')
-const messageOk = ref('')
 
 const errors = reactive({
-  email: false,
+  email: null,
-  message: false,
+  message: null,
-  sender: false,
+  sender: null,
+});
+
+const responseMessage = reactive({
+  type: null,
+  data: null,
 });
 
 const isButtonDisabled = computed(() => buttonDisabled.value || errors.email || errors.message || errors.sender);
-const isEmailError = computed(() => errors.email);
-const isMessageError = computed(() => errors.message);
-const isSenderError = computed(() => errors.sender);
-const hasMessageError = computed(() => messageError.value);
-const hasMessageOkStatus = computed(() => messageOk.value && !hasMessageError.value);
 
-watch([statusError, emailValue], ([errorCount, value]) => {
+watch([isError, message], async ([errorStatus, messageValue]) => {
-  errors.email = errorCount > 0 && !emailValidate(value);
+  errors.message = (messageValue !== null || errorStatus) && (messageValue?.length ?? 0) < 3 ? 'Wymanage są przynajmniej 3 znaki.' : null;
-})
+});
 
-watch([statusError, messageValue], ([errorCount, value]) => {
+watch([isError, email], async ([errorStatus, emailValue]) => {
-  errors.message = errorCount > 0 && (value === '' || value.length < 3);
+  errors.email = (emailValue !== null || errorStatus) && !emailValidate(emailValue ?? '') ? 'E-mail powinien mieć formę: adam.nowak@gmail.com.' : null;
-})
+});
 
-watch([statusError, senderValue], ([errorCount, value]) => {
+watch([isError, sender], async ([errorStatus, senderValue]) => {
-  errors.sender = errorCount > 0 && (value === '' || value.length < 3);
+  errors.sender = (senderValue !== null || errorStatus) && (senderValue?.length ?? 0) < 3 ? 'Proszę się przedstawić 😉' : null;
-})
+});
-
-function clearErrors() {
-  statusError.value = 0;
-  errors.email = false;
-  errors.message = false;
-  errors.sender = false;
-}
 
 function checkForm() {
-  clearErrors();
+  isError.value = false;
-  if (!emailValidate(emailValue.value)) {
+  responseMessage.type = null;
-    errors.email = true;
+  responseMessage.data = null;
-    statusError.value++;
+
+  if (email.value === null || !emailValidate(email.value)) {
+    console.log('email error');
+    errors.email = '';
+    isError.value = true;
   }
-  if (messageValue.value === '') {
+  if (message.value === null) {
-    errors.message = true;
+    console.log('message error');
-    statusError.value++;
+    errors.message = '';
+    isError.value = true;
   }
-  if (senderValue.value === '') {
+  if (sender.value === null) {
-    errors.sender = true;
+    console.log('sender error');
-    statusError.value++;
+    errors.sender = '';
+    isError.value = true;
+  }
+
+  if (isError.value) {
+    responseMessage.type = 'err';
+    responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
   }
 }
 
@@ -81,24 +82,32 @@ function formSubmit(event) {
 
   checkForm();
 
-  if (statusError.value === 0) {
+  if (!isError.value) {
     buttonDisabled.value = true;
-    postData('https://kamilcraft.com/send', {
+    const sendUrl = import.meta.env.VITE_APP_API_URL;
-      email: emailValue.value,
+    postData(`${sendUrl}/message`, {
-      message: messageValue.value,
+      email: email.value,
-      sender: senderValue.value,
+      message: message.value,
-    }).then(result => {
+      sender: sender.value,
-      if (result.error) {
+    }).then(({ status, data }) => {
-        messageError.value = result.message;
+      if (status === 200) {
+        responseMessage.type = 'ok';
+        responseMessage.data = data.message;
+      } else if(status === 422) {
+        responseMessage.type = 'err';
+        responseMessage.data = 'Podane dane są niepoprawne. Sprawdź komunikaty pod polami.';
+
+        errors.email = data.errors?.email[0] ?? null;
+        errors.message = data.errors?.message[0] ?? null;
+        errors.sender = data.errors?.sender[0] ?? null;
       } else {
-        messageOk.value = result.message;
+        responseMessage.type = 'err';
-        messageValue.value = '';
+        responseMessage.data = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.';
-        emailValue.value = '';
-        senderValue.value = '';
       }
-      buttonDisabled.value = false
+      buttonDisabled.value = false;
     }).catch(() => {
-      messageError.value = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.';
+      responseMessage.type = 'err';
+      responseMessage.data = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.';
       buttonDisabled.value = false;
     });
   }
@@ -128,16 +137,16 @@ function scrollTo(id) {
       @submit="formSubmit"
     >
       <div
-        v-if="hasMessageError"
+        v-if="responseMessage.type === 'err'"
-        class="w-full p-2 bg-red-200 text-red-500 text-sm border border-red-300 rounded-md"
+        class="w-full px-2 py-2.5 bg-red-100 text-red-700 text-sm rounded-md"
       >
-        {{ messageError }}
+        {{ responseMessage.data }}
       </div>
       <div
-        v-else-if="hasMessageOkStatus"
+        v-else-if="responseMessage.type === 'ok'"
-        class="w-full p-2 bg-[#27ae60] text-white text-sm border border-lime-600 rounded-md shadow"
+        class="w-full p-2 bg-green-100 text-green-700 text-sm rounded-md shadow"
       >
-        {{ messageOk }}
+        {{ responseMessage.data }}
       </div>
       <div class="flex flex-col gap-1 w-full">
         <label
@@ -148,17 +157,17 @@ function scrollTo(id) {
         </label>
         <textarea
           id="message"
-          v-model="messageValue"
+          v-model="message"
           class="w-full max-w-full min-h-[150px] px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
-          :class="[ isMessageError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          :class="[ errors.message ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
           name="message"
           placeholder="Chciałbym zlecić wykonanie strony..."
         />
         <span
-          v-if="isMessageError"
+          v-if="errors.message"
           class="text-red-400"
         >
-          Wiadomość musi zawierać przynajmniej 3 znaki!
+          {{ errors.message }}
         </span>
       </div>
       <div class="flex flex-col gap-1 w-full">
@@ -170,18 +179,18 @@ function scrollTo(id) {
         </label>
         <input
           id="email"
-          v-model="emailValue"
+          v-model="email"
           class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
-          :class="[ isEmailError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          :class="[ errors.email ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
           type="text"
           name="email"
           placeholder="Twój adres e-mail"
         >
         <span
-          v-if="isEmailError"
+          v-if="errors.email"
           class="text-red-400"
         >
-          E-mail musi być poprawny, np. przemek.kowalski@gmail.com
+          {{ errors.email }}
         </span>
       </div>
       <div class="flex flex-col gap-1 w-full">
@@ -193,17 +202,17 @@ function scrollTo(id) {
         </label>
         <input
           id="sender"
-          v-model="senderValue"
+          v-model="sender"
           class="w-full px-2.5 py-2 border-b-2 border-neutral-300 rounded-md focus:border-neutral-400 hover:border-neutral-500 outline-none"
-          :class="[ isSenderError ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
+          :class="[ errors.sender ? 'border-red-400 text-red-400 placeholder-red-300' : 'text-gray-900 placeholder-gray-400' ]"
           type="text"
           name="sender"
         >
         <span
-          v-if="isSenderError"
+          v-if="errors.sender"
           class="text-red-400"
         >
-          Podpis musi zawierać przynajmniej 3 znaki!
+          {{ errors.sender }}
         </span>
       </div>
       <BaseButton