Translate texts, first step, and fix database call and handling

webapp/components/ComponentSlider/ComponentSlider.vue

@@ -2,8 +2,14 @@
   <div class="Sliders">
     <slot :name="'header'" />
 
-    <ds-heading v-if="sliderData.sliders[sliderIndex].title" size="h3">
-      {{ sliderData.sliders[sliderIndex].title }}
+    <ds-heading
+      v-if="
+        sliderData.sliders[sliderIndex].titleIdent &&
+        $t(sliderData.sliders[sliderIndex].titleIdent).length > 0
+      "
+      size="h3"
+    >
+      {{ $t(sliderData.sliders[sliderIndex].titleIdent) }}
     </ds-heading>
 
     <slot :name="sliderData.sliders[sliderIndex].name" />
@@ -38,7 +44,7 @@
           :disabled="!sliderData.sliders[sliderIndex].validated"
           @click="onNextClick"
         >
-          {{ sliderData.sliders[sliderIndex].button.title }}
+          {{ $t(sliderData.sliders[sliderIndex].button.titleIdent) }}
         </base-button>
       </ds-flex-item>
     </ds-flex>

webapp/components/Registration/RegistrationSlideEmail.vue

@@ -37,7 +37,7 @@
       <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
       <label for="checkbox0">
         <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
-        {{ 'Send e-mail again' }}
+        {{ $t('components.email.form.sendEmailAgain') }}
       </label>
     </ds-text>
   </ds-form>
@@ -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

webapp/components/Registration/RegistrationSlideNonce.vue

@@ -8,9 +8,23 @@
     @input-valid="handleInputValid"
   >
     <ds-text>
-      <!-- Wolle {{ $t('components.enter-nonce.form.description') }} -->
-      Your e-mail address:
-      <b>{{ this.sliderData.collectedInputData.email }}</b>
+      {{ $t('components.enter-nonce.form.yourEmail') }}
+      <b
+        v-if="sliderData.collectedInputData.email && sliderData.collectedInputData.email.length > 0"
+      >
+        {{ sliderData.collectedInputData.email }}
+      </b>
+      <b v-else class="warning">{{ $t('components.enter-nonce.form.yourEmailWarningUndef') }}</b>
+      <b
+        v-if="
+          sliderData.collectedInputData.email &&
+          sliderData.collectedInputData.email.length > 0 &&
+          !isEmailFormat
+        "
+        class="warning"
+      >
+        {{ $t('components.enter-nonce.form.yourEmailWarningFormat') }}
+      </b>
     </ds-text>
     <ds-input
       :placeholder="$t('components.enter-nonce.form.nonce')"
@@ -28,6 +42,7 @@
 
 <script>
 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;
+  }
 }
 </style>

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

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 <b>{email}</b>!"
-        }
+        },
+        "title": "E-Mail"
       },
       "email-nonce": {
+        "buttonTitle": "Bestätigen",
         "form": {
           "success": "Gültiger Bestätigungs-Code <b>{nonce}</b> für E-Mail <b>{email}</b>!"
-        }
+        },
+        "title": "E-Mail Bestätigung"
       },
       "invite-code": {
+        "buttonTitle": "Weiter",
         "form": {
           "success": "Gültiger Einladungs-Code <b>{inviteCode}</b>!"
-        }
+        },
+        "title": "Einladung"
       },
       "signup": {
         "form": {

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 <b>{email}</b>!"
-        }
+        },
+        "title": "E-Mail"
       },
       "email-nonce": {
+        "buttonTitle": "Confirm",
         "form": {
           "success": "Valid verification code <b>{nonce}</b> for e-mail <b>{email}</b>!"
-        }
+        },
+        "title": "E-Mail Confirmation"
       },
       "invite-code": {
+        "buttonTitle": "Next",
         "form": {
           "success": "Valid invite code <b>{inviteCode}</b>!"
-        }
+        },
+        "title": "Invitation"
       },
       "signup": {
         "form": {