diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue index 79e658ce0..08f0d4e22 100644 --- a/webapp/components/ComponentSlider/ComponentSlider.vue +++ b/webapp/components/ComponentSlider/ComponentSlider.vue @@ -2,8 +2,14 @@
- - {{ sliderData.sliders[sliderIndex].title }} + + {{ $t(sliderData.sliders[sliderIndex].titleIdent) }} @@ -38,7 +44,7 @@ :disabled="!sliderData.sliders[sliderIndex].validated" @click="onNextClick" > - {{ sliderData.sliders[sliderIndex].button.title }} + {{ $t(sliderData.sliders[sliderIndex].button.titleIdent) }} diff --git a/webapp/components/Registration/RegistrationSlideEmail.vue b/webapp/components/Registration/RegistrationSlideEmail.vue index 69b33e045..7e83c3996 100644 --- a/webapp/components/Registration/RegistrationSlideEmail.vue +++ b/webapp/components/Registration/RegistrationSlideEmail.vue @@ -37,7 +37,7 @@ @@ -157,16 +157,16 @@ export default { buttonValues() { return { sliderSettings: { - buttonTitle: this.sliderData.collectedInputData.emailSend + buttonTitleIdent: this.sliderData.collectedInputData.emailSend ? this.sendEmailAgain - ? 'Resend e-mail' - : 'Skip resend' - : 'Send e-mail', // Wolle + ? 'components.email.buttonTitleResend' + : 'components.email.buttonTitleSkipResend' + : 'components.email.buttonTitleSend', buttonIcon: this.sliderData.collectedInputData.emailSend ? this.sendEmailAgain ? 'envelope' : 'arrow-right' - : 'envelope', // Wolle + : 'envelope', }, } }, @@ -191,7 +191,7 @@ export default { if (this.sendEmailAgain || !this.isVariablesRequested(variables)) { try { - const response = await this.$apollo.mutate({ SignupMutation, variables }) // e-mail is send in emailMiddleware of backend + const response = await this.$apollo.mutate({ mutation: SignupMutation, variables }) // e-mail is send in emailMiddleware of backend this.sliderData.setSliderValuesCallback(null, { sliderData: { request: { variables }, response: response.data }, }) @@ -202,11 +202,11 @@ export default { }) this.setButtonValues() - const { email: respnseEmail } = this.sliderData.sliders[ + const { email: responseEmail } = this.sliderData.sliders[ this.sliderIndex ].data.response.Signup this.$toast.success( - this.$t('components.registration.email.form.success', { email: respnseEmail }), + this.$t('components.registration.email.form.success', { email: responseEmail }), ) } return true diff --git a/webapp/components/Registration/RegistrationSlideNonce.vue b/webapp/components/Registration/RegistrationSlideNonce.vue index ab74abaad..fbea4cef8 100644 --- a/webapp/components/Registration/RegistrationSlideNonce.vue +++ b/webapp/components/Registration/RegistrationSlideNonce.vue @@ -8,9 +8,23 @@ @input-valid="handleInputValid" > - - Your e-mail address: - {{ this.sliderData.collectedInputData.email }} + {{ $t('components.enter-nonce.form.yourEmail') }} + + {{ sliderData.collectedInputData.email }} + + {{ $t('components.enter-nonce.form.yourEmailWarningUndef') }} + + {{ $t('components.enter-nonce.form.yourEmailWarningFormat') }} + import gql from 'graphql-tag' +import { isEmail } from 'validator' export const verifyNonceQuery = gql` query($email: String!, $nonce: String!) { @@ -54,6 +69,7 @@ export default { message: this.$t('components.enter-nonce.form.validations.length'), }, }, + dbRequestInProgress: false, } }, mounted: function () { @@ -77,6 +93,9 @@ export default { validInput() { return this.formData.nonce.length === 5 }, + isEmailFormat() { + return isEmail(this.sliderData.collectedInputData.email) + }, }, methods: { async sendValidation() { @@ -110,9 +129,13 @@ export default { const { email, nonce } = this.sliderData.collectedInputData const variables = { email, nonce } - if (!this.isVariablesRequested(variables)) { + if (!this.isVariablesRequested(variables) && !this.dbRequestInProgress) { try { + this.dbRequestInProgress = true + + console.log('handleSubmitVerify !!! variables: ', variables) const response = await this.$apollo.query({ query: verifyNonceQuery, variables }) + console.log('handleSubmitVerify !!! response: ', response) this.sliderData.setSliderValuesCallback(null, { sliderData: { request: { variables }, response: response.data }, }) @@ -132,6 +155,8 @@ export default { const { message } = err this.$toast.error(message) + } finally { + this.dbRequestInProgress = false } } }, @@ -147,5 +172,9 @@ export default { display: flex; flex-direction: column; margin: $space-large 0 $space-xxx-small 0; + + .warning { + color: $text-color-warning; + } } diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue index 0656788b5..fa660367c 100644 --- a/webapp/components/Registration/RegistrationSlider.vue +++ b/webapp/components/Registration/RegistrationSlider.vue @@ -78,12 +78,11 @@ export default { const slidersPortfolio = { noPublicRegistration: { name: 'no-public-registration', - // title: this.$t('components.registration.create-user-account.title'), - title: 'No Public Registration', // Wolle + titleIdent: 'No Public Registration', // Wolle validated: false, data: { request: null, response: null }, button: { - title: this.$t('site.back-to-login'), // Wolle + titleIdent: this.$t('site.back-to-login'), // Wolle icon: 'arrow-right', callback: this.buttonCallback, sliderCallback: null, // optional set by slot @@ -91,12 +90,11 @@ export default { }, enterInvite: { name: 'enter-invite', - // title: this.$t('components.registration.create-user-account.title'), - title: 'Invitation', // Wolle + titleIdent: 'components.registration.invite-code.title', validated: false, data: { request: null, response: { isValidInviteCode: false } }, button: { - title: 'Next', // Wolle + titleIdent: 'components.registration.invite-code.buttonTitle', icon: 'arrow-right', callback: this.buttonCallback, sliderCallback: null, // optional set by slot @@ -104,11 +102,11 @@ export default { }, enterEmail: { name: 'enter-email', - title: 'E-Mail', // Wolle + titleIdent: 'components.registration.email.title', validated: false, data: { request: null, response: null }, button: { - title: '', // set by slider component + titleIdent: '', // set by slider component icon: '', // set by slider component callback: this.buttonCallback, sliderCallback: null, // optional set by slot @@ -116,11 +114,11 @@ export default { }, enterNonce: { name: 'enter-nonce', - title: 'E-Mail Confirmation', // Wolle + titleIdent: 'components.registration.email-nonce.title', validated: false, data: { request: null, response: { VerifyNonce: false } }, button: { - title: 'Confirm', // Wolle + titleIdent: 'components.registration.email-nonce.buttonTitle', icon: 'arrow-right', callback: this.buttonCallback, sliderCallback: null, // optional set by slot @@ -128,12 +126,11 @@ export default { }, createUserAccount: { name: 'create-user-account', - title: this.$t('components.registration.create-user-account.title'), + titleIdent: this.$t('components.registration.create-user-account.title'), validated: false, data: { request: null, response: null }, button: { - // title: this.$t('actions.save'), // Wolle - title: 'Create', // Wolle + titleIdent: 'Create', // Wolle icon: 'check', callback: this.buttonCallback, sliderCallback: null, // optional set by slot @@ -226,9 +223,9 @@ export default { } } if (sliderSettings) { - const { buttonTitle, buttonIcon, buttonSliderCallback } = sliderSettings - if (buttonTitle) { - this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle + const { buttonTitleIdent, buttonIcon, buttonSliderCallback } = sliderSettings + if (buttonTitleIdent) { + this.sliderData.sliders[this.sliderIndex].button.titleIdent = buttonTitleIdent } if (buttonIcon) { this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon diff --git a/webapp/locales/de.json b/webapp/locales/de.json index 1078e17ad..cb331f848 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -120,6 +120,14 @@ "versus": "Versus" }, "components": { + "email": { + "buttonTitleResend": "Erneut senden", + "buttonTitleSend": "Sende E-Mail", + "buttonTitleSkipResend": "Nicht senden", + "form": { + "sendEmailAgain": "E-Mail erneut senden" + } + }, "enter-invite": { "form": { "description": "Gib den Einladungs-Code ein, den du bekommen hast.", @@ -137,7 +145,10 @@ "nonce": "Code eingeben", "validations": { "length": "muss genau 6 Buchstaben lang sein" - } + }, + "yourEmail": "Deine E-Mail-Adresse:", + "yourEmailWarningFormat": "⚠️ E-Mail hat ein ungültiges Format!", + "yourEmailWarningUndef": "⚠️ Keine E-Mail definiert!" } }, "password-reset": { @@ -165,17 +176,22 @@ "email": { "form": { "success": "Verifikations-E-Mail gesendet an {email}!" - } + }, + "title": "E-Mail" }, "email-nonce": { + "buttonTitle": "Bestätigen", "form": { "success": "Gültiger Bestätigungs-Code {nonce} für E-Mail {email}!" - } + }, + "title": "E-Mail Bestätigung" }, "invite-code": { + "buttonTitle": "Weiter", "form": { "success": "Gültiger Einladungs-Code {inviteCode}!" - } + }, + "title": "Einladung" }, "signup": { "form": { diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 27b7bf73f..063cfc048 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -120,6 +120,14 @@ "versus": "Versus" }, "components": { + "email": { + "buttonTitleResend": "Resend e-mail", + "buttonTitleSend": "Send e-mail", + "buttonTitleSkipResend": "Skip resend", + "form": { + "sendEmailAgain": "Send e-mail again" + } + }, "enter-invite": { "form": { "description": "Enter the invitation code you received.", @@ -137,7 +145,10 @@ "nonce": "Enter your code", "validations": { "length": "must be 6 characters long" - } + }, + "yourEmail": "Your e-mail address:", + "yourEmailWarningFormat": "⚠️ E-mail has wrong format!", + "yourEmailWarningUndef": "⚠️ No e-mail defined!" } }, "password-reset": { @@ -165,17 +176,22 @@ "email": { "form": { "success": "Verification e-mail send to {email}!" - } + }, + "title": "E-Mail" }, "email-nonce": { + "buttonTitle": "Confirm", "form": { "success": "Valid verification code {nonce} for e-mail {email}!" - } + }, + "title": "E-Mail Confirmation" }, "invite-code": { + "buttonTitle": "Next", "form": { "success": "Valid invite code {inviteCode}!" - } + }, + "title": "Invitation" }, "signup": { "form": {