zdm/envoy
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
Show Stats 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.application.Platform;
import javafx.fxml.FXML; import javafx.fxml.FXML;
import javafx.geometry.Insets;
import javafx.scene.control.*; import javafx.scene.control.*;
import javafx.scene.control.Alert.AlertType; import javafx.scene.control.Alert.AlertType;
@ -46,19 +47,27 @@ public final class LoginScene {
private PasswordField repeatPasswordField; private PasswordField repeatPasswordField;
@FXML @FXML
private Label repeatPasswordLabel; private Button registerSwitch;
@FXML
private CheckBox registerCheckBox;
@FXML @FXML
private Label connectionLabel; private Label connectionLabel;
@FXML
private Button loginButton;
@FXML
private Button offlineModeButton;
@FXML
private Label registerTextLabel;
private Client client; private Client client;
private LocalDB localDB; private LocalDB localDB;
private CacheMap cacheMap; private CacheMap cacheMap;
private SceneContext sceneContext; private SceneContext sceneContext;
private boolean registration = false;
private static final Logger logger = EnvoyLog.getLogger(LoginScene.class); private static final Logger logger = EnvoyLog.getLogger(LoginScene.class);
private static final EventBus eventBus = EventBus.getInstance(); private static final EventBus eventBus = EventBus.getInstance();
private static final ClientConfig config = ClientConfig.getInstance(); private static final ClientConfig config = ClientConfig.getInstance();
@ -100,13 +109,13 @@ public final class LoginScene {
private void loginButtonPressed() { private void loginButtonPressed() {
// Prevent registration with unequal passwords // 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(); new Alert(AlertType.ERROR, "The entered password is unequal to the repeated one").showAndWait();
repeatPasswordField.clear(); repeatPasswordField.clear();
} else if (!Bounds.isValidContactName(userTextField.getText())) { } else if (!Bounds.isValidContactName(userTextField.getText())) {
new Alert(AlertType.ERROR, "The entered user name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait(); new Alert(AlertType.ERROR, "The entered user name is not valid (" + Bounds.CONTACT_NAME_PATTERN + ")").showAndWait();
userTextField.clear(); userTextField.clear();
} else performHandshake(new LoginCredentials(userTextField.getText(), passwordField.getText(), registerCheckBox.isSelected(), } else performHandshake(new LoginCredentials(userTextField.getText(), passwordField.getText(), registration,
Startup.VERSION)); Startup.VERSION));
} }
@ -116,11 +125,24 @@ public final class LoginScene {
} }
@FXML @FXML
private void registerCheckboxChanged() { private void registerSwitchPressed() {
registration = !registration;
// Make repeat password field and label visible / invisible // Make repeat password field and label visible / invisible
repeatPasswordField.setVisible(registerCheckBox.isSelected()); repeatPasswordField.setVisible(registration);
repeatPasswordLabel.setVisible(registerCheckBox.isSelected()); 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 @FXML

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

@ -1,5 +1,5 @@
.button, .list-cell, .progress-bar * { .button, .list-cell, .progress-bar * {
-fx-background-radius: 5.0em; -fx-background-radius: 0.3em;
} }
.context-menu, .context-menu > * { .context-menu, .context-menu > * {
@ -65,6 +65,22 @@
-fx-text-alignment: center; -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 { #remainingCharsLabel {
-fx-text-fill: #00FF00; -fx-text-fill: #00FF00;
-fx-background-color: transparent; -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 { .alert.information.dialog-pane, .alert.warning.dialog-pane, .alert.error.dialog-pane {
-fx-background-color: black; -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 { .own-message {
-fx-background-color: lightgreen; -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.geometry.Insets?>
<?import javafx.scene.control.Button?> <?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Label?> <?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?> <?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?> <?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.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?> <?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?> <?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?> <?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?> <?import javafx.scene.text.Font?>
<VBox prefHeight="206.0" prefWidth="440.0" <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">
xmlns="http://javafx.com/javafx/11.0.1"
xmlns:fx="http://javafx.com/fxml/1"
fx:controller="envoy.client.ui.controller.LoginScene">
<children> <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>
<Font size="26.0" /> <Font size="26.0" />
</font> </font>
<VBox.margin> <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> </VBox.margin>
<padding> <padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding> </padding>
</Label> </Label>
<GridPane hgap="5.0" vgap="10.0"> <GridPane hgap="5.0" vgap="8.5">
<columnConstraints> <columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
minWidth="10.0" percentWidth="40.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES"
minWidth="10.0" prefWidth="100.0" />
</columnConstraints> </columnConstraints>
<rowConstraints> <rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
vgrow="SOMETIMES" /> <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0"
vgrow="SOMETIMES" />
</rowConstraints> </rowConstraints>
<children> <children>
<Label text="User Name:"> <TextField id="loginInputField" fx:id="userTextField" promptText="Username">
<GridPane.margin> <GridPane.margin>
<Insets bottom="5.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>
<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" />
</GridPane.margin> </GridPane.margin>
</TextField> </TextField>
<PasswordField fx:id="passwordField" <PasswordField id="loginInputField" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
GridPane.columnIndex="1" GridPane.rowIndex="1">
<GridPane.margin> <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> </GridPane.margin>
<padding> <padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding> </padding>
</PasswordField> </PasswordField>
<PasswordField fx:id="repeatPasswordField" <PasswordField id="loginInputField" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
visible="false" GridPane.columnIndex="1" GridPane.rowIndex="2">
<GridPane.margin> <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> </GridPane.margin>
<padding> <padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /> <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
@ -96,54 +76,40 @@
</PasswordField> </PasswordField>
</children> </children>
<VBox.margin> <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> </VBox.margin>
</GridPane> </GridPane>
<CheckBox fx:id="registerCheckBox" mnemonicParsing="true" <Button id="loginButton" fx:id="loginButton" defaultButton="true" mnemonicParsing="false" onAction="#loginButtonPressed" text="Login" textAlignment="CENTER">
onAction="#registerCheckboxChanged" prefHeight="17.0" <font>
prefWidth="181.0" text="_Register"> <Font size="16.0" />
<VBox.margin> </font>
<Insets left="5.0" right="3.0" /> <opaqueInsets>
</VBox.margin> <Insets />
</CheckBox> </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"> <Label fx:id="connectionLabel">
<VBox.margin> <VBox.margin>
<Insets left="5.0" /> <Insets left="5.0" />
</VBox.margin> </VBox.margin>
<font>
<Font size="12.0" />
</font>
</Label> </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> </children>
</VBox> </VBox>