From 756def9cf99c7f05248969535ceacf71f8c96b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 9 Feb 2021 15:10:11 +0100
Subject: [PATCH] Add explicit validations for preset values

- Show e-mail address.
---
 .../RegistrationItemCreateUserAccount.vue     | 13 ++--
 .../RegistrationItemEnterEmail.vue            | 48 ++++++++-------
 .../RegistrationItemEnterInvite.vue           |  2 +-
 .../RegistrationItemEnterNonce.vue            | 29 ++++++++-
 .../Registration/RegistrationSlider.story.js  | 61 ++++++++++++++++++-
 .../Registration/RegistrationSlider.vue       |  8 +++
 6 files changed, 130 insertions(+), 31 deletions(-)

diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
index 420a783f3..e7e7f8384 100644
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@@ -68,7 +68,13 @@
           autocomplete="off"
           :label="$t('settings.security.change-password.label-new-password-confirm')"
         />
-        <password-strength :password="formData.password" />
+        <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>
 
         <ds-text>
           <input
@@ -353,8 +359,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.create-account-image {
-  width: 50%;
-  max-width: 200px;
+.password-strength {
+  margin-bottom: 14px;
 }
 </style>
diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue
index fb4fc4f7e..247216a2e 100644
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@@ -69,6 +69,8 @@
 <script>
 import gql from 'graphql-tag'
 import metadata from '~/constants/metadata'
+import { isEmail } from 'validator'
+import normalizeEmail from '~/components/utils/NormalizeEmail'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export const SignupMutation = gql`
@@ -107,18 +109,6 @@ export default {
           required: true,
           message: this.$t('common.validations.email'),
         },
-        // email: [
-        //   { type: 'email', required: true },
-        //   {
-        //     validator(rule, value, callback, source, options) {
-        //       const errors = []
-        //       if (currentEmail === normalizeEmail(value)) {
-        //         errors.push(this.$t('common.validations.email'))
-        //       }
-        //       return errors
-        //     },
-        //   },
-        // ],
       },
       // disabled: true,
       data: null,
@@ -132,6 +122,7 @@ export default {
       this.formData.email = this.sliderData.collectedInputData.email
         ? this.sliderData.collectedInputData.email
         : ''
+      this.sendValidation()
     })
   },
   computed: {
@@ -139,24 +130,39 @@ export default {
       const { email } = this.data.Signup
       return this.$t('components.registration.signup.form.success', { email })
     },
-    // valid() {
-    //   const isValid =
-    //     this.formData.email.XXX === XXX
-    //   return isValid
-    // },
+    valid() {
+      let isValid
+      if (isEmail(this.formData.email)) {
+        this.formData.email = normalizeEmail(this.formData.email)
+        isValid = true
+      } else {
+        isValid = false
+      }
+      return isValid
+    },
   },
   methods: {
+    sendValidation() {
+      const { email } = this.formData
+      const value = {
+        email,
+      }
+      // console.log('sendValidation !!! value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
+    },
     handleInput() {
       // this.disabled = true
-      this.sliderData.validateCallback(false)
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
     },
     handleInputValid() {
       // this.disabemailled = false
-      const { email } = this.formData
+      // const { email } = this.formData
       // validate in backend?
       // toaster?
-      console.log('sendValidation !!! email: ', email)
-      this.sliderData.validateCallback(true, { email })
+      // console.log('sendValidation !!! email: ', email)
+      // this.sliderData.validateCallback(true, { email })
+      this.sendValidation()
     },
     async handleSubmit() {
       const mutation = this.token ? SignupByInvitationMutation : SignupMutation
diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue
index 15215b569..0218ecd4f 100644
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@@ -66,7 +66,7 @@ export default {
       const value = {
         inviteCode,
       }
-      console.log('sendValidation !!! value: ', value)
+      // console.log('sendValidation !!! value: ', value)
       this.sliderData.validateCallback(this.valid, value)
     },
     async handleInput() {
diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue
index 3e95c8d03..c1c7c6875 100644
--- a/webapp/components/Registration/RegistrationItemEnterNonce.vue
+++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue
@@ -7,6 +7,11 @@
     @input="handleInput"
     @input-valid="handleInputValid"
   >
+    <ds-text>
+      <!-- Wolle {{ $t('components.enter-nonce.form.description') }} -->
+      Your e-mail address:
+      <b>{{ this.sliderData.collectedInputData.email }}</b>
+    </ds-text>
     <ds-input
       :placeholder="$t('components.enter-nonce.form.nonce')"
       model="nonce"
@@ -54,19 +59,37 @@ export default {
       this.formData.nonce = this.sliderData.collectedInputData.nonce
         ? this.sliderData.collectedInputData.nonce
         : ''
+      this.sendValidation()
     })
   },
+  computed: {
+    valid() {
+      const isValid =
+        this.formData.nonce.length === 6
+      return isValid
+    },
+  },
   methods: {
+    sendValidation() {
+      const { nonce } = this.formData
+      const value = {
+        nonce,
+      }
+      // console.log('sendValidation !!! value: ', value)
+      this.sliderData.validateCallback(this.valid, value)
+    },
     async handleInput() {
       // this.disabled = true
-      this.sliderData.validateCallback(false)
+      // this.sliderData.validateCallback(false)
+      this.sendValidation()
     },
     async handleInputValid() {
       // this.disabled = false
-      const { nonce } = this.formData
+      // const { nonce } = this.formData
       // validate in backend?
       // toaster?
-      this.sliderData.validateCallback(true, { nonce })
+      // this.sliderData.validateCallback(true, { nonce })
+      this.sendValidation()
     },
     handleSubmitVerify() {
       // const { nonce } = this.formData
diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js
index 56990cccf..1ddf471b0 100644
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@@ -26,6 +26,7 @@ storiesOf('RegistrationSlider', module)
         collectedInputData: {
           inviteCode: 'IN1T6Y',
           email: 'wolle.huss@pjannto.com',
+          emailSend: true,
           nonce: 'NTRSCZ',
           name: 'Wolle',
           password: 'Hello',
@@ -45,7 +46,7 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="invite-code" :overwriteSliderData="overwriteSliderData" />
     `,
   }))
