extract mail view for sending share invitations

fixes #22947

4 files changed, 186 insertions, 70 deletions

diff --git a/core/js/core.json b/core/js/core.json
index 555c683f6f7..03c72e9b3ff 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -32,6 +32,7 @@
 		"sharedialogview.js",
 		"sharedialogexpirationview.js",
 		"sharedialoglinkshareview.js",
+		"sharedialogmailview.js",
 		"sharedialogresharerinfoview.js",
 		"sharedialogshareelistview.js",
 		"octemplate.js",
diff --git a/core/js/sharedialoglinkshareview.js b/core/js/sharedialoglinkshareview.js
index 1d158ccec16..2fc6f657b02 100644
--- a/core/js/sharedialoglinkshareview.js
+++ b/core/js/sharedialoglinkshareview.js
@@ -40,12 +40,6 @@
 			'<label for="sharingDialogAllowPublicUpload-{{cid}}">{{publicUploadLabel}}</label>' +
 			'</div>' +
 			'    {{/if}}' +
-			'    {{#if mailPublicNotificationEnabled}}' +
-			'<form id="emailPrivateLink" class="emailPrivateLinkForm">' +
-			'    <input id="email" class="emailField" value="" placeholder="{{mailPrivatePlaceholder}}" type="text" />' +
-			'    <input id="emailButton" class="emailButton" type="submit" value="{{mailButtonText}}" />' +
-			'</form>' +
-			'    {{/if}}' +
 			'{{else}}' +
 			// FIXME: this doesn't belong in this view
 			'{{#if noSharingPlaceholder}}<input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{noSharingPlaceholder}}" disabled="disabled"/>{{/if}}' +
@@ -76,7 +70,6 @@
 		showLink: true,
 
 		events: {
-			'submit .emailPrivateLinkForm': '_onEmailPrivateLink',
 			'focusout input.linkPassText': 'onPasswordEntered',
 			'keyup input.linkPassText': 'onPasswordKeyUp',
 			'click .linkCheckbox': 'onLinkCheckBoxChange',
@@ -112,7 +105,6 @@
 
 			_.bindAll(
 				this,
-				'_onEmailPrivateLink',
 				'onLinkCheckBoxChange',
 				'onPasswordEntered',
 				'onPasswordKeyUp',
@@ -218,34 +210,6 @@
 			});
 		},
 
-		_onEmailPrivateLink: function(event) {
-			event.preventDefault();
-
-			var $emailField = this.$el.find('.emailField');
-			var $emailButton = this.$el.find('.emailButton');
-			var email = $emailField.val();
-			if (email !== '') {
-				$emailField.prop('disabled', true);
-				$emailButton.prop('disabled', true);
-				$emailField.val(t('core', 'Sending ...'));
-				this.model.sendEmailPrivateLink(email).done(function() {
-					$emailField.css('font-weight', 'bold').val(t('core','Email sent'));
-					setTimeout(function() {
-						$emailField.val('');
-						$emailField.css('font-weight', 'normal');
-						$emailField.prop('disabled', false);
-						$emailButton.prop('disabled', false);
-					}, 2000);
-				}).fail(function() {
-					$emailField.val(email);
-					$emailField.css('font-weight', 'normal');
-					$emailField.prop('disabled', false);
-					$emailButton.prop('disabled', false);
-				});
-			}
-			return false;
-		},
-
 		render: function() {
 			var linkShareTemplate = this.template();
 			var resharingAllowed = this.model.sharePermissionPossible();
@@ -299,39 +263,6 @@
 				mailButtonText: t('core', 'Send')
 			}));
 
