Added styleable PasswordStrengthIndicator

main/ui/pom.xml

@@ -73,7 +73,7 @@
 		<dependency>
 			<groupId>com.nulab-inc</groupId>
 			<artifactId>zxcvbn</artifactId>
-			<version>1.2.2</version>
+			<version>1.2.7</version>
 		</dependency>
 		
 		<!-- Logging -->

main/ui/src/main/java/org/cryptomator/ui/addvaultwizard/CreateNewVaultPasswordController.java

@@ -54,11 +54,6 @@ public class CreateNewVaultPasswordController implements FxController {
 	public Button finishButton;
 	public SecPasswordField passwordField;
 	public SecPasswordField reenterField;
-	public Region passwordStrengthLevel0;
-	public Region passwordStrengthLevel1;
-	public Region passwordStrengthLevel2;
-	public Region passwordStrengthLevel3;
-	public Region passwordStrengthLevel4;
 	public Label passwordStrengthLabel;
 	public HBox passwordMatchBox;
 	public FontAwesome5IconView checkmark;
@@ -97,11 +92,6 @@ public class CreateNewVaultPasswordController implements FxController {
 		passwordMatchLabel.textProperty().bind(Bindings.when(passwordsMatch.and(reenterFieldNotEmpty)).then(resourceBundle.getString("addvaultwizard.new.passwordsMatch")).otherwise(resourceBundle.getString("addvaultwizard.new.passwordsDoNotMatch")));
 
 		//bindsings for the password strength indicator
-		passwordStrengthLevel0.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(0), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel1.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(1), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel2.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(2), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel3.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(3), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel4.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(4), strengthRater::getBackgroundWithStrengthColor));
 		passwordStrengthLabel.textProperty().bind(EasyBind.map(passwordStrength, strengthRater::getStrengthDescription));
 	}
 
@@ -144,4 +134,11 @@ public class CreateNewVaultPasswordController implements FxController {
 		return vaultName;
 	}
 
+	public IntegerProperty passwordStrengthProperty() {
+		return passwordStrength;
+	}
+
+	public int getPasswordStrength() {
+		return passwordStrength.get();
+	}
 }

main/ui/src/main/java/org/cryptomator/ui/changepassword/ChangePasswordController.java

@@ -9,8 +9,6 @@ import javafx.scene.control.Button;
 import javafx.scene.control.CheckBox;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
-import javafx.scene.layout.Region;
-import javafx.scene.shape.Rectangle;
 import javafx.stage.Stage;
 import org.cryptomator.common.vaults.Vault;
 import org.cryptomator.cryptolib.api.InvalidPassphraseException;
@@ -40,11 +38,6 @@ public class ChangePasswordController implements FxController {
 	public SecPasswordField oldPasswordField;
 	public SecPasswordField newPasswordField;
 	public SecPasswordField reenterPasswordField;
-	public Region passwordStrengthLevel0;
-	public Region passwordStrengthLevel1;
-	public Region passwordStrengthLevel2;
-	public Region passwordStrengthLevel3;
-	public Region passwordStrengthLevel4;
 	public Label passwordStrengthLabel;
 	public HBox passwordMatchBox;
 	public FontAwesome5IconView checkmark;
@@ -79,14 +72,7 @@ public class ChangePasswordController implements FxController {
 		cross.managedProperty().bind(cross.visibleProperty());
 		passwordMatchLabel.textProperty().bind(Bindings.when(passwordsMatch.and(reenterFieldNotEmpty)).then(resourceBundle.getString("changepassword.passwordsMatch")).otherwise(resourceBundle.getString("changepassword.passwordsDoNotMatch")));
 
-		//bindsings for the password strength indicator
-		passwordStrengthLevel0.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(0), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel1.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(1), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel2.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(2), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel3.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(3), strengthRater::getBackgroundWithStrengthColor));
-		passwordStrengthLevel4.backgroundProperty().bind(EasyBind.combine(passwordStrength, new SimpleIntegerProperty(4), strengthRater::getBackgroundWithStrengthColor));
 		passwordStrengthLabel.textProperty().bind(EasyBind.map(passwordStrength, strengthRater::getStrengthDescription));
-
 	}
 
 	@FXML
@@ -109,10 +95,18 @@ public class ChangePasswordController implements FxController {
 			LOG.info("Wrong old password.");
 		}
 	}
+
 	/* Getter/Setter */
 
 	public Vault getVault() {
 		return vault;
 	}
 
+	public IntegerProperty passwordStrengthProperty() {
+		return passwordStrength;
+	}
+
+	public int getPasswordStrength() {
+		return passwordStrength.get();
+	}
 }

main/ui/src/main/java/org/cryptomator/ui/controls/PasswordStrengthIndicator.java

