Add password field behavior with floating text

core/src/main/resources/i18n/displayStrings.properties

@@ -1985,8 +1985,8 @@ time.minutes=minutes
 time.seconds=seconds
 
 
-password.enterPassword=Enter password:
+password.enterPassword=Enter password
-password.confirmPassword=Confirm password:
+password.confirmPassword=Confirm password
 password.tooLong=Password must be less than 500 characters.
 password.deriveKey=Derive key from password
 password.walletDecrypted=Wallet successfully decrypted and password protection removed.

desktop/src/main/java/bisq/desktop/bisq.css

@@ -262,6 +262,25 @@ bg color of non edit textFields: fafafa
     -jfx-focus-color: -bs-rd-green;
 }
 
+.jfx-password-field {
+    -jfx-focus-color: -bs-rd-green;
+}
+
+.jfx-text-field:error, .jfx-password-field:error, .jfx-text-area:error {
+    -jfx-focus-color: -bs-error-red;
+    -jfx-unfocus-color: -bs-error-red;
+}
+
+.jfx-text-field .error-label, .jfx-password-field .error-label, .jfx-text-area .error-label {
+    -fx-text-fill: -bs-error-red;
+    -fx-font-size: 0.75em;
+}
+
+.jfx-text-field .error-icon, .jfx-password-field .error-icon, .jfx-text-area .error-icon {
+    -fx-text-fill: -bs-error-red;
+    -fx-font-size: 1em;
+}
+
 .market-price-box > .jfx-combo-box > .input-line {
     -fx-pref-height: 0px;
 }

desktop/src/main/java/bisq/desktop/components/PasswordTextField.java

@@ -17,29 +17,11 @@
 
 package bisq.desktop.components;
 
-import bisq.core.locale.Res;
-import bisq.core.util.validation.InputValidator;
-
 import com.jfoenix.controls.JFXPasswordField;
 
-import org.controlsfx.control.PopOver;
-
-import javafx.stage.Window;
-
-import javafx.scene.control.Label;
-import javafx.scene.control.PasswordField;
-import javafx.scene.effect.BlurType;
-import javafx.scene.effect.DropShadow;
-import javafx.scene.effect.Effect;
-import javafx.scene.layout.Region;
-import javafx.scene.paint.Color;
-
-import javafx.geometry.Insets;
-import javafx.geometry.Point2D;
-
-import javafx.beans.property.ObjectProperty;
-import javafx.beans.property.SimpleObjectProperty;
-
 public class PasswordTextField extends JFXPasswordField{
-
+    public PasswordTextField() {
+        super();
+        setLabelFloat(true);
+    }
 }

desktop/src/main/java/bisq/desktop/main/account/content/password/PasswordView.java

@@ -36,14 +36,13 @@ import bisq.core.btc.wallet.WalletsManager;
 import bisq.core.crypto.ScryptUtil;
 import bisq.core.locale.Res;
 
-import bisq.common.util.Tuple2;
 import bisq.common.util.Tuple3;
 
 import org.bitcoinj.crypto.KeyCrypterScrypt;
 
 import javax.inject.Inject;
 