-			var $emailField = this.$el.find('.emailField');
-			if (isLinkShare && $emailField.length !== 0) {
-				$emailField.autocomplete({
-					minLength: 1,
-					source: function (search, response) {
-						$.get(
-							OC.generateUrl('core/ajax/share.php'), {
-								fetch: 'getShareWithEmail',
-								search: search.term
-							}, function(result) {
-								if (result.status == 'success' && result.data.length > 0) {
-									response(result.data);
-								}
-							});
-						},
-					select: function( event, item ) {
-						$emailField.val(item.item.email);
-						return false;
-					}
-				})
-				.data("ui-autocomplete")._renderItem = function( ul, item ) {
-					return $('<li>')
-						.append('<a>' + escapeHTML(item.displayname) + "<br>" + escapeHTML(item.email) + '</a>' )
-						.appendTo( ul );
-				};
-			}
-
-			// TODO drop with IE8 drop
-			if($('html').hasClass('ie8')) {
-				this.$el.find('#linkPassText').removeAttr('placeholder');
-				this.$el.find('#linkPassText').val('');
-			}
-
 			this.delegateEvents();
 
 			return this;
diff --git a/core/js/sharedialogmailview.js b/core/js/sharedialogmailview.js
new file mode 100644
index 00000000000..84e3f3242ad
--- /dev/null
+++ b/core/js/sharedialogmailview.js
@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2016
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+(function() {
+	if (!OC.Share) {
+		OC.Share = {};
+	}
+	
+	var TEMPLATE = 
+			'{{#if shareAllowed}}' +
+			'    {{#if mailPublicNotificationEnabled}}' +
+			'<form id="emailPrivateLink" class="emailPrivateLinkForm">' +
+			'    <input id="email" class="emailField" value="{{email}}" placeholder="{{mailPrivatePlaceholder}}" type="text" />' +
+			'    <input id="emailButton" class="emailButton" type="submit" value="{{mailButtonText}}" />' +
+			'</form>' +
+			'    {{/if}}' +
+			'{{/if}}'
+		;
+	
+	/**
+	 * @class OCA.Share.ShareDialogMailView
+	 * @member {OC.Share.ShareItemModel} model
+	 * @member {jQuery} $el
+	 * @memberof OCA.Sharing
+	 * @classdesc
+	 *
+	 * Represents the GUI of the share dialogue
+	 *
+	 */
+	var ShareDialogMailView = OC.Backbone.View.extend({
+		/** @type {string} **/
+		id: 'shareDialogMailView',
+
+		/** @type {OC.Share.ShareConfigModel} **/
+		configModel: undefined,
+
+		/** @type {Function} **/
+		_template: undefined,
+
+		/** @type {boolean} **/
+		showLink: true,
+
+		events: {
+			'submit .emailPrivateLinkForm': '_onEmailPrivateLink'
+		},
+
+		initialize: function(options) {
+			var view = this;
+
+			this.model.on('change:linkShare', function() {
+				view.render();
+			});
+
+			if(!_.isUndefined(options.configModel)) {
+				this.configModel = options.configModel;
+			} else {
+				throw 'missing OC.Share.ShareConfigModel';
+			}
+
+			_.bindAll(
+				this,
+				'_onEmailPrivateLink'
+			);
+		},
+
+		_onEmailPrivateLink: function(event) {
+			event.preventDefault();
+
+			var $emailField = this.$el.find('.emailField');
+			var $emailButton = this.$el.find('.emailButton');
+			var email = $emailField.val();
+			if (email !== '') {
+				$emailField.prop('disabled', true);
+				$emailButton.prop('disabled', true);
+				$emailField.val(t('core', 'Sending ...'));
+				this.model.sendEmailPrivateLink(email).done(function() {
+					$emailField.css('font-weight', 'bold').val(t('core','Email sent'));
+					setTimeout(function() {
+						$emailField.val('');
+						$emailField.css('font-weight', 'normal');
+						$emailField.prop('disabled', false);
+						$emailButton.prop('disabled', false);
+					}, 2000);
+				}).fail(function() {
+					$emailField.val(email);
+					$emailField.css('font-weight', 'normal');
+					$emailField.prop('disabled', false);
+					$emailButton.prop('disabled', false);
+				});
+			}
+			return false;
+		},
+
+		render: function() {
+			var linkShareTemplate = this.template();
+			var resharingAllowed = this.model.sharePermissionPossible();
+			var email = this.$el.find('.emailField').val();
+
+			if(!resharingAllowed
+				|| !this.showLink
+				|| !this.configModel.isShareWithLinkAllowed())
+			{
+				var templateData = {shareAllowed: false};
+				if (!resharingAllowed) {
+					// add message
+					templateData.noSharingPlaceholder = t('core', 'Resharing is not allowed');
+				}
+				this.$el.html(linkShareTemplate(templateData));
+				return this;
+			}
+			
+			var isLinkShare = this.model.get('linkShare').isLinkShare;
+
+			this.$el.html(linkShareTemplate({
+				cid: this.cid,
+				shareAllowed: true,
+				mailPublicNotificationEnabled: isLinkShare && this.configModel.isMailPublicNotificationEnabled(),
+				mailPrivatePlaceholder: t('core', 'Email link to person'),
+				mailButtonText: t('core', 'Send link via email'),
+				email: email
+			}));
+
+			var $emailField = this.$el.find('.emailField');
+			if (isLinkShare && $emailField.length !== 0) {
+				$emailField.autocomplete({
+					minLength: 1,
+					source: function (search, response) {
+						$.get(
+							OC.generateUrl('core/ajax/share.php'), {
+								fetch: 'getShareWithEmail',
+								search: search.term
+							}, function(result) {
+								if (result.status == 'success' && result.data.length > 0) {
+									response(result.data);
+								}
+							});
+						},
+					select: function( event, item ) {
+						$emailField.val(item.item.email);
+						return false;
+					}
+				})
+				.data("ui-autocomplete")._renderItem = function( ul, item ) {
+					return $('<li>')
+						.append('<a>' + escapeHTML(item.displayname) + "<br>" + escapeHTML(item.email) + '</a>' )
+						.appendTo( ul );
+				};
+			}
+			this.delegateEvents();
+
+			return this;
+		},
+
+		/**
+		 * @returns {Function} from Handlebars
+		 * @private
+		 */
+		template: function () {
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+			return this._template;
+		}
+
+	});
+
+	OC.Share.ShareDialogMailView = ShareDialogMailView;
+
+})();
\ No newline at end of file
diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index 56f53caddae..a4bfde1777b 100644
--- a/core/js/sharedialogview.js
+++ b/core/js/sharedialogview.js
@@ -26,6 +26,7 @@
 		'<div class="shareeListView subView"></div>' +
 		'<div class="linkShareView subView"></div>' +
 		'<div class="expirationView subView"></div>' +
+		'<div class="mailView subView"></div>' +
 		'<div class="loading hidden" style="height: 50px"></div>';
 
 	var TEMPLATE_REMOTE_SHARE_INFO =
@@ -67,6 +68,9 @@
 		/** @type {object} **/
 		shareeListView: undefined,
 
+		/** @type {object} **/
+		mailView: undefined,
+
 		events: {
 			'input .shareWithField': 'onShareWithFieldChanged'
 		},
@@ -103,7 +107,8 @@
 				resharerInfoView: 'ShareDialogResharerInfoView',
 				linkShareView: 'ShareDialogLinkShareView',
 				expirationView: 'ShareDialogExpirationView',
-				shareeListView: 'ShareDialogShareeListView'
+				shareeListView: 'ShareDialogShareeListView',
+				mailView: 'ShareDialogMailView'
 			};
 
 			for(var name in subViews) {
@@ -360,6 +365,9 @@
 			this.shareeListView.$el = this.$el.find('.shareeListView');
 			this.shareeListView.render();
 
+			this.mailView.$el = this.$el.find('.mailView');
+			this.mailView.render();
+
 			this.$el.find('.hasTooltip').tooltip();
 
 			return this;