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/assets/css/main.scss

@@ -1,45 +1,59 @@
-@import "_color";
-@import "_font";
-@import "_placeholders";
-@import "_mixin";
-@import "_spacing";
-
 $breakpoint: 1024px;
 
-* {
+*,
+::after,
+::before {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
 }
 
-html {
-  font-family: $font-primary;
-  background: $white;
-  color: $gray_4;
+body {
   scroll-behavior: smooth;
+  overflow-x: hidden;
+  color: $gray_4;
+  font-family: $font-primary;
+  background: $white; //  #ededf0
 }
 
-a {
-  color: $light_blue;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
+.main-content {
+  min-height: calc(100vh - $footer_height - $header_height);
+  max-width: $content_width;
+  margin: 0 auto;
+
+  @media only screen and (max-width: $breakpoint) {
+    margin: 0 $small;
   }
 }
 
+a, .button-link {
+  color: $gray_4;
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: underline;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.button-link {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
 ul, ol {
-  margin: $xx_small $small;
+  margin: 0;
 }
 
 h1 {
   font-size: 1.75rem;
   line-height: 2.125rem;
-  margin: $medium 0 $small 0;
+  margin: $medium 0;
   color: $black;
-  text-align: center;
 
   @media only screen and (max-width: $breakpoint) {
-    margin: $xx_small;
+    margin: $xx_small 0;
   }
 }
 
@@ -48,7 +62,7 @@ h2 {
   font-size: 2rem;
   line-height: 2.75rem;
   letter-spacing: -0.02em;
-  margin: $x-medium 0 $medium 0;
+  margin: $xx_medium 0 $x_medium 0;
 
   @media only screen and (max-width: $breakpoint) {
     margin: $xx_small;
@@ -60,7 +74,7 @@ h3 {
   font-weight: bold;
   font-size: 1.75rem;
   line-height: 2rem;
-  margin: $small 0;
+  margin: $medium 0;
 }
 
 p + p { margin-top: 1.5rem }
@@ -70,17 +84,27 @@ hr {
   margin: $xxx_small 0;
 }
 
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: $xxx_small;
+  margin-block: $medium;
+
+  &__help {
+    margin-block: $medium $small;
+  }
+}
+
 .bold {
   font-weight: bold;
 }
 
 .button {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
   text-decoration: none;
-  padding: 0 32px;
-  line-height: 60px;
+  padding: $x_small $small;
   color: $white;
   border-radius: 100px;
   border: none;
@@ -94,7 +118,18 @@ hr {
 }
 
 .button-container {
-  margin: $medium 0;
+  display: flex;
+  justify-content: center;
+  gap: $xx_small;
+  margin: $x_medium 0;
+
+  .button {
+    flex: 1;
+  }
+
+  .button-back {
+    flex: 0;
+  }
 }
 
 .button.orange:hover:not(:disabled) {
@@ -126,16 +161,33 @@ hr {
   cursor: default;
 }
 
+.button-icon {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: $xxx_small;
+  font-size: 1.5rem;
+  line-height: 24px;
+  border-radius: $xxx_small;
+
+  &:hover, &:active {
+    background: $gray_1;
+
+  }
+}
+
 input[type=text],
+input[type=email],
 input[type=password] {
   background: $gray_1;
   border: 1px solid $gray_2;
   border-radius: 100px;
   line-height: 50px;
-  padding: 0 $x_small;
+  padding: 0 $small;
 }
 
 input[type=text]::placeholder,
+input[type=email]::placeholder,
 input[type=password]::placeholder {
   color: $gray_3;
 }
@@ -150,41 +202,3 @@ input[type=password]::placeholder {
 .text-center {
   text-align: center;
 }
-
-.content {
-  max-width: none;
-  display: grid;
-  grid-template-columns: [fullWidth-start] 1rem
-                           [left-start]      1fr
-                           [article-start right-start] minmax(20ch, $content_width)
-                           [article-end left-end] 1fr
-                           [right-end] 1rem [fullWidth-end];
-}
-.content > * {
-  grid-column: article;
-}
-
-.full-width {
-  grid-template-columns: minmax(20ch, $content_width);
-  justify-content: center;
-  grid-column: fullWidth;
-  display: grid;
-  padding: $small;
-}
-
-@supports (grid-template-columns: subgrid) {
-  .full-width {
-    grid-template-columns: subgrid;
-    padding: 0;
-  }
-  .full-width-center {
-    grid-column: article;
-  }
-  .full-width-right {
-    grid-column: right;
-    text-align: right;
-  }
-  .full-width-left {
-    grid-column: left;
-  }
-}