Nicolas Doby
6d164129a6
- 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
90 lines
3.6 KiB
Vue
90 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
||
|
||
import {useNotificationStore} from "~/store/notification";
|
||
import {useAccountStore} from "~/store/account";
|
||
import type {ApiError} from "~/composables/fetch-api";
|
||
|
||
definePageMeta({
|
||
layout: 'main-header'
|
||
});
|
||
|
||
const email = ref();
|
||
const username = ref();
|
||
const emailConfirmation = ref();
|
||
const password = ref();
|
||
const confirmationPassword = ref();
|
||
const conditionChecked = ref(false);
|
||
const cguModalVisible = ref(false);
|
||
|
||
function createAccount() {
|
||
if (emailConfirmation.value !== email.value) {
|
||
useNotificationStore().pushNotification("warn", {message: "Saisir le même e-mail dans les champs 'E-mail' et 'Confirmation de l'e-mail'."});
|
||
} else if (password.value !== confirmationPassword.value) {
|
||
useNotificationStore().pushNotification("warn", {message: "Saisir le même mot de passe dans les champs 'Mot de passe' et 'Confirmation du mot de passe'."});
|
||
} else {
|
||
useAccountStore().create(username.value, email.value, password.value)
|
||
.then(() => {
|
||
useNotificationStore().pushNotification("success", {
|
||
message: "Votre compte a bien été créé.",
|
||
details: "Vous allez recevoir un e-mail."
|
||
});
|
||
navigateTo("/login");
|
||
})
|
||
.catch((apiError: ApiError) => {
|
||
let details;
|
||
if (apiError.fieldErrors) {
|
||
details = apiError.fieldErrors.map(error => `${error.fields!.join(", ")} ${error.detail}`);
|
||
}
|
||
useNotificationStore().pushNotification("warn", {message: apiError.message, details});
|
||
});
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<template>
|
||
<div>
|
||
<section>
|
||
<h1>Créer un compte</h1>
|
||
<form class="form" @submit.prevent="createAccount">
|
||
<label for="username">Nom de l'équipe *</label>
|
||
<input id="username" v-model="username" type="text" autocomplete="username" required>
|
||
<label for="email">E-mail *</label>
|
||
<input id="email" v-model="email" type="email" autocomplete="email" required>
|
||
<label for="emailConfirmation">Confirmation de l'e-mail *</label>
|
||
<input id="emailConfirmation" v-model="emailConfirmation" type="email" required>
|
||
<p class="form__help">Votre mot de passe doit fait au moins 8 caractères, et être composé d’au moins une
|
||
majuscule, une minuscule,
|
||
un chiffre de 0 à 9, et un caractère spécial parmi @?!#$&;,:</p>
|
||
<label for="newPassword">Mot de passe *</label>
|
||
<input id="newPassword" v-model="password" type="password" required>
|
||
<label for="confirmationPassword">Confirmation du mot de passe *</label>
|
||
<input id="confirmationPassword" v-model="confirmationPassword" type="password" required>
|
||
<label>
|
||
<input v-model="conditionChecked" type="checkbox" required/>
|
||
En continuant, j’accepte
|
||
<button class="button-link" @click="cguModalVisible = true" type="button">les conditions d'utilisation de Boussole PLUSS et j’ai lu la politique de
|
||
confidentialité
|
||
</button>
|
||
</label>
|
||
<div class="button-container">
|
||
<nuxt-link class="button gray button-back" to="/login" aria-label="Retour à la page précédente">❮</nuxt-link>
|
||
<button class="button orange" type="submit" :disabled="!conditionChecked">Enregistrer</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
<cgu-modal :visible="cguModalVisible" @close="cguModalVisible = false; conditionChecked = false;" @validate="conditionChecked = true; cguModalVisible = false"/>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "assets/css/spacing";
|
||
|
||
.form {
|
||
input[type="checkbox"] {
|
||
grid-column: span 2 / 3;
|
||
margin-top: $small;
|
||
}
|
||
|
||
}
|
||
</style>
|