Implemented completely new UI for the login scene
This commit is contained in:
DieGurke
parent
f608b2d6ec
commit
9a9a475c0e
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,3 +14,7 @@
|
|||
.own-message {
|
||||
-fx-background-color: lightgreen;
|
||||
}
|
||||
|
||||
#loginInputField {
|
||||
-fx-border-color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Reference in New Issue