format current and sync client sessions in Personal

2 files changed, 57 insertions, 34 deletions

diff --git a/settings/Controller/AuthSettingsController.php b/settings/Controller/AuthSettingsController.php
index e7fc2d916bc..47ab1fc03fd 100644
--- a/settings/Controller/AuthSettingsController.php
+++ b/settings/Controller/AuthSettingsController.php
@@ -98,6 +98,7 @@ class AuthSettingsController extends Controller {
 			$data = $token->jsonSerialize();
 			if ($sessionToken->getId() === $token->getId()) {
 				$data['canDelete'] = false;
+				$data['current'] = true;
 			} else {
 				$data['canDelete'] = true;
 			}
diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index 472b841c230..80b2929e7d4 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -20,14 +20,14 @@
  *
  */
 
-(function(OC, _, $, Handlebars, moment) {
+(function (OC, _, $, Handlebars, moment) {
 	'use strict';
 
 	OC.Settings = OC.Settings || {};
 
 	var TEMPLATE_TOKEN =
 		'<tr data-id="{{id}}">'
-		+ '<td class="has-tooltip" title="{{name}}"><span class="token-name">{{name}}</span></td>'
+		+ '<td class="has-tooltip" title="{{title}}"><span class="token-name">{{name}}</span></td>'
 		+ '<td><span class="last-activity has-tooltip" title="{{lastActivityTime}}">{{lastActivity}}</span></td>'
 		+ '{{#if canDelete}}'
 		+ '<td><a class="icon-delete has-tooltip" title="' + t('core', 'Disconnect') + '"></a></td>'
@@ -50,7 +50,7 @@
 
 		_template: undefined,
 
-		template: function(data) {
+		template: function (data) {
 			if (_.isUndefined(this._template)) {
 				this._template = Handlebars.compile(TEMPLATE_TOKEN);
 			}
@@ -58,18 +58,18 @@
 			return this._template(data);
 		},
 
-		initialize: function(options) {
+		initialize: function (options) {
 			this.type = options.type;
 			this.collection = options.collection;
 
 			this.on(this.collection, 'change', this.render);
 		},
 
-		render: function() {
+		render: function () {
 			var _this = this;
 
 			var list = this.$('.token-list');
-			var tokens = this.collection.filter(function(token) {
+			var tokens = this.collection.filter(function (token) {
 				return parseInt(token.get('type'), 10) === _this.type;
 			});
 			list.html('');
@@ -77,24 +77,46 @@
 			// Show header only if there are tokens to show
 			this._toggleHeader(tokens.length > 0);
 
-			tokens.forEach(function(token) {
-				var viewData = token.toJSON();
-				var ts = viewData.lastActivity * 1000;
-				viewData.lastActivity = OC.Util.relativeModifiedDate(ts);
-				viewData.lastActivityTime = OC.Util.formatDate(ts, 'LLL');
+			tokens.forEach(function (token) {
+				var viewData = this._formatViewData(token.toJSON());
 				var html = _this.template(viewData);
 				var $html = $(html);
 				$html.find('.has-tooltip').tooltip({container: 'body'});
 				list.append($html);
-			});
+			}.bind(this));
 		},
 
-		toggleLoading: function(state) {
+		toggleLoading: function (state) {
 			this.$('.token-list').toggleClass('icon-loading', state);
 		},
 
-		_toggleHeader: function(show) {
+		_toggleHeader: function (show) {
 			this.$('.hidden-when-empty').toggleClass('hidden', !show);
+		},
+
+		_formatViewData: function (viewData) {
+			var ts = viewData.lastActivity * 1000;
+			viewData.lastActivity = OC.Util.relativeModifiedDate(ts);
+			viewData.lastActivityTime = OC.Util.formatDate(ts, 'LLL');
+
+			// preserve title for cases where we format it further
+			viewData.title = viewData.name;
+
+			// pretty format sync client user agent
+			var matches = viewData.name.match(/Mozilla\/5\.0 \((\w+)\) mirall\/(\d+\.\d+\.\d+)/);
+
+			if (matches) {
+				viewData.name = t('settings', 'Sync client ({os}) - Version {version}', {
+					os: matches[1],
+					version: matches[2]
+				})
+			}
+			if (viewData.current) {
+				viewData.name = t('settings', 'Current session', {
+					userAgent: viewData.name
+				})
+			}
+			return viewData;
 		}
 	});
 
@@ -119,12 +141,12 @@
 
 		_addingToken: false,
 
-		initialize: function(options) {
+		initialize: function (options) {
 			this.collection = options.collection;
 
 			var tokenTypes = [0, 1];
 			var _this = this;
-			_.each(tokenTypes, function(type) {
+			_.each(tokenTypes, function (type) {
 				var el = type === 0 ? '#sessions' : '#apppasswords';
 				_this._views.push(new SubView({
 					el: el,
@@ -150,31 +172,31 @@
 			this._hideAppPasswordBtn.click(_.bind(this._hideToken, this));
 		},
 
-		render: function() {
-			_.each(this._views, function(view) {
+		render: function () {
+			_.each(this._views, function (view) {
 				view.render();
 				view.toggleLoading(false);
 			});
 		},
 
-		reload: function() {
+		reload: function () {
 			var _this = this;
 
-			_.each(this._views, function(view) {
+			_.each(this._views, function (view) {
 				view.toggleLoading(true);
 			});
 
 			var loadingTokens = this.collection.fetch();
 
-			$.when(loadingTokens).done(function() {
+			$.when(loadingTokens).done(function () {
 				_this.render();
 			});
-			$.when(loadingTokens).fail(function() {
+			$.when(loadingTokens).fail(function () {
 				OC.Notification.showTemporary(t('core', 'Error while loading browser sessions and device tokens'));
 			});
 		},
 
-		_addAppPassword: function() {
+		_addAppPassword: function () {
 			var _this = this;
 			this._toggleAddingToken(true);
 
@@ -186,7 +208,7 @@
 				}
 			});
 
-			$.when(creatingToken).done(function(resp) {
+			$.when(creatingToken).done(function (resp) {
 				_this.collection.add(resp.deviceToken);
 				_this.render();
 				_this._newAppLoginName.val(resp.loginName);
@@ -195,32 +217,32 @@
 				_this._newAppPassword.select();
 				_this._tokenName.val('');
 			});
-			$.when(creatingToken).fail(function() {
+			$.when(creatingToken).fail(function () {
 				OC.Notification.showTemporary(t('core', 'Error while creating device token'));
 			});
-			$.when(creatingToken).always(function() {
+			$.when(creatingToken).always(function () {
 				_this._toggleAddingToken(false);
 			});
 		},
 
-		_onNewTokenLoginNameFocus: function() {
+		_onNewTokenLoginNameFocus: function () {
 			this._newAppLoginName.select();
 		},
 
-		_onNewTokenFocus: function() {
+		_onNewTokenFocus: function () {
 			this._newAppPassword.select();
 		},
 
-		_hideToken: function() {
+		_hideToken: function () {
 			this._toggleFormResult(true);
 		},
 
-		_toggleAddingToken: function(state) {
+		_toggleAddingToken: function (state) {
 			this._addingToken = state;
 			this._addAppPasswordBtn.toggleClass('icon-loading-small', state);
 		},
 
-		_onDeleteToken: function(event) {
+		_onDeleteToken: function (event) {
 			var $target = $(event.target);
 			var $row = $target.closest('tr');
 			var id = $row.data('id');
@@ -236,15 +258,15 @@
 			$row.find('.icon-delete').tooltip('hide');
 
 			var _this = this;
-			$.when(destroyingToken).fail(function() {
+			$.when(destroyingToken).fail(function () {
 				OC.Notification.showTemporary(t('core', 'Error while deleting the token'));
 			});
-			$.when(destroyingToken).always(function() {
+			$.when(destroyingToken).always(function () {
 				_this.render();
 			});
 		},
 
-		_toggleFormResult: function(showForm) {
+		_toggleFormResult: function (showForm) {
 			this._form.toggleClass('hidden', !showForm);
 			this._result.toggleClass('hidden', showForm);
 		}