@@ -0,0 +1,85 @@
+package org.cryptomator.ui.controls;
+
+import javafx.beans.binding.BooleanBinding;
+import javafx.beans.property.IntegerProperty;
+import javafx.beans.property.SimpleIntegerProperty;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import org.fxmisc.easybind.EasyBind;
+
+public class PasswordStrengthIndicator extends HBox {
+
+	private static final String STYLECLASS = "password-strength-indicator";
+	private static final String SEGMENT_CLASS = "segment";
+	private static final String ACTIVE_SEGMENT_CLASS = "active";
+	private static final String STRENGTH_0_CLASS = "strength-0";
+	private static final String STRENGTH_1_CLASS = "strength-1";
+	private static final String STRENGTH_2_CLASS = "strength-2";
+	private static final String STRENGTH_3_CLASS = "strength-3";
+	private static final String STRENGTH_4_CLASS = "strength-4";
+
+	private final Region s0;
+	private final Region s1;
+	private final Region s2;
+	private final Region s3;
+	private final Region s4;
+	private final IntegerProperty strength = new SimpleIntegerProperty();
+	private final BooleanBinding isStrength0 = strength.isEqualTo(0);
+	private final BooleanBinding isStrength1 = strength.isEqualTo(1);
+	private final BooleanBinding isStrength2 = strength.isEqualTo(2);
+	private final BooleanBinding isStrength3 = strength.isEqualTo(3);
+	private final BooleanBinding isStrength4 = strength.isEqualTo(4);
+	private final BooleanBinding isMinimumStrength0 = strength.greaterThanOrEqualTo(0);
+	private final BooleanBinding isMinimumStrength1 = strength.greaterThanOrEqualTo(1);
+	private final BooleanBinding isMinimumStrength2 = strength.greaterThanOrEqualTo(2);
+	private final BooleanBinding isMinimumStrength3 = strength.greaterThanOrEqualTo(3);
+	private final BooleanBinding isMinimumStrength4 = strength.greaterThanOrEqualTo(4);
+
+	public PasswordStrengthIndicator() {
+		this.s0 = new Region();
+		this.s1 = new Region();
+		this.s2 = new Region();
+		this.s3 = new Region();
+		this.s4 = new Region();
+
+		getChildren().addAll(s0, s1, s2, s3, s4);
+		setHgrow(s0, Priority.ALWAYS);
+		setHgrow(s1, Priority.ALWAYS);
+		setHgrow(s2, Priority.ALWAYS);
+		setHgrow(s3, Priority.ALWAYS);
+		setHgrow(s4, Priority.ALWAYS);
+
+		getStyleClass().add(STYLECLASS);
+		s0.getStyleClass().add(SEGMENT_CLASS);
+		s1.getStyleClass().add(SEGMENT_CLASS);
+		s2.getStyleClass().add(SEGMENT_CLASS);
+		s3.getStyleClass().add(SEGMENT_CLASS);
+		s4.getStyleClass().add(SEGMENT_CLASS);
+
+		EasyBind.includeWhen(s0.getStyleClass(), ACTIVE_SEGMENT_CLASS, isMinimumStrength0);
+		EasyBind.includeWhen(s1.getStyleClass(), ACTIVE_SEGMENT_CLASS, isMinimumStrength1);
+		EasyBind.includeWhen(s2.getStyleClass(), ACTIVE_SEGMENT_CLASS, isMinimumStrength2);
+		EasyBind.includeWhen(s3.getStyleClass(), ACTIVE_SEGMENT_CLASS, isMinimumStrength3);
+		EasyBind.includeWhen(s4.getStyleClass(), ACTIVE_SEGMENT_CLASS, isMinimumStrength4);
+		EasyBind.includeWhen(getStyleClass(), STRENGTH_0_CLASS, isStrength0);
+		EasyBind.includeWhen(getStyleClass(), STRENGTH_1_CLASS, isStrength1);
+		EasyBind.includeWhen(getStyleClass(), STRENGTH_2_CLASS, isStrength2);
+		EasyBind.includeWhen(getStyleClass(), STRENGTH_3_CLASS, isStrength3);
+		EasyBind.includeWhen(getStyleClass(), STRENGTH_4_CLASS, isStrength4);
+	}
+
+	/* Observables */
+
+	public IntegerProperty strengthProperty() {
+		return strength;
+	}
+
+	public void setStrength(int strength) {
+		this.strength.set(strength);
+	}
+
+	public int getStrength() {
+		return strength.get();
+	}
+}

main/ui/src/main/java/org/cryptomator/ui/util/PasswordStrengthUtil.java

@@ -49,6 +49,7 @@ public class PasswordStrengthUtil {
 		}
 	}
 
