Implement e-mail resend functionality

2025-12-13 07:45:56 +00:00 · 2021-02-27 17:02:55 +01:00 · 2021-02-27 17:02:55 +01:00 · e3bf47679e
commit e3bf47679e
parent 091ed52b54
6 changed files with 177 additions and 106 deletions
--- a/webapp/components/ComponentSlider/ComponentSlider.vue
+++ b/webapp/components/ComponentSlider/ComponentSlider.vue
@ -64,7 +64,7 @@ export default {
      if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
        success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick()
      }
-      // this.sliderData.sliders[this.sliderIndex].button.callback()
+      success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success)
      if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {
        this.sliderData.sliderSelectorCallback(this.sliderIndex + 1)
      }
--- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
+++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue
@ -289,7 +289,7 @@ export default {
      }
      // Wolle validate in backend
      // toaster
-      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values })
    },
    async handleInput() {
      this.sendValidation()
--- a/webapp/components/Registration/RegistrationItemEnterEmail.vue
+++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue
@ -1,38 +1,38 @@
 <template>
-  <ds-space v-if="!data && !error" margin="large">
-    <ds-form
-      v-model="formData"
-      :schema="formSchema"
-      @input="handleInput"
-      @input-valid="handleInputValid"
-    >
-      <!-- Wolle <h1>
+  <!-- Wolle <ds-space v-if="!data && !error" margin="large"> -->
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+  >
+    <!-- Wolle <h1>
        {{
          invitation
            ? $t('profile.invites.title', metadata)
            : $t('components.registration.signup.title', metadata)
        }}
      </h1> -->
-      <ds-text
-        v-if="token"
-        v-html="$t('registration.signup.form.invitation-code', { code: token })"
-      />
-      <ds-text>
-        {{
-          invitation
-            ? $t('profile.invites.description')
-            : $t('components.registration.signup.form.description')
-        }}
-      </ds-text>
-      <ds-input
-        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-        type="email"
-        id="email"
-        model="email"
-        name="email"
-        icon="envelope"
-      />
-      <!-- Wolle <base-button
+    <ds-text
+      v-if="token"
+      v-html="$t('registration.signup.form.invitation-code', { code: token })"
+    />
+    <ds-text>
+      {{
+        invitation
+          ? $t('profile.invites.description')
+          : $t('components.registration.signup.form.description')
+      }}
+    </ds-text>
+    <ds-input
+      :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+      type="email"
+      id="email"
+      model="email"
+      name="email"
+      icon="envelope"
+    />
+    <!-- Wolle <base-button
        :disabled="disabled"
        :loading="$apollo.loading"
        filled
@ -42,24 +42,17 @@
      >
        {{ $t('components.registration.signup.form.submit') }}
      </base-button> -->
-      <slot></slot>
-      <ds-text v-if="sliderData.collectedInputData.emailSend">
+    <slot></slot>
+    <ds-text v-if="sliderData.collectedInputData.emailSend">
      <!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
-        <input
-          id="checkbox"
-          type="checkbox"
-          v-model="sendEmailAgain"
-          :checked="sendEmailAgain"
-        />
-        <label for="checkbox0">
-          <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
-          Send e-mail again
-          <!-- <br />
-          <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
-        </label>
-      </ds-text>
-    </ds-form>
-  </ds-space>
+      <input id="checkbox" type="checkbox" v-model="sendEmailAgain" :checked="sendEmailAgain" />
+      <label for="checkbox0">
+        <!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
+        {{ 'Send e-mail again' }}
+      </label>
+    </ds-text>
+  </ds-form>
+  <!-- Wolle </ds-space>
  <div v-else margin="large">
    <template v-if="!error">
      <transition name="ds-transition-fade">
@ -76,7 +69,7 @@
        <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
      </ds-space>
    </template>
-  </div>
+  </div> -->
 </template>

 <script>
@ -84,7 +77,7 @@ 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'
+// Wolle import { SweetalertIcon } from 'vue-sweetalert-icons'

 export const SignupMutation = gql`
  mutation($email: String!) {
@ -103,7 +96,7 @@ export const SignupByInvitationMutation = gql`
 export default {
  name: 'RegistrationItemEnterEmail',
  components: {
-    SweetalertIcon,
+    // Wolle SweetalertIcon,
  },
  props: {
    sliderData: { type: Object, required: true },
@ -123,10 +116,13 @@ export default {
          message: this.$t('common.validations.email'),
        },
      },
+      // TODO: Our styleguide does not support checkmarks.
+      // Integrate termsAndConditionsConfirmed into `this.formData` once we
+      // have checkmarks available.
      sendEmailAgain: false,
      // Wolle disabled: true,
-      data: null,
-      error: null,
+      // Wolle data: null,
+      error: null, // Wolle
    }
  },
  mounted: function () {
@ -137,17 +133,26 @@ export default {
        : ''
      this.sendValidation()

-      this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick)
+      this.sliderData.setSliderValuesCallback(
+        this.validInput,
+        this.buttonValues(),
+        this.onNextClick,
+      )
    })
  },
