Added mail

src/components/sections/contacts/MailContact.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="contact-container" style="flex-basis: 500px;">
+    <div class="message-status"></div>
+    <header class="head">Formularz kontaktowy:</header>
+    <form id="form-point" @submit="formSubmit">
+      <input v-model="emailValue" class="contact-input" type="text" name="email" placeholder="Twój adres e-mail." />
+      <textarea v-model="messageValue" class="contact-input" name="message" placeholder="Twoja wiadomość."></textarea>
+      <input v-model="senderValue" class="contact-input" type="text" name="sender" placeholder="Twój podpis." />
+      <input :disabled="buttonDisabled" class="contact-input" type="submit" value="Wyślij"/>
+    </form>
+  </div>
+</template>
+
+<script>
+function emailValidate (mailObj) {
+  const mailFormat = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/
+  return !!mailObj.value.match(mailFormat)
+}
+
+async function postData (url = '', data = {}) {
+  const response = await fetch(url, {
+    method: 'POST',
+    cache: 'no-cache',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(data)
+  })
+  return response.json()
+}
+
+export default {
+  name: 'MailContact',
+  data () {
+    return {
+      buttonDisabled: false,
+      statusError: 0,
+      email: {},
+      emailValue: '',
+      message: {},
+      messageValue: '',
+      sender: {},
+      senderValue: ''
+    }
+  },
+  watch: {
+    emailValue (value) {
+      if (this.statusError > 0 && emailValidate(this.email)) {
+        this.email.classList.remove('error')
+      }
+    },
+    messageValue (value) {
+      if (this.statusError > 0 && value !== '') {
+        this.message.classList.remove('error')
+      }
+    },
+    senderValue (value) {
+      if (this.statusError > 0 && value !== '') {
+        this.sender.classList.remove('error')
+      }
+    }
+  },
+  methods: {
+    clearErrors () {
+      this.statusError = 0
+      this.email.classList.remove('error')
+      this.message.classList.remove('error')
+      this.sender.classList.remove('error')
+    },
+    checkForm () {
+      if (!emailValidate(this.email)) {
+        this.email.classList.add('error')
+        this.statusError++
+      }
+      if (this.message.value === '') {
+        this.message.classList.add('error')
+        this.statusError++
+      }
+      if (this.sender.value === '') {
+        this.sender.classList.add('error')
+        this.statusError++
+      }
+    },
+    formSubmit (event) {
+      event.preventDefault()
+
+      this.email = event.target[0]
+      this.message = event.target[1]
+      this.sender = event.target[2]
+
+      this.clearErrors()
+      this.checkForm()
+
+      const messageElement = document.querySelector('.message-status')
+      messageElement.classList.remove('message-status__ok', 'message-status__error')
+
+      if (this.statusError === 0) {
+        this.buttonDisabled = true
+        postData('/send', {
+          email: this.emailValue,
+          message: this.messageValue,
+          sender: this.senderValue
+        }).then(result => {
+          messageElement.classList.add(
+            result.error ? 'message-status__error' : 'message-status__ok'
+          )
+
+          messageElement.textContent = result.message
+          if (!result.error) {
+            this.messageValue = ''
+            this.emailValue = ''
+            this.senderValue = ''
+          }
+          this.buttonDisabled = false
+        }).catch(() => {
+          messageElement.classList.add('message-status__error')
+          messageElement.textContent = 'Wystąpił błąd podczas wysyłania wiadomości. Proszę spróbować później.'
+          this.buttonDisabled = false
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-container {
+  margin: 10px;
+  max-width: 500px;
+  background-color: #eaeaea;
+  border: 2px solid #dadada;
+  border-radius: 2px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+
+  header.head {
+    padding: 10px;
+    line-height: 1.6em;
+    font-size: 1.3em;
+    font-weight: bold;
+  }
+
+  form#form-point {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.contact-container input, .contact-container textarea {
+  width: 97%;
+  border: 0;
+  border-bottom: 2px solid #c9c9c9;
+  padding: 10px 10px 8px;
+  font-size: 1em;
+  font-family: var(--font-family);
+  line-height: 1.3em;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+input.contact-input:focus, textarea.contact-input:focus {
+  outline: none;
+  border-color: black;
+}
+textarea.contact-input {
+  max-width: 97%;
+  min-width: 97%;
+  min-height: 150px;
+}
+input.error, textarea.error {
+  background-color: #ffc3b0;
+  border-color: #ff865f;
+  color: #c90000;
+}
+input.error::placeholder, textarea.error::placeholder {
+  color: #c9000094;
+}
+input[type="submit"].contact-input {
+  appearance: unset;
+  color: white;
+  background-color: #4CAF50;
+  border-bottom: 2px solid #387d3b;
+}
+input[type="submit"].contact-input:hover {
+  box-shadow: 0 0 8px rgba(0,0,0,.4);
+}
+input[disabled].contact-input {
+  background-color: #cdcdcd;
+  border-color: gray;
+  color: black;
+}
+.message-status {
+  display: none;
+  margin: 5px;
+  padding: 8px;
+  border-radius: 5px;
+}
+.message-status__ok, .message-status__error {
+  display: block;
+}
+.message-status__ok {
+  background-color: #4CAF50;
+  border: 1px solid #387d3b;
+  color: white;
+}
+.message-status__error {
+  background-color: #ffc3b0;
+  border: 1px solid #ff865f;
+  color: #c90000;
+}
+@media screen and (max-width: 800px) {
+  .contact-elements {
+    display: block;
+    width: auto;
+  }
+  #instagram, #facebook, #twitter, #email, #gg {
+    font-size: 1em;
+    line-height: 1.2em;
+  }
+}
+</style>

src/components/sections/contacts/OtherContact.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="contact-container" style="flex-basis: 410px">
+    <header class="head">Inne formy kontaktu:</header>
+    <div class="contact-element">
+      <img class="contact-element-icon" src="/assets/img/instagram.jpg" />
+      <span id="instagram"><a href="https://www.instagram.com/nikcamii/" target="_blank">Instagram: @NiKCamii</a></span>
+    </div>
+    <div class="contact-element">
+      <img class="contact-element-icon" src="/assets/img/facebook.jpg" />
+      <span id="facebook"><a href="https://www.facebook.com/nikcamii/" target="_blank">Facebook: @NiKCamii</a></span>
+    </div>
+    <div class="contact-element">
+      <img class="contact-element-icon" src="/assets/img/twitter.jpg" />
+      <span id="twitter"><a href="https://twitter.com/nikcamii" target="_blank">Twitter: @NiKCamii</a></span>
+    </div>
+    <div class="contact-element">
+      <img class="contact-element-icon" src="/assets/img/gg.png" />
+      <span id="gg">GG: 38429969</span>
+    </div>
+    <div class="contact-element">
+      <img class="contact-element-icon" src="/assets/img/user.jpg" />
+      <span id="email"><a href="mailto:contact@kamilcraft.com">Email: contact@kamilcraft.com</a></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OtherContact'
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-container {
+  margin: 10px;
+  max-width: 500px;
+  background-color: #eaeaea;
+  border: 2px solid #dadada;
+  border-radius: 2px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
+
+  header.head {
+    padding: 10px;
+    line-height: 1.6em;
+    font-size: 1.3em;
+    font-weight: bold;
+  }
+
+  form#form-point {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.contact-element {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  background-color: #fff;
+  border-top: 1px solid #e6e6e6;
+  border-bottom: 1px solid #e6e6e6;
+  margin-bottom: 5px;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      -webkit-text-fill-color: #444444;
+      color: #444444;
+      text-decoration: underline;
+    }
+  }
+}
+
+.contact-element-icon {
+  border-radius: 50%;
+  border: 1px solid #e2e2e2;
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  object-fit: contain;
+}
+
+#instagram, #facebook, #twitter, #email, #gg {
+  padding-top: 2px;
+  line-height: 1.6em;
+  font-size: 1.1em;
+  font-weight: bold;
+}
+
+#instagram {
+  background: linear-gradient(120deg, #e99311, #8738b8);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+}
+
+#facebook {
+  color: #4267b2;
+}
+
+#twitter {
+  color: #5eaade;
+}
+
+#email {
+  color: #696969;
+}
+
+#gg {
+  color: #ffa214;
+}
+</style>