-  .add('public-registration', () => ({
+  .add('public-registration empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
@@ -55,7 +56,35 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="public-registration" />
     `,
   }))
-  .add('invite-mail', () => ({
+  .add('public-registration with data', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: null,
+          email: 'wolle.huss@pjannto.com',
+          emailSend: false,
+          nonce: 'NTRSCZ',
+          name: 'Wolle',
+          password: 'Hello',
+          passwordConfirmation: 'Hello',
+          about: `Hey`,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: true,
+          dataPrivacy: true,
+          minimumAge: true,
+          noCommercial: true,
+          noPolitical: true,
+          locale: null,
+        },
+      },
+    }),
+    template: `
+      <registration-slider registrationType="public-registration" :overwriteSliderData="overwriteSliderData" />
+    `,
+  }))
+  .add('invite-mail empty', () => ({
     components: { RegistrationSlider },
     store: helpers.store,
     data: () => ({
@@ -65,3 +94,31 @@ storiesOf('RegistrationSlider', module)
       <registration-slider registrationType="invite-mail" />
     `,
   }))
+  .add('invite-mail with data', () => ({
+    components: { RegistrationSlider },
+    store: helpers.store,
+    data: () => ({
+      overwriteSliderData: {
+        collectedInputData: {
+          inviteCode: null,
+          email: 'wolle.huss@pjannto.com',
+          emailSend: null,
+          nonce: 'NTRSCZ',
+          name: 'Wolle',
+          password: 'Hello',
+          passwordConfirmation: 'Hello',
+          about: `Hey`,
+          termsAndConditionsAgreedVersion: null,
+          termsAndConditionsConfirmed: true,
+          dataPrivacy: true,
+          minimumAge: true,
+          noCommercial: true,
+          noPolitical: true,
+          locale: null,
+        },
+      },
+    }),
+    template: `
+      <registration-slider registrationType="invite-mail" :overwriteSliderData="overwriteSliderData" />
+    `,
+  }))
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index c77f4b8d2..621318a4c 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -100,6 +100,7 @@ export default {
         title: 'E-Mail', // Wolle
         validated: false,
         button: {
+          // title: this.sliderData.collectedInputData.emailSend ? 'Resend E-Mail' : 'Send E-Mail', // Wolle
           title: 'Send E-Mail', // Wolle
           icon: 'envelope',
           callback: this.buttonCallback,
@@ -154,6 +155,7 @@ export default {
         collectedInputData: {
           inviteCode: null,
           email: null,
+          emailSend: null,
           nonce: null,
           name: null,
           password: null,
@@ -196,6 +198,12 @@ export default {
       }
     },
     buttonCallback() {
+      if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+        console.log('buttonCallback !!! enter-email')
+        this.sliderData.collectedInputData.emailSend = true
+        this.sliderData.sliders[this.sliderIndex].button.title = 'Resend E-Mail' // Wolle
+      }
+
       if (this.sliderIndex === this.sliderData.sliders.length - 1) {
         // console.log('submit data: ', this.sliderData.collectedInputData)
       } else {