hedera-web/src/pages/Login/Login.vue

<template>
  <div class="main">
    <div class="header">
      <router-link to="/" class="block">
        <img
          src="statics/logo.svg"
          alt="Verdnatura"
          class="block"
        />
      </router-link>
    </div>
    <q-form @submit="onLogin" class="q-gutter-y-md">
      <div class="q-gutter-y-sm">
        <q-input
          v-model="email"
          :label="$t('user')"
          autofocus
        />
        <q-input
          v-model="password"
          ref="password"
          :label="$t('password')"
          :type="showPwd ? 'password' : 'text'">
          <template v-slot:append>
            <q-icon
              :name="showPwd ? 'visibility_off' : 'visibility'"
              class="cursor-pointer"
              @click="showPwd = !showPwd"
            />
          </template>
        </q-input>
        <q-checkbox
          v-model="remember"
          :label="$t('remindMe')"
          class="remember"
          dense
        />
      </div>
      <div class="justify-center">
        <q-btn
          type="submit"
          :label="$t('logIn')"
          class="full-width"
          color="primary"
          rounded
          no-caps
          unelevated
        />
      </div>
      <div class="justify-center">
        <q-btn
          type="submit"
          :label="$t('logInAsGuest')"
          class="full-width"
          color="primary"
          rounded
          no-caps
          outline
        />
      </div>
      <p class="password-forgotten text-center">
        <router-link to="/remember-password" class="link">
          {{$t('haveForgottenPassword')}}
        </router-link>
      </p>
    </q-form>
    <div class="footer text-center">
      <p>
        {{$t('notACustomerYet')}}
        <a href="//verdnatura.es/register/" target="_blank">{{$t('signUp')}}</a>
      </p>
      <p class="contact">
        {{$t('loginPhone')}} · {{$t('loginMail')}}
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$login-margin-top: 50px;
$login-margin-between: 55px;

.main {
  max-width: 280px;
}
a {
  text-decoration: none;
  color: inherit;

  &:hover {
    text-decoration: underline;
  }
}
.header {
  margin-top: $login-margin-top;
  margin-bottom: $login-margin-between;

  img {
    display: block;
    margin: 0 auto;
    width: 90%;
  }
}
.remember {
  margin-top: 20px;
  margin-bottom: 40px;
}
.q-btn {
  height: 50px;
}
.password-forgotten {
  font-size: .8rem;
  margin-top: 30px;
}
.footer {
  margin-bottom: $login-margin-top;
  margin-top: $login-margin-between;
  text-align: center;
  font-size: .8rem;

  .contact {
    margin-top: 15px;
    color: grey;
  }
  a {
    font-weight: bold;
  }
}
</style>

<script>
export default {
  name: 'VnLogin',
  data () {
    return {
      email: '',
      password: '',
      remember: false,
      showPwd: true
    }
  },
  mounted () {
    if (this.$route.query.emailConfirmed !== undefined) {
      this.$q.notify({
        message: this.$t('emailConfirmedSuccessfully'),
        type: 'positive'
      })
    }
    if (this.$route.params.email) {
      this.email = this.$route.params.email
      this.$refs.password.focus()
    }
  },
  methods: {
    async onLogin () {
      const params = {
        password: this.password
      }

      if (this.email.indexOf('@') !== -1) {
        params.email = this.email
      } else {
        params.username = this.email
      }

      const res = await this.$axios.post('users/login', params)
      localStorage.setItem('token', res.data.id)
      Object.assign(this.$state.user, {
        loggedIn: true,
        token: res.data.id,
        id: res.data.userId,
        name: this.email
      })
      this.$router.push('/home')
    }
  }
}
</script>

<i18n lang="yaml">
en-US:
  user: User
  password: Password
  remindMe: Remind me
  logInAsGuest: Log in as guest
  logIn: Log in
  loginMail: infoverdnatura.es
  loginPhone: +34 607 562 391
  haveForgottenPassword: Have you forgotten your password?
  notACustomerYet: Not a customer yet?
  signUp: Register
es-ES:
  user: Usuario
  password: Contraseña
  remindMe: Recuérdame
  logInAsGuest: Entrar como invitado
  logIn: Iniciar sesión
  loginMail: infoverdnatura.es
  loginPhone: +34 963 242 100
  haveForgottenPassword: ¿Has olvidado tu contraseña?
  notACustomerYet: ¿Todavía no eres cliente?
  signUp: Registrarme
</i18n>