src/views/Contact.vue

@@ -1,16 +1,63 @@
 <template>
-<div class="contact">
+  <section class="contact">
-  <h1>{{ $route.meta.title }}</h1>
+    <div class="container">
-  <p>Witam wszystkich bardzo serdecznie!</p>
+      <MailContact />
-</div>
+      <OtherContact />
+    </div>
+  </section>
 </template>
 
 <script>
+import MailContact from '../components/sections/contacts/MailContact'
+import OtherContact from '../components/sections/contacts/OtherContact'
+
 export default {
-  name: 'Contact'
+  name: 'Contact',
+  mounted () {
+    const header = {
+      title: this.$route.meta.title,
+      description: 'Chcesz o coś zapytać? Chciałbyś współpracować? Napisz!'
+    }
+    this.$store.commit('setHeader', header)
+  },
+  components: {
+    MailContact,
+    OtherContact
+  }
 }
 </script>
 
 <style lang="scss">
+  .contact {
+    padding: 25px 0;
 
+    .container {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+    }
+
+    @media screen and (max-width: 940px) {
+      .container {
+        display: block;
+        margin: 0 auto;
+
+        .contact-container {
+          margin: 0 auto 25px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+    @media screen and (max-width: 640px) {
+      .container {
+        padding: 0 10px;
+
+        .contact-container {
+          max-width: unset;
+        }
+      }
+    }
+  }
 </style>