Implement enterEmail db request

This commit is contained in:
Wolfgang Huß 2021-02-24 16:08:17 +01:00
parent ebef48ed99
commit d008eccf68
7 changed files with 88 additions and 53 deletions

View File

@ -5,7 +5,6 @@
:schema="formSchema"
@input="handleInput"
@input-valid="handleInputValid"
@submit="handleSubmit"
>
<!-- Wolle <h1>
{{
@ -109,7 +108,7 @@ export default {
message: this.$t('common.validations.email'),
},
},
// disabled: true,
// Wolle disabled: true,
data: null,
error: null,
}
@ -117,7 +116,6 @@ export default {
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the entire view has been rendered
// console.log('mounted !!! ')
this.formData.email = this.sliderData.collectedInputData.email
? this.sliderData.collectedInputData.email
: ''
@ -129,61 +127,80 @@ export default {
const { email } = this.data.Signup
return this.$t('components.registration.signup.form.success', { email })
},
sliderIndex() {
return this.sliderData.sliderIndex
},
validInput() {
return isEmail(this.formData.email)
},
},
methods: {
sendValidation() {
async sendValidation() {
if (this.formData.email && isEmail(this.formData.email)) {
this.formData.email = normalizeEmail(this.formData.email)
}
const { email } = this.formData
const value = {
email,
const value = { email }
let validated = false
if (this.validInput) {
await this.handleSubmitVerify()
if (this.sliderData.sliders[this.sliderIndex].data.response) {
const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
validated = (email === respnseEmail)
}
}
this.sliderData.validateCallback(this.validInput, value)
this.sliderData.validateCallback(validated, value)
},
handleInput() {
// this.disabled = true
// this.sliderData.validateCallback(false)
async handleInput() {
this.sendValidation()
},
handleInputValid() {
// this.disabemailled = false
// const { email } = this.formData
// validate in backend?
// toaster?
// console.log('sendValidation !!! email: ', email)
// this.sliderData.validateCallback(true, { email })
async handleInputValid() {
this.sendValidation()
},
async handleSubmit() {
async handleSubmitVerify() {
const mutation = this.token ? SignupByInvitationMutation : SignupMutation
const { token } = this
const { email } = this.formData
const variables = { email, token }
try {
const response = await this.$apollo.mutate({ mutation, variables: { email, token } })
this.data = response.data
setTimeout(() => {
this.$emit('submit', { email: this.data.Signup.email })
}, 3000)
} catch (err) {
const { message } = err
const mapping = {
'A user account with this email already exists': 'email-exists',
'Invitation code already used or does not exist': 'invalid-invitation-token',
}
for (const [pattern, key] of Object.entries(mapping)) {
if (message.includes(pattern))
this.error = {
key,
message: this.$t(`components.registration.signup.form.errors.${key}`),
}
}
if (!this.error) {
this.$toast.error(message)
if (
!this.sliderData.sliders[this.sliderIndex].data.request ||
!this.sliderData.sliders[this.sliderIndex].data.request.variables ||
(this.sliderData.sliders[this.sliderIndex].data.request.variables &&
!this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
)
{
this.sliderData.sliders[this.sliderIndex].data.request = { variables }
try {
const response = await this.$apollo.mutate({ mutation, variables })
this.sliderData.sliders[this.sliderIndex].data.response = response.data
if (this.sliderData.sliders[this.sliderIndex].data.response) {
const {email: respnseEmail} = this.sliderData.sliders[this.sliderIndex].data.response.Signup || this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
this.$toast.success(
this.$t('components.registration.email.form.success', { email: respnseEmail }),
)
}
} catch (err) {
this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
const { message } = err
const mapping = {
'A user account with this email already exists': 'email-exists',
'Invitation code already used or does not exist': 'invalid-invitation-token',
}
for (const [pattern, key] of Object.entries(mapping)) {
if (message.includes(pattern))
this.error = {
key,
message: this.$t(`components.registration.signup.form.errors.${key}`),
}
}
if (!this.error) {
this.$toast.error(message)
}
}
}
},

View File

@ -5,7 +5,6 @@
:schema="formSchema"
@input="handleInput"
@input-valid="handleInputValid"
@submit="handleSubmitVerify"
>
<ds-input
:placeholder="$t('components.enter-invite.form.invite-code')"
@ -70,9 +69,8 @@ export default {
methods: {
async sendValidation() {
const { inviteCode } = this.formData
const values = {
inviteCode,
}
const values = { inviteCode }
let validated = false
if (this.validInput) {
await this.handleSubmitVerify()
@ -91,22 +89,25 @@ export default {
const variables = { code: inviteCode }
if (
!this.sliderData.sliders[this.sliderIndex].data.request ||
!this.sliderData.sliders[this.sliderIndex].data.request.variables ||
(this.sliderData.sliders[this.sliderIndex].data.request.variables &&
this.sliderData.sliders[this.sliderIndex].data.request.variables.code !== variables.code)
!this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables))
) {
this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
try {
const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
this.sliderData.sliders[this.sliderIndex].data.response = response.data
if (this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
if (this.sliderData.sliders[this.sliderIndex].data.response && this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode) {
this.$toast.success(
this.$t('components.registration.inviteCode.form.success', { inviteCode }),
this.$t('components.registration.invite-code.form.success', { inviteCode }),
)
}
} catch (err) {
this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
const { message } = err
this.$toast.error(message)
}

View File

@ -49,7 +49,7 @@ export default {
message: this.$t('components.enter-nonce.form.validations.length'),
},
},
// disabled: true,
// Wolle disabled: true,
}
},
mounted: function () {

View File

@ -7,7 +7,15 @@ import Vue from 'vue'
const plugins = [
(app = {}) => {
app.$apollo = {
mutate: () => {},
mutate: (data) => {
if (JSON.stringify(data).includes('Signup')) {
return { data: { Signup: { email: data.variables.email } } }
}
if (JSON.stringify(data).includes('SignupByInvitation')) {
return { data: { SignupByInvitation: { email: data.variables.email } } }
}
throw new Error(`Mutation name not found!`)
},
query: (data) => {
if (JSON.stringify(data).includes('isValidInviteCode')) {
return { data: { isValidInviteCode: true } }

View File

@ -87,7 +87,7 @@ export default {
// title: this.$t('components.registration.create-user-account.title'),
title: 'Invitation', // Wolle
validated: false,
data: { request: { variables: null }, response: { isValidInviteCode: false } },
data: { request: /* Wolle */{ variables: null }, response: { isValidInviteCode: false } },
button: {
title: 'Next', // Wolle
icon: 'arrow-right',
@ -98,8 +98,8 @@ export default {
name: 'enter-email',
title: 'E-Mail', // Wolle
validated: false,
data: { request: null, response: null },
button: {
// title: this.sliderData.collectedInputData.emailSend ? 'Resend E-Mail' : 'Send E-Mail', // Wolle
title: 'Send E-Mail', // Wolle
icon: 'envelope',
callback: this.buttonCallback,
@ -144,7 +144,6 @@ export default {
sliders = [slidersPortfolio[2], slidersPortfolio[3]]
break
}
// let sliders = slidersPortfolio
return {
links,

View File

@ -161,7 +161,12 @@
"success": "Dein Benutzerkonto wurde erstellt!",
"title": "Benutzerkonto anlegen"
},
"inviteCode": {
"email": {
"form": {
"success": "Gültige E-Mail Adresse <b>{email}</b>!"
}
},
"invite-code": {
"form": {
"success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
}

View File

@ -161,7 +161,12 @@
"success": "Your account has been created!",
"title": "Create user account"
},
"inviteCode": {
"email": {
"form": {
"success": "Valid e-mail address <b>{email}</b>!"
}
},
"invite-code": {
"form": {
"success": "Valid invite code <b>{inviteCode}</b>!"
}