login.vue 1.79 KB
Newer Older
1
<template>
2
  <section class="max-w-xl mx-auto px-6 py-9 bg-white border border-gray-200">
3
    <div class="block flex justify-center mb-8">
4
      <img alt="logo aplly" src="/content/images/icons/icon-aplly.svg" class="icon-aplly" />
5
    </div>
6
    <div class="relative p-4 text-sm text-red-900 bg-red-100 border border-red-200 rounded-md mb-8" v-if="authenticationError">
7
      <p v-if="authenticationError === 'credentials'">
8
9
10
        <span>{{ $t('login.messages.error.authentication') }}</span>
        <router-link :to="{ name: 'ResetPasswordInit' }" class="font-semibold">{{ $t('login.messages.error.reinit') }}</router-link>
        <span>.</span>
11
12
13
      </p>
      <p v-if="authenticationError === 'not.activated'">
        <span>{{ $t('login.messages.error.notactivated') }}</span>
14
15
      </p>
    </div>
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    <form role="form" v-on:submit.prevent="doLogin()">
      <div class="text-left block">
        <oa-input
          id="login"
          :label="$t('login.form.username.label')"
          :value="login"
          :placeholder="$t('login.form.username.placeholder')"
          required="true"
          @update="login = $event"
        />
        <oa-input
          id="password"
          type="password"
          :label="$t('login.form.password.label')"
          :value="password"
          :placeholder="$t('login.form.password.placeholder')"
          required="true"
          @update="password = $event"
34
          minlength="4"
35
36
        />
      </div>
37
      <div class="m-8 text-center">
38
39
40
        <oa-button :label="$t('login.form.button.login')" type="submit" variant="primary" />
      </div>
    </form>
41
    <router-link class="block text-blue-500 text-center" to="/account/reset/request">{{ $t('login.password.forgot') }}</router-link>
42
43
44
45
  </section>
</template>

<script lang="ts" src="./login.component.ts" />