Erweiterungen
This commit is contained in:
@@ -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<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);
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user