Erweiterungen

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");
+        // Haupt-Container für das Login-Formular
-        title.getStyle().set("font-size", "24px").set("font-weight", "bold");
+        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<String> 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);

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(
+        // Dialog-Styling
-                new Paragraph(message)
+        dialog.getElement().getStyle()
-        );
+            .set("border-radius", "16px")
-        dialog.add(dialogLayout);
+            .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();