Merge pull request #806 from nextcloud/token_polish

Token polish

settings/css/settings.css

@@ -145,6 +145,16 @@ table.nostyle td { padding: 0.2em 0; }
 .app-password-row {
 	display: table-row;
 }
+
+.app-password-row .icon {
+	background-size: 16px 16px;
+	display: inline-block;
+	position: relative;
+	top: 3px;
+	margin-left: 5px;
+	margin-right: 8px;
+}
+
 .app-password-label {
 	display: table-cell;
 	padding-right: 1em;

settings/js/authtoken_view.js

@@ -183,6 +183,8 @@
 
 		_newAppPassword: undefined,
 
+		_newAppId: undefined,
+
 		_hideAppPasswordBtn: undefined,
 
 		_addingToken: false,
@@ -216,6 +218,38 @@
 			this._newAppPassword.on('focus', _.bind(this._onNewTokenFocus, this));
 			this._hideAppPasswordBtn = $('#app-password-hide');
 			this._hideAppPasswordBtn.click(_.bind(this._hideToken, this));
+
+			// Clipboard!
+			var clipboard = new Clipboard('.clipboardButton');
+			clipboard.on('success', function(e) {
+				var $input = $(e.trigger);
+				$input.tooltip({placement: 'bottom', trigger: 'manual', title: t('core', 'Copied!')});
+				$input.tooltip('show');
+				_.delay(function() {
+					$input.tooltip('hide');
+				}, 3000);
+			});
+			clipboard.on('error', function (e) {
+				var $input = $(e.trigger);
+				var actionMsg = '';
+				if (/iPhone|iPad/i.test(navigator.userAgent)) {
+					actionMsg = t('core', 'Not supported!');
+				} else if (/Mac/i.test(navigator.userAgent)) {
+					actionMsg = t('core', 'Press ⌘-C to copy.');
+				} else {
+					actionMsg = t('core', 'Press Ctrl-C to copy.');
+				}
+
+				$input.tooltip({
+					placement: 'bottom',
+					trigger: 'manual',
+					title: actionMsg
+				});
+				$input.tooltip('show');
+				_.delay(function () {
+					$input.tooltip('hide');
+				}, 3000);
+			});
 		},
 
 		render: function () {
@@ -255,10 +289,13 @@
 			});
 
 			$.when(creatingToken).done(function (resp) {
+				// We can delete token we add
+				resp.deviceToken.canDelete = true;
 				_this.collection.add(resp.deviceToken);
 				_this.render();
 				_this._newAppLoginName.val(resp.loginName);
 				_this._newAppPassword.val(resp.token);
+				_this._newAppId = resp.deviceToken.id;
 				_this._toggleFormResult(false);
 				_this._newAppPassword.select();
 				_this._tokenName.val('');
@@ -293,6 +330,10 @@
 			var $row = $target.closest('tr');
 			var id = $row.data('id');
 
+			if (id === this._newAppId) {
+				this._toggleFormResult(true);
+			}
+
 			var token = this.collection.get(id);
 			if (_.isUndefined(token)) {
 				// Ignore event
@@ -313,8 +354,13 @@
 		},
 
 		_toggleFormResult: function (showForm) {
-			this._form.toggleClass('hidden', !showForm);
-			this._result.toggleClass('hidden', showForm);
+			if (showForm) {
+				this._result.slideUp();
+				this._form.slideDown();
+			} else {
+				this._form.slideUp();
+				this._result.slideDown();
+			}
 		}
 	});
 

settings/templates/personal.php

@@ -200,7 +200,10 @@ 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>
+		<span>
+			<?php p($l->t('Use the credentials below to configure your app or device.')); ?>
+			<?php p($l->t('For security reasons this password will only be shown once.')); ?>
+		</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"/>
@@ -208,6 +211,7 @@ if($_['passwordChangeSupported']) {
 		<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"/>
+			<a class="clipboardButton icon icon-clippy" data-clipboard-target="#new-app-password"></a>
 			<button id="app-password-hide" class="button"><?php p($l->t('Done')); ?></button>
 		</div>
 	</div>