Adjust hub register device to new design

src/main/resources/fxml/hub_register_device.fxml

@@ -1,52 +1,61 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import org.cryptomator.ui.controls.FormattedLabel?>
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ButtonBar?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.TextField?>
-<?import javafx.scene.image.Image?>
-<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.Group?>
 <?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"
+<?import javafx.scene.shape.Circle?>
+<HBox xmlns:fx="http://javafx.com/fxml"
 	  xmlns="http://javafx.com/javafx"
 	  fx:controller="org.cryptomator.ui.keyloading.hub.RegisterDeviceController"
 	  minWidth="400"
 	  maxWidth="400"
 	  minHeight="145"
-	  spacing="12">
+	  spacing="12"
+	  alignment="TOP_LEFT">
 	<padding>
 		<Insets topRightBottomLeft="12"/>
 	</padding>
 	<children>
-		<HBox spacing="12" VBox.vgrow="ALWAYS">
-			<HBox alignment="CENTER">
-				<ImageView VBox.vgrow="ALWAYS" fitWidth="64" preserveRatio="true" cache="true">
-					<Image url="@../img/bot/bot.png"/>
-				</ImageView>
-			</HBox>
+		<Group>
+			<StackPane>
+				<padding>
+					<Insets topRightBottomLeft="6"/>
+				</padding>
+				<Circle styleClass="glyph-icon-primary" radius="24"/>
+				<FontAwesome5IconView styleClass="glyph-icon-white" glyph="INFO" glyphSize="24"/>
+			</StackPane>
+		</Group>
 
-			<VBox spacing="6">
-				<Label text="TODO This device is not yet known to Cryptomator Hub. Please register this device first." wrapText="true"/>
-				<HBox spacing="6" alignment="CENTER_LEFT">
-					<FormattedLabel format="TODO User %s" arg1="${controller.userName}"/>
-				</HBox>
-				<HBox spacing="6" alignment="CENTER_LEFT">
-					<Label text="TODO Device Name" labelFor="$deviceNameField"/>
-					<TextField fx:id="deviceNameField"/>
-				</HBox>
-			</VBox>
-		</HBox>
+		<VBox HBox.hgrow="ALWAYS">
+			<Label styleClass="label-large" text="%hub.register.message" wrapText="true" textAlignment="LEFT">
+				<padding>
+					<Insets bottom="6" top="6"/>
+				</padding>
+			</Label>
+			<Label text="%hub.register.description" wrapText="true"/>
+			<HBox spacing="6" alignment="CENTER_LEFT">
+				<padding>
+					<Insets top="12"/>
+				</padding>
+				<Label text="%hub.register.nameLabel" labelFor="$deviceNameField"/>
+				<TextField fx:id="deviceNameField" HBox.hgrow="ALWAYS"/>
+			</HBox>
 
-		<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
+			<Region VBox.vgrow="ALWAYS" minHeight="18"/>
 			<ButtonBar buttonMinWidth="120" buttonOrder="+CU">
 				<buttons>
 					<Button text="%generic.button.close" ButtonBar.buttonData="CANCEL_CLOSE" cancelButton="true" onAction="#close"/>
-					<Button text="TODO Register Device" ButtonBar.buttonData="OTHER" defaultButton="true" onAction="#register"/>
+					<Button text="%hub.register.registerBtn" ButtonBar.buttonData="OTHER" defaultButton="true" onAction="#register"/>
 				</buttons>
 			</ButtonBar>
 		</VBox>
 	</children>
-</VBox>
+</HBox>

src/main/resources/i18n/strings.properties

@@ -129,6 +129,11 @@ unlock.error.invalidMountPoint.driveLetterOccupied=Drive Letter "%s" is already
 hub.auth.message=Waiting for authentication…
 hub.auth.description=You should automatically be redirected to the login page.
 hub.auth.loginLink=Not redirected? Click here to open it.
+### Register Device
+hub.register.message=Device unknown
+hub.register.description=Cryptomator Hub does not recognize this device. Please register it.
+hub.register.nameLabel=Device Name
+hub.register.registerBtn=Register
 
 # Lock
 ## Force