add button to add new device tokens

1 files changed, 81 insertions, 14 deletions

diff --git a/settings/js/authtoken_view.js b/settings/js/authtoken_view.js
index 0ca16821233..8ca38d80d84 100644
--- a/settings/js/authtoken_view.js
+++ b/settings/js/authtoken_view.js
@@ -1,4 +1,4 @@
-/* global Backbone, Handlebars */
+/* global Backbone, Handlebars, moment */
 
 /**
  * @author Christoph Wurst <christoph@owncloud.com>
@@ -20,16 +20,16 @@
  *
  */
 
-(function(OC, _, Backbone, $, Handlebars) {
+(function(OC, _, Backbone, $, Handlebars, moment) {
 	'use strict';
 
 	OC.Settings = OC.Settings || {};
 
 	var TEMPLATE_TOKEN =
-			'<tr>'
-			+ '<td>{{name}}</td>'
-			+ '<td>{{lastActivity}}</td>'
-			+ '<tr>';
+		'<tr>'
+		+ '<td>{{name}}</td>'
+		+ '<td>{{lastActivity}}</td>'
+		+ '<tr>';
 
 	var SubView = Backbone.View.extend({
 		collection: null,
@@ -46,48 +46,115 @@
 			var tokens = this.collection.filter(function(token) {
 				return parseInt(token.get('type')) === _this.type;
 			});
-			list.removeClass('icon-loading');
 			list.html('');
 
 			tokens.forEach(function(token) {
-				var html = _this.template(token.toJSON());
+				var viewData = token.toJSON();
+				viewData.lastActivity = moment(viewData.lastActivity, 'X').
+					format('LLL');
+				var html = _this.template(viewData);
 				list.append(html);
 			});
 		},
+		toggleLoading: function(state) {
+			this.$el.find('.token-list').toggleClass('icon-loading', state);
+		}
 	});
 
 	var AuthTokenView = Backbone.View.extend({
 		collection: null,
-		views
-		: [],
+		_views: [],
+		_form: undefined,
+		_tokenName: undefined,
+		_addTokenBtn: undefined,
+		_result: undefined,
+		_newToken: undefined,
+		_hideTokenBtn: undefined,
+		_addingToken: false,
 		initialize: function(options) {
 			this.collection = options.collection;
 
 			var tokenTypes = [0, 1];
 			var _this = this;
 			_.each(tokenTypes, function(type) {
-				_this.views.push(new SubView({
+				_this._views.push(new SubView({
 					el: type === 0 ? '#sessions' : '#devices',
 					type: type,
 					collection: _this.collection
 				}));
 			});
+
+			this._form = $('#device-token-form');
+			this._tokenName = $('#device-token-name');
+			this._addTokenBtn = $('#device-add-token');
+			this._addTokenBtn.click(_.bind(this._addDeviceToken, this));
+
+			this._result = $('#device-token-result');
+			this._newToken = $('#device-new-token');
+			this._hideTokenBtn = $('#device-token-hide');
+			this._hideTokenBtn.click(_.bind(this._hideToken, this));
 		},
 		render: function() {
-			_.each(this.views, function(view) {
+			_.each(this._views, function(view) {
 				view.render();
+				view.toggleLoading(false);
 			});
 		},
 		reload: function() {
+			var _this = this;
+
+			_.each(this._views, function(view) {
+				view.toggleLoading(true);
+			});
+
 			var loadingTokens = this.collection.fetch();
 
-			var _this = this;
 			$.when(loadingTokens).done(function() {
 				_this.render();
 			});
+			$.when(loadingTokens).fail(function() {
+				OC.Notification.showTemporary(t('core', 'Error while loading browser sessions and device tokens'));
+			});
+		},
+		_addDeviceToken: function() {
+			var _this = this;
+			this._toggleAddingToken(true);
+
+			var deviceName = this._tokenName.val();
+			var creatingToken = $.ajax(OC.generateUrl('/settings/personal/authtokens'), {
+				method: 'POST',
+				data: {
+					name: deviceName
+				}
+			});
+
+			$.when(creatingToken).done(function(resp) {
+				_this.collection.add(resp.deviceToken);
+				_this.render();
+				_this._newToken.text(resp.token);
+				_this._toggleFormResult(false);
+				_this._tokenName.val('');
+			});
+			$.when(creatingToken).fail(function() {
+				OC.Notification.showTemporary(t('core', 'Error while creating device token'));
+			});
+			$.when(creatingToken).always(function() {
+				_this._toggleAddingToken(false);
+			});
+		},
+		_hideToken: function() {
+			this._toggleFormResult(true);
+		},
+		_toggleAddingToken: function(state) {
+			this._addingToken = state;
+			this._addTokenBtn.toggleClass('icon-loading-small', state);
+		},
+		_toggleFormResult: function(showForm) {
+			this._form.toggleClass('hidden', !showForm);
+			this._result.toggleClass('hidden', showForm);
 		}
 	});
 
 	OC.Settings.AuthTokenView = AuthTokenView;
 
-})(OC, _, Backbone, $, Handlebars);
+})(OC, _, Backbone, $, Handlebars, moment);