federationsettingsview.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. /* global OC, result, _ */
  2. /**
  3. * Copyright (c) 2016, Christoph Wurst <christoph@owncloud.com>
  4. *
  5. * This file is licensed under the Affero General Public License version 3 or later.
  6. * See the COPYING-README file.
  7. */
  8. (function(_, $, OC) {
  9. 'use strict';
  10. var FederationSettingsView = OC.Backbone.View.extend({
  11. _inputFields: undefined,
  12. /** @var Backbone.Model */
  13. _config: undefined,
  14. initialize: function(options) {
  15. options = options || {};
  16. if (options.config) {
  17. this._config = options.config;
  18. } else {
  19. this._config = new OC.Settings.UserSettings();
  20. }
  21. this._inputFields = [
  22. 'displayname',
  23. 'phone',
  24. 'email',
  25. 'website',
  26. 'twitter',
  27. 'address',
  28. 'avatar'
  29. ];
  30. var self = this;
  31. _.each(this._inputFields, function(field) {
  32. var scopeOnly = field === 'avatar';
  33. // Initialize config model
  34. if (!scopeOnly) {
  35. self._config.set(field, $('#' + field).val());
  36. }
  37. self._config.set(field + 'Scope', $('#' + field + 'scope').val());
  38. // Set inputs whenever model values change
  39. if (!scopeOnly) {
  40. self.listenTo(self._config, 'change:' + field, function() {
  41. self.$('#' + field).val(self._config.get(field));
  42. });
  43. }
  44. self.listenTo(self._config, 'change:' + field + 'Scope', function() {
  45. self._setFieldScopeIcon(field, self._config.get(field + 'Scope'));
  46. });
  47. });
  48. this._registerEvents();
  49. },
  50. render: function() {
  51. var self = this;
  52. _.each(this._inputFields, function(field) {
  53. var $icon = self.$('#' + field + 'form h3 > .federation-menu');
  54. var scopeMenu = new OC.Settings.FederationScopeMenu({field: field});
  55. self.listenTo(scopeMenu, 'select:scope', function(scope) {
  56. self._onScopeChanged(field, scope);
  57. });
  58. $icon.append(scopeMenu.$el);
  59. $icon.on('click', _.bind(scopeMenu.show, scopeMenu));
  60. // Restore initial state
  61. self._setFieldScopeIcon(field, self._config.get(field + 'Scope'));
  62. });
  63. },
  64. _registerEvents: function() {
  65. var self = this;
  66. _.each(this._inputFields, function(field) {
  67. if (field === 'avatar') {
  68. return;
  69. }
  70. self.$('#' + field).keyUpDelayedOrEnter(_.bind(self._onInputChanged, self), true);
  71. });
  72. },
  73. _onInputChanged: function(e) {
  74. var self = this;
  75. var $dialog = $('.oc-dialog:visible');
  76. if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
  77. if($dialog.length === 0) {
  78. OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this._onInputChanged, this, e));
  79. }
  80. return;
  81. }
  82. var $target = $(e.target);
  83. var value = $target.val();
  84. var field = $target.attr('id');
  85. this._config.set(field, value);
  86. var savingData = this._config.save({
  87. error: function(jqXHR) {
  88. OC.msg.finishedSaving('#personal-settings-container .msg', jqXHR);
  89. }
  90. });
  91. $.when(savingData).done(function(data) {
  92. if (data.status === "success") {
  93. self._showInputChangeSuccess(field);
  94. } else {
  95. self._showInputChangeFail(field);
  96. }
  97. });
  98. },
  99. _onScopeChanged: function(field, scope) {
  100. var $dialog = $('.oc-dialog:visible');
  101. if (OC.PasswordConfirmation.requiresPasswordConfirmation()) {
  102. if($dialog.length === 0) {
  103. OC.PasswordConfirmation.requirePasswordConfirmation(_.bind(this._onScopeChanged, this, field, scope));
  104. }
  105. return;
  106. }
  107. this._config.set(field + 'Scope', scope);
  108. $('#' + field + 'scope').val(scope);
  109. // TODO: user loading/success feedback
  110. this._config.save();
  111. this._setFieldScopeIcon(field, scope);
  112. this._updateVerifyButton(field, scope);
  113. },
  114. _updateVerifyButton: function(field, scope) {
  115. // show verification button if the value is set and the scope is 'public'
  116. if (field === 'twitter' || field === 'website'|| field === 'email') {
  117. var verify = this.$('#' + field + 'form > .verify');
  118. var scope = this.$('#' + field + 'scope').val();
  119. var value = this.$('#' + field).val();
  120. if (scope === 'public' && value !== '') {
  121. verify.removeClass('hidden');
  122. return true;
  123. } else {
  124. verify.addClass('hidden');
  125. }
  126. }
  127. return false;
  128. },
  129. _showInputChangeSuccess: function(field) {
  130. var $icon = this.$('#' + field + 'form > .icon-checkmark');
  131. $icon.fadeIn(200);
  132. setTimeout(function() {
  133. $icon.fadeOut(300);
  134. }, 2000);
  135. var scope = this.$('#' + field + 'scope').val();
  136. var verifyAvailable = this._updateVerifyButton(field, scope);
  137. // change verification buttons from 'verify' to 'verifying...' on value change
  138. if (verifyAvailable) {
  139. if (field === 'twitter' || field === 'website') {
  140. var verifyStatus = this.$('#' + field + 'form > .verify > #verify-' + field);
  141. verifyStatus.attr('data-origin-title', t('core', 'Verify'));
  142. verifyStatus.attr('src', OC.imagePath('core', 'actions/verify.svg'));
  143. verifyStatus.data('status', '0');
  144. verifyStatus.addClass('verify-action');
  145. } else if (field === 'email') {
  146. var verifyStatus = this.$('#' + field + 'form > .verify > #verify-' + field);
  147. verifyStatus.attr('data-origin-title', t('core', 'Verifying …'));
  148. verifyStatus.data('status', '1');
  149. verifyStatus.attr('src', OC.imagePath('core', 'actions/verifying.svg'));
  150. }
  151. }
  152. },
  153. _showInputChangeFail: function(field) {
  154. var $icon = this.$('#' + field + 'form > .icon-error');
  155. $icon.fadeIn(200);
  156. setTimeout(function() {
  157. $icon.fadeOut(300);
  158. }, 2000);
  159. },
  160. _setFieldScopeIcon: function(field, scope) {
  161. var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
  162. $icon.removeClass('icon-password');
  163. $icon.removeClass('icon-contacts-dark');
  164. $icon.removeClass('icon-link');
  165. $icon.addClass('hidden');
  166. switch (scope) {
  167. case 'private':
  168. $icon.addClass('icon-password');
  169. $icon.removeClass('hidden');
  170. break;
  171. case 'contacts':
  172. $icon.addClass('icon-contacts-dark');
  173. $icon.removeClass('hidden');
  174. break;
  175. case 'public':
  176. $icon.addClass('icon-link');
  177. $icon.removeClass('hidden');
  178. break;
  179. }
  180. }
  181. });
  182. OC.Settings = OC.Settings || {};
  183. OC.Settings.FederationSettingsView = FederationSettingsView;
  184. })(_, $, OC);