+  watch: {
+    sendEmailAgain() {
+      this.setButtonValues()
+    },
+  },
  computed: {
    sliderIndex() {
      return this.sliderData.sliderIndex
    },
-    submitMessage() {
-      const { email } = this.data.Signup
-      return this.$t('components.registration.signup.form.success', { email })
-    },
+    // Wolle submitMessage() {
+    //   const { email } = this.data.Signup
+    //   return this.$t('components.registration.signup.form.success', { email })
+    // },
    validInput() {
      return isEmail(this.formData.email)
    },
@ -160,7 +165,7 @@ export default {
      const { email } = this.formData
      const values = { email }

-      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {})
+      this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values })
    },
    async handleInput() {
      this.sendValidation()
@ -168,36 +173,73 @@ export default {
    async handleInputValid() {
      this.sendValidation()
    },
+    // enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'Resend e-mail' : 'Skip resend') : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? (this.sendEmailAgain ? 'envelope' : 'arrow-right') : 'envelope' // Wolle
+    // },
+    buttonValues() {
+      return {
+        sliderSettings: {
+          // buttonTitle: this.enterEmailButtonTitle(this.sliderData.collectedInputData.emailSend),
+          // buttonIcon: this.enterEmailButtonIcon(this.sliderData.collectedInputData.emailSend),
+          buttonTitle: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'Resend e-mail'
+              : 'Skip resend'
+            : 'Send e-mail', // Wolle
+          buttonIcon: this.sliderData.collectedInputData.emailSend
+            ? this.sendEmailAgain
+              ? 'envelope'
+              : 'arrow-right'
+            : 'envelope', // Wolle
+        },
+      }
+    },
+    setButtonValues() {
+      this.sliderData.setSliderValuesCallback(this.validInput, this.buttonValues())
+    },
    async onNextClick() {
      const mutation = this.token ? SignupByInvitationMutation : SignupMutation
      const { token } = this
      const { email } = this.formData
      const variables = { email, token }

-      // Wolle test for resend
+      if (!this.sendEmailAgain && this.sliderData.collectedInputData.emailSend) {
+        return true
+      }
+
      if (
+        this.sendEmailAgain ||
        !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
        (this.sliderData.sliders[this.sliderIndex].data.request &&
          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
      ) {
-        // this.sliderData.sliders[this.sliderIndex].data = {
-        //   ...this.sliderData.sliders[this.sliderIndex].data,
-        //   request: { variables },
-        // }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )

        try {
          const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend
-          // this.sliderData.sliders[this.sliderIndex].data = {
-          //   ...this.sliderData.sliders[this.sliderIndex].data,
-          //   response: response.data,
-          // }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )

          if (this.sliderData.sliders[this.sliderIndex].data.response) {
-            this.sliderData.collectedInputData.emailSend = true
+            // this.sliderData.collectedInputData.emailSend = true
+            this.sliderData.setSliderValuesCallback(this.validInput, {
+              collectedInputData: { emailSend: true },
+            })
+            this.setButtonValues()
+
            const { email: respnseEmail } =
              this.sliderData.sliders[this.sliderIndex].data.response.Signup ||
              this.sliderData.sliders[this.sliderIndex].data.response.SignupByInvitation
@ -207,9 +249,15 @@ export default {
          }
          return true
        } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: null, response: null } })
-          this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { request: null, response: null } },
+          )
+          // this.sliderData.collectedInputData.emailSend = false
+          this.sliderData.setSliderValuesCallback(this.validInput, {
+            collectedInputData: { emailSend: false },
+          })
+          this.setButtonValues()

          const { message } = err
          const mapping = {
--- a/webapp/components/Registration/RegistrationItemEnterInvite.vue
+++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue
@ -92,19 +92,23 @@ export default {

      if (
        !this.sliderData.sliders[this.sliderIndex].data.request ||
-        (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
+        (this.sliderData.sliders[this.sliderIndex].data.request &&
+          !this.sliderData.sliders[this.sliderIndex].data.request.variables) ||
        (this.sliderData.sliders[this.sliderIndex].data.request &&
          this.sliderData.sliders[this.sliderIndex].data.request.variables &&
          !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables)
      ) {
-        // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables
-        // this.sliderData.sliders[this.sliderIndex].data.request = { variables }
-        this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } })
+        this.sliderData.setSliderValuesCallback(
+          this.sliderData.sliders[this.sliderIndex].validated,
+          { sliderData: { request: { variables }, response: null } },
+        )

        try {
          const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables })
-          // this.sliderData.sliders[this.sliderIndex].data.response = response.data
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: response.data } },
+          )

          if (
            this.sliderData.sliders[this.sliderIndex].data.response &&
@ -115,8 +119,10 @@ export default {
            )
          }
        } catch (err) {
-          // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false }
-          this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } })
+          this.sliderData.setSliderValuesCallback(
+            this.sliderData.sliders[this.sliderIndex].validated,
+            { sliderData: { response: { isValidInviteCode: false } } },
+          )

          const { message } = err
          this.$toast.error(message)
