Help user to choose a valid password in the reset password input (#819)

* Overhaul Reset Password Functionality

* Harmonize password error message if a too short password is provided in SetNewPasswordComponent

* Update Javadocs to allow for more clear distinguish between new components

* Update JD For cardlayout

* Update password reset error message if a password was too short during registration and setting a new password

* Add helper text to password field during user registration

* Address code review

* Remove CardLayout.java and copy paste css class name

* Move JD description

---------

Co-authored-by: Tobias Koch <[email protected]>

user-interface/frontend/themes/datamanager/components/div.css

@@ -36,6 +36,21 @@
   align-items: baseline;
 }
 
+.card-layout {
+  background-color: var(--lumo-base-color);
+  border: var(--lumo-contrast-10pct);
+  border-radius: var(--lumo-border-radius-m);
+  box-shadow: var(--lumo-box-shadow-l);
+  font-size: var(--lumo-font-size-s);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lumo-space-s);
+  width: clamp(300px, 300px, 15vw);
+  padding-bottom: var(--lumo-space-l);
+  padding-inline: var(--lumo-space-l);
+}
+
 .disclaimer {
   display: flex;
   justify-content: center;
@@ -162,18 +177,3 @@
   gap: var(--lumo-space-xs);
   white-space: nowrap;
 }
-
-.user-registration-component {
-  background-color: var(--lumo-base-color);
-  border: var(--lumo-contrast-10pct);
-  border-radius: var(--lumo-border-radius-m);
-  box-shadow: var(--lumo-box-shadow-l);
-  font-size: var(--lumo-font-size-s);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--lumo-space-s);
-  width: clamp(300px, 300px, 15vw);
-  padding-bottom: var(--lumo-space-l);
-  padding-inline: var(--lumo-space-l);
-}

user-interface/frontend/themes/datamanager/components/main.css

@@ -425,13 +425,37 @@
   grid-area: sampledetails;
 }
 
+.main.reset-password {
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  justify-content: center;
+  /*Should be moved to the parent layout once Login and forgot password components are overhauled*/
+  padding-bottom: var(--lumo-space-m);
+}
+
+.main.set-new-password {
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  justify-content: center;
+  /*Should be moved to the parent layout once Login and forgot password components are overhauled*/
+  padding-bottom: var(--lumo-space-m);
+}
+
 .main.user-profile {
   grid-template-columns: minmax(min-content, auto);
   grid-template-rows: minmax(min-content, auto);
   grid-template-areas:
     "user-profile-component"
 }
 
+.main.user-registration {
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  justify-content: center;
+  /*Should be moved to the parent layout once Login and forgot password components are overhauled*/
+  padding-bottom: var(--lumo-space-m);
+}
+
 /*Large devices (large desktops, 1200px and up)*/
 @media only screen and (max-width: 1200px) {
   .main.experiment {

user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java

@@ -3,7 +3,6 @@
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.button.Button;
-import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
@@ -65,7 +64,7 @@ private HorizontalLayout createHeaderButtonLayout() {
   }
 
   private void styleHeaderButtons() {
-    login.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
+    login.addClassName("primary");
   }
 
   /**