<template>
  <section class="auth-form">
    <AuthPageHeader title="Almost Done!" />
    <p>Please check <strong>{{ userInfo.email }}</strong> to confirm your account.</p>
    <ul class="links-container">
      <RouterLink
        tag="li"
        :to="linkResend"
      >
        <AppButton
          id="link-register"
          type="primary"
          size="text"
          text="Didn’t receive the email?"
          no-branding
        />
      </RouterLink>
    </ul>
    <AuthPageFooter />
  </section>
</template>

<script>
  export default {
    name: 'AppRegisterConfirmation',
    props: {
      linkLogin: {
        type: [String, Object],
        default: '',
      },
      linkResend: {
        type: [String, Object],
        default: '',
      },
      linkRegister: {
        type: [String, Object],
        default: '',
      },
      userInfo: {
        type: Object,
        default: () => ({}),
      },
    },
    created() {
      // We want the email address to persist across all login/forgotPW/registration forms
      if (!this.userInfo.email) {
        // If we don't know your email address then you obviously don't know your info and will redirect to the login screen)
        const redirectURL = this.$route.query.redirect || this.linkLogin;

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

<style lang="scss" scoped>
  .auth-form {
    max-width: 500px;
  }

  .links-container {
    justify-content: space-around;
    margin-top: 60px;
  }
</style>