+	@Deprecated
 	public Color getStrengthColor(Number score) {
 		switch (score.intValue()) {
 			case 0:
@@ -66,12 +67,14 @@ public class PasswordStrengthUtil {
 		}
 	}
 
+	@Deprecated
 	public Background getBackgroundWithStrengthColor(Number score) {
 		Color c = this.getStrengthColor(score);
 		BackgroundFill fill = new BackgroundFill(c, CornerRadii.EMPTY, Insets.EMPTY);
 		return new Background(fill);
 	}
 
+	@Deprecated
 	public Background getBackgroundWithStrengthColor(Number score, Number threshold) {
 		return score.intValue() >= threshold.intValue() ? getBackgroundWithStrengthColor(score) : getBackgroundWithStrengthColor(-1);
 	}

main/ui/src/main/resources/css/dark_theme.css

@@ -347,6 +347,36 @@
 	-fx-background-color: SECONDARY;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Password Strength Indicator                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.password-strength-indicator .segment {
+	-fx-background-color: #ffffff;
+}
+
+.password-strength-indicator.strength-0 .segment.active {
+	-fx-background-color: #e74c3c;
+}
+
+.password-strength-indicator.strength-1 .segment.active {
+	-fx-background-color: #e67e22;
+}
+
+.password-strength-indicator.strength-2 .segment.active {
+	-fx-background-color: #f1c40f;
+}
+
+.password-strength-indicator.strength-3 .segment.active {
+	-fx-background-color: #40d47e;
+}
+
+.password-strength-indicator.strength-4 .segment.active {
+	-fx-background-color: #27ae60;
+}
+
 /*******************************************************************************
  *                                                                             *
  * ButtonGroup                                                                 *

main/ui/src/main/resources/css/light_theme.css

@@ -347,6 +347,36 @@
 	-fx-background-color: SECONDARY;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Password Strength Indicator                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.password-strength-indicator .segment {
+	-fx-background-color: #ffffff;
+}
+
+.password-strength-indicator.strength-0 .segment.active {
+	-fx-background-color: #e74c3c;
+}
+
+.password-strength-indicator.strength-1 .segment.active {
+	-fx-background-color: #e67e22;
+}
+
+.password-strength-indicator.strength-2 .segment.active {
+	-fx-background-color: #f1c40f;
+}
+
+.password-strength-indicator.strength-3 .segment.active {
+	-fx-background-color: #40d47e;
+}
+
+.password-strength-indicator.strength-4 .segment.active {
+	-fx-background-color: #27ae60;
+}
+
 /*******************************************************************************
  *                                                                             *
  * ButtonGroup                                                                 *

main/ui/src/main/resources/fxml/addvault_new_password.fxml

@@ -10,6 +10,7 @@
 <?import javafx.scene.layout.VBox?>
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import org.cryptomator.ui.controls.SecPasswordField?>
+<?import org.cryptomator.ui.controls.PasswordStrengthIndicator?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.CreateNewVaultPasswordController"
@@ -25,13 +26,7 @@
 
 		<Label text="%addvaultwizard.new.enterPassword" labelFor="$passwordField"/>
 		<SecPasswordField fx:id="passwordField"/>
-		<HBox spacing="6" prefHeight="6" cacheShape="true" cache="true">
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel0" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel1" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel2" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel3" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel4" cacheShape="true" cache="true"/>
-		</HBox>
+		<PasswordStrengthIndicator spacing="6" prefHeight="6" strength="${controller.passwordStrength}"/>
 		<HBox alignment="BASELINE_RIGHT">
 			<Label fx:id="passwordStrengthLabel" styleClass="label-secondary" labelFor="$passwordField"/>
 		</HBox>

main/ui/src/main/resources/fxml/changepassword.fxml

@@ -12,6 +12,7 @@
 <?import javafx.scene.text.TextFlow?>
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import org.cryptomator.ui.controls.SecPasswordField?>
+<?import org.cryptomator.ui.controls.PasswordStrengthIndicator?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.changepassword.ChangePasswordController"
@@ -34,13 +35,7 @@
 
 		<Label labelFor="$newPasswordField" text="%changepassword.enterNewPassword"/>
 		<SecPasswordField fx:id="newPasswordField"/>
-		<HBox spacing="6.0" prefHeight="6.0" cacheShape="true" cache="true">
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel0" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel1" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel2" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel3" cacheShape="true" cache="true"/>
-			<Region HBox.hgrow="ALWAYS" fx:id="passwordStrengthLevel4" cacheShape="true" cache="true"/>
-		</HBox>
+		<PasswordStrengthIndicator prefHeight="6" spacing="6" strength="${controller.passwordStrength}"/>
 		<HBox alignment="BASELINE_RIGHT">
 			<Label fx:id="passwordStrengthLabel" styleClass="label-secondary"/>
 		</HBox>