From db2e08c9e68e26bef167c2df7d2b951186dace71 Mon Sep 17 00:00:00 2001
From: Daniel Rejon <rejonpardenilla@gmail.com>
Date: Thu, 8 Mar 2018 13:59:36 -0600
Subject: [PATCH 1/5] Add feedback on form submission
---
package.json | 3 +-
src/components/Contact-form.vue | 49 +++++++++++++++++++++++++++++----
src/main.js | 2 ++
yarn.lock | 10 +++++++
4 files changed, 58 insertions(+), 6 deletions(-)
diff --git a/package.json b/package.json
index 0b266b4..c5ff28f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
"vue": "^2.5.2",
"vue-axios": "^2.0.2",
"vue-router": "^3.0.1",
- "vue-scrollto": "^2.9.0"
+ "vue-scrollto": "^2.9.0",
+ "vue-sweetalert2": "^1.2.4"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
diff --git a/src/components/Contact-form.vue b/src/components/Contact-form.vue
index 7ed4bac..51d1ce6 100644
--- a/src/components/Contact-form.vue
+++ b/src/components/Contact-form.vue
@@ -13,7 +13,7 @@
label(for='lead-name') ¿Cómo podemos ayudarte?
textarea(v-model='lead.message' rows='3')
.form-control
- button(@click='submit') ¡Comencémos!
+ button(@click='submit' :class='{shake: hasError}') ¡Comencémos!
</template>
<script>
@@ -28,16 +28,30 @@ export default {
email: '',
message: '',
createdAt: Date.now()
- }
+ },
+ hasError: false
}
},
methods: {
submit () {
const target = process.env.PROSPECTS_API_URL
- axios.post(target, this.lead)
- .then(response => { console.log(response) })
- .catch(error => { console.error(error) })
+ const successMessage = `Gracias por contactarnos.\n
+ Nos pondremos en contacto lo más pronto posible`
+ if (this.lead.name && this.lead.company && this.lead.email) {
+ axios.post(target, this.lead)
+ .then(response => {
+ this.$swal(successMessage)
+ console.log(response)
+ })
+ .catch(error => {
+ this.hasError = true
+ console.error(error)
+ })
+ } else {
+ this.hasError = true
+ }
+ setTimeout(() => { this.hasError = false }, 820)
}
}
}
@@ -74,10 +88,35 @@ export default {
width: 100%;
}
+ .shake {
+ animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+ transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
+ perspective: 1000px;
+ }
+
button {
@include button($expand: true);
margin-top: 15px;
padding: 8px 0;
}
+
+ @keyframes shake {
+ 10%, 90% {
+ transform: translate3d(-1px, 0, 0);
+ }
+
+ 20%, 80% {
+ transform: translate3d(2px, 0, 0);
+ }
+
+ 30%, 50%, 70% {
+ transform: translate3d(-4px, 0, 0);
+ }
+
+ 40%, 60% {
+ transform: translate3d(4px, 0, 0);
+ }
+ }
}
</style>
diff --git a/src/main.js b/src/main.js
index 7a97aaf..4fb3f37 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import axios from 'axios'
import VueAxios from 'vue-axios'
import VeeValidate from 'vee-validate'
import VueScrollTo from 'vue-scrollto'
+import VueSweetalert2 from 'vue-sweetalert2'
Vue.use(VueAxios, axios)
Vue.use(VeeValidate)
@@ -12,6 +13,7 @@ Vue.use(VueScrollTo, {
duration: 1500,
easing: 'ease-out'
})
+Vue.use(VueSweetalert2)
Vue.config.productionTip = false
diff --git a/yarn.lock b/yarn.lock
index 0a26736..444eb52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7451,6 +7451,10 @@ svgo@^0.7.0:
sax "~1.2.1"
whet.extend "~0.9.9"
+sweetalert2@7.x:
+ version "7.15.1"
+ resolved "https://registry.yarnpkg.com/sweetalert2/-/sweetalert2-7.15.1.tgz#edd9bd4d5501b22e18755686a343c7afe3e9adb2"
+
symbol-tree@^3.2.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -7948,6 +7952,12 @@ vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
+vue-sweetalert2@^1.2.4:
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/vue-sweetalert2/-/vue-sweetalert2-1.2.4.tgz#7b7c9b56b02d26c1016f20a3fe342e1f2f0524fa"
+ dependencies:
+ sweetalert2 "7.x"
+
vue-template-compiler@^2.5.2:
version "2.5.13"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.13.tgz#12a2aa0ecd6158ac5e5f14d294b0993f399c3d38"
From d3f07e48ddff20fc9dfe25f8d989e1a6eb932a8c Mon Sep 17 00:00:00 2001
From: Daniel Rejon <rejonpardenilla@gmail.com>
Date: Thu, 8 Mar 2018 19:19:21 -0600
Subject: [PATCH 2/5] update sweet alert message
---
src/components/Contact-form.vue | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/components/Contact-form.vue b/src/components/Contact-form.vue
index 51d1ce6..34345ac 100644
--- a/src/components/Contact-form.vue
+++ b/src/components/Contact-form.vue
@@ -36,12 +36,14 @@ export default {
methods: {
submit () {
const target = process.env.PROSPECTS_API_URL
- const successMessage = `Gracias por contactarnos.\n
- Nos pondremos en contacto lo más pronto posible`
if (this.lead.name && this.lead.company && this.lead.email) {
axios.post(target, this.lead)
.then(response => {
- this.$swal(successMessage)
+ this.$swal({
+ title: 'Gracias por contactarnos',
+ text: 'Nos comunicaremos contigo lo más pronto posible',
+ type: 'success'
+ })
console.log(response)
})
.catch(error => {
From cc265eac9d8fb11f0522ae57d0304f9129c39c9a Mon Sep 17 00:00:00 2001
From: Daniel Rejon <rejonpardenilla@gmail.com>
Date: Sat, 10 Mar 2018 02:19:11 -0600
Subject: [PATCH 3/5] Remove unused console prints
---
src/components/Contact-form.vue | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/src/components/Contact-form.vue b/src/components/Contact-form.vue
index c5e0213..332dfde 100644
--- a/src/components/Contact-form.vue
+++ b/src/components/Contact-form.vue
@@ -44,12 +44,8 @@ export default {
text: 'Nos comunicaremos contigo lo más pronto posible',
type: 'success'
})
- console.log(response)
- })
- .catch(error => {
- this.hasError = true
- console.error(error)
})
+ .catch(() => { this.hasError = true })
} else {
this.hasError = true
}
From 417c6089709624cd798b4296159e71a55d7c523e Mon Sep 17 00:00:00 2001
From: Daniel Rejon <rejonpardenilla@gmail.com>
Date: Sat, 10 Mar 2018 02:46:13 -0600
Subject: [PATCH 4/5] Refactor animation keyframes
---
src/assets/style/_animations.scss | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/src/assets/style/_animations.scss b/src/assets/style/_animations.scss
index a8e6798..e443e7a 100644
--- a/src/assets/style/_animations.scss
+++ b/src/assets/style/_animations.scss
@@ -32,3 +32,21 @@
transform: translateX(0);
}
}
+
+@keyframes shake-animation {
+ 10%, 90% {
+ transform: translate3d(-1px, 0, 0);
+ }
+
+ 20%, 80% {
+ transform: translate3d(2px, 0, 0);
+ }
+
+ 30%, 50%, 70% {
+ transform: translate3d(-4px, 0, 0);
+ }
+
+ 40%, 60% {
+ transform: translate3d(4px, 0, 0);
+ }
+}
From 2cc1a287eded299bdbec6b91fccb60843c71d721 Mon Sep 17 00:00:00 2001
From: Daniel Rejon <rejonpardenilla@gmail.com>
Date: Sat, 10 Mar 2018 02:46:30 -0600
Subject: [PATCH 5/5] Clean form inputs
---
src/components/Contact-form.vue | 31 +++++++++++--------------------
1 file changed, 11 insertions(+), 20 deletions(-)
diff --git a/src/components/Contact-form.vue b/src/components/Contact-form.vue
index 332dfde..90d09b9 100644
--- a/src/components/Contact-form.vue
+++ b/src/components/Contact-form.vue
@@ -43,13 +43,22 @@ export default {
title: 'Gracias por contactarnos',
text: 'Nos comunicaremos contigo lo más pronto posible',
type: 'success'
- })
+ }).then(() => { this.resetInputs() })
})
.catch(() => { this.hasError = true })
} else {
this.hasError = true
}
setTimeout(() => { this.hasError = false }, 820)
+ },
+ resetInputs () {
+ this.lead = {
+ name: '',
+ company: '',
+ email: '',
+ message: '',
+ createdAt: Date.now()
+ }
}
}
}
@@ -87,7 +96,7 @@ export default {
}
.shake {
- animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+ animation: shake-animation 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
@@ -98,23 +107,5 @@ export default {
margin-top: 15px;
padding: 8px 0;
}
-
- @keyframes shake {
- 10%, 90% {
- transform: translate3d(-1px, 0, 0);
- }
-
- 20%, 80% {
- transform: translate3d(2px, 0, 0);
- }
-
- 30%, 50%, 70% {
- transform: translate3d(-4px, 0, 0);
- }
-
- 40%, 60% {
- transform: translate3d(4px, 0, 0);
- }
- }
}
</style>