boussole-pluss/frontend/pages/account/create.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 type="checkbox" v-model="conditionChecked" 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 {

  //.checkbox {
  //   input {
  //    position: absolute;
  //    opacity: 0;
  //    cursor: pointer;
  //    height: 0;
  //    width: 0;
  //  }
  //  input:checked ~ &-checkmark:after {
  //    display: block;
  //  }
  //
  //  &-checkmark {
  //    position: absolute;
  //    top: 0;
  //    left: 0;
  //    height: 25px;
  //    width: 25px;
  //    background-color: #eee;
  //
  //    &:after {
  //      left: 9px;
  //      top: 5px;
  //      width: 5px;
  //      height: 10px;
  //      border: solid white;
  //      border-width: 0 3px 3px 0;
  //      rotate: 45deg;
  //    }
  //  }
  //  &-checkmark:after {
  //    content: "";
  //    position: absolute;
  //    display: none;
  //  }
  //  &:hover input ~ &-checkmark {
  //    background-color: #ccc;
  //  }
  //}
  input[type="checkbox"] {
    grid-column: span 2 / 3;
    margin-top: $medium;
  }
}
</style>