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