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/components/PolarAreaChart.vue

@@ -1,80 +1,15 @@
-<template>
-  <PolarArea
-    :chart-options="chartOptions"
-    :chart-data="chartData"
-    :chart-id="chartId"
-    :dataset-id-key="datasetIdKey"
-    :plugins="plugins"
-    :css-classes="cssClasses"
-    :styles="styles"
-    :width="width"
-    :height="height"
-  />
-</template>
+<script lang="ts" setup>
+import {PolarArea} from 'vue-chartjs';
+import type {PropType} from "vue";
 
-<script lang="ts">
-import {PolarArea} from 'vue-chartjs/legacy'
-
-import {ArcElement, Chart as ChartJS, Legend, RadialLinearScale, Title, Tooltip} from 'chart.js'
-import {Component, Prop, Vue, Watch} from "nuxt-property-decorator";
-
-ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);
-
-@Component({
-  components: {
-    PolarArea
+const props = defineProps({
+  data: {
+    type: Object as PropType<number[]>
   }
-})
-export default class PolarAreaChart extends Vue {
+});
 
-  @Prop({
-    default: 'polar-chart',
-    type: String
-  })
-  public chartId!: string;
-
-  @Prop({
-    default: 'label',
-    type: String
-  })
-  public datasetIdKey!: string;
-
-  @Prop({
-    default: 400,
-    type: Number
-  })
-  public width!: number;
-
-  @Prop({
-    default: 400,
-    type: Number
-  })
-  public height!: number;
-
-  @Prop({
-    default: '',
-    type: String
-  })
-  public cssClasses!: string;
-
-  @Prop({
-    type: Object
-  })
-  public styles!: Object;
-
-  @Prop({
-    default: () => [],
-    type: Array
-  })
-  public plugins!: [];
-
-  @Prop({
-    default: () => [],
-    type: Array<number>
-  })
-  public data!: number[];
-
-  readonly chartData = {
+const chartData = computed(() => {
+  return {
     labels: [
       "1. Pouvoir d'agir",
       "2. Multi-secteur",
@@ -101,36 +36,45 @@ export default class PolarAreaChart extends Vue {
           "#E9D280",
           "#7BD1F5"
         ],
-        data: this.data,
+        data: props.data,
         borderWidth: 1,
         borderColor: "#666666"
       }
     ]
   };
+});
 
-  readonly chartOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    // animation: false,
-    scales: {
-      r: {
-        suggestedMin: 0,
-        suggestedMax: 10,
-        ticks: {
-          display: false
-        }
-      }
-    },
-    plugins: {
-      legend: {
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: true,
+  scales: {
+    r: {
+      suggestedMin: 0,
+      suggestedMax: 10,
+      ticks: {
         display: false
       }
     }
-  };
-
-  @Watch("data", {})
-  private renderChart() {
-    this.chartData.datasets[0].data = this.data;
+  },
+  plugins: {
+    legend: {
+      display: false
+    }
   }
-}
+})
 </script>
+<template>
+  <div class="chart-container">
+    <polar-area
+      :options="chartOptions"
+      :data="chartData"
+    />
+  </div>
+</template>
+<style lang="scss" scoped>
+.chart-container {
+  position: relative;
+  max-width: 60vh;
+}
+</style>
+