From 07cfef2e41ee2fa6c4dd5a2138f8a76fc1850822 Mon Sep 17 00:00:00 2001
From: Armin Schrenk <armin.schrenk@skymatic.de>
Date: Mon, 27 Jun 2022 17:21:45 +0200
Subject: [PATCH] adjust design of auth for recovery key

---
 .../resources/fxml/recoverykey_create.fxml    | 42 ++++++++++++++-----
 src/main/resources/i18n/strings.properties    |  3 +-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/main/resources/fxml/recoverykey_create.fxml b/src/main/resources/fxml/recoverykey_create.fxml
index 432e126ef..971c516af 100644
--- a/src/main/resources/fxml/recoverykey_create.fxml
+++ b/src/main/resources/fxml/recoverykey_create.fxml
@@ -7,25 +7,47 @@
 <?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
-<VBox xmlns:fx="http://javafx.com/fxml"
+<?import javafx.scene.Group?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.shape.Circle?>
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.Region?>
+<HBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.recoverykey.RecoveryKeyCreationController"
 	  minWidth="400"
 	  maxWidth="400"
-	  minHeight="145"
+	  minHeight="175"
 	  spacing="12"
-	  alignment="TOP_CENTER">
+	  alignment="TOP_LEFT">
 	<padding>
 		<Insets topRightBottomLeft="12"/>
 	</padding>
 	<children>
-		<VBox spacing="6">
-			<FormattedLabel format="%recoveryKey.enterPassword.prompt" arg1="${controller.vault.displayName}" wrapText="true"/>
+		<Group>
+			<StackPane>
+				<padding>
+					<Insets topRightBottomLeft="6"/>
+				</padding>
+				<Circle styleClass="glyph-icon-primary" radius="24"/>
+				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="LOCK" glyphSize="24"/>
+			</StackPane>
+		</Group>
+		<VBox HBox.hgrow="ALWAYS">
+			<Label styleClass="label-large" text="%recoveryKey.create.title" wrapText="true" textAlignment="LEFT">
+				<padding>
+					<Insets bottom="6" top="6"/>
+				</padding>
+			</Label>
+			<FormattedLabel format="%recoveryKey.enterPassword.prompt" arg1="${controller.vault.displayName}" wrapText="true">
+				<padding>
+					<Insets bottom="6"/>
+				</padding>
+			</FormattedLabel>
 			<NiceSecurePasswordField fx:id="passwordField" HBox.hgrow="ALWAYS"/>
-		</VBox>
-
-		<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
-			<ButtonBar buttonMinWidth="120" buttonOrder="C+X">
+			<Region VBox.vgrow="ALWAYS" minHeight="18"/>
+			<ButtonBar buttonMinWidth="120" buttonOrder="+CX">
 				<buttons>
 					<Button text="%generic.button.cancel" ButtonBar.buttonData="CANCEL_CLOSE" cancelButton="true" onAction="#close"/>
 					<Button text="%generic.button.next" ButtonBar.buttonData="NEXT_FORWARD" defaultButton="true" onAction="#createRecoveryKey" disable="${passwordField.text.empty}"/>
@@ -33,4 +55,4 @@
 			</ButtonBar>
 		</VBox>
 	</children>
-</VBox>
+</HBox>
diff --git a/src/main/resources/i18n/strings.properties b/src/main/resources/i18n/strings.properties
index 84ec2b382..d8cc8ee76 100644
--- a/src/main/resources/i18n/strings.properties
+++ b/src/main/resources/i18n/strings.properties
@@ -361,7 +361,8 @@ vaultOptions.masterkey.recoverPasswordBtn=Recover Password
 
 # Recovery Key
 recoveryKey.title=Recovery Key
-recoveryKey.enterPassword.prompt=Enter your password to show the recovery key for "%s":
+recoveryKey.create.title=Password required
+recoveryKey.enterPassword.prompt=Enter the password for "%s" to show its recovery key.
 recoveryKey.display.message=The following recovery key can be used to restore access to "%s":
 recoveryKey.display.StorageHints=Keep it somewhere very secure, e.g.:\n • Store it using a password manager\n • Save it on a USB flash drive\n • Print it on paper
 recoveryKey.recover.prompt=Enter your recovery key for "%s":