zdm/envoy
Archived
3
Fork 0
Code Issues 22 Pull Requests Releases 1 Wiki Activity

Implemented completely new UI for the login scene

Browse Source
This commit is contained in:
DieGurke
2020-07-15 18:45:55 +02:00
parent c406a5d226
commit 88afb77a2c
5 changed files with 121 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/main/java/envoy/client/ui/controller/LoginScene.java
View File

@@ -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

18
client/src/main/resources/css/base.css
View File

@@ -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;

8
client/src/main/resources/css/dark.css
View File

@@ -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);
}

4
client/src/main/resources/css/light.css
View File

@@ -14,3 +14,7 @@
.own-message {
-fx-background-color: lightgreen;
}
#loginInputField {
-fx-border-color: black;
}

156
client/src/main/resources/fxml/LoginScene.fxml
View File

@@ -2,93 +2,73 @@
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox prefHeight="206.0" prefWidth="440.0"
xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="envoy.client.ui.controller.LoginScene">
<VBox id="loginBackground" alignment="TOP_CENTER" prefHeight="500.0" prefWidth="350.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="envoy.client.ui.controller.LoginScene">
<children>
<Label text="User Login">
<ImageView fitHeight="80.0" fitWidth="80.0" pickOnBounds="true" preserveRatio="true">
<VBox.margin>
<Insets bottom="10.0" top="50.0" />
</VBox.margin>
<image>
<Image url="file:@../icons/envoy_logo.png" />
</image>
</ImageView>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" layoutX="142.0" layoutY="15.0" text="ENVOY MESSENGER" textAlignment="CENTER">
<font>
<Font size="14.0" />
</font>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
<Label alignment="TOP_CENTER" contentDisplay="CENTER" prefHeight="33.0" prefWidth="87.0" text="LOGIN" textAlignment="CENTER">
<font>
<Font size="26.0" />
</font>
<VBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
<Insets left="5.0" right="5.0" top="5.0" />
</VBox.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</Label>
<GridPane hgap="5.0" vgap="10.0">
<GridPane hgap="5.0" vgap="8.5">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES"
minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES"
minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0"
vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0"
vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0"
vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Label text="User Name:">
<TextField id="loginInputField" fx:id="userTextField" promptText="Username">
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</GridPane.margin>
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
</Label>
<Label text="Password:" GridPane.rowIndex="1">
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</GridPane.margin>
</Label>
<Label fx:id="repeatPasswordLabel" text="Repeat Password:"
visible="false" GridPane.rowIndex="2">
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</GridPane.margin>
<padding>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</padding>
</Label>
<TextField fx:id="userTextField"
GridPane.columnIndex="1">
<GridPane.margin>
<Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
</GridPane.margin>
</TextField>
<PasswordField fx:id="passwordField"
GridPane.columnIndex="1" GridPane.rowIndex="1">
<PasswordField id="loginInputField" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
<GridPane.margin>
<Insets bottom="10.0" left="5.0" right="5.0" top="10.0" />
<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</PasswordField>
<PasswordField fx:id="repeatPasswordField"
visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
<PasswordField id="loginInputField" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
<GridPane.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="10.0" />
<Insets bottom="0.0" left="5.0" right="5.0" top="0.0" />
</GridPane.margin>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@@ -96,54 +76,40 @@
</PasswordField>
</children>
<VBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
<Insets bottom="10.0" left="25.0" right="25.0" top="10.0" />
</VBox.margin>
</GridPane>
<CheckBox fx:id="registerCheckBox" mnemonicParsing="true"
onAction="#registerCheckboxChanged" prefHeight="17.0"
prefWidth="181.0" text="_Register">
<VBox.margin>
<Insets left="5.0" right="3.0" />
</VBox.margin>
</CheckBox>
<Button id="loginButton" fx:id="loginButton" defaultButton="true" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" textAlignment="CENTER">
<font>
<Font size="16.0" />
</font>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets bottom="2.0" left="125.0" right="125.0" top="2.0" />
</padding>
</Button>
<HBox alignment="CENTER" prefHeight="30.0" prefWidth="200.0">
<children>
<Label fx:id="registerTextLabel" text="No account yet?" />
<Button id="registerSwitch" fx:id="registerSwitch" accessibleRole="CHECK_BOX" mnemonicParsing="false" onAction="#registerSwitchPressed" text="Register" />
</children>
<VBox.margin>
<Insets bottom="20.0" />
</VBox.margin>
</HBox>
<Button fx:id="offlineModeButton" mnemonicParsing="false" onAction="#offlineModeButtonPressed" text="Offline mode">
<VBox.margin>
<Insets bottom="5.0" top="20.0" />
</VBox.margin></Button>
<Label fx:id="connectionLabel">
<VBox.margin>
<Insets left="5.0" />
</VBox.margin>
<font>
<Font size="12.0" />
</font>
</Label>
<BorderPane prefWidth="200.0">
<left>
<Button cancelButton="true" mnemonicParsing="false"
onAction="#abortLogin" text="Close" BorderPane.alignment="CENTER">
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
<BorderPane.margin>
<Insets />
</BorderPane.margin>
</Button>
</left>
<center>
<Button mnemonicParsing="false"
onAction="#offlineModeButtonPressed" text="Offline mode"
BorderPane.alignment="CENTER">
<BorderPane.margin>
<Insets />
</BorderPane.margin>
</Button>
</center>
<right>
<Button defaultButton="true" mnemonicParsing="false"
onAction="#loginButtonPressed" text="Login"
BorderPane.alignment="CENTER">
<BorderPane.margin>
<Insets />
</BorderPane.margin>
</Button>
</right>
<VBox.margin>
<Insets bottom="5.0" left="5.0" right="5.0" />
</VBox.margin>
</BorderPane>
</children>
</VBox>