fix(home): line break line space in contact mail 🐛

src/modules/home/stores/home.store.js

@@ -16,6 +16,7 @@ const whitelists = ['email', 'news'];
 const getters = {
   news: (state) => state.news,
   subscription: (state) => state.subscription,
+  contact: (state) => state.contact,
 };
 
 /**
@@ -68,6 +69,16 @@ const mutations = {
   subscription_update(state, data) {
     _.merge(state.subscription, data);
   },
+  // mail
+  contact_error(err) {
+    console.log(err);
+  },
+  contact_set(state, data) {
+    state.contact = data;
+  },
+  contact_update(state, data) {
+    _.merge(state.contact, data);
+  },
 };
 
 /**
@@ -76,6 +87,7 @@ const mutations = {
 const state = {
   news: [],
   subscription: {},
+  contact: {},
 };
 
 /**

src/modules/home/views/home.view.vue

@@ -56,8 +56,8 @@
                     :flat="config.vuetify.theme.flat"
                     :rules="[rules.email]"
                     :append-icon="'fa-envelope'"
-                    @click:append="create"
-                    @keydown.enter="create"
+                    @click:append="createSubscription"
+                    @keydown.enter="createSubscription"
                     height="55"
                     name="Mail"
                     placeholder="Stay informed by email."
@@ -194,10 +194,10 @@
           {{ config.home.contact.title }}
         </h2>
         <v-theme-provider light>
-          <form enctype="text/plain" method="GET" :action="config.home.contact.mail">
             <v-row>
               <v-col cols="12">
                 <v-text-field
+                  v-model="subject"
                   :flat="config.vuetify.theme.flat"
                   name="subject"
                   label="Subject*"
@@ -206,18 +206,17 @@
               </v-col>
               <v-col cols="12">
                 <v-textarea
+                  v-model="body"
                   :flat="config.vuetify.theme.flat"
-                  name="body"
                   label="Message*"
                   solo
                 ></v-textarea>
               </v-col>
               <v-col class="mx-auto" cols="auto">
-                <v-btn color="accent" type="submit" x-large>Send</v-btn>
+                <v-btn @click="sendMail()" color="accent" type="submit" x-large>Send</v-btn>
               </v-col>
             </v-row>
-          </form>
-        </v-theme-provider>
+z        </v-theme-provider>
       </v-container>
     </section>
   </div>
@@ -249,7 +248,7 @@ export default {
     VueMarkdown,
   },
   computed: {
-    ...mapGetters(['theme', 'news', 'subscription']),
+    ...mapGetters(['theme', 'news', 'subscription', 'contact']),
     email: {
       get() {
         return this.subscription.email;
@@ -259,6 +258,24 @@ export default {
         this.$store.commit('subscription_update', { email });
       },
     },
+    subject: {
+      get() {
+        return this.contact.subject;
+      },
+      set(subject) {
+        this.save = true;
+        this.$store.commit('contact_update', { subject });
+      },
+    },
+    body: {
+      get() {
+        return this.contact.body;
+      },
+      set(body) {
+        this.save = true;
+        this.$store.commit('contact_update', { body });
+      },
+    },
   },
   created() {
     AOS.init();
@@ -268,13 +285,16 @@ export default {
     generateTemporalBackground() {
       return `${this.config.home.temporalBackground}/${`0${new Date().getHours()}`.slice(-2)}.jpg`;
     },
-    create() {
+    createSubscription() {
       if (this.rules.email(this.subscription.email)) {
         this.$store
           .dispatch('createSubscription', this.subscription)
           .catch((err) => console.log(err));
       }
     },
+    sendMail() {
+      window.location.href = `${this.config.home.contact.mail}?subject=${this.contact.subject}&body=${this.contact.body.replace(/\n/g, '%0D%0A')}`;
+    },
   },
 };
 </script>