From 26aacb4e62cbd8f83f59ede459463a13a16eb319 Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@owncloud.com>
Date: Fri, 24 Jun 2016 15:31:48 +0200
Subject: [PATCH 1/2] show which login name to use for the new app password

---
 settings/Controller/AuthSettingsController.php | 1 +
 settings/js/authtoken_view.js                  | 6 ++++++
 settings/templates/personal.php                | 1 +
 3 files changed, 8 insertions(+)

diff --git a/settings/Controller/AuthSettingsController.php b/settings/Controller/AuthSettingsController.php
index fba663b034..db2db6e5bf 100644
--- a/settings/Controller/AuthSettingsController.php
+++ b/settings/Controller/AuthSettingsController.php
@@ -118,6 +118,7 @@ class AuthSettingsController extends Controller {
 
 		return [
 			'token' => $token,
+			'loginName' => $loginName,
 			'deviceToken' => $deviceToken
 		];
 	}
diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index da5861689a..cf6b4f7c8d 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -107,6 +107,8 @@
 
 		_result: undefined,
 
+		_newAppLoginName: undefined,
+
 		_newAppPassword: undefined,
 
 		_hideAppPasswordBtn: undefined,
@@ -136,6 +138,7 @@
 			this._addAppPasswordBtn.click(_.bind(this._addAppPassword, this));
 
 			this._result = $('#app-password-result');
+			this._newAppLoginName = $('#new-app-login-name');
 			this._newAppPassword = $('#new-app-password');
 			this._newAppPassword.on('focus', _.bind(this._onNewTokenFocus, this));
 			this._hideAppPasswordBtn = $('#app-password-hide');
@@ -181,6 +184,9 @@
 			$.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._newAppPassword.val(resp.token);
 				_this._toggleFormResult(false);
 				_this._newAppPassword.select();
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index b9b8429d94..19a9968cec 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -203,6 +203,7 @@ 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>
 	</div>

From 1454b4515c8bdcb05c400c605cf6d84c38476efc Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@owncloud.com>
Date: Fri, 24 Jun 2016 17:00:59 +0200
Subject: [PATCH 2/2] 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>