From 9a9a475c0e9138ce0879dfd2a462a1c20102ae17 Mon Sep 17 00:00:00 2001 From: DieGurke <55625494+DieGurke@users.noreply.github.com> Date: Wed, 15 Jul 2020 18:45:55 +0200 Subject: [PATCH] Implemented completely new UI for the login scene --- .../client/ui/controller/LoginScene.java | 40 ++++- client/src/main/resources/css/base.css | 18 +- client/src/main/resources/css/dark.css | 8 + client/src/main/resources/css/light.css | 4 + .../src/main/resources/fxml/LoginScene.fxml | 156 +++++++----------- 5 files changed, 121 insertions(+), 105 deletions(-) diff --git a/client/src/main/java/envoy/client/ui/controller/LoginScene.java b/client/src/main/java/envoy/client/ui/controller/LoginScene.java index fe05578..4a18200 100644 --- a/client/src/main/java/envoy/client/ui/controller/LoginScene.java +++ b/client/src/main/java/envoy/client/ui/controller/LoginScene.java @@ -8,6 +8,7 @@ import java.util.logging.Logger; import javafx.application.Platform; import javafx.fxml.FXML; +import javafx.geometry.Insets; import javafx.scene.control.*; import javafx.scene.control.Alert.AlertType; @@ -46,19 +47,27 @@ public final class LoginScene { private PasswordField repeatPasswordField; @FXML - private Label repeatPasswordLabel; - - @FXML - private CheckBox registerCheckBox; + private Button registerSwitch; @FXML private Label connectionLabel; + @FXML + private Button loginButton; + + @FXML + private Button offlineModeButton; + + @FXML + private Label registerTextLabel; + private Client client; private LocalDB localDB; private CacheMap cacheMap; private SceneContext sceneContext; + private boolean registration = false; + private static final Logger logger = EnvoyLog.getLogger(LoginScene.class); private static final EventBus eventBus = EventBus.getInstance(); private static final ClientConfig config = ClientConfig.getInstance(); @@ -100,13 +109,13 @@ public final class LoginScene { private void loginButtonPressed() { // Prevent registration with unequal passwords - if (registerCheckBox.isSelected() && !passwordField.getText().equals(repeatPasswordField.getText())) { + if (registration && !passwordField.getText().equals(repeatPasswordField.getText())) { new Alert(AlertType.ERROR, "The entered password is unequal to the repeated one").showAndWait(); repeatPasswordField.clear(); } else if (!Bounds.isValidContactName(userTextField.getText())) { new Alert(AlertType.ERROR, "The entered user name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait(); userTextField.clear(); - } else performHandshake(new LoginCredentials(userTextField.getText(), passwordField.getText(), registerCheckBox.isSelected(), + } else performHandshake(new LoginCredentials(userTextField.getText(), passwordField.getText(), registration, Startup.VERSION)); } @@ -116,11 +125,24 @@ public final class LoginScene { } @FXML - private void registerCheckboxChanged() { + private void registerSwitchPressed() { + registration = !registration; // Make repeat password field and label visible / invisible - repeatPasswordField.setVisible(registerCheckBox.isSelected()); - repeatPasswordLabel.setVisible(registerCheckBox.isSelected()); + repeatPasswordField.setVisible(registration); + if (loginButton.getText().equals("Login")) { + loginButton.setText("Register"); + loginButton.setPadding(new Insets(2, 116, 2, 116)); + registerTextLabel.setText("Already an account?"); + registerSwitch.setText("Login"); + offlineModeButton.setDisable(true); + } else { + loginButton.setText("Login"); + loginButton.setPadding(new Insets(2, 125, 2, 125)); + registerTextLabel.setText("No account yet?"); + registerSwitch.setText("Register"); + offlineModeButton.setDisable(false); + } } @FXML diff --git a/client/src/main/resources/css/base.css b/client/src/main/resources/css/base.css index 78fff9e..013ef59 100644 --- a/client/src/main/resources/css/base.css +++ b/client/src/main/resources/css/base.css @@ -1,5 +1,5 @@ .button, .list-cell, .progress-bar * { - -fx-background-radius: 5.0em; + -fx-background-radius: 0.3em; } .context-menu, .context-menu > * { @@ -65,6 +65,22 @@ -fx-text-alignment: center; } +#loginButton { + -fx-background-radius: 1em; +} + +#registerSwitch { + -fx-background-color: transparent; + -fx-text-fill: orange; +} + +#loginInputField { + -fx-background-color: transparent; + -fx-border: solid; + -fx-border-width: 0 0 1 0; + +} + #remainingCharsLabel { -fx-text-fill: #00FF00; -fx-background-color: transparent; diff --git a/client/src/main/resources/css/dark.css b/client/src/main/resources/css/dark.css index eaad3a9..d97369e 100644 --- a/client/src/main/resources/css/dark.css +++ b/client/src/main/resources/css/dark.css @@ -37,3 +37,11 @@ .alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane { -fx-background-color: black; } + +#loginInputField { + -fx-border-color: white; +} + +#loginBackground { + -fx-background-color: rgb(25, 25, 25); +} diff --git a/client/src/main/resources/css/light.css b/client/src/main/resources/css/light.css index 066de55..8486dcb 100644 --- a/client/src/main/resources/css/light.css +++ b/client/src/main/resources/css/light.css @@ -14,3 +14,7 @@ .own-message { -fx-background-color: lightgreen; } + +#loginInputField { + -fx-border-color: black; +} diff --git a/client/src/main/resources/fxml/LoginScene.fxml b/client/src/main/resources/fxml/LoginScene.fxml index 04c144a..5f0b872 100644 --- a/client/src/main/resources/fxml/LoginScene.fxml +++ b/client/src/main/resources/fxml/LoginScene.fxml @@ -2,93 +2,73 @@ - - + + + - + -