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/Rating.vue

@@ -1,3 +1,76 @@
+<script lang="ts" setup>
+
+import {randomUUID} from "uncrypto";
+
+const MAX_VALUE = 10;
+
+const props = defineProps({
+  initialValue: Number,
+  color: {
+    type: String,
+    required: false,
+    default: "#DC6A00"
+  },
+});
+
+const emit = defineEmits(["rate"]);
+
+const checkedValue = ref(0);
+const componentId = ref();
+
+onMounted(() => {
+  componentId.value = randomUUID();
+  checkedValue.value = props.initialValue;
+});
+
+const index = computed(() =>
+  Array.apply(0, Array(MAX_VALUE)).map((_, b) => {
+    return b + 1;
+  }).reverse()
+);
+
+const cssVars = computed(() => {
+  return {
+    '--color': props.color
+  }
+});
+
+function setChecked(index: number) {
+  if (index < 1) {
+    index = 1;
+  } else if (index > MAX_VALUE) {
+    index = MAX_VALUE;
+  }
+  checkedValue.value = index;
+  emit('rate', index);
+}
+
+function increment() {
+  setChecked(checkedValue.value + 1);
+}
+
+function decrement() {
+  setChecked(checkedValue.value - 1);
+}
+
+function isChecked(index: number) {
+  return checkedValue.value >= index;
+}
+
+function handleKeyUp(event: KeyboardEvent) {
+  switch (event.key) {
+    case "ArrowLeft":
+      decrement();
+      break;
+    case "ArrowRight":
+      increment();
+      break;
+  }
+  event.preventDefault();
+  return false;
+}
+</script>
+
 <template>
   <div :style="cssVars">
     <div class="rating" tabindex="0" @keyup="handleKeyUp">
@@ -17,91 +90,9 @@
   </div>
 </template>
 
-<script lang="ts">
-
-import {Component, Prop, Vue} from "nuxt-property-decorator";
-
-@Component
-export default class Rating extends Vue {
-
-  @Prop({
-    type: String,
-    default: "#DC6A00"
-  })
-  readonly color !: string;
-
-
-  @Prop({
-    type: Number,
-    required: false
-  })
-  readonly initialValue !: number | undefined;
-
-  readonly MAX_VALUE = 10;
-
-  created() {
-    if (this.initialValue) {
-      this.checkedValue = this.initialValue;
-    }
-  }
-
-  readonly index = Array.apply(0, Array(this.MAX_VALUE)).map((_, b) => {
-    return b + 1;
-  }).reverse();
-
-  public checkedValue = 0;
-  private _uid: any;
-
-  public setChecked(index: number) {
-    if (index < 1) {
-      index = 1;
-    } else if (index > this.MAX_VALUE) {
-      index = this.MAX_VALUE;
-    }
-    this.checkedValue = index;
-    this.$emit('rate', index);
-  }
-
-  public increment() {
-    this.setChecked(this.checkedValue + 1);
-  }
-
-  public decrement() {
-    this.setChecked(this.checkedValue - 1);
-  }
-
-  public isChecked(index: number) {
-    return this.checkedValue >= index;
-  }
-
-  get componentId() {
-    return this._uid;
-  }
-
-  handleKeyUp(event: KeyboardEvent) {
-    switch (event.key) {
-      case "ArrowLeft":
-        this.decrement();
-        break;
-      case "ArrowRight":
-        this.increment();
-        break;
-    }
-    event.preventDefault();
-    return false;
-  }
-
-  get cssVars() {
-    return {
-      '--color': this.color
-    }
-  }
-}
-</script>
 
 <style lang="scss" scoped>
 
-@import "assets/css/color";
 @import "assets/css/spacing";
 @import "assets/css/font";