vlad/teamfnd-site
1
0
Fork 0
Code Issues 6 Releases Activity

Add callback form, needs vailidation

Browse Source
This commit is contained in:
Vladislav Utkin
2018-03-26 03:24:47 +03:00
parent da5553c92f
commit 2ce8aa5e3e
5 changed files with 65 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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> <title>TeamFND</title>
</head> </head>
<body> <body>

19
package-lock.json generated
View File

@@ -1211,15 +1211,15 @@
"integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==" "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA=="
}, },
"bootstrap-vue": { "bootstrap-vue": {
"version": "2.0.0-rc.1", "version": "2.0.0-rc.2",
"resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.1.tgz", "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.2.tgz",
"integrity": "sha512-X9dr6gKi3pF3K2yMJah7nYhlo/HB3JLJQ+grr8442s/HJsfnW9P1iALJtmiAxH8/RXLCSes00gs4lYlP0zg21w==", "integrity": "sha512-f6x+mucySwVvaU/acu6ZfMlfcRen/ITX3vLcpiW1/1XHKfyHvSH2UnM/GzVuBMyLqc+yH2CcHzoLfq+U3NxWlg==",
"requires": { "requires": {
"bootstrap": "4.0.0", "bootstrap": "4.0.0",
"lodash.startcase": "4.4.0", "lodash.startcase": "4.4.0",
"opencollective": "1.0.3", "opencollective": "1.0.3",
"popper.js": "1.12.9", "popper.js": "1.12.9",
"vue-functional-data-merge": "2.0.4" "vue-functional-data-merge": "2.0.6"
} }
}, },
"brace-expansion": { "brace-expansion": {
@@ -9323,9 +9323,9 @@
"integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw==" "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
}, },
"vue-functional-data-merge": { "vue-functional-data-merge": {
"version": "2.0.4", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.4.tgz", "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.6.tgz",
"integrity": "sha512-Q7OBltO35UEYnRxLcweulhi37/kYVfToqSrsdsbwM5os2DjRB1+k9YKtYcZEdjTUTC+QIqCMjqxggRn1mMoC1w==" "integrity": "sha512-eivElFOJwhXJopKlq71/8onDxOKK4quPwWGFF9yIVjpU2sNzxISRpufu18bh674ivSADuEAPU2OhT+vrH0E9Mg=="
}, },
"vue-hot-reload-api": { "vue-hot-reload-api": {
"version": "2.3.0", "version": "2.3.0",
@@ -9359,6 +9359,11 @@
"vue-template-es2015-compiler": "1.6.0" "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": { "vue-router": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",

1
package.json
View File

@@ -21,6 +21,7 @@
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-i18n": "^7.4.2", "vue-i18n": "^7.4.2",
"vue-recaptcha": "^1.1.0",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"yaml-loader": "^0.5.0" "yaml-loader": "^0.5.0"
}, },

48
src/App.vue
View File

@@ -8,6 +8,37 @@
b-nav-item(:to="{name:'Projects'}") {{$t('our_projects')}} b-nav-item(:to="{name:'Projects'}") {{$t('our_projects')}}
b-nav-item(:to="{name:'About'}") {{$t('about_us')}} b-nav-item(:to="{name:'About'}") {{$t('about_us')}}
b-navbar-nav(class="ml-auto") 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 b-nav-form
label(for="locale" style="margin: 5px") {{$t('language')}}: label(for="locale" style="margin: 5px") {{$t('language')}}:
b-form-select(v-model="locale") b-form-select(v-model="locale")
@@ -22,14 +53,31 @@
</template> </template>
<script lang="coffeescript"> <script lang="coffeescript">
import VueRecaptcha from 'vue-recaptcha'
export default export default
name: 'app' name: 'app'
data: () -> data: () ->
locale: this.$root.$i18n.locale locale: this.$root.$i18n.locale
modalShow: false
form: {
email: ''
name: ''
text: ''
captcha_challenge: ''
}
sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
watch: watch:
locale: (val) -> locale: (val) ->
this.$root.$i18n.locale = val this.$root.$i18n.locale = val
window.localStorage.language = 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> </script>
<i18n src='@/translations/App.yaml'></i18n> <i18n src='@/translations/App.yaml'></i18n>

2
src/translations/App.yaml
View File

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