Add callback form, needs vailidation

2018-03-26 03:24:47 +03:00
parent da5553c92f
commit 2ce8aa5e3e
5 changed files with 65 additions and 7 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,8 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
+    </script> 
    <title>TeamFND</title>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1211,15 +1211,15 @@
      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
    },
    "bootstrap-vue": {
-      "version": "2.0.0-rc.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.1.tgz",
-      "integrity": "sha512-X9dr6gKi3pF3K2yMJah7nYhlo/HB3JLJQ+grr8442s/HJsfnW9P1iALJtmiAxH8/RXLCSes00gs4lYlP0zg21w==",
+      "version": "2.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.2.tgz",
+      "integrity": "sha512-f6x+mucySwVvaU/acu6ZfMlfcRen/ITX3vLcpiW1/1XHKfyHvSH2UnM/GzVuBMyLqc+yH2CcHzoLfq+U3NxWlg==",
      "requires": {
        "bootstrap": "4.0.0",
        "lodash.startcase": "4.4.0",
        "opencollective": "1.0.3",
        "popper.js": "1.12.9",
-        "vue-functional-data-merge": "2.0.4"
+        "vue-functional-data-merge": "2.0.6"
      }
    },
    "brace-expansion": {
@@ -9323,9 +9323,9 @@
      "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
    },
    "vue-functional-data-merge": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.4.tgz",
-      "integrity": "sha512-Q7OBltO35UEYnRxLcweulhi37/kYVfToqSrsdsbwM5os2DjRB1+k9YKtYcZEdjTUTC+QIqCMjqxggRn1mMoC1w=="
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.6.tgz",
+      "integrity": "sha512-eivElFOJwhXJopKlq71/8onDxOKK4quPwWGFF9yIVjpU2sNzxISRpufu18bh674ivSADuEAPU2OhT+vrH0E9Mg=="
    },
    "vue-hot-reload-api": {
      "version": "2.3.0",
@@ -9359,6 +9359,11 @@
        "vue-template-es2015-compiler": "1.6.0"
      }
    },
+    "vue-recaptcha": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-recaptcha/-/vue-recaptcha-1.1.0.tgz",
+      "integrity": "sha512-Nsqs+tiWLcAPzwjuZuI+IsKEggj+lnydOwtZ3HUcP5duQ42y55jov1awjgMEEL4aJdR9/xsvf3AHGrAJMyuVFA=="
+    },
    "vue-router": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "sass-loader": "^6.0.6",
    "vue": "^2.5.2",
    "vue-i18n": "^7.4.2",
+    "vue-recaptcha": "^1.1.0",
    "vue-router": "^3.0.1",
    "yaml-loader": "^0.5.0"
  },
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,37 @@
          b-nav-item(:to="{name:'Projects'}") {{$t('our_projects')}}
          b-nav-item(:to="{name:'About'}") {{$t('about_us')}}
        b-navbar-nav(class="ml-auto")
+          b-nav-item(@click="modalShow = !modalShow") {{$t('contact_us')}}
+          b-modal(id="contactus" hide-footer :title="$t('contact_us')" v-model="modalShow")
+            b-form(@sumbit="send")
+              b-form-group(id="EmailInputGroup"
+                            label="Email address"
+                            label-for="EmailInput"
+                            description="We'll never share your email with anyone else.")
+                b-form-input(id="EmailInput"
+                              type="email"
+                              v-model="form.email"
+                              required
+                              placeholder="Enter email")
+              b-form-group(id="NameInputGroup"
+                            label="Your name:"
+                            label-for="NameInput")
+                b-form-input(id="NameInput"
+                              type="text"
+                              v-model="form.name"
+                              required
+                              placeholder="Enter name")
+              b-form-group(id="TextInputGroup"
+                            label="Your Message"
+                            label-for="TextInput")
+                b-form-textarea(id="TextInput"
+                                v-model="form.text"
+                                required
+                                placeholder=""
+                                :rows="3")
+              vue-recaptcha(:sitekey="sitekey" @verify="captchaPass")
+              p
+              b-button(type="submit" variant="primary" @click.prevent="send") Submit
          b-nav-form
            label(for="locale" style="margin: 5px") {{$t('language')}}:
            b-form-select(v-model="locale")
@@ -22,14 +53,31 @@
 </template>

 <script lang="coffeescript">
+import VueRecaptcha from 'vue-recaptcha'
 export default
  name: 'app'
  data: () ->
    locale: this.$root.$i18n.locale
+    modalShow: false
+    form: {
+      email: ''
+      name: ''
+      text: ''
+      captcha_challenge: ''
+    }
+    sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
  watch:
    locale: (val) ->
      this.$root.$i18n.locale = val
      window.localStorage.language = val
+  methods:
+    send: (evt) ->
+      # TODO: Check data
+      console.log(JSON.stringify(@form))
+      @modalShow = !@modalShow
+    captchaPass: (key) ->
+      @form.captcha_challenge = key
+  components: { VueRecaptcha }
 </script>

 <i18n src='@/translations/App.yaml'></i18n>
--- a/src/translations/App.yaml
+++ b/src/translations/App.yaml
@@ -3,6 +3,7 @@ en:
  about_us: "About us"
  home: "Home"
  our_projects: "Our projects"
+  contact_us: "Contact Us"
 jp:
  language: "言語"
  about_us: "私たちに関しては"
@@ -13,3 +14,4 @@ ru:
  about_us: "О нас"
  home: "Главная"
  our_projects: "Наши проекты"
+  contact_us: "Связаться с нами"