From 5430bebe03d038541d79a5941744894875c6a2b7 Mon Sep 17 00:00:00 2001
From: Felix Heidecke <felix@heidecke.me>
Date: Mon, 26 Feb 2018 13:47:40 +0100
Subject: [PATCH] Add Tagging support for email Update select2 to 3.5.4 Also
 update yarn.lock Add tags functionality for email input Fix code formatting
 Start searching @ three chars Validate mails as they are typed allow adding
 and removing addresses, toggle mail body Move [x] to the right Remove
 artificial delay Adapt js tests Add new unit tests Remove select2
 autocomplete from share dialog Show send message for a minimum of 2 secs

Remove delay from sendMail promise return
---
 apps/systemtags/appinfo/app.php               |   3 +-
 build/package.json                            |   2 +-
 build/yarn.lock                               |   6 +-
 core/css/global.css                           |   9 +-
 core/css/share.css                            | 104 ++++++++++++------
 core/js/sharedialogmailview.js                |  70 +++++++++---
 .../js/tests/specs/sharedialogmailviewSpec.js |  28 ++++-
 lib/private/legacy/template.php               |   1 +
 8 files changed, 162 insertions(+), 61 deletions(-)

diff --git a/apps/systemtags/appinfo/app.php b/apps/systemtags/appinfo/app.php
index d29d1f09c3fb..9ee631f992b2 100644
--- a/apps/systemtags/appinfo/app.php
+++ b/apps/systemtags/appinfo/app.php
@@ -31,6 +31,7 @@ function() {
 		// FIXME: no public API for these ?
 		\OC_Util::addVendorScript('select2/select2');
 		\OC_Util::addVendorStyle('select2/select2');
+
 		\OCP\Util::addScript('select2-toggleselect');
 		\OCP\Util::addScript('oc-backbone-webdav');
 		\OCP\Util::addScript('systemtags/systemtags');
@@ -85,4 +86,4 @@ function() {
 		'order' => 25,
 		'name' => $l->t('Tags')
 	];
-});
\ No newline at end of file
+});
diff --git a/build/package.json b/build/package.json
index 8638cc5d6e5f..37a4db35960b 100644
--- a/build/package.json
+++ b/build/package.json
@@ -29,7 +29,7 @@
     "@bower_components/jsTimezoneDetect": "HenningM/jstimezonedetect#1.0.5",
     "@bower_components/jstzdetect": "HenningM/jstimezonedetect#1.0.6",
     "@bower_components/moment": "moment/moment#2.19.4",
-    "@bower_components/select2": "ivaynberg/select2#3.5.3",
+    "@bower_components/select2": "ivaynberg/select2#3.5.4",
     "@bower_components/showdown": "showdownjs/showdown#1.8.5",
     "@bower_components/snapjs": "jakiestfu/Snap.js#2.0.0-rc1",
     "@bower_components/strengthify": "MorrisJobke/strengthify#0.5.2",
diff --git a/build/yarn.lock b/build/yarn.lock
index 562dac06d315..2f477e42d063 100644
--- a/build/yarn.lock
+++ b/build/yarn.lock
@@ -84,9 +84,9 @@
   version "2.19.4"
   resolved "https://codeload.github.com/moment/moment/tar.gz/fea48bb69eda8c0459915d6aa66a910a4d43a55b"
 
-"@bower_components/select2@ivaynberg/select2#3.5.3":
-  version "3.5.3"
-  resolved "https://codeload.github.com/ivaynberg/select2/tar.gz/a0ddc8c9466cb94a026e80b20264e8feacc4345b"
+"@bower_components/select2@ivaynberg/select2#3.5.4":
+  version "3.5.4"
+  resolved "https://codeload.github.com/ivaynberg/select2/tar.gz/95a977f674b6938af55ec5f28b7772df93786c5c"
 
 "@bower_components/showdown@showdownjs/showdown#1.8.5":
   version "1.8.5"
diff --git a/core/css/global.css b/core/css/global.css
index f2408944b320..b50a734faa0f 100644
--- a/core/css/global.css
+++ b/core/css/global.css
@@ -13,6 +13,11 @@
 	transform: translate(-50%, -50%);
 }
 
+.full-width {
+	width: 100%;
+	max-width: 100%;
+}
+
 .pull-left {
 	float: left;
 }
@@ -39,7 +44,7 @@
 
 .hidden-visually {
 	position: absolute;
-	left:-10000px;
+	left: -10000px;
 	top: auto;
 	width: 1px;
 	height: 1px;
@@ -47,7 +52,7 @@
 }
 
 .bold {
-	font-weight:600;
+	font-weight: 600;
 }
 
 .text-small {
diff --git a/core/css/share.css b/core/css/share.css
index 76eabdbcef61..3204205638bd 100644
--- a/core/css/share.css
+++ b/core/css/share.css
@@ -27,16 +27,18 @@
 	margin-top: 1px;
 }
 
