Commit 92da6e0b authored by Frauke's avatar Frauke

Merge branch 'email' into 'master'

Email

See merge request !14
parents df5bc777 b2c87da0
......@@ -24,6 +24,7 @@
methods: {
emit (e) {
const domain = e.target.domain.value
this.$store.commit('storeDomain', domain)
this.$emit('submit', {
id: this.message.id,
response: {
......
<template>
<div>
<form action="" @submit.prevent="emit">
<span v-t="{ path: 'responses[3].msg' }"></span>
<input type="email" name="email" :placeholder="$t('responses[3].placeholder')" :aria-label="$t('responses[3].placeholder')"
required
@invalid="validate"
oninput="setCustomValidity('')">
<button type="submit" class="btn" v-t="'responses[3].button'"></button>
</form>
</div>
</template>
<script>
import validate from '~/mixins/validate'
export default {
mixins: [validate],
props: [
'message'
],
methods: {
emit (e) {
const email = e.target.email.value
this.$emit('submit', {
id: this.message.id,
response: {
"email": email
},
responseText: `<p>${this.$i18n.t('responses[3].msg')} ${email}</p>`
},
this.message)
}
}
}
</script>
\ No newline at end of file
......@@ -64,6 +64,10 @@
{
"id": 7,
"msg": "<p><strong>The domain is taking a little time to register.</strong>I’ll keep checking and let you know when it is ready. If you don’t want to wait, give me your email address and I’ll send you an email when it is ready.</p>"
},
{
"id": 8,
"msg": "<p>OK, I will email you when your domain is ready. You can go ahead and either close this window if you want or keep it open :)</p>"
}
],
"responses": [
......@@ -75,7 +79,7 @@
},
{
"id": 2,
"msg": "I want the name {name}.gent",
"msg": "I want the name {name}",
"domain": ".gent",
"placeholder": "Enter your name here",
"button": "Send"
......@@ -83,6 +87,12 @@
{
"id": 3,
"button": "Yes"
},
{
"id": 4,
"msg": "E-mail me when it's ready at",
"placeholder": "Enter you e-mail address",
"button": "Submit"
}
]
}
\ No newline at end of file
......@@ -51,7 +51,7 @@
},
{
"id": 4,
"msg": "<p><strong>OK,</strong> om je site aan te passen, druk je op de knop <em>instellingen</ em> die wordt weergegeven door de pijl. <br> Als je klaar bent, druk je nogmaals op de knop om de <em>instellingen</em> af te sluiten.</p><p>Ready?</p>"
"msg": "<p><strong>OK,</strong> om je site aan te passen, druk je op de knop <em>instellingen</em> die wordt weergegeven door de pijl. <br> Als je klaar bent, druk je nogmaals op de knop om de <em>instellingen</em> af te sluiten.</p><p>Ready?</p>"
},
{
"id": 5,
......@@ -64,6 +64,10 @@
{
"id": 7,
"msg": "<p><strong>Het domein neemt enige tijd in beslag om te registreren.</strong> Ik zal het blijven controleren en je laten weten wanneer het klaar is. Als je niet wilt wachten, geef me dan je e-mailadres en ik zal je een e-mail sturen als het klaar is.</p>"
},
{
"id": 8,
"msg": "<p>OK, Ik zal je een e-mail sturen wanneer je domein klaar is. Je kan, als je dit wilt, het venster sluiten of open houden :)</p>"
}
],
"responses": [
......@@ -83,6 +87,12 @@
{
"id": 3,
"button": "Ja"
},
{
"id": 4,
"msg": "E-mail mij wanneer het klaar is op",
"placeholder": "Voer hier je e-mailadres in",
"button": "Verzend"
}
]
}
\ No newline at end of file
......@@ -13121,6 +13121,11 @@
}
}
},
"vue-spinner": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.3.tgz",
"integrity": "sha512-Phh6QC/Bh80ZE/0SH9ADw4irbRGwFK6VZsTksPHpPm16xga2OXwNC2nI7SEPnndUZP+Lgu1wu+pbH6i6+5siBQ=="
},
"vue-style-loader": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz",
......
<template>
<div class="container">
<div class="messages" role="log">
<transition-group name="fade" v-on:enter="scrollToBottom">
<div class="messageBox" v-for="(message, index) in messages" :key="index" v-bind:class="{ sent: index !== messages.length - 1 }">
<message :message="message"></message>
<div v-if="index === messages.length - 1">
<inputCode v-if="message.id === 1" @submit="authenticate" :message="message" class="response"></inputCode>
<inputDomain v-else-if="message.id === 2" @submit="sendResponse" :message="message" class="response"></inputDomain>
<inputConfirm v-else-if="[3,4].indexOf(message.id) !== -1" @submit="sendResponse" :message="message" class="response"></inputConfirm>
<div class="messages" role="log">
<transition-group name="fade" v-on:enter="scrollToBottom">
<div class="messageBox" v-for="(message, index) in messages" :key="index" v-bind:class="{ sent: index !== messages.length - 1 }">
<message :message="message"></message>
<div v-if="index === messages.length - 1">
<inputCode v-if="message.id === 1" @submit="authenticate" :message="message"
class="response"></inputCode>
<inputDomain v-else-if="message.id === 2" @submit="sendResponse" :message="message"
class="response"></inputDomain>
<inputConfirm v-else-if="[3,4,6].indexOf(message.id) !== -1" @submit="sendResponse" :message="message"
class="response"></inputConfirm>
<inputEmail v-else-if="message.id === 7" @submit="sendResponse" :message="message"
class="response"></inputEmail>
</div>
<pulse-loader v-if="[5,8].indexOf(message.id) !== -1" loading="loading" color="#FF0000"></pulse-loader>
</div>
</div>
</transition-group>
</transition-group>
</div>
</div>
</template>
......@@ -18,17 +24,21 @@
<script>
import inputCode from '~/components/inputCode'
import inputDomain from '~/components/inputDomain'
import inputEmail from '~/components/inputEmail'
import inputConfirm from '~/components/inputConfirm'
import message from '~/components/message'
import socket from '~/mixins/socket'
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
export default {
mixins: [socket],
components: {
inputCode,
inputDomain,
inputEmail,
inputConfirm,
message
message,
PulseLoader
},
data () {
return {
......@@ -77,10 +87,21 @@
.catch(err => console.error(err))
},
addMessage (msg) {
if(msg.id && msg.id === 5) {
this.checkStatusDomain()
}
if(msg.id && msg.id === 6 || msg.id == "7") {
document.querySelector('.v-spinner').remove()
}
this.$store.commit('storeMessage', msg)
},
checkStatusDomain () {
this.app.service('website-ready')
.get({domain: this.$store.state.domain, jwt: this.$store.state.jwt})
.catch(err => console.error(err))
},
scrollToBottom () {
window.scrollTo(0,document.body.scrollHeight);
window.scrollTo(0,document.body.scrollHeight)
}
}
}
......
......@@ -58,6 +58,15 @@ class Service {
}
}
if (data.id === 7) {
try {
const email = data.response.email
// TODO: add e-mail to database and send email.
} catch (err) {
return err
}
}
let newQuestion = this.questions.find(r => r.id === data.id + 1)
newQuestion.jwt = data.jwt
......
......@@ -18,8 +18,16 @@ class Service {
return notImplemented
}
async get (id, params) {
return notImplemented
async get (data, params) {
const message = {
id: 6,
response: data.domain,
jwt: data.jwt
}
await this.app.service('bot').create(message)
return "OK"
}
async create (data, params) {
......
......@@ -9,6 +9,7 @@ const createStore = () => {
state: {
locale: Cookies.get('locale'),
code: 0,
domain: null,
messages: [],
jwt: null
},
......
......@@ -4,6 +4,9 @@ const mutations = {
storeCode (state, code) {
state.code = code
},
storeDomain (state, domain) {
state.domain = domain
},
storeMessage (state, message) {
state.messages.push(message)
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment