updated add vault wizard layout & stylings

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

@@ -37,10 +37,10 @@ public abstract class AddVaultModule {
 	@Provides
 	@AddVaultWizard
 	@AddVaultWizardScoped
-	static Stage provideStage(@MainWindow Stage owner) {
+	static Stage provideStage(@MainWindow Stage owner, ResourceBundle resourceBundle) {
 		Stage stage = new Stage();
-		stage.setMinWidth(500);
-		stage.setMinHeight(500);
+		stage.setTitle(resourceBundle.getString("addvaultwizard.title"));
+		stage.setResizable(false);
 		stage.initStyle(StageStyle.DECORATED);
 		stage.initModality(Modality.WINDOW_MODAL);
 		stage.initOwner(owner);

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

@@ -11,10 +11,10 @@ import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.scene.Scene;
 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.settings.VaultSettings;
 import org.cryptomator.common.vaults.Vault;
@@ -22,6 +22,7 @@ import org.cryptomator.common.vaults.VaultFactory;
 import org.cryptomator.ui.common.FxController;
 import org.cryptomator.ui.common.FxmlFile;
 import org.cryptomator.ui.common.FxmlScene;
+import org.cryptomator.ui.controls.FontAwesome5IconView;
 import org.cryptomator.ui.controls.SecPasswordField;
 import org.cryptomator.ui.util.PasswordStrengthUtil;
 import org.fxmisc.easybind.EasyBind;
@@ -55,9 +56,10 @@ public class CreateNewVaultPasswordController implements FxController {
 	public Region passwordStrengthLevel4;
 	public Label passwordStrengthLabel;
 	public HBox passwordMatchBox;
-	public Rectangle checkmark;
-	public Rectangle cross;
+	public FontAwesome5IconView checkmark;
+	public FontAwesome5IconView cross;
 	public Label passwordMatchLabel;
+	public CheckBox finalConfirmationCheckbox;
 
 	@Inject
 	CreateNewVaultPasswordController(@AddVaultWizard Stage window, @FxmlScene(FxmlFile.ADDVAULT_NEW_LOCATION) Lazy<Scene> previousScene, StringProperty vaultName, ObjectProperty<Path> vaultPath, ObservableList<Vault> vaults, VaultFactory vaultFactory, ResourceBundle resourceBundle, PasswordStrengthUtil strengthRater) {
@@ -80,11 +82,13 @@ public class CreateNewVaultPasswordController implements FxController {
 		BooleanBinding passwordsMatch = Bindings.createBooleanBinding(() -> CharSequence.compare(passwordField.getCharacters(), reenterField.getCharacters()) == 0, passwordField.textProperty(), reenterField.textProperty());
 		BooleanBinding reenterFieldNotEmpty = reenterField.textProperty().isNotEmpty();
 		//disable the finish button when passwords do not match or one is empty
-		finishButton.disableProperty().bind(reenterFieldNotEmpty.not().or(passwordsMatch.not()));
+		finishButton.disableProperty().bind(reenterFieldNotEmpty.not().or(passwordsMatch.not()).or(finalConfirmationCheckbox.selectedProperty().not()));
 		//make match indicator invisible when passwords do not match or one is empty
 		passwordMatchBox.visibleProperty().bind(reenterFieldNotEmpty);
 		checkmark.visibleProperty().bind(passwordsMatch.and(reenterFieldNotEmpty));
+		checkmark.managedProperty().bind(checkmark.visibleProperty());
 		cross.visibleProperty().bind(passwordsMatch.not().and(reenterFieldNotEmpty));
+		cross.managedProperty().bind(cross.visibleProperty());
 		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

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

@@ -5,6 +5,7 @@ package org.cryptomator.ui.controls;
  */
 public enum FontAwesome5Icon {
 	ANCHOR("\uF13D"), //
+	CHECK("\uF00C"), //
 	CIRCLE("\uF111"), //
 	COG("\uF013"), //
 	COGS("\uF085"), //
@@ -15,6 +16,7 @@ public enum FontAwesome5Icon {
 	LOCK_OPEN_ALT("\uF3C2"), //
 	MINUS("\uF068"), //
 	PLUS("\uF067"), //
+	SEARCH("\uF002"), //
 	SPINNER("\uF110"), //
 	SYNC("\uF021"), //
 	TIMES("\uF00D"), //

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

@@ -38,10 +38,6 @@
     -fx-text-fill: TEXT_FILL;
 }
 
-.glyph-icon {
-	-fx-fill: TEXT_FILL;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Labels                                                                      *
@@ -52,10 +48,28 @@
 	-fx-text-fill: TEXT_FILL;
 }
 
+.label-secondary {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+}
+
 .text-flow > * {
 	-fx-fill: TEXT_FILL;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Glyph Icons                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.glyph-icon {
+	-fx-fill: TEXT_FILL;
+}
+
+.glyph-icon-secondary {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Main Window                                                                 *
@@ -463,6 +477,10 @@
 	-fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED;
 }
 
+.button:disabled .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
 .button:default .glyph-icon {
 	-fx-fill: TEXT_FILL_WHITE;
 }

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

@@ -38,10 +38,6 @@
 	-fx-text-fill: TEXT_FILL;
 }
 
-.glyph-icon {
-	-fx-fill: TEXT_FILL;
-}
-
 /*******************************************************************************
  *                                                                             *
  * Labels                                                                      *
@@ -52,10 +48,28 @@
 	-fx-text-fill: TEXT_FILL;
 }
 
+.label-secondary {
+	-fx-text-fill: TEXT_FILL_SECONDARY;
+}
+
 .text-flow > * {
 	-fx-fill: TEXT_FILL;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Glyph Icons                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.glyph-icon {
+	-fx-fill: TEXT_FILL;
+}
+
+.glyph-icon-secondary {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Main Window                                                                 *
@@ -463,6 +477,10 @@
 	-fx-background-color: CONTROL_PRIMARY_BORDER_DISABLED, CONTROL_PRIMARY_BG_DISABLED;
 }
 
+.button:disabled .glyph-icon {
+	-fx-fill: TEXT_FILL_SECONDARY;
+}
+
 .button:default .glyph-icon {
 	-fx-fill: TEXT_FILL_WHITE;
 }

main/ui/src/main/resources/fxml/addvault_existing.fxml

@@ -9,20 +9,24 @@
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.ChooseExistingVaultController"
-	  prefHeight="400.0"
 	  prefWidth="600.0"
+	  prefHeight="400.0"
+	  spacing="12.0"
 	  alignment="CENTER">
 	<padding>
 		<Insets top="12" right="12" bottom="12" left="12"/>
 	</padding>
 	<children>
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<Label text="%addvaultwizard.existing.instruction" labelFor="$finishButton"/>
+
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<ButtonBar buttonMinWidth="120" buttonOrder="B+I">
 			<buttons>
 				<Button text="%generic.button.back" ButtonBar.buttonData="BACK_PREVIOUS" onAction="#back"/>
-				<Button fx:id="finishButton" text="Choose..." ButtonBar.buttonData="FINISH" onAction="#chooseFileAndFinish" defaultButton="true"/>
+				<Button fx:id="finishButton" text="%addvaultwizard.existing.chooseBtn" ButtonBar.buttonData="FINISH" onAction="#chooseFileAndFinish" defaultButton="true"/>
 			</buttons>
 		</ButtonBar>
 	</children>

main/ui/src/main/resources/fxml/addvault_new_location.fxml

@@ -14,9 +14,10 @@
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.CreateNewVaultLocationController"
-	  prefHeight="400.0" prefWidth="600.0"
-	  alignment="CENTER_LEFT"
-	  spacing="6">
+	  prefWidth="600.0"
+	  prefHeight="400.0"
+	  spacing="12.0"
+	  alignment="CENTER_LEFT">
 	<fx:define>
 		<ToggleGroup fx:id="predefinedLocationToggler"/>
 	</fx:define>
@@ -25,24 +26,26 @@
 	</padding>
 	<children>
 		<Region VBox.vgrow="ALWAYS"/>
-		<Label wrapText="true" text="%addvaultwizard.new.locationInstruction"/>
 
-		<Region prefHeight="24" VBox.vgrow="NEVER"/>
+		<Label wrapText="true" text="%addvaultwizard.new.locationInstruction"/>
 
-		<RadioButton fx:id="dropboxRadioButton" toggleGroup="${predefinedLocationToggler}" text="TODO dropbox" visible="${controller.locationPresets.foundDropbox}"/>
-		<RadioButton fx:id="gdriveRadioButton" toggleGroup="${predefinedLocationToggler}" text="TODO google drive" visible="${controller.locationPresets.foundGdrive}"/>
-		<HBox spacing="12" alignment="CENTER_LEFT">
-			<RadioButton fx:id="customRadioButton" toggleGroup="${predefinedLocationToggler}" text="TODO custom location"/>
-			<Button contentDisplay="LEFT" text="%addvaultwizard.new.directoryPickerButton" onAction="#chooseCustomVaultPath" disable="${controller.usePresetPath}">
-				<graphic>
-					<FontAwesome5IconView glyph="FOLDER_OPEN"/>
-				</graphic>
-			</Button>
-		</HBox>
+		<VBox spacing="6">
+			<RadioButton fx:id="dropboxRadioButton" toggleGroup="${predefinedLocationToggler}" text="Dropbox" visible="${controller.locationPresets.foundDropbox}"/>
+			<RadioButton fx:id="gdriveRadioButton" toggleGroup="${predefinedLocationToggler}" text="Google Drive" visible="${controller.locationPresets.foundGdrive}"/>
+			<HBox spacing="12" alignment="CENTER_LEFT">
+				<RadioButton fx:id="customRadioButton" toggleGroup="${predefinedLocationToggler}" text="%addvaultwizard.new.directoryPickerLabel"/>
+				<Button contentDisplay="LEFT" text="%addvaultwizard.new.directoryPickerButton" onAction="#chooseCustomVaultPath" disable="${controller.usePresetPath}">
+					<graphic>
+						<FontAwesome5IconView glyph="FOLDER_OPEN"/>
+					</graphic>
+				</Button>
+			</HBox>
+		</VBox>
 
-		<Region prefHeight="24" VBox.vgrow="NEVER"/>
+		<Region VBox.vgrow="NEVER"/>
 
-		<TextField promptText="%addvaultwizard.new.locationPrompt" text="${controller.vaultPath}" disable="true" HBox.hgrow="ALWAYS"/>
+		<Label text="%addvaultwizard.new.locationLabel" labelFor="$locationTextField"/>
+		<TextField fx:id="locationTextField" promptText="%addvaultwizard.new.locationPrompt" text="${controller.vaultPath}" disable="true" HBox.hgrow="ALWAYS"/>
 
 		<Region VBox.vgrow="ALWAYS"/>
 

main/ui/src/main/resources/fxml/addvault_new_name.fxml

@@ -11,16 +11,21 @@
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.CreateNewVaultNameController"
-	  prefHeight="400.0" prefWidth="600.0"
-	  alignment="CENTER">
+	  prefWidth="600.0"
+	  prefHeight="400.0"
+	  spacing="12.0"
+	  alignment="CENTER_LEFT">
 	<padding>
 		<Insets top="12" right="12" bottom="12" left="12"/>
 	</padding>
 	<children>
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<Label text="%addvaultwizard.new.nameInstruction" labelFor="$textField"/>
 		<TextField fx:id="textField" promptText="%addvaultwizard.new.namePrompt" HBox.hgrow="ALWAYS"/>
+
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<ButtonBar buttonMinWidth="120" buttonOrder="B+X">
 			<buttons>
 				<Button text="%generic.button.back" ButtonBar.buttonData="BACK_PREVIOUS" onAction="#back"/>

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

@@ -3,50 +3,59 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
+<?import javafx.scene.control.CheckBox?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import org.cryptomator.ui.controls.SecPasswordField?>
-<?import javafx.scene.layout.HBox?>
-<?import javafx.scene.image.ImageView?>
-<?import javafx.scene.shape.Rectangle?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.CreateNewVaultPasswordController"
-	  prefHeight="400.0" prefWidth="600.0"
-	  alignment="CENTER">
+	  prefWidth="600.0"
+	  prefHeight="400.0"
+	  spacing="12"
+	  alignment="CENTER_LEFT">
 	<padding>
 		<Insets top="12" right="12" bottom="12" left="12"/>
 	</padding>
 	<children>
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<Label text="%addvaultwizard.new.enterPassword" labelFor="$passwordField"/>
 		<SecPasswordField fx:id="passwordField"/>
-		<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 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>
-		<Label fx:id="passwordStrengthLabel" styleClass="caption-label" labelFor="$passwordField" />
-		<Region VBox.vgrow="ALWAYS"/>
+		<HBox alignment="BASELINE_RIGHT">
+			<Label fx:id="passwordStrengthLabel" styleClass="label-secondary" labelFor="$passwordField"/>
+		</HBox>
+
+		<Region VBox.vgrow="NEVER"/>
+
 		<Label text="%addvaultwizard.new.reenterPassword" labelFor="$reenterField"/>
 		<SecPasswordField fx:id="reenterField"/>
-		<HBox fx:id="passwordMatchBox" spacing="12.0" alignment="BASELINE_RIGHT" >
-			<!-- TODO
-			<ImageView fx:id="checkmark" image="/path/to/checkmark" fitWidth="10" fitHeight="10" />
-			<ImageView fx:id="cross" image="/path/to/cross" fitWidth="10" fitHeight="10" />
-			-->
-			<Rectangle fx:id="checkmark" width="10" height="10" fill="green"/>
-			<Rectangle fx:id="cross" width="10" height="10" fill="red"/>
-			<Label fx:id="passwordMatchLabel" labelFor="$reenterField" />
+		<HBox fx:id="passwordMatchBox" spacing="6" alignment="BASELINE_RIGHT">
+			<FontAwesome5IconView fx:id="checkmark" styleClass="glyph-icon-secondary" glyph="CHECK"/>
+			<FontAwesome5IconView fx:id="cross" styleClass="glyph-icon-secondary" glyph="TIMES"/>
+			<Label fx:id="passwordMatchLabel" styleClass="label-secondary" labelFor="$reenterField"/>
 		</HBox>
+
+		<Region VBox.vgrow="NEVER"/>
+
+		<CheckBox fx:id="finalConfirmationCheckbox" text="%addvaultwizard.new.finalConfirmation"/>
+
 		<Region VBox.vgrow="ALWAYS"/>
+
 		<ButtonBar buttonMinWidth="120" buttonOrder="B+I">
 			<buttons>
 				<Button text="%generic.button.back" ButtonBar.buttonData="BACK_PREVIOUS" onAction="#back"/>
-				<Button fx:id="finishButton" text="%generic.button.create" ButtonBar.buttonData="FINISH" onAction="#finish" defaultButton="true" />
+				<Button fx:id="finishButton" text="%generic.button.create" ButtonBar.buttonData="FINISH" onAction="#finish" defaultButton="true"/>
 			</buttons>
 		</ButtonBar>
 	</children>

main/ui/src/main/resources/fxml/addvault_welcome.fxml

@@ -2,25 +2,42 @@
 
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
-<?import javafx.scene.control.Label?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
 <?import javafx.scene.layout.VBox?>
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <VBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:controller="org.cryptomator.ui.addvaultwizard.AddVaultWelcomeController"
-	  prefHeight="400.0"
 	  prefWidth="600.0"
-	  alignment="CENTER">
+	  prefHeight="400.0"
+	  spacing="12.0"
+	  alignment="TOP_CENTER">
 	<padding>
 		<Insets top="12" right="12" bottom="12" left="12"/>
 	</padding>
 	<children>
-		<Label text="%addvaultwizard.welcome.instruction"/>
+		<Region prefHeight="48" VBox.vgrow="NEVER"/>
+
+		<ImageView fitHeight="128.0" preserveRatio="true" smooth="true" cache="true">
+			<Image url="/bot_welcome.png"/>
+		</ImageView>
 
-		<HBox spacing="12">
-			<Button text="%addvaultwizard.welcome.newButton" onAction="#createNewVault"/>
+		<Region prefHeight="24" VBox.vgrow="NEVER"/>
 
-			<Button text="%addvaultwizard.welcome.existingButton" onAction="#chooseExistingVault"/>
+		<HBox alignment="CENTER" spacing="6">
+			<Button styleClass="button-large" text="%addvaultwizard.welcome.newButton" onAction="#createNewVault">
+				<graphic>
+					<FontAwesome5IconView glyph="PLUS" glyphSize="15"/>
+				</graphic>
+			</Button>
+			<Button styleClass="button-large" text="%addvaultwizard.welcome.existingButton" onAction="#chooseExistingVault">
+				<graphic>
+					<FontAwesome5IconView glyph="SEARCH" glyphSize="15"/>
+				</graphic>
+			</Button>
 		</HBox>
 	</children>
 </VBox>

main/ui/src/main/resources/i18n/strings.properties

@@ -5,29 +5,30 @@ generic.button.cancel=Cancel
 generic.button.change=Change
 generic.button.create=Create
 generic.button.next=Next
-generic.button.open=Open
 
 # Add Vault Wizard
+addvaultwizard.title=Add Vault
 ## Welcome
-addvaultwizard.welcome.instruction=TODO new vault or existing vault?
-addvaultwizard.welcome.newButton=TODO new vault
-addvaultwizard.welcome.existingButton=TODO exising vault
-## Existing
-addvaultwizard.existing.promptText=TODO prompt
-addvaultwizard.existing.filePickerButton=TODO Filepicker
-addvaultwizard.existing.instruction=Please choose the masterkey.cryptomator file of your existing vault.The path to the vault will be displayed.
-addvaultwizard.existing.filePickerTitle=Open Masterkey File
+addvaultwizard.welcome.newButton=Create New Vault
+addvaultwizard.welcome.existingButton=Add Existing Vault
 ## New
-addvaultwizard.new.nameInstruction=Please enter a name for the vault:
-addvaultwizard.new.namePrompt=TODO vault name
+addvaultwizard.new.nameInstruction=Please enter a name for your vault:
+addvaultwizard.new.namePrompt=Vault Name
 addvaultwizard.new.locationInstruction=Please pick a directory where your vault will be stored:
-addvaultwizard.new.locationPrompt=TODO location
-addvaultwizard.new.directoryPickerButton=Choose...
+addvaultwizard.new.locationLabel=Chosen location for your vault:
+addvaultwizard.new.locationPrompt=…
+addvaultwizard.new.directoryPickerLabel=Custom Location
+addvaultwizard.new.directoryPickerButton=Choose…
 addvaultwizard.new.directoryPickerTitle=Select Directory
-addvaultwizard.new.enterPassword=Please enter a Password for your vault:
-addvaultwizard.new.reenterPassword=Please enter the password again:
+addvaultwizard.new.enterPassword=Please enter a password for your vault:
+addvaultwizard.new.reenterPassword=Please confirm the password:
 addvaultwizard.new.passwordsMatch=Passwords match!
-addvaultwizard.new.passwordsDoNotMatch=Passwords do not match.
+addvaultwizard.new.passwordsDoNotMatch=Passwords do not match
+addvaultwizard.new.finalConfirmation=I understand that I will not be able to recover my data if I forget my password
+## Existing
+addvaultwizard.existing.instruction=Please choose the "masterkey.cryptomator" file of your existing vault.
+addvaultwizard.existing.chooseBtn=Choose…
+addvaultwizard.existing.filePickerTitle=Select Masterkey File
 
 # Change Password
 changepassword.title=Change Password