From 00e420a2483acd3d86b5431b326ac17d4b36ad5a Mon Sep 17 00:00:00 2001
From: Armin Schrenk <armin.schrenk@skymatic.de>
Date: Tue, 19 Jul 2022 15:51:58 +0200
Subject: [PATCH] Improve add vault wizard: * adjust ok/not-ok-design to other
 textfields * add info, what characters to use

---
 .../CreateNewVaultNameController.java         | 33 +++-----------
 .../resources/fxml/addvault_new_name.fxml     | 44 ++++++++++++++++---
 src/main/resources/i18n/strings.properties    |  7 ++-
 3 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/main/java/org/cryptomator/ui/addvaultwizard/CreateNewVaultNameController.java b/src/main/java/org/cryptomator/ui/addvaultwizard/CreateNewVaultNameController.java
index cab32c9db..3068874ec 100644
--- a/src/main/java/org/cryptomator/ui/addvaultwizard/CreateNewVaultNameController.java
+++ b/src/main/java/org/cryptomator/ui/addvaultwizard/CreateNewVaultNameController.java
@@ -10,7 +10,6 @@ import javax.inject.Named;
 import javafx.beans.Observable;
 import javafx.beans.binding.Bindings;
 import javafx.beans.binding.BooleanBinding;
-import javafx.beans.binding.StringBinding;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.StringProperty;
 import javafx.fxml.FXML;
