Merge pull request #25261 from owncloud/app-password-login-name

show which login name to use for the new app password

settings/Controller/AuthSettingsController.php

@@ -118,6 +118,7 @@ class AuthSettingsController extends Controller {
 
 		return [
 			'token' => $token,
+			'loginName' => $loginName,
 			'deviceToken' => $deviceToken
 		];
 	}

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; }

settings/js/authtoken_view.js

@@ -107,6 +107,8 @@
 
 		_result: undefined,
 
+		_newAppLoginName: undefined,
+
 		_newAppPassword: undefined,
 
 		_hideAppPasswordBtn: undefined,
@@ -136,6 +138,8 @@
 			this._addAppPasswordBtn.click(_.bind(this._addAppPassword, this));
 
 			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');
@@ -181,6 +185,7 @@
 			$.when(creatingToken).done(function(resp) {
 				_this.collection.add(resp.deviceToken);
 				_this.render();
+				_this._newAppLoginName.val(resp.loginName);
 				_this._newAppPassword.val(resp.token);
 				_this._toggleFormResult(false);
 				_this._newAppPassword.select();
@@ -194,6 +199,10 @@
 			});
 		},
 
+		_onNewTokenLoginNameFocus: function() {
+			this._newAppLoginName.select();
+		},
+
 		_onNewTokenFocus: function() {
 			this._newAppPassword.select();
 		},

settings/templates/personal.php

@@ -203,10 +203,18 @@ 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><?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>
 
 <div id="clientsbox" class="section clientsbox">
 	<h2><?php p($l->t('Get the apps to sync your files'));?></h2>