--- a/webapp/components/Registration/RegistrationSlider.story.js
+++ b/webapp/components/Registration/RegistrationSlider.story.js
@ -51,7 +51,7 @@ storiesOf('RegistrationSlider', module)
        collectedInputData: {
          inviteCode: 'IN1T6Y',
          email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
          nonce: 'NTRSCZ',
          name: 'Wolle',
          password: 'Hello',
@ -115,7 +115,7 @@ storiesOf('RegistrationSlider', module)
        collectedInputData: {
          inviteCode: null,
          email: 'wolle.huss@pjannto.com',
-          emailSend: true,
+          emailSend: false,
          nonce: null,
          name: null,
          password: null,
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@ -24,10 +24,7 @@
        >
          <!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
          <!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
-          <registration-item-enter-email
-            :sliderData="sliderData"
-            :invitation="false"
-          />
+          <registration-item-enter-email :sliderData="sliderData" :invitation="false" />
        </template>

        <template
@ -104,9 +101,8 @@ export default {
        validated: false,
        data: { request: null, response: null },
        button: {
-          // title: 'Send E-Mail', // Wolle
-          title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle
-          icon: 'envelope',
+          title: '', // set by slider component
+          icon: '', // set by slider component
          callback: this.buttonCallback,
          slotOnNextClick: null, // optional set by slot
        },
@ -190,11 +186,19 @@ export default {
    },
  },
  methods: {
-    enterEmailButtonTitle(emailSend) {
-      // return emailSend ? 'Resend e-mail' : 'Send e-mail'
-      return emailSend ? 'Skip send' : 'Send e-mail'  // Wolle
-    },
-    setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) {
+    // Wolle enterEmailButtonTitle(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'Skip resend' : 'Send e-mail' // Wolle
+    // },
+    // enterEmailButtonIcon(emailSend) {
+    //   // return emailSend ? 'Resend e-mail' : 'Send e-mail'
+    //   return emailSend ? 'arrow-right' : 'envelope' // Wolle
+    // },
+    setSliderValuesCallback(
+      isValid,
+      { collectedInputData, sliderData, sliderSettings },
+      slotOnNextClick = null,
+    ) {
      this.sliderData.sliders[this.sliderIndex].validated = isValid

      if (collectedInputData) {
@ -206,13 +210,23 @@ export default {
      if (sliderData) {
        if (this.sliderData.sliders[this.sliderIndex].data) {
          this.sliderData.sliders[this.sliderIndex].data = {
-            request: sliderData.request ? sliderData.request : this.sliderData.sliders[this.sliderIndex].data.request,
-            response: sliderData.response ? sliderData.response : this.sliderData.sliders[this.sliderIndex].data.response,
+            request: sliderData.request
+              ? sliderData.request
+              : this.sliderData.sliders[this.sliderIndex].data.request,
+            response: sliderData.response
+              ? sliderData.response
+              : this.sliderData.sliders[this.sliderIndex].data.response,
          }
        }
      }
      if (sliderSettings) {
-        
+        const { buttonTitle, buttonIcon } = sliderSettings
+        if (buttonTitle) {
+          this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle
+        }
+        if (buttonIcon) {
+          this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon
+        }
      }

      if (slotOnNextClick) {
@ -221,15 +235,18 @@ export default {
    },
    sliderSelectorCallback(selectedIndex) {
      if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
-        if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
-          this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
-            this.sliderData.collectedInputData.emailSend,
-          )
-        }
+        // Wolle if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
+        //   this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        //   this.sliderData.sliders[this.sliderIndex].button.icon = this.enterEmailButtonIcon(
+        //     this.sliderData.collectedInputData.emailSend,
+        //   )
+        // }
        this.sliderData.sliderIndex = selectedIndex
      }
    },
-    buttonCallback() {
+    buttonCallback(success) {
      // Wolle
      // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
      //   // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) {
@ -239,7 +256,6 @@ export default {
      //     this.sliderData.collectedInputData.emailSend,
      //   )
      // }
-
      // if (this.sliderIndex === this.sliderData.sliders.length - 1) {
      //   // console.log('submit data: ', this.sliderData.collectedInputData)
      // } else {
@ -250,6 +266,7 @@ export default {
      //     }
      //   }
      // }
+      return success
    },
  },
 }