@@ -33,8 +32,6 @@ public class CreateNewVaultNameController implements FxController {
 	private final ObjectProperty<Path> vaultPath;
 	private final StringProperty vaultName;
 	private final BooleanBinding validVaultName;
-	private final BooleanBinding invalidVaultName;
-	private final StringBinding warningText;
 
 	@Inject
 	CreateNewVaultNameController(@AddVaultWizardWindow Stage window, @FxmlScene(FxmlFile.ADDVAULT_WELCOME) Lazy<Scene> welcomeScene, @FxmlScene(FxmlFile.ADDVAULT_NEW_LOCATION) Lazy<Scene> chooseLocationScene, ObjectProperty<Path> vaultPath, @Named("vaultName") StringProperty vaultName, ResourceBundle resourceBundle) {
@@ -43,9 +40,7 @@ public class CreateNewVaultNameController implements FxController {
 		this.chooseLocationScene = chooseLocationScene;
 		this.vaultPath = vaultPath;
 		this.vaultName = vaultName;
-		this.validVaultName = Bindings.createBooleanBinding(this::isValidVaultName, vaultName);
-		this.invalidVaultName = validVaultName.not();
-		this.warningText = Bindings.when(vaultName.isNotEmpty().and(invalidVaultName)).then(resourceBundle.getString("addvaultwizard.new.invalidName")).otherwise((String) null);
+		this.validVaultName = Bindings.createBooleanBinding(this::isValidVaultNameInternal, vaultName);
 	}
 
 	@FXML
@@ -54,7 +49,7 @@ public class CreateNewVaultNameController implements FxController {
 		vaultName.addListener(this::vaultNameChanged);
 	}
 
-	public boolean isValidVaultName() {
+	private boolean isValidVaultNameInternal() {
 		return vaultName.get() != null && VALID_NAME_PATTERN.matcher(vaultName.get().trim()).matches();
 	}
 
@@ -79,28 +74,12 @@ public class CreateNewVaultNameController implements FxController {
 
 	/* Getter/Setter */
 
-	public BooleanBinding invalidVaultNameProperty() {
-		return invalidVaultName;
+	public BooleanBinding validVaultNameProperty() {
+		return validVaultName;
 	}
 
-	public boolean isInvalidVaultName() {
-		return invalidVaultName.get();
-	}
-
-	public StringBinding warningTextProperty() {
-		return warningText;
-	}
-
-	public String getWarningText() {
-		return warningText.get();
-	}
-
-	public BooleanBinding showWarningProperty() {
-		return warningText.isNotEmpty();
-	}
-
-	public boolean isShowWarning() {
-		return showWarningProperty().get();
+	public boolean isValidVaultName() {
+		return validVaultName.get();
 	}
 
 }
diff --git a/src/main/resources/fxml/addvault_new_name.fxml b/src/main/resources/fxml/addvault_new_name.fxml
index bf922cd33..e7494e116 100644
--- a/src/main/resources/fxml/addvault_new_name.fxml
+++ b/src/main/resources/fxml/addvault_new_name.fxml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import org.cryptomator.ui.controls.FontAwesome5IconView?>
+<?import org.cryptomator.ui.controls.FormattedLabel?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
@@ -8,6 +9,7 @@
 <?import javafx.scene.control.TextField?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.StackPane?>
 <?import javafx.scene.layout.VBox?>
 <VBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
@@ -25,11 +27,43 @@
 		<VBox spacing="6">
 			<Label text="%addvaultwizard.new.nameInstruction" labelFor="$textField"/>
 			<TextField fx:id="textField" promptText="%addvaultwizard.new.namePrompt" HBox.hgrow="ALWAYS"/>
-			<Label text="${controller.warningText}" wrapText="true" visible="${controller.showWarning}">
-				<graphic>
-					<FontAwesome5IconView glyph="EXCLAMATION_TRIANGLE"/>
-				</graphic>
-			</Label>
+			<HBox alignment="TOP_RIGHT">
+				<StackPane visible="${!textField.text.empty}">
+					<Label styleClass="label-muted" text="%addvaultwizard.new.invalidName" textAlignment="RIGHT" alignment="CENTER_RIGHT" visible="${!controller.validVaultName}" graphicTextGap="6">
+						<graphic>
+							<FontAwesome5IconView styleClass="glyph-icon-red" glyph="TIMES" />
+						</graphic>
+					</Label>
+					<Label styleClass="label-muted" text="%addvaultwizard.new.validName" textAlignment="RIGHT" alignment="CENTER_RIGHT" visible="${controller.validVaultName}" graphicTextGap="6">
+						<graphic>
+							<FontAwesome5IconView styleClass="glyph-icon-primary" glyph="CHECK" />
+						</graphic>
+					</Label>
+				</StackPane>
+			</HBox>
+
+			<Label text="%addvaultwizard.new.validCharacters.message"/>
+			<VBox>
+				<padding>
+					<Insets left="6"/>
+				</padding>
+				<Label text="%addvaultwizard.new.validCharacters.chars">
+					<graphic>
+						<FontAwesome5IconView glyph="CHECK" />
+					</graphic>
+				</Label>
+				<Label text="%addvaultwizard.new.validCharacters.numbers">
+					<graphic>
+						<FontAwesome5IconView glyph="CHECK" />
+					</graphic>
+				</Label>
+				<FormattedLabel format="%addvaultwizard.new.validCharacters.dashes" arg1="-" arg2="_">
+					<graphic>
+						<FontAwesome5IconView glyph="CHECK" />
+					</graphic>
+				</FormattedLabel>
+			</VBox>
+
 		</VBox>
 
 		<Region VBox.vgrow="ALWAYS"/>
diff --git a/src/main/resources/i18n/strings.properties b/src/main/resources/i18n/strings.properties
index a00a921d4..e7710738d 100644
--- a/src/main/resources/i18n/strings.properties
+++ b/src/main/resources/i18n/strings.properties
@@ -55,7 +55,12 @@ addvaultwizard.new.fileAlreadyExists=A file or directory with the vault name alr
 addvaultwizard.new.locationDoesNotExist=A directory in the specified path does not exist or cannot be accessed
 addvaultwizard.new.locationIsNotWritable=No write access at the specified path
 addvaultwizard.new.locationIsOk=Suitable location for your vault
-addvaultwizard.new.invalidName=Invalid vault name. Please consider a regular directory name.
+addvaultwizard.new.invalidName=Invalid vault name
+addvaultwizard.new.validName=Valid vault name
+addvaultwizard.new.validCharacters.message=The vault name may contain the following characters:
+addvaultwizard.new.validCharacters.chars=Word characters (e.g. a, ж or 수)
+addvaultwizard.new.validCharacters.numbers=Numbers
+addvaultwizard.new.validCharacters.dashes=Hyphen (%s) or underscore (%s)
 ### Password
 addvaultwizard.new.createVaultBtn=Create Vault
 addvaultwizard.new.generateRecoveryKeyChoice=You won't be able to access your data without your password. Do you want a recovery key for the case you lose your password?