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

83 lines
2.3 KiB
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>