-.shareTabView .shareWithLoading,
-.shareTabView .linkShare .icon-loading-small {
+.shareTabView .linkShare .icon-loading-small,
+.shareTabView .shareWithLoading {
 	display: inline-block !important;
 	padding-left: 10px;
 }
+
 .shareTabView .shareWithLoading {
 	position: relative;
 	right: 70px;
 	top: 2px;
 }
+
 .shareTabView .icon-loading-small.hidden {
 	display: none !important;
 }
@@ -79,14 +81,14 @@
 	flex-shrink: 0;
 }
 
-.share-autocomplete-item .autocomplete-item-additional-info,
-#shareWithList .user-additional-info {
+#shareWithList .user-additional-info,
+.share-autocomplete-item .autocomplete-item-additional-info {
 	color: #888;
 }
 
 #shareWithList {
-	list-style-type:none;
-	padding:8px;
+	list-style-type: none;
+	padding: 8px;
 }
 
 #shareWithList li {
@@ -102,15 +104,18 @@
 	display: inline-block;
 }
 
-#shareWithList .unshare img, #shareWithList .showCruds img {
-	vertical-align:text-bottom; /* properly align icons */
+#shareWithList .showCruds img,
+#shareWithList .unshare img {
+	vertical-align: text-bottom;
+	/* properly align icons */
 }
 
-#shareWithList label input[type=checkbox]{
+#shareWithList label input[type=checkbox] {
 	margin-left: 0;
 	position: relative;
 }
-#shareWithList .username{
+
+#shareWithList .username {
 	padding-right: 8px;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -119,36 +124,38 @@
 	overflow: hidden;
 	vertical-align: middle;
 }
-#shareWithList li label{
+
+#shareWithList li label {
 	margin-right: 8px;
 }
+
 .shareTabView label {
-	font-weight:400;
+	font-weight: 400;
 	white-space: nowrap;
 }
 
 .shareTabView input[type="checkbox"] {
-	margin:0 3px 0 8px;
+	margin: 0 3px 0 8px;
 	vertical-align: middle;
 }
 
 a.showCruds {
-	display:inline;
-	opacity:.5;
+	display: inline;
+	opacity: 0.5;
 }
 
 a.unshare {
-	display:inline;
-	float:right;
-	opacity:.5;
+	display: inline;
+	float: right;
+	opacity: 0.5;
 	padding: 10px;
 	margin-top: -5px;
 	margin-right: -10px;
 }
 
 #link {
