81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<Header/>
|
|||
|
|
<form id="login_form" class="content login" @submit.prevent="authenticate">
|
|||
|
|
<input v-model="username" type="text" required placeholder="Nom de l'équipe" aria-label="Nom de l'équipe"/>
|
|||
|
|
<input id="code" v-model="password" type="password" required placeholder="Code" aria-label="Code"/>
|
|||
|
|
<div>
|
|||
|
|
<label>
|
|||
|
|
<input v-model="conditionChecked" type="checkbox" required/>
|
|||
|
|
En continuant, j’accepte les conditions d'utilisation de Boussole PLUSS et j’ai lu la politique de
|
|||
|
|
confidentialité
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<button class="button blue" type="submit" :disabled="!conditionChecked">
|
|||
|
|
Continuer
|
|||
|
|
</button>
|
|||
|
|
<div class="error-container">{{ error }}</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import {Component, Vue} from "nuxt-property-decorator";
|
|||
|
|
import {HTTPResponse} from "@nuxtjs/auth-next/dist";
|
|||
|
|
|
|||
|
|
@Component
|
|||
|
|
export default class Login extends Vue {
|
|||
|
|
private username = "";
|
|||
|
|
private password = "";
|
|||
|
|
private conditionChecked: boolean = false;
|
|||
|
|
private error = "";
|
|||
|
|
|
|||
|
|
async authenticate() {
|
|||
|
|
try {
|
|||
|
|
this.error = "";
|
|||
|
|
const response = await this.$auth.loginWith('local', {
|
|||
|
|
data: {
|
|||
|
|
username: this.username,
|
|||
|
|
password: this.password
|
|||
|
|
}
|
|||
|
|
}) as HTTPResponse;
|
|||
|
|
if (response && response.data) {
|
|||
|
|
const { token } = response.data;
|
|||
|
|
this.$axios.defaults.headers.common = { Authorization: `Bearer ${token}` };
|
|||
|
|
} else {
|
|||
|
|
console.error("Unable to login, no data in HTTP response")
|
|||
|
|
}
|
|||
|
|
} catch (e: any) {
|
|||
|
|
this.error = e;
|
|||
|
|
console.info("error", e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
@import "assets/css/spacing";
|
|||
|
|
|
|||
|
|
form.login {
|
|||
|
|
input[type="text"] {
|
|||
|
|
margin: $x_small 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type="password"] {
|
|||
|
|
margin-bottom: $small;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button {
|
|||
|
|
margin: $medium 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|