Implement 'EmailDisplayAndVerify.vue'

webapp/components/EnterNonce/EnterNonce.vue

@@ -40,7 +40,7 @@ export default {
           min: 6,
           max: 6,
           required: true,
-          message: this.$t('components.enter-nonce.form.validations.length'),
+          message: this.$t('components.enter-nonce.form.validations.length'), // Wolle here 6 characters are mentioned
         },
       },
       disabled: true,

webapp/components/Registration/EmailDisplayAndVerify.vue

@@ -0,0 +1,39 @@
+<template>
+  <ds-text>
+    {{ $t('components.registration.email-display.yourEmail') }}
+    <b v-if="emailAsString.length > 0">
+      {{ emailAsString }}
+      <b v-if="!isEmailFormat" class="email-warning">
+        {{ $t('components.registration.email-display.warningFormat') }}
+      </b>
+    </b>
+    <b v-else class="email-warning">
+      {{ $t('components.registration.email-display.warningUndef') }}
+    </b>
+  </ds-text>
+</template>
+
+<script>
+import { isEmail } from 'validator'
+
+export default {
+  name: 'EmailDisplayAndVerify',
+  props: {
+    email: { type: String, default: () => '' },
+  },
+  computed: {
+    isEmailFormat() {
+      return isEmail(this.email)
+    },
+    emailAsString() {
+      return !this.email ? '' : this.email
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.email-warning {
+  color: $text-color-danger;
+}
+</style>

webapp/components/Registration/RegistrationSlideCreate.vue

@@ -71,11 +71,7 @@
         />
         <password-strength class="password-strength" :password="formData.password" />
 
-        <ds-text>
-          <!-- Wolle {{ $t('components.enter-nonce.form.description') }} -->
-          Your e-mail address:
-          <b>{{ this.sliderData.collectedInputData.email }}</b>
-        </ds-text>
+        <email-display-and-verify :email="sliderData.collectedInputData.email" />
 
         <ds-text>
           <input
@@ -130,7 +126,8 @@
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import links from '~/constants/links'
 import emails from '~/constants/emails'
-import PasswordStrength from '../Password/Strength'
+import PasswordStrength from '~/components/Password/Strength'
+import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
@@ -139,6 +136,7 @@ export default {
   name: 'RegistrationSlideCreate',
   components: {
     PasswordStrength,
+    EmailDisplayAndVerify,
     SweetalertIcon,
   },
   props: {

webapp/components/Registration/RegistrationSlideNonce.vue

@@ -7,25 +7,7 @@
     @input="handleInput"
     @input-valid="handleInputValid"
   >
-    <ds-text>
-      {{ $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>
+    <email-display-and-verify :email="sliderData.collectedInputData.email" />
     <ds-input
       :placeholder="$t('components.enter-nonce.form.nonce')"
       model="nonce"
@@ -43,6 +25,7 @@
 <script>
 import gql from 'graphql-tag'
 import { isEmail } from 'validator'
+import EmailDisplayAndVerify from './EmailDisplayAndVerify'
 
 export const verifyNonceQuery = gql`
   query($email: String!, $nonce: String!) {
@@ -51,6 +34,9 @@ export const verifyNonceQuery = gql`
 `
 export default {
   name: 'RegistrationSlideNonce',
+  components: {
+    EmailDisplayAndVerify,
+  },
   props: {
     sliderData: { type: Object, required: true },
   },
@@ -66,7 +52,7 @@ export default {
           // min: 5,
           // max: 5,
           required: true,
-          message: this.$t('components.enter-nonce.form.validations.length'),
+          message: this.$t('components.enter-nonce.form.validations.length'), // Wolle here 6 characters are mentioned
         },
       },
       dbRequestInProgress: false,
@@ -170,9 +156,5 @@ 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

@@ -54,7 +54,7 @@ import metadata from '~/constants/metadata.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import RegistrationSlideCreate from './RegistrationSlideCreate'
-import RegistrationSlideEmail from '~/components/Registration/RegistrationSlideEmail'
+import RegistrationSlideEmail from './RegistrationSlideEmail'
 import RegistrationSlideInvite from './RegistrationSlideInvite'
 import RegistrationSlideNonce from './RegistrationSlideNonce'
 import RegistrationSlideNoPublic from './RegistrationSlideNoPublic'

webapp/locales/de.json

@@ -147,10 +147,7 @@
         "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": {
@@ -182,6 +179,11 @@
         },
         "title": "E-Mail"
       },
+      "email-display": {
+        "warningFormat": "⚠️ E-Mail hat ein ungültiges Format!",
+        "warningUndef": "⚠️ Keine E-Mail definiert!",
+        "yourEmail": "Deine E-Mail-Adresse:"
+      },
       "email-nonce": {
         "buttonTitle": "Bestätigen",
         "form": {

webapp/locales/en.json

@@ -147,10 +147,7 @@
         "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": {
@@ -182,6 +179,11 @@
         },
         "title": "E-Mail"
       },
+      "email-display": {
+        "warningFormat": "⚠️ E-mail has wrong format!",
+        "warningUndef": "⚠️ No e-mail defined!",
+        "yourEmail": "Your e-mail address:"
+      },
       "email-nonce": {
         "buttonTitle": "Confirm",
         "form": {