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

frontend/pages/dashboard.vue

@@ -1,74 +1,61 @@
-<template>
-  <div class="content">
-    <team-header/>
-    <hr/>
-    <div v-if="loading" class="center" >
-      <loader/>
-    </div>
-      <section v-if="currentResult" class="last-quiz">
-        <div class="last-quiz-header">
-          <span class="date"> {{ currentResult.createdDate | formatDate }}</span>
-          <nuxt-link
-            class="link" :to="{ path: '/details', query: { quiz: currentResult.id }}">
-            + Voir le détail
-          </nuxt-link>
-        </div>
-        <div v-if="currentResult && currentResult.scores" class="chart-area">
-          <polar-area-chart :data="currentResult.scores.map(value => value.scoreAvg)"/>
-          <Legend/>
-        </div>
-      </section>
-      <section v-if="quizzes.length > 0" class="history" >
-        <div v-for="q in quizzes" :key="q.id">
-          <button @click="setCurrent(q)"><span>Boussole - {{ q.createdDate | formatDate }}</span><span>❯</span></button>
-        </div>
-      </section>
-      <section v-else-if="!loading" class="center">
-        Aucune auto-évaluation n'a été faite. Veuillez en réaliser une première.
-      </section>
-    <div class="button-container">
-      <nuxt-link class="button orange" to="/quiz">Nouveau</nuxt-link>
-    </div>
-  </div>
-</template>
+<script lang="ts" setup>
 
-<script lang="ts">
-import {Component, Vue} from "vue-property-decorator";
-import {AxiosResponse} from "axios";
-import {RepositoryFactory} from "~/repositories/RepositoryFactory";
-import {RestResponse} from "~/repositories/models/rest-response.model";
-import {Quiz} from "~/repositories/models/quiz.model";
+import {type Quiz, useQuizStore} from "~/store/quiz";
+import {useBundleStore} from "~/store/bundle";
 
-@Component
-export default class History extends Vue {
+const quizzes = ref<Quiz[]>([]);
+const currentResult = ref<Quiz>();
 
-  readonly quizRepository = RepositoryFactory.get('quiz');
+onMounted(() => {
+  useQuizStore().findQuizzes(useBundleStore().selectedBundle).then((response: Page<Quiz>) => {
+    quizzes.value = response.content;
+    currentResult.value = quizzes.value.length > 0 ? quizzes.value[0] : null;
+  });
+});
 
-  private quizzes: Quiz[] = [];
-  private currentResult: Quiz | null = null;
-  private loading = true;
 
-  async mounted() {
-    await this.quizRepository.findMine().then((response: AxiosResponse<RestResponse<Quiz>>) => {
-      this.quizzes = response.data._embedded.quizzes;
-    });
-    this.currentResult = this.quizzes.length > 0 ? this.quizzes[0] : null;
-    this.loading = false;
-  }
-
-  private setCurrent(quiz: Quiz) {
-    this.currentResult = quiz;
-  }
+function setCurrent(quiz: Quiz) {
+  currentResult.value = quiz;
 }
 </script>
 
-<style lang="scss" scoped>
-@import "assets/css/color";
-@import "assets/css/spacing";
-@import "assets/css/font";
+<template>
+  <section v-if="currentResult" class="last-quiz">
+    <div class="last-quiz-header">
+      <span class="date"> {{ formatDateTime(currentResult.createdDate) }}</span>
+      <nuxt-link
+        class="button blue" :to="{ path: '/details', query: { quiz: currentResult.id }}">
+        + Voir le détail
+      </nuxt-link>
+    </div>
+    <div v-if="currentResult && currentResult.axes" class="chart-area">
+      <polar-area-chart :data="currentResult.axes.map(value => value.average)"/>
+      <Legend/>
+    </div>
+  </section>
+  <section v-if="quizzes.length > 0">
+    <ul class="history">
+      <li class="history__item" v-for="q in quizzes">
+        <input :id="q.id" type="radio" @change="setCurrent(q)" :checked="q === currentResult" name="quiz"/>
+        <label :for="q.id">
+          <span>Boussole - {{ formatDateTime(q.createdDate) }}</span>
+        </label>
+      </li>
+    </ul>
+  </section>
+  <section v-else class="center">
+    Aucune auto-évaluation n'a été faite. Veuillez en réaliser une première.
+  </section>
+  <div class="button-container">
+    <nuxt-link class="button gray button-back" to="/bundle" aria-label="Retour à la page précédente">❮</nuxt-link>
+    <nuxt-link class="button orange" to="/quiz">Nouveau</nuxt-link>
+  </div>
+</template>
 
+
+<style lang="scss" scoped>
 .last-quiz {
-  margin-bottom: $x_small 0;
+  margin: $small 0;
 }
 
 .last-quiz-header {
@@ -80,47 +67,51 @@ export default class History extends Vue {
     color: $gray_4;
     font-weight: 700;
   }
-
-  .link {
-    color: $blue;
-  }
 }
 
 .chart-area {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  margin: $x_small 0;
+  gap: $small;
 }
 
 .history {
-  margin-top: $x_small;
-}
-
-.history button {
+  margin-top: $small;
   display: flex;
-  width: 100%;
-  justify-content: space-between;
-  padding: 16px;
-  margin: $xxx_small 0;
+  flex-direction: column;
+  gap: $xxx_small;
+  list-style: none;
 
-  background: $gray_1;
-  border-radius: 8px;
-  border: none;
-  color: $gray_4;
-  font-weight: 700;
-  font-size: $tertiary-font-size;
+  .history__item {
 
-  &:hover {
-    text-decoration: none;
-    cursor: pointer;
-    background: $gray_3;
-    color: $gray_1;
+    input {
+      position: absolute;
+      opacity: 0;
+
+      &:checked + label {
+        outline: 3px solid $gray_4;
+      }
+    }
+
+    label {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px;
+      background: $gray_1;
+      border-radius: 8px;
+      color: $gray_4;
+      font-weight: 700;
+      font-size: $tertiary-font-size;
+
+      &:hover {
+        text-decoration: none;
+        cursor: pointer;
+        background: $gray_3;
+        color: $gray_1;
+      }
+    }
   }
 }
-
-.button-container {
-  margin-bottom: $x_small;
-}
-
 </style>