-	border-top:1px solid #ddd;
-	padding-top:8px;
+	border-top: 1px solid #ddd;
+	padding-top: 8px;
 }
 
 .shareTabView input[type="submit"] {
@@ -167,41 +174,48 @@ a.unshare {
 	box-shadow: 0 0 6px #f8b9b7;
 }
 
-.shareTabView .localShareView, .shareTabView .linkShareView {
+.shareTabView .linkShareView,
+.shareTabView .localShareView {
 	clear: left;
 }
 
 #link #showPassword img {
-	padding-left:5px;
-	width:12px;
+	padding-left: 5px;
+	width: 12px;
 }
 
-.fileowner,.reshare,#link label,
-#expiration label {
+#expiration label,
+#link label,
+.fileowner,
+.reshare {
 	display: inline-block;
 	padding: 6px 4px;
 }
 
-a.showCruds:hover,a.unshare:hover {
-	opacity:1;
+a.showCruds:hover,
+a.unshare:hover {
+	opacity: 1;
 }
-
-#defaultExpireMessage, /* fix expire message going out of box */
-.reshare { /* fix shared by text going out of box */
-	white-space:normal;
+#defaultExpireMessage,
+/* fix expire message going out of box */
+.reshare {
+	/* fix shared by text going out of box */
+	white-space: normal;
 }
 
-#defaultExpireMessage { /* show message on new line */
+#defaultExpireMessage {
+	/* show message on new line */
 	display: block;
 	padding-left: 4px;
 	/* TODO: style the dropdown in a proper way - border-box, etc. */
 	width: 90%;
 }
 
-.ui-autocomplete { /* limit dropdown height to 4 1/2 entries */
-	max-height:103px;
-	overflow-y:auto;
-	overflow-x:hidden;
+.ui-autocomplete {
+	/* limit dropdown height to 4 1/2 entries */
+	max-height: 103px;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
 
 .notCreatable {
@@ -229,3 +243,21 @@ a.showCruds:hover,a.unshare:hover {
 	z-index: 1;
 	color: #999;
 }
+
+.emailPrivateLinkForm--dropDown > .select2-choices {
+	border-color: #ddd;
+	background-image: none;
+}
+
+.select2-search-choice {
+	text-transform: lowercase;
+}
+
+.select2-container-multi .select2-search-choice-close {
+	left: inherit;
+	right: 3px;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice {
+	padding: 3px 18px 3px 5px;
+}
diff --git a/core/js/sharedialogmailview.js b/core/js/sharedialogmailview.js
index 042e75013743..9bd7bc81c958 100644
--- a/core/js/sharedialogmailview.js
+++ b/core/js/sharedialogmailview.js
@@ -17,7 +17,7 @@
 		'<form id="emailPrivateLink" class="emailPrivateLinkForm">' +
 		'  <span class="emailPrivateLinkForm--send-indicator success-message-global absolute-center hidden">{{sending}}</span>' +
 		'  <label class="public-link-modal--label" for="emailPrivateLinkField-{{cid}}">{{mailLabel}}</label>' +
-		'  <input class="public-link-modal--input emailPrivateLinkForm--emailField" autocomplete="off" id="emailPrivateLinkField-{{cid}}" value="" placeholder="{{mailPlaceholder}}" type="email" />' +
+		'  <input class="emailPrivateLinkForm--emailField full-width" id="emailPrivateLinkField-{{cid}}" />' +
 		'  <div class="emailPrivateLinkForm--elements hidden">' +
 		'    {{#if userHasEmail}}' +
 		'    <label class="public-link-modal--bccSelf">' +
@@ -44,14 +44,24 @@
 		id: 'shareDialogMailView',
 
 		events: {
-			"keyup   .emailPrivateLinkForm--emailField"     : "toggleMailElements",
 			"keydown .emailPrivateLinkForm--emailBodyField" : "expandMailBody"
 		},
 
+		/** @type {array} **/
+		_addresses: [],
+
 		/** @type {Function} **/
 		_template: undefined,
 
 		initialize: function(options) {
+			_.bindAll(this, 'render', '_afterRender');
+			var _this = this;
+			this.render = _.wrap(this.render, function(render) {
+				render();
+				_this._afterRender();
+				return _this;
+			});
+
 			if (!_.isUndefined(options.itemModel)) {
 				this.itemModel = options.itemModel;
 			} else {
@@ -60,12 +70,11 @@
 		},
 
 		toggleMailElements: function() {
-			var $email         = this.$el.find('.emailPrivateLinkForm--emailField');
 			var $emailElements = this.$el.find('.emailPrivateLinkForm--elements');
 
-			if ($email.val().length > 0 && $emailElements.is(":hidden")) {
+			if (this._addresses.length > 0 && $emailElements.is(":hidden")) {
 				$emailElements.slideDown();
-			} else if ($email.val().length === 0 && $emailElements.is(":visible")) {
+			} else if (this._addresses.length === 0 && $emailElements.is(":visible")) {
 				$emailElements.slideUp();
 			}
 		},
@@ -89,15 +98,9 @@
 			var itemType   = this.itemModel.get('itemType');
 			var itemSource = this.itemModel.get('itemSource');
 
-			if (!this.validateEmail(mail.to)) {
-				return deferred.reject({
-					message: t('core', '{email} is not a valid address!', {email: mail.to})
-				});
-			}
-
 			var params = {
 				action      : 'email',
-				toAddress   : mail.to,
+				toAddress   : this._addresses.join(','),
 				emailBody   : mail.body,
 				bccSelf     : mail.bccSelf,
 				link        : this.model.getLink(),
@@ -135,7 +138,7 @@
 			var $formItems         = this.$el.find('.emailPrivateLinkForm input, .emailPrivateLinkForm textarea');
 			var $formSendIndicator = this.$el.find('.emailPrivateLinkForm--send-indicator');
 			var  mail = {
-				 to      : this.$el.find('.emailPrivateLinkForm--emailField').val().toLowerCase(),
+				 to      : this._addresses.join(','),
 				 bccSelf : this.$el.find('.emailPrivateLinkForm--emailBccSelf').is(':checked'),
 				 body    : this.$el.find('.emailPrivateLinkForm--emailBodyField').val()
 			};
@@ -158,6 +161,9 @@
 		},
 
 		render: function() {
+			// make sure this is empty
+			this._addresses = [];
+
 			this.$el.html(this.template({
 				cid                 : this.cid,
 				userHasEmail        : !!OC.getCurrentUser().email,
@@ -169,8 +175,44 @@
 			}));
 
 			this.delegateEvents();
-
 			return this;
+
+		},
+
+		_afterRender: function () {
+			var _this = this;
+
+			this.$el.find('.emailPrivateLinkForm--emailField').select2({
+				containerCssClass: 'emailPrivateLinkForm--dropDown',
+				tags: true,
+				tokenSeparators:[","],
+				query: function(query) {
+					// directly from search
+					query.callback({
+						results: [{
+							"id"       : query.term,
+							"text"     : query.term,
+							"disabled" : !_this.validateEmail(query.term)
+						}]
+					});
+				}
+			}).on("change", function(e) {
+				if (e.added)
+					_this._addAddress(e.added.id);
+
+				if (e.removed)
+					_this._removeAddress(e.removed.id);
+
+				_this.toggleMailElements();
+			});
+		},
+
+		_addAddress: function( email ) {
+			this._addresses.push( email.toLowerCase() )
+		},
+
+		_removeAddress: function( email ) {
+			this._addresses = _.without(this._addresses, email.toLowerCase() )
 		},
 
 		/**
diff --git a/core/js/tests/specs/sharedialogmailviewSpec.js b/core/js/tests/specs/sharedialogmailviewSpec.js
index 417b77a25d1d..365ddf91f038 100644
--- a/core/js/tests/specs/sharedialogmailviewSpec.js
+++ b/core/js/tests/specs/sharedialogmailviewSpec.js
@@ -84,10 +84,28 @@ describe('OC.Share.ShareDialogMailView', function() {
 		});
 	});
 
+	describe('adding and removing addresses', function() {
+		it('works as expected', function() {
+			view._addAddress('Ada.Wong@umbrella.com');
+			view._addAddress('Albert.Wesker@umbrella.com');
+			view._addAddress('Jill.Valentine@umbrella.com');
+
+			expect(view._addresses.length).toEqual(3);
+			expect(view._addresses[2]).toEqual('jill.valentine@umbrella.com');
+
+			// remove one
+			view._removeAddress('Albert.Wesker@umbrella.com');
+			expect(view._addresses.length).toEqual(2);
+			expect(view._addresses[1]).toEqual('jill.valentine@umbrella.com');
+		});
+	});
+
 	describe('sending emails', function() {
 		it('sends entered emails when calling sendEmails()', function() {
 			var callback = sinon.stub();
-			view.$('.emailPrivateLinkForm--emailField').val('email@example.com');
+
+			view._addAddress('ernie@example.com');
+			view._addAddress('bert@example.com');
 			view.sendEmails().then(callback);
 
 			expect(callback.notCalled).toEqual(true);
@@ -96,7 +114,7 @@ describe('OC.Share.ShareDialogMailView', function() {
 			expect(fakeServer.requests[0].url).toEqual(OC.generateUrl('core/ajax/share.php'));
 			expect(OC.parseQueryString(fakeServer.requests[0].requestBody)).toEqual({
 				action: 'email',
-				toAddress: 'email@example.com',
+				toAddress: 'ernie@example.com,bert@example.com',
 				link: model.getLink(),
 				itemType: 'folder',
 				itemSource: '123',
@@ -123,7 +141,7 @@ describe('OC.Share.ShareDialogMailView', function() {
 		});
 		it('sends mail to self if BCC is checked', function() {
 			var callback = sinon.stub();
-			view.$('.emailPrivateLinkForm--emailField').val('GlaDOS@aperture.com');
+			view._addAddress('GlaDOS@aperture.com');
 			view.$('.emailPrivateLinkForm--emailBccSelf').prop('checked', 'checked');
 			view.$('.emailPrivateLinkForm--emailBodyField').val('The Cake Is A Lie!');
 			view.sendEmails().then(callback);
@@ -159,15 +177,17 @@ describe('OC.Share.ShareDialogMailView', function() {
 
 			expect(callback.calledOnce).toEqual(true);
 		});
+
 		it('does not send anything if no emails were input', function() {
 			var callback = sinon.stub();
 			view.sendEmails().then(callback);
 			expect(callback.calledOnce).toEqual(true);
 		});
+
 		it('rejects promise in case of failure', function() {
 			var callback = sinon.stub();
 			var rejectCallback = sinon.stub();
-			view.$('.emailPrivateLinkForm--emailField').val('email@example.com');
+			view._addAddress('email@example.com');
 			view.sendEmails().then(callback).fail(rejectCallback);
 
 			expect(callback.notCalled).toEqual(true);
diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php
index c52348d72071..63d9169d092e 100644
--- a/lib/private/legacy/template.php
+++ b/lib/private/legacy/template.php
@@ -112,6 +112,7 @@ public static function initTemplateEngine($renderAs) {
 			OC_Util::addStyle("tooltip",null,true);
 			OC_Util::addStyle('jquery-ui-fixes',null,true);
 			OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
+			OC_Util::addVendorStyle('select2/select2',null,true);
 			OC_Util::addStyle("mobile",null,true);
 			OC_Util::addStyle("multiselect",null,true);
 			OC_Util::addStyle("fixes",null,true);