feat: review backend and frontend
- update to the latest version of Java/SpringBoot - update to the latest version NuxtJS - add account/password update - add account creation - add account password reset - add bundle to regroup questions and add default questions on user creation - add bundle creation
This commit is contained in:
@@ -1,80 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header/>
|
||||
<form id="login_form" class="content login" @submit.prevent="authenticate">
|
||||
<input v-model="username" type="text" required autocomplete="username" placeholder="Nom de l'équipe" aria-label="Nom de l'équipe"/>
|
||||
<input id="code" v-model="password" type="password" required autocomplete="current-password" 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" setup>
|
||||
import {useAuthStore} from "~/store/auth";
|
||||
import {useNotificationStore} from "~/store/notification";
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Vue} from "nuxt-property-decorator";
|
||||
import {HTTPResponse} from "@nuxtjs/auth-next/dist";
|
||||
definePageMeta({
|
||||
layout: 'main-header'
|
||||
});
|
||||
|
||||
@Component
|
||||
export default class Login extends Vue {
|
||||
private username = "";
|
||||
private password = "";
|
||||
private conditionChecked: boolean = false;
|
||||
private error = "";
|
||||
const email = ref("");
|
||||
const password = ref("");
|
||||
|
||||
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")
|
||||
function authenticate() {
|
||||
useAuthStore()
|
||||
.login(email.value, password.value)
|
||||
.then(() => {
|
||||
if (useAuthStore().authenticated) {
|
||||
navigateTo("/bundle");
|
||||
}
|
||||
} catch (e: any) {
|
||||
this.error = e;
|
||||
console.info("error", e);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
useNotificationStore().pushNotification("warn", e);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="login" @submit.prevent="authenticate">
|
||||
<input v-model="email" type="email" required autocomplete="username" placeholder="E-mail" aria-label="E-mail"/>
|
||||
<input id="code" v-model="password" type="password" required autocomplete="current-password"
|
||||
placeholder="Mot de passe" aria-label="Mot de passe"/>
|
||||
<button class="button orange" type="submit">
|
||||
Continuer
|
||||
</button>
|
||||
<nuxt-link class="link-forget-password" to="/account/password/reset">J'ai oublié mon mot de passe</nuxt-link>
|
||||
<nuxt-link class="button blue" to="/account/create">Créer un compte</nuxt-link>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "assets/css/spacing";
|
||||
|
||||
form.login {
|
||||
input[type="text"] {
|
||||
margin: $x_small 0;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
margin-bottom: $small;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $xxx_small;
|
||||
padding: $x_medium 0;
|
||||
|
||||
button {
|
||||
margin: $medium 0;
|
||||
margin-block: $x_medium 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: red;
|
||||
.link-forget-password {
|
||||
align-self: center;
|
||||
margin-block: $xx_small $xx_medium;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user