<template>
  <section
    id="resend-confirmation-container"
    class="auth-form"
  >
    <AuthPageHeader title="I didn’t receive the temporary password email." />
    <ol>
      <li>
        Is the {{ userInfo.email }} your correct email without typos? If not, you can
        <RouterLink
          :to="linkRegister"
          v-text="'restart the account creation process'"
        />.
      </li>
      <li>Check your spam folder</li>
      <li>Add email@threeflow.com to your contacts</li>
    </ol>
    <p><strong>Or we can try again:</strong></p>
    <p>{{ userInfo.email }}</p>
    <p>
      <slot name="ctaSubmit">
        <AppButton
          text="Resend confirmation email"
          no-branding
          @click="resendConfirmation"
        />
      </slot>
    </p>
    <AuthPageFooter />
  </section>
</template>

<script>
  export default {
    name: 'AppResendConfirmation',
    props: {
      documentId: {
        type: String,
        default: null,
      },
      accountService: {
        type: Object,
        default: () => ({}),
      },
      linkConfirmation: {
        type: [String, Object],
        required: true,
      },
      linkLogin: {
        type: [String, Object],
        required: true,
      },
      linkRegister: {
        type: [String, Object],
        required: true,
      },
      projectId: {
        type: [String, Number],
        default: null,
      },
      userInfo: {
        type: Object,
        default: () => ({}),
      },
    },
    /**
     * If the email address isn't passed, redirect to the linkLogin.
     */
    created() {
      if (!this.userInfo.email) {
        this.$router.replace(this.$route.query.redirect || this.linkLogin);
      }
    },
    methods: {
      /**
       * call the AccountService to send a new confirmation email
       */
      resendConfirmation() {
        if (!this.accountService.resendConfirmation) {
          return;
        }

        this
          .accountService
          .resendConfirmation({
            documentId: this.documentId,
            email: this.userInfo.email,
            projectId: this.projectId,
          })
          .then(() => {
            const redirectURL = this.$route.query.redirect || this.linkConfirmation;

            this.$router.replace(redirectURL);
          })
          .catch(() => {});
      },
    },
  };
</script>

<style scoped lang="scss">
  .auth-form {
    max-width: 570px;
    text-align: left;
  }

  ol {
    margin-bottom: 25px;
    padding-left: 20px;
    list-style: decimal;
  }

  li {
    font-size: 14px;
    line-height: 1.86;
  }

  p {
    margin: 0 0 15px;
  }
</style>
