Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 15 commits into from
Sep 30, 2024
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
decd451
Overhaul Reset Password Functionality
Steffengreiner Sep 2, 2024
056c0a3
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
Steffengreiner Sep 2, 2024
70a9fe7
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
KochTobi Sep 3, 2024
d267812
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
KochTobi Sep 4, 2024
32fb1b6
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
KochTobi Sep 5, 2024
58cf266
Harmonize password error message if a too short password is provided …
Steffengreiner Sep 5, 2024
f7b32da
Update Javadocs to allow for more clear distinguish between new compo…
Steffengreiner Sep 5, 2024
c7e4e10
Update JD For cardlayout
Steffengreiner Sep 5, 2024
423a213
Update password reset error message if a password was too short durin…
Steffengreiner Sep 5, 2024
667ae24
Add helper text to password field during user registration
Steffengreiner Sep 5, 2024
e186a94
Address code review
Steffengreiner Sep 9, 2024
dbdc8a3
Remove CardLayout.java and copy paste css class name
Steffengreiner Sep 9, 2024
33efbb2
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
Steffengreiner Sep 9, 2024
17034a1
Move JD description
Steffengreiner Sep 12, 2024
1d6f08e
Merge branch 'development' into feature/dm-703-overhaul-password-rese…
KochTobi Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions user-interface/frontend/themes/datamanager/components/div.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
24 changes: 24 additions & 0 deletions user-interface/frontend/themes/datamanager/components/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
23 changes: 23 additions & 0 deletions user-interface/src/main/java/life/qbic/datamanager/views/general/CardLayout.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
package life.qbic.datamanager.views.general;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.html.Div;

/**
* Card Layout
* <p>
* Card styled Layout employed within all {@link Main} in the
* {@link life.qbic.datamanager.views.login.LoginLayout}
*/
public class CardLayout extends Div {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is a Card Layout? where is it used? How can it look. I am confused about this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the JD for more clarity. In a nutshell we currently employ the same card-like style for all components during password reset, registration and login. To avoid having to copy paste the css over and over again, this DIV based component contains the style necessary to make it look like a hovering card containing the input fields.

Screenshot 2024-09-05 at 17 14 41 Screenshot 2024-09-05 at 17 14 36

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the JD for more clarity. In a nutshell we currently employ the same card-like style for all components during password reset, registration and login. To avoid having to copy paste the css over and over again, this DIV based component contains the style necessary to make it look like a hovering card containing the input fields.

You do not need to copy paste anything but the css class name if I am not mistaken? I would vote in favor of composition over inheritance here. Components that extend card cannot extend anything else. If you want it to look like a card, why not only add the css class name. Shouldn't this be sufficient?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point! For me it feels more like a feeling thing, we want to reuse the same styling for all the components in this context, so i'd like to have it as a general java class. But since it provides no functionality as of yet, we can also go for YAGNI and copy paste the css class. I adapted the PR accordingly and removed the cardlayout 🤔


/**
* Creates a new div with the given child components.
*
* @param components the child components
*/
public CardLayout(Component... components) {
super(components);
addClassName("card-layout");
}
}
3 changes: 1 addition & 2 deletions user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -65,7 +64,7 @@ private HorizontalLayout createHeaderButtonLayout() {
}

private void styleHeaderButtons() {
login.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
login.addClassName("primary");
}

/**
Expand Down
182 changes: 0 additions & 182 deletions user-interface/src/main/java/life/qbic/datamanager/views/layouts/BoxLayout.java
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions ...rface/src/main/java/life/qbic/datamanager/views/login/newpassword/NewPasswordHandler.java
View file
Open in desktop

This file was deleted.

Loading