cineclub-site/front/pages/admin/login.vue

<template>
  <div class="mt-5 hero is-fullheight">
    <div class="hero-body is-justify-content-center is-align-items-center">
      <div class="columns is-flex is-flex-direction-column box">
        <div class="column is-half-desktop is-offset-one-quarter-desktop">
          <div v-if="errorMessage" class="notification is-danger">
            La connexion a échoué pour le motif suivant : "{{ errorMessage }}".
          </div>
          <form action="#" @submit.prevent="onSubmit">
            <fieldset>
              <label for="username">Identifiant</label>
              <input
                id="username"
                v-model="login.username"
                class="input is-primary"
                type="text"
                placeholder="Identifiant"
              />
            </fieldset>

            <fieldset>
              <label for="password">Mot de passe</label>
              <input
                id="password"
                v-model="login.password"
                class="input is-primary"
                type="password"
                placeholder="Mot de passe"
              />
            </fieldset>

            <fieldset>
              <label class="button is-primary is-fullwidth" for="submit">
                Connexion
              </label>
              <input id="submit" type="submit" />
            </fieldset>

            <div class="has-text-centered">
              <p class="is-size-7">
                Pas de compte ? Oublié votre mot de passe ?
                <a href="mailto:cineclub-contact@ens.psl.eu">
                  Contactez le ciné-club.
                </a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from "~/stores/authStore"

definePageMeta({ layout: "admin" })
useHead({ title: "Connexion" })

const authStore = useAuthStore()
const login = ref({ username: "", password: "" })
const errorMessage = ref("")

async function onSubmit() {
  const { error } = await authStore.login(
    login.value.username,
    login.value.password
  )
  errorMessage.value = error.value?.message || ""
  if (!error.value) await navigateTo("/admin/", { replace: true })
}
</script>

<style scoped lang="sass">
fieldset
  margin-bottom: 1.5rem

  input
    margin-top: 0.5rem

input[type="submit"]
  display: none
</style>