-import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
+import com.jfoenix.validation.RequiredFieldValidator;
 
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
@@ -65,8 +64,7 @@ public class PasswordView extends ActivatableView<GridPane, Void> {
     private Button pwButton;
     private TitledGroupBg headline;
     private int gridRow = 0;
-    private Label repeatedPasswordLabel;
+    private ChangeListener<Boolean> passwordFieldChangeListener;
-    private ChangeListener<String> passwordFieldChangeListener;
     private ChangeListener<String> repeatedPasswordFieldChangeListener;
 
 
@@ -83,18 +81,20 @@ public class PasswordView extends ActivatableView<GridPane, Void> {
 
     @Override
     public void initialize() {
-        passwordValidator.setIcon(FormBuilder.getIcon(MaterialDesignIcon.ALERT));
-
         headline = FormBuilder.addTitledGroupBg(root, gridRow, 2, "");
-        passwordField = FormBuilder.addLabelPasswordTextField(root, gridRow, Res.get("password.enterPassword"), Layout.FIRST_ROW_DISTANCE).second;
+        passwordField = FormBuilder.addPasswordTextField(root, gridRow, Res.get("password.enterPassword"), Layout.FIRST_ROW_DISTANCE);
-        passwordField.getValidators().add(passwordValidator);
+        final RequiredFieldValidator requiredFieldValidator = new RequiredFieldValidator();
-        passwordFieldChangeListener = (observable, oldValue, newValue) -> validatePasswords();
+        passwordField.getValidators().addAll(requiredFieldValidator, passwordValidator);
+        passwordFieldChangeListener = (observable, oldValue, newValue) -> {
+            if (!newValue) validatePasswords();
+        };
 
-        Tuple2<Label, PasswordTextField> tuple2 = FormBuilder.addLabelPasswordTextField(root, ++gridRow, Res.get("password.confirmPassword"));
+        repeatedPasswordField = FormBuilder.addPasswordTextField(root, ++gridRow, Res.get("password.confirmPassword"));
-        repeatedPasswordLabel = tuple2.first;
+        requiredFieldValidator.setMessage("Password can't be empty");
-        repeatedPasswordField = tuple2.second;
+        repeatedPasswordField.getValidators().addAll(requiredFieldValidator, passwordValidator);
-        repeatedPasswordField.getValidators().add(passwordValidator);
+        repeatedPasswordFieldChangeListener = (observable, oldValue, newValue) -> {
-        repeatedPasswordFieldChangeListener = (observable, oldValue, newValue) -> validatePasswords();
+            if (oldValue != newValue) validatePasswords();
+        };
 
         Tuple3<Button, BusyAnimation, Label> tuple = FormBuilder.addButtonBusyAnimationLabel(root, ++gridRow, "", 15);
         pwButton = tuple.first;
@@ -178,28 +178,24 @@ public class PasswordView extends ActivatableView<GridPane, Void> {
             headline.setText(Res.get("account.password.removePw.headline"));
             repeatedPasswordField.setVisible(false);
             repeatedPasswordField.setManaged(false);
-            repeatedPasswordLabel.setVisible(false);
-            repeatedPasswordLabel.setManaged(false);
         } else {
             pwButton.setText(Res.get("account.password.setPw.button"));
             headline.setText(Res.get("account.password.setPw.headline"));
             repeatedPasswordField.setVisible(true);
             repeatedPasswordField.setManaged(true);
-            repeatedPasswordLabel.setVisible(true);
-            repeatedPasswordLabel.setManaged(true);
         }
     }
 
     @Override
     protected void activate() {
-        passwordField.textProperty().addListener(passwordFieldChangeListener);
+        passwordField.focusedProperty().addListener(passwordFieldChangeListener);
         repeatedPasswordField.textProperty().addListener(repeatedPasswordFieldChangeListener);
 
     }
 
     @Override
     protected void deactivate() {
-        passwordField.textProperty().removeListener(passwordFieldChangeListener);
+        passwordField.focusedProperty().removeListener(passwordFieldChangeListener);
         repeatedPasswordField.textProperty().removeListener(repeatedPasswordFieldChangeListener);
 
     }

desktop/src/main/java/bisq/desktop/util/FormBuilder.java

@@ -386,23 +386,23 @@ public class FormBuilder {
 
 
     ///////////////////////////////////////////////////////////////////////////////////////////
-    // Label  + PasswordField
+    // PasswordField
     ///////////////////////////////////////////////////////////////////////////////////////////
 
-    public static Tuple2<Label, PasswordTextField> addLabelPasswordTextField(GridPane gridPane, int rowIndex, String title) {
+    public static PasswordTextField addPasswordTextField(GridPane gridPane, int rowIndex, String title) {
-        return addLabelPasswordTextField(gridPane, rowIndex, title, 0);
+        return addPasswordTextField(gridPane, rowIndex, title, 0);
     }
 
-    public static Tuple2<Label, PasswordTextField> addLabelPasswordTextField(GridPane gridPane, int rowIndex, String title, double top) {
+    public static PasswordTextField addPasswordTextField(GridPane gridPane, int rowIndex, String title, double top) {
-        Label label = addLabel(gridPane, rowIndex, title, top);
-
         PasswordTextField passwordField = new PasswordTextField();
+        passwordField.setPromptText(title);
         GridPane.setRowIndex(passwordField, rowIndex);
-        GridPane.setColumnIndex(passwordField, 1);
+        GridPane.setColumnIndex(passwordField, 0);
-        GridPane.setMargin(passwordField, new Insets(top, 0, 0, 0));
+        GridPane.setColumnSpan(passwordField, 2);
+        GridPane.setMargin(passwordField, new Insets(top + 10, 0, 20, 0));
         gridPane.getChildren().add(passwordField);
 
-        return new Tuple2<>(label, passwordField);
+        return passwordField;
     }