diff --git a/src/main/java/de/assecutor/emulatorstation/base/ui/view/LoginView.java b/src/main/java/de/assecutor/emulatorstation/base/ui/view/LoginView.java index 7c85045..b8dc58f 100644 --- a/src/main/java/de/assecutor/emulatorstation/base/ui/view/LoginView.java +++ b/src/main/java/de/assecutor/emulatorstation/base/ui/view/LoginView.java @@ -1,13 +1,19 @@ package de.assecutor.emulatorstation.base.ui.view; import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.html.Div; +import com.vaadin.flow.component.html.H1; +import com.vaadin.flow.component.html.Paragraph; import com.vaadin.flow.component.login.LoginForm; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.button.Button; +import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.component.textfield.PasswordField; import com.vaadin.flow.component.notification.Notification; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.router.Route; import com.vaadin.flow.server.auth.AnonymousAllowed; import de.assecutor.emulatorstation.Application; @@ -25,20 +31,73 @@ public class LoginView extends VerticalLayout { private static final Logger logger = LoggerFactory.getLogger(LoginView.class); public LoginView() { + setSizeFull(); setAlignItems(Alignment.CENTER); + setJustifyContentMode(JustifyContentMode.CENTER); + getStyle() + .set("background", "linear-gradient(135deg, #667eea 0%, #764ba2 100%)") + .set("min-height", "100vh") + .set("padding", "20px"); - Span title = new Span("Anmelden"); - title.getStyle().set("font-size", "24px").set("font-weight", "bold"); + // Haupt-Container für das Login-Formular + Div loginContainer = new Div(); + loginContainer.getStyle() + .set("background-color", "#ffffff") + .set("border-radius", "12px") + .set("box-shadow", "0 10px 30px rgba(0,0,0,0.2)") + .set("padding", "40px") + .set("max-width", "400px") + .set("width", "100%") + .set("text-align", "center"); + // Logo/Icon + Icon icon = new Icon(VaadinIcon.DESKTOP); + icon.setSize("64px"); + icon.getStyle() + .set("color", "#667eea") + .set("margin-bottom", "20px"); + + // Titel + H1 title = new H1("Emulator Station"); + title.getStyle() + .set("margin", "0 0 8px 0") + .set("color", "#333333") + .set("font-size", "2rem") + .set("font-weight", "600"); + + // Untertitel + Paragraph subtitle = new Paragraph("Melden Sie sich an, um fortzufahren"); + subtitle.getStyle() + .set("margin", "0 0 30px 0") + .set("color", "#666666") + .set("font-size", "0.95rem"); + + // Form-Container + VerticalLayout formLayout = new VerticalLayout(); + formLayout.setSpacing(true); + formLayout.setPadding(false); + formLayout.setWidthFull(); + + // Eingabefelder TextField usernameField = new TextField("Benutzername"); + usernameField.setWidthFull(); + usernameField.getStyle() + .set("margin-bottom", "16px"); + PasswordField passwordField = new PasswordField("Passwort"); + passwordField.setWidthFull(); + passwordField.getStyle() + .set("margin-bottom", "16px"); Select niederlassungSelect = new Select<>(); niederlassungSelect.setLabel("Niederlassung"); niederlassungSelect.setItems(Application.niederlassungen.keySet().stream().sorted().toList()); niederlassungSelect.setPlaceholder("Wählen Sie eine Niederlassung"); + niederlassungSelect.setWidthFull(); + niederlassungSelect.getStyle() + .set("margin-bottom", "24px"); - Button loginButton = new Button("Anmelden", event -> { + Button loginButton = new Button("Anmelden", new Icon(VaadinIcon.SIGN_IN), event -> { String username = usernameField.getValue(); String password = passwordField.getValue(); String niederlassung = niederlassungSelect.getValue(); @@ -91,7 +150,23 @@ public class LoginView extends VerticalLayout { }); }); - add(title, usernameField, passwordField, niederlassungSelect, loginButton); + // Button-Styling + loginButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_LARGE); + loginButton.setWidthFull(); + loginButton.getStyle() + .set("margin-top", "8px") + .set("background", "linear-gradient(135deg, #667eea 0%, #764ba2 100%)") + .set("border", "none") + .set("font-weight", "600"); + + // Eingabefelder zum Form-Layout hinzufügen + formLayout.add(usernameField, passwordField, niederlassungSelect, loginButton); + + // Alle Komponenten zum Login-Container hinzufügen + loginContainer.add(icon, title, subtitle, formLayout); + + // Login-Container zur Hauptansicht hinzufügen + add(loginContainer); if (MainLayout.instance != null) { MainLayout.instance.setDrawerOpened(false); diff --git a/src/main/java/de/assecutor/emulatorstation/base/ui/view/MainView.java b/src/main/java/de/assecutor/emulatorstation/base/ui/view/MainView.java index 61ab02c..38cbcbb 100644 --- a/src/main/java/de/assecutor/emulatorstation/base/ui/view/MainView.java +++ b/src/main/java/de/assecutor/emulatorstation/base/ui/view/MainView.java @@ -6,8 +6,10 @@ import com.vaadin.flow.component.button.ButtonVariant; import com.vaadin.flow.component.dialog.Dialog; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.html.H2; +import com.vaadin.flow.component.html.H3; import com.vaadin.flow.component.html.IFrame; import com.vaadin.flow.component.html.Paragraph; +import com.vaadin.flow.component.progressbar.ProgressBar; import com.vaadin.flow.component.icon.Icon; import com.vaadin.flow.component.icon.VaadinIcon; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; @@ -53,6 +55,8 @@ public final class MainView extends Main implements BeforeEnterObserver MainView() { setSizeFull(); getStyle() + .set("background", "linear-gradient(135deg, #667eea 0%, #764ba2 100%)") + .set("min-height", "100vh") .set("display", "flex") .set("flex-direction", "column") .set("align-items", "center") @@ -145,6 +149,10 @@ public final class MainView extends Main implements BeforeEnterObserver Button logoutBtn = new Button("Abmelden", new Icon(VaadinIcon.SIGN_OUT), event -> logout()); logoutBtn.addThemeVariants(ButtonVariant.LUMO_CONTRAST); + logoutBtn.getStyle() + .set("background-color", "#f5f5f5") + .set("color", "#333333") + .set("border", "1px solid #d0d0d0"); buttonLayout.add(startBtn, logoutBtn); container.add(buttonLayout); @@ -545,15 +553,81 @@ public final class MainView extends Main implements BeforeEnterObserver private Dialog showWaitDialog(String message) { Dialog dialog = new Dialog(); - dialog.setHeaderTitle("Bitte warten"); dialog.setModal(true); dialog.setCloseOnOutsideClick(false); - dialog.setCloseOnOutsideClick(false); + dialog.setCloseOnEsc(false); + dialog.setDraggable(false); + dialog.setResizable(false); - VerticalLayout dialogLayout = new VerticalLayout( - new Paragraph(message) - ); - dialog.add(dialogLayout); + // Dialog-Styling + dialog.getElement().getStyle() + .set("border-radius", "16px") + .set("box-shadow", "0 20px 40px rgba(0,0,0,0.3)") + .set("background", "rgba(255,255,255,0.95)") + .set("backdrop-filter", "blur(10px)"); + + // Haupt-Container + VerticalLayout mainContainer = new VerticalLayout(); + mainContainer.setSpacing(false); + mainContainer.setPadding(false); + mainContainer.setAlignItems(VerticalLayout.Alignment.CENTER); + mainContainer.getStyle() + .set("padding", "40px") + .set("min-width", "400px") + .set("text-align", "center"); + + // Animiertes Icon + Icon loadingIcon = new Icon(VaadinIcon.COG); + loadingIcon.setSize("48px"); + loadingIcon.getStyle() + .set("color", "#667eea") + .set("margin-bottom", "20px") + .set("animation", "spin 2s linear infinite"); + + // CSS-Animation für das Icon + dialog.getElement().executeJs(""" + if (!document.getElementById('spin-animation')) { + const style = document.createElement('style'); + style.id = 'spin-animation'; + style.textContent = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }'; + document.head.appendChild(style); + } + """); + + // Titel + H3 title = new H3("Bitte warten"); + title.getStyle() + .set("margin", "0 0 12px 0") + .set("color", "#333333") + .set("font-size", "1.5rem") + .set("font-weight", "600"); + + // Nachricht + Paragraph messageText = new Paragraph(message); + messageText.getStyle() + .set("margin", "0 0 24px 0") + .set("color", "#666666") + .set("font-size", "1rem") + .set("line-height", "1.5"); + + // Indeterminate Progress Bar + ProgressBar progressBar = new ProgressBar(); + progressBar.setIndeterminate(true); + progressBar.setWidthFull(); + progressBar.getStyle() + .set("margin-bottom", "16px"); + + // Status-Text + Paragraph statusText = new Paragraph("Vorgang wird ausgeführt..."); + statusText.getStyle() + .set("margin", "0") + .set("color", "#888888") + .set("font-size", "0.875rem") + .set("font-style", "italic"); + + // Alle Komponenten hinzufügen + mainContainer.add(loadingIcon, title, messageText, progressBar, statusText); + dialog.add(mainContainer); dialog.open();