Implemented completely new UI for the login scene

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;
+	private Button registerSwitch;
-
-	@FXML
-	private CheckBox registerCheckBox;
 
 	@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());
+		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

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;

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

client/src/main/resources/css/light.css

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

client/src/main/resources/fxml/LoginScene.fxml

@@ -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"
+<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>
-		<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"
+				<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>
 			<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>
 			<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" />
+						<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>
 				</TextField>
-				<PasswordField fx:id="passwordField"
+				<PasswordField id="loginInputField" fx:id="passwordField" promptText=" Password" GridPane.rowIndex="1">
-					GridPane.columnIndex="1" 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"
+				<PasswordField id="loginInputField" fx:id="repeatPasswordField" promptText=" Repeat Password" visible="false" GridPane.rowIndex="2">
-					visible="false" GridPane.columnIndex="1" 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"
+				<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" />
+         </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 left="5.0" right="3.0" />
+            <Insets bottom="20.0" />
          </VBox.margin>
-		</CheckBox>
+      </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>