<template>

  <Page>

    <!-- Title -->
    <h1 class="text-center mb-4">{{ $t('user.signIn') | capitalize }}</h1>

    <!-- Need auth message -->
    <t-alert v-if="showNeedAuthMessage" class="mb-8" show>
      <p class="text-warning">{{ $t('global.pageRequiresAuth') | capitalize }}</p>
    </t-alert>

    <!-- Form container -->
    <div>
      <!-- Login form -->
      <LoginForm class="mb-4"/>

      <!-- SignUp link -->
      <Link to="/sign-up">{{ $t('user.signUp') | capitalize }}</Link>
    </div>

  </Page>

</template>

<script>
import { Core } from '@hperchec/scorpion-ui'
/**
 * Login page component
 */
export default {
  computed: {
    /**
     * Defines if we need to display a message that indicates the route need authentication (private route)
     * @return {boolean}
     */
    showNeedAuthMessage: function () {
      // If the query param 'redirect' is set, user comes from location that needs auth
      return Boolean(this.query.redirect)
    }
  },
  applyMixins () {
    return [
      Core.context.vue.mixins.RouteComponentMixin
    ]
  },
  bindComponents () {
    return {
      LoginForm: Core.context.vue.components.public.views.login.LoginForm
    }
  }
}
</script>
