ShowEasyFrontEnd/FrontEnd/pages/user/verify.vue

<template>
  <v-card width="414px" height="700px" :class=" $vuetify.breakpoint.smAndUp ? 'ml-lg-10 mr-0 mt-sm-10 pt-sm-15 px-sm-7 elevation-0 Neutrals rounded-xl fill-height' : 'pt-15 px-7 elevation-0 Neutrals fill-height' ">
    <v-spacer>
      <p class="title">{{ $t('Thank you for signing up') }}</p>
      <p class="neutrals--text text--darken-5 text-size-14">{{ $t('Your email has been verified') }}</p>
      <nuxt-link :to="localePath('/')">
        <v-btn width="100%" color="primary" class="border-radius-16 mt-4">
          <span class="text-capitalize">{{ $t('Explore with ShowEasy') }}</span>
        </v-btn>
      </nuxt-link>
      <v-spacer class="d-flex justify-center mt-5">
        <span class="text-size-12 primary--text" v-html="$t('Go to ShowEasy in sec',{second:this.countdown})"></span>
      </v-spacer>
    </v-spacer>
  </v-card>
</template>
<script>
export default {
  auth:false,
  layout: 'login',
  data() {
    return {
      countdown: 5
    }
  },
  mounted() {
    if (Object.keys(this.$route.query).length >= 2) {
      this.$axios.get(`/member/users/verify/${this.$route.query.time_stamp}&${this.$route.query.auth_code}&${this.$route.query.user_mail}?lang=${this.$i18n.locale}`)
      .then((result) => {
        this.timer = setInterval(() => {
          if (this.countdown > 0) { this.countdown-- }
          else { 
            clearInterval(this.timer)
            this.$router.push(this.localePath('/')) 
          }
        }, 1000);
      })
      .catch((err) => {
        console.log(err)
      });
    }
    else {
      this.$router.push(this.localePath('/'))
    }
  },
  beforeUnmount() {
    clearInterval(this.timer)
  },

}
</script>
<style lang="scss" scoped>
.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0.02em;
  color: #232323;
}
</style>