From 213d7119f9159d42a3877ed5c2e5a033dfd24979 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@owncloud.com>
Date: Fri, 24 Jun 2016 17:00:59 +0200
Subject: [PATCH] fix layout

---
 settings/css/settings.css       |  8 ++++++++
 settings/js/authtoken_view.js   |  9 ++++++---
 settings/templates/personal.php | 13 ++++++++++---
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/settings/css/settings.css b/settings/css/settings.css
index e4ddec9152..914c0d7515 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -131,11 +131,19 @@ table.nostyle td { padding: 0.2em 0; }
 	opacity: 0.6;
 }
 
+#new-app-login-name,
 #new-app-password {
 	width: 186px;
 	font-family: monospace;
 	background-color: lightyellow;
 }
+.app-password-row {
+	display: table-row;
+}
+.app-password-label {
+	display: table-cell;
+	padding-right: 1em;
+}
 
 /* USERS */
 #newgroup-init a span { margin-left: 20px; }
diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index cf6b4f7c8d..db6dac85ce 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -139,6 +139,7 @@
 
 			this._result = $('#app-password-result');
 			this._newAppLoginName = $('#new-app-login-name');
+			this._newAppLoginName.on('focus', _.bind(this._onNewTokenLoginNameFocus, this));
 			this._newAppPassword = $('#new-app-password');
 			this._newAppPassword.on('focus', _.bind(this._onNewTokenFocus, this));
 			this._hideAppPasswordBtn = $('#app-password-hide');
@@ -184,9 +185,7 @@
 			$.when(creatingToken).done(function(resp) {
 				_this.collection.add(resp.deviceToken);
 				_this.render();
-				_this._newAppLoginName.text(t('core', 'You may now configure your client with username "{loginName}" and the following password:', {
-					loginName: resp.loginName
-				}));
+				_this._newAppLoginName.val(resp.loginName);
 				_this._newAppPassword.val(resp.token);
 				_this._toggleFormResult(false);
 				_this._newAppPassword.select();
@@ -200,6 +199,10 @@
 			});
 		},
 
+		_onNewTokenLoginNameFocus: function() {
+			this._newAppLoginName.select();
+		},
+
 		_onNewTokenFocus: function() {
 			this._newAppPassword.select();
 		},
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 19a9968cec..50e7ef79f8 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -203,9 +203,16 @@ if($_['passwordChangeSupported']) {
 		<button id="add-app-password" class="button"><?php p($l->t('Create new app password')); ?></button>
 	</div>
 	<div id="app-password-result" class="hidden">
-		<span id="new-app-login-name"></span>
-		<input id="new-app-password" type="text" readonly="readonly"/>
-		<button id="app-password-hide" class="button"><?php p($l->t('Done')); ?></button>
+		<span><?php p($l->t('Use the credentials below to configure your app or device.')); ?></span>
+		<div class="app-password-row">
+			<span class="app-password-label"><?php p($l->t('Username')); ?></span>
+			<input id="new-app-login-name" type="text" readonly="readonly"/>
+		</div>
+		<div class="app-password-row">
+			<span class="app-password-label"><?php p($l->t('Password')); ?></span>
+			<input id="new-app-password" type="text" readonly="readonly"/>
+			<button id="app-password-hide" class="button"><?php p($l->t('Done')); ?></button>
+		</div>
 	</div>
 </div>