From 3af2ad0cd99998ef5102a0dfe4c29416321dae07 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Fri, 16 Oct 2015 10:54:45 +0200
Subject: [PATCH] Fix DOM element ids in share dialog

- Rely on class names instead of global ids
- When global ids are needed for label+checkbox, append the view id
  (cid) to the element's id

This fixes the checkboxes when multiple sidebars exist in the DOM.
---
 core/js/sharedialogexpirationview.js       |  16 ++--
 core/js/sharedialoglinkshareview.js        | 103 ++++++++++++---------
 core/js/sharedialogshareelistview.js       |  35 +++----
 core/js/sharedialogview.js                 |  11 ++-
 core/js/tests/specs/sharedialogviewSpec.js |  92 +++++++++---------
 5 files changed, 138 insertions(+), 119 deletions(-)

diff --git a/core/js/sharedialogexpirationview.js b/core/js/sharedialogexpirationview.js
index 772b9ba97d..eef440c9af 100644
--- a/core/js/sharedialogexpirationview.js
+++ b/core/js/sharedialogexpirationview.js
@@ -8,6 +8,8 @@
  *
  */
 
+/* global moment */
+
 (function() {
 	if (!OC.Share) {
 		OC.Share = {};
@@ -19,9 +21,9 @@
 			// in the LinkShareView to ease reusing it in future. Then,
 			// modifications (getting rid of IDs) are still necessary.
 			'{{#if isLinkShare}}' +
-			'<input type="checkbox" name="expirationCheckbox" class="expirationCheckbox checkbox" id="expirationCheckbox" value="1" ' +
+			'<input type="checkbox" name="expirationCheckbox" class="expirationCheckbox checkbox" id="expirationCheckbox-{{cid}}" value="1" ' +
 				'{{#if isExpirationSet}}checked="checked"{{/if}} {{#if disableCheckbox}}disabled="disabled"{{/if}} />' +
-			'<label for="expirationCheckbox">{{setExpirationLabel}}</label>' +
+			'<label for="expirationCheckbox-{{cid}}">{{setExpirationLabel}}</label>' +
 			'<div class="expirationDateContainer {{#unless isExpirationSet}}hidden{{/unless}}">' +
 			'    <label for="expirationDate" class="hidden-visually" value="{{expirationDate}}">{{expirationLabel}}</label>' +
 			'    <input id="expirationDate" class="datepicker" type="text" placeholder="{{expirationDatePlaceholder}}" value="{{expirationValue}}" />' +
@@ -134,11 +136,11 @@
 
 			var expiration;
 			if (isExpirationSet) {
-				expiration = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY')
+				expiration = moment(this.model.get('linkShare').expiration, 'YYYY-MM-DD').format('DD-MM-YYYY');
 			}
 
-			var expirationTemplate = this.template();
-			this.$el.html(expirationTemplate({
+			this.$el.html(this.template({
+				cid: this.cid,
 				setExpirationLabel: t('core', 'Set expiration date'),
 				expirationLabel: t('core', 'Expiration'),
 				expirationDatePlaceholder: t('core', 'Expiration date'),
@@ -186,11 +188,11 @@
 		 * @returns {Function} from Handlebars
 		 * @private
 		 */
-		template: function () {
+		template: function (data) {
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
 			}
-			return this._template;
+			return this._template(data);
 		}
 
 	});
diff --git a/core/js/sharedialoglinkshareview.js b/core/js/sharedialoglinkshareview.js
index 1bbd10d572..dfd9bdc2f4 100644
--- a/core/js/sharedialoglinkshareview.js
+++ b/core/js/sharedialoglinkshareview.js
@@ -16,33 +16,36 @@
 	var TEMPLATE =
 			'{{#if shareAllowed}}' +
 			'<span class="icon-loading-small hidden"></span>' +
-			'<input type="checkbox" name="linkCheckbox" id="linkCheckbox" class="checkbox" value="1" {{#if isLinkShare}}checked="checked"{{/if}} /><label for="linkCheckbox">{{linkShareLabel}}</label>' +
+			'<input type="checkbox" name="linkCheckbox" id="linkCheckbox-{{cid}}" class="checkbox linkCheckbox" value="1" {{#if isLinkShare}}checked="checked"{{/if}} />' +
+			'<label for="linkCheckbox-{{cid}}">{{linkShareLabel}}</label>' +
 			'<br />' +
-			'<label for="linkText" class="hidden-visually">{{urlLabel}}</label>' +
-			'<input id="linkText" {{#unless isLinkShare}}class="hidden"{{/unless}} type="text" readonly="readonly" value="{{shareLinkURL}}" />' +
+			'<label for="linkText-{{cid}}" class="hidden-visually">{{urlLabel}}</label>' +
+			'<input id="linkText-{{cid}}" class="linkText {{#unless isLinkShare}}hidden{{/unless}}" type="text" readonly="readonly" value="{{shareLinkURL}}" />' +
 			'   {{#if showPasswordCheckBox}}' +
-			'<input type="checkbox" name="showPassword" id="showPassword" class="checkbox" {{#if isPasswordSet}}checked="checked"{{/if}} value="1" /><label for="showPassword">{{enablePasswordLabel}}</label>' +
+			'<input type="checkbox" name="showPassword" id="showPassword-{{cid}}" class="checkbox showPasswordCheckbox" {{#if isPasswordSet}}checked="checked"{{/if}} value="1" />' +
+			'<label for="showPassword-{{cid}}">{{enablePasswordLabel}}</label>' +
 			'   {{/if}}' +
-			'<div id="linkPass" {{#unless isPasswordSet}}class="hidden"{{/unless}}>' +
-			'    <label for="linkPassText" class="hidden-visually">{{passwordLabel}}</label>' +
-			'    <input id="linkPassText" type="password" placeholder="{{passwordPlaceholder}}" />' +
+			'<div id="linkPass" class="linkPass {{#unless isPasswordSet}}hidden{{/unless}}">' +
+			'    <label for="linkPassText-{{cid}}" class="hidden-visually">{{passwordLabel}}</label>' +
+			'    <input id="linkPassText-{{cid}}" class="linkPassText" type="password" placeholder="{{passwordPlaceholder}}" />' +
 			'    <span class="icon-loading-small hidden"></span>' +
 			'</div>' +
 			'    {{#if publicUpload}}' +
 			'<div id="allowPublicUploadWrapper">' +
 			'    <span class="icon-loading-small hidden"></span>' +
-			'    <input type="checkbox" value="1" name="allowPublicUpload" id="sharingDialogAllowPublicUpload" class="checkbox" {{{publicUploadChecked}}} />' +
-			'<label for="sharingDialogAllowPublicUpload">{{publicUploadLabel}}</label>' +
+			'    <input type="checkbox" value="1" name="allowPublicUpload" id="sharingDialogAllowPublicUpload-{{cid}}" class="checkbox publicUploadCheckbox" {{{publicUploadChecked}}} />' +
+			'<label for="sharingDialogAllowPublicUpload-{{cid}}">{{publicUploadLabel}}</label>' +
 			'</div>' +
 			'    {{/if}}' +
 			'    {{#if mailPublicNotificationEnabled}}' +
 			'<form id="emailPrivateLink" class="emailPrivateLinkForm">' +
-			'    <input id="email" value="" placeholder="{{mailPrivatePlaceholder}}" type="text" />' +
-			'    <input id="emailButton" type="submit" value="{{mailButtonText}}" />' +
+			'    <input id="email" class="emailField" value="" placeholder="{{mailPrivatePlaceholder}}" type="text" />' +
+			'    <input id="emailButton" class="emailButton" type="submit" value="{{mailButtonText}}" />' +
 			'</form>' +
 			'    {{/if}}' +
 			'{{else}}' +
-			'<input id="shareWith" type="text" placeholder="{{noSharingPlaceholder}}" disabled="disabled"/>' +
+			// FIXME: this doesn't belong in this view
+			'<input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{noSharingPlaceholder}}" disabled="disabled"/>' +
 			'{{/if}}'
 		;
 
@@ -70,7 +73,13 @@
 		showLink: true,
 
 		events: {
-			'submit .emailPrivateLinkForm': '_onEmailPrivateLink'
+			'submit .emailPrivateLinkForm': '_onEmailPrivateLink',
+			'focusout input.linkPassText': 'onPasswordEntered',
+			'keyup input.linkPassText': 'onPasswordKeyUp',
+			'click .linkCheckbox': 'onLinkCheckBoxChange',
+			'click .linkText': 'onLinkTextClick',
+			'change .publicUploadCheckbox': 'onAllowPublicUploadChange',
+			'click .showPasswordCheckbox': 'onShowPasswordClick'
 		},
 
 		initialize: function(options) {
@@ -98,12 +107,20 @@
 				throw 'missing OC.Share.ShareConfigModel';
 			}
 
-			_.bindAll(this, 'onLinkCheckBoxChange', 'onPasswordEntered',
-				'onShowPasswordClick', 'onAllowPublicUploadChange');
+			_.bindAll(
+				this,
+				'_onEmailPrivateLink',
+				'onLinkCheckBoxChange',
+				'onPasswordEntered',
+				'onPasswordKeyUp',
+				'onLinkTextClick',
+				'onShowPasswordClick',
+				'onAllowPublicUploadChange'
+			);
 		},
 
 		onLinkCheckBoxChange: function() {
-			var $checkBox = this.$el.find('#linkCheckbox');
+			var $checkBox = this.$el.find('.linkCheckbox');
 			var $loading = $checkBox.siblings('.icon-loading-small');
 			if(!$loading.hasClass('hidden')) {
 				return false;
@@ -115,19 +132,19 @@
 					// this will create it
 					this.model.saveLinkShare();
 				} else {
-					this.$el.find('#linkPass').slideToggle(OC.menuSpeed);
+					this.$el.find('.linkPass').slideToggle(OC.menuSpeed);
 					// TODO drop with IE8 drop
 					if($('html').hasClass('ie8')) {
-						this.$el.find('#linkPassText').attr('placeholder', null);
-						this.$el.find('#linkPassText').val('');
+						this.$el.find('.linkPassText').attr('placeholder', null);
+						this.$el.find('.linkPassText').val('');
 					}
-					this.$el.find('#linkPassText').focus();
+					this.$el.find('.linkPassText').focus();
 				}
 			} else {
 				if (this.model.get('linkShare').isLinkShare) {
 					this.model.removeLinkShare();
 				} else {
-					this.$el.find('#linkPass').slideToggle(OC.menuSpeed);
+					this.$el.find('.linkPass').slideToggle(OC.menuSpeed);
 				}
 			}
 		},
@@ -138,23 +155,29 @@
 		},
 
 		onShowPasswordClick: function() {
-			this.$el.find('#linkPass').slideToggle(OC.menuSpeed);
-			if(!this.$el.find('#showPassword').is(':checked')) {
+			this.$el.find('.linkPass').slideToggle(OC.menuSpeed);
+			if(!this.$el.find('.showPasswordCheckbox').is(':checked')) {
 				this.model.setPassword('');
 				this.model.saveLinkShare();
 			} else {
-				this.$el.find('#linkPassText').focus();
+				this.$el.find('.linkPassText').focus();
+			}
+		},
+
+		onPasswordKeyUp: function(event) {
+			if(event.keyCode == 13) {
+				this.onPasswordEntered();
 			}
 		},
 
 		onPasswordEntered: function() {
 			var self = this;
-			var $loading = this.$el.find('#linkPass .icon-loading-small');
+			var $loading = this.$el.find('.linkPass .icon-loading-small');
 			if (!$loading.hasClass('hidden')) {
 				// still in process
 				return;
 			}
-			var $input = this.$el.find('#linkPassText');
+			var $input = this.$el.find('.linkPassText');
 			$input.removeClass('error');
 			var password = $input.val();
 			if(password === '') {
@@ -178,18 +201,18 @@
 		},
 
 		onAllowPublicUploadChange: function() {
-			this.$el.find('#sharingDialogAllowPublicUpload')
-					.siblings('.icon-loading-small').removeClass('hidden').addClass('inlineblock');
-			this.model.setPublicUpload(this.$el.find('#sharingDialogAllowPublicUpload').is(':checked'));
+			var $checkbox = this.$('.publicUploadCheckbox');
+			$checkbox.siblings('.icon-loading-small').removeClass('hidden').addClass('inlineblock');
+			this.model.setPublicUpload($checkbox.is(':checked'));
 			this.model.saveLinkShare();
 		},
 
 		_onEmailPrivateLink: function(event) {
 			event.preventDefault();
 
-			var $emailField = this.$el.find('#email');
-			var $emailButton = this.$el.find('#emailButton');
-			var email = this.$el.find('#email').val();
+			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);
@@ -243,6 +266,7 @@
 					|| !this.model.get('linkShare').password);
 
 			this.$el.html(linkShareTemplate({
+				cid: this.cid,
 				shareAllowed: true,
 				isLinkShare: isLinkShare,
 				shareLinkURL: this.model.get('linkShare').link,
@@ -261,20 +285,7 @@
 				mailButtonText: t('core', 'Send')
 			}));
 
-			// TODO: move this to delegate events instead
-			this.$el.find('#linkCheckbox').click(this.onLinkCheckBoxChange);
-			this.$el.find('#sharingDialogAllowPublicUpload').change(this.onAllowPublicUploadChange);
-			this.$el.find('#linkText').click(this.onLinkTextClick);
-			this.$el.find('#showPassword').click(this.onShowPasswordClick);
-			this.$el.find('#linkPassText').focusout(this.onPasswordEntered);
-			var view = this;
-			this.$el.find('#linkPassText').keyup(function(event) {
-				if(event.keyCode == 13) {
-					view.onPasswordEntered();
-				}
-			});
-
-			var $emailField = this.$el.find('#email');
+			var $emailField = this.$el.find('.emailField');
 			if (isLinkShare && $emailField.length !== 0) {
 				$emailField.autocomplete({
 					minLength: 1,
diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index c29716b3e5..dfe5789e77 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -14,7 +14,7 @@
 	}
 
 	var TEMPLATE =
-			'<ul id="shareWithList">' +
+			'<ul id="shareWithList" class="shareWithList">' +
 			'{{#each sharees}}' +
 			'    {{#if isCollection}}' +
 			'    <li data-collection="{{collectionID}}">{{text}}</li>' +
@@ -27,31 +27,31 @@
 			'        {{/if}}' +
 			'        <span class="username">{{shareWithDisplayName}}</span>' +
 			'        {{#if mailPublicNotificationEnabled}} {{#unless isRemoteShare}}' +
-			'        <input id="mail-{{shareWith}}" type="checkbox" name="mailNotification" class="mailNotification checkbox" {{#if wasMailSent}}checked="checked"{{/if}} />' +
-			'        <label for="mail-{{shareWith}}">{{notifyByMailLabel}}</label>' +
+			'        <input id="mail-{{cid}}-{{shareWith}}" type="checkbox" name="mailNotification" class="mailNotification checkbox" {{#if wasMailSent}}checked="checked"{{/if}} />' +
+			'        <label for="mail-{{cid}}-{{shareWith}}">{{notifyByMailLabel}}</label>' +
 			'        {{/unless}} {{/if}}' +
 			'        {{#if isResharingAllowed}} {{#if sharePermissionPossible}} {{#unless isRemoteShare}}' +
-			'        <input id="canShare-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
-			'        <label for="canShare-{{shareWith}}">{{canShareLabel}}</label>' +
+			'        <input id="canShare-{{cid}}-{{shareWith}}" type="checkbox" name="share" class="permissions checkbox" {{#if hasSharePermission}}checked="checked"{{/if}} data-permissions="{{sharePermission}}" />' +
+			'        <label for="canShare-{{cid}}-{{shareWith}}">{{canShareLabel}}</label>' +
 			'        {{/unless}} {{/if}} {{/if}}' +
 			'        {{#if editPermissionPossible}}' +
-			'        <input id="canEdit-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
-			'        <label for="canEdit-{{shareWith}}">{{canEditLabel}}</label>' +
+			'        <input id="canEdit-{{cid}}-{{shareWith}}" type="checkbox" name="edit" class="permissions checkbox" {{#if hasEditPermission}}checked="checked"{{/if}} />' +
+			'        <label for="canEdit-{{cid}}-{{shareWith}}">{{canEditLabel}}</label>' +
 			'        {{/if}}' +
 			'        {{#unless isRemoteShare}}' +
 			'        <a href="#" class="showCruds"><img class="svg" alt="{{crudsLabel}}" src="{{triangleSImage}}"/></a>' +
 			'        <div class="cruds hidden">' +
 			'            {{#if createPermissionPossible}}' +
-			'            <input id="canCreate-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
-			'            <label for="canCreate-{{shareWith}}">{{createPermissionLabel}}</label>' +
+			'            <input id="canCreate-{{cid}}-{{shareWith}}" type="checkbox" name="create" class="permissions checkbox" {{#if hasCreatePermission}}checked="checked"{{/if}} data-permissions="{{createPermission}}"/>' +
+			'            <label for="canCreate-{{cid}}-{{shareWith}}">{{createPermissionLabel}}</label>' +
 			'            {{/if}}' +
 			'            {{#if updatePermissionPossible}}' +
-			'            <input id="canUpdate-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
-			'            <label for="canUpdate-{{shareWith}}">{{updatePermissionLabel}}</label>' +
+			'            <input id="canUpdate-{{cid}}-{{shareWith}}" type="checkbox" name="update" class="permissions checkbox" {{#if hasUpdatePermission}}checked="checked"{{/if}} data-permissions="{{updatePermission}}"/>' +
+			'            <label for="canUpdate-{{cid}}-{{shareWith}}">{{updatePermissionLabel}}</label>' +
 			'            {{/if}}' +
 			'            {{#if deletePermissionPossible}} {{#unless isRemoteShare}}' +
-			'            <input id="canDelete-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
-			'            <label for="canDelete-{{shareWith}}">{{deletePermissionLabel}}</label>' +
+			'            <input id="canDelete-{{cid}}-{{shareWith}}" type="checkbox" name="delete" class="permissions checkbox" {{#if hasDeletePermission}}checked="checked"{{/if}} data-permissions="{{deletePermission}}"/>' +
+			'            <label for="canDelete-{{cid}}-{{shareWith}}">{{deletePermissionLabel}}</label>' +
 			'            {{/unless}} {{/if}}' +
 			'        </div>' +
 			'        {{/unless}}' +
@@ -146,6 +146,7 @@
 			}
 
 			return _.extend(hasPermissionOverride, {
+				cid: this.cid,
 				hasSharePermission: this.model.hasSharePermission(shareIndex),
 				hasEditPermission: this.model.hasEditPermission(shareIndex),
 				hasCreatePermission: this.model.hasCreatePermission(shareIndex),
@@ -209,8 +210,8 @@
 		},
 
 		render: function() {
-			var shareeListTemplate = this.template();
-			this.$el.html(shareeListTemplate({
+			this.$el.html(this.template({
+				cid: this.cid,
 				sharees: this.getShareeList()
 			}));
 
@@ -235,11 +236,11 @@
 		 * @returns {Function} from Handlebars
 		 * @private
 		 */
-		template: function () {
+		template: function (data) {
 			if (!this._template) {
 				this._template = Handlebars.compile(TEMPLATE);
 			}
-			return this._template;
+			return this._template(data);
 		},
 
 		onUnshare: function(event) {
diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index 7b02e6a3a5..dd07adceac 100644
--- a/core/js/sharedialogview.js
+++ b/core/js/sharedialogview.js
@@ -16,9 +16,9 @@
 	var TEMPLATE_BASE =
 		'<div class="resharerInfoView subView"></div>' +
 		'{{#if isSharingAllowed}}' +
-		'<label for="shareWith" class="hidden-visually">{{shareLabel}}</label>' +
+		'<label for="shareWith-{{cid}}" class="hidden-visually">{{shareLabel}}</label>' +
 		'<div class="oneline">' +
-		'    <input id="shareWith" type="text" placeholder="{{sharePlaceholder}}" />' +
+		'    <input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{sharePlaceholder}}" />' +
 		'    <span class="shareWithLoading icon-loading-small hidden"></span>'+
 		'{{{remoteShareInfo}}}' +
 		'</div>' +
@@ -127,7 +127,7 @@
 				$loading.addClass('hidden');
 				$loading.removeClass('inlineblock');
 				if (result.status == 'success' && result.data.length > 0) {
-					$("#shareWith").autocomplete("option", "autoFocus", true);
+					$('.shareWithField').autocomplete("option", "autoFocus", true);
 					response(result.data);
 				} else {
 					response();
@@ -184,7 +184,7 @@
 				this._loadingOnce = true;
 				// the first time, focus on the share field after the spinner disappeared
 				_.defer(function() {
-					self.$('#shareWith').focus();
+					self.$('.shareWithField').focus();
 				});
 			}
 		},
@@ -193,13 +193,14 @@
 			var baseTemplate = this._getTemplate('base', TEMPLATE_BASE);
 
 			this.$el.html(baseTemplate({
+				cid: this.cid,
 				shareLabel: t('core', 'Share'),
 				sharePlaceholder: this._renderSharePlaceholderPart(),
 				remoteShareInfo: this._renderRemoteShareInfoPart(),
 				isSharingAllowed: this.model.sharePermissionPossible()
 			}));
 
-			var $shareField = this.$el.find('#shareWith');
+			var $shareField = this.$el.find('.shareWithField');
 			if ($shareField.length) {
 				$shareField.autocomplete({
 					minLength: 2,
diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js
index fe4cf8e8c2..55aa0541bd 100644
--- a/core/js/tests/specs/sharedialogviewSpec.js
+++ b/core/js/tests/specs/sharedialogviewSpec.js
@@ -80,6 +80,9 @@ describe('OC.Share.ShareDialogView', function() {
 			model: shareModel
 		});
 
+		// required for proper event propagation when simulating clicks in some cases (jquery bugs)
+		$('#testArea').append(dialog.$el);
+
 		// triggers rendering
 		shareModel.set({
 			shares: [],
@@ -111,6 +114,7 @@ describe('OC.Share.ShareDialogView', function() {
 		/* jshint camelcase:false */
 		oc_appconfig.core = oldAppConfig;
 
+		dialog.remove();
 		fetchStub.restore();
 
 		autocompleteStub.restore();
@@ -127,7 +131,7 @@ describe('OC.Share.ShareDialogView', function() {
 			dialog.render();
 
 			// Toggle linkshare
-			dialog.$el.find('[name=linkCheckbox]').click();
+			dialog.$el.find('.linkCheckbox').click();
 			fakeServer.requests[0].respond(
 				200,
 				{ 'Content-Type': 'application/json' },
@@ -136,9 +140,9 @@ describe('OC.Share.ShareDialogView', function() {
 
 			// Enable password, enter password and focusout
 			dialog.$el.find('[name=showPassword]').click();
-			dialog.$el.find('#linkPassText').focus();
-			dialog.$el.find('#linkPassText').val('foo');
-			dialog.$el.find('#linkPassText').focusout();
+			dialog.$el.find('.linkPassText').focus();
+			dialog.$el.find('.linkPassText').val('foo');
+			dialog.$el.find('.linkPassText').focusout();
 
 			expect(fakeServer.requests[1].method).toEqual('POST');
 			var body = OC.parseQueryString(fakeServer.requests[1].requestBody);
@@ -157,8 +161,8 @@ describe('OC.Share.ShareDialogView', function() {
 			// fetching the model will rerender the view
 			dialog.render();
 
-			expect(dialog.$el.find('#linkPassText').val()).toEqual('');
-			expect(dialog.$el.find('#linkPassText').attr('placeholder')).toEqual('**********');
+			expect(dialog.$el.find('.linkPassText').val()).toEqual('');
+			expect(dialog.$el.find('.linkPassText').attr('placeholder')).toEqual('**********');
 		});
 		it('update password on enter', function() {
 			$('#allowShareWithLink').val('yes');
@@ -166,7 +170,7 @@ describe('OC.Share.ShareDialogView', function() {
 			dialog.render();
 
 			// Toggle linkshare
-			dialog.$el.find('[name=linkCheckbox]').click();
+			dialog.$el.find('.linkCheckbox').click();
 			fakeServer.requests[0].respond(
 				200,
 				{ 'Content-Type': 'application/json' },
@@ -175,9 +179,9 @@ describe('OC.Share.ShareDialogView', function() {
 
 			// Enable password and enter password
 			dialog.$el.find('[name=showPassword]').click();
-			dialog.$el.find('#linkPassText').focus();
-			dialog.$el.find('#linkPassText').val('foo');
-			dialog.$el.find('#linkPassText').trigger(new $.Event('keyup', {keyCode: 13}));
+			dialog.$el.find('.linkPassText').focus();
+			dialog.$el.find('.linkPassText').val('foo');
+			dialog.$el.find('.linkPassText').trigger(new $.Event('keyup', {keyCode: 13}));
 
 			expect(fakeServer.requests[1].method).toEqual('POST');
 			var body = OC.parseQueryString(fakeServer.requests[1].requestBody);
@@ -196,22 +200,22 @@ describe('OC.Share.ShareDialogView', function() {
 			// fetching the model will rerender the view
 			dialog.render();
 
-			expect(dialog.$el.find('#linkPassText').val()).toEqual('');
-			expect(dialog.$el.find('#linkPassText').attr('placeholder')).toEqual('**********');
+			expect(dialog.$el.find('.linkPassText').val()).toEqual('');
+			expect(dialog.$el.find('.linkPassText').attr('placeholder')).toEqual('**********');
 		});
 		it('shows share with link checkbox when allowed', function() {
 			$('#allowShareWithLink').val('yes');
 
 			dialog.render();
 
-			expect(dialog.$el.find('#linkCheckbox').length).toEqual(1);
+			expect(dialog.$el.find('.linkCheckbox').length).toEqual(1);
 		});
 		it('does not show share with link checkbox when not allowed', function() {
 			$('#allowShareWithLink').val('no');
 
 			dialog.render();
 
-			expect(dialog.$el.find('#linkCheckbox').length).toEqual(0);
+			expect(dialog.$el.find('.linkCheckbox').length).toEqual(0);
 		});
 		it('shows populated link share when a link share exists', function() {
 			// this is how the OC.Share class does it...
@@ -228,8 +232,8 @@ describe('OC.Share.ShareDialogView', function() {
 
 			dialog.render();
 
-			expect(dialog.$el.find('#linkCheckbox').prop('checked')).toEqual(true);
-			expect(dialog.$el.find('#linkText').val()).toEqual(link);
+			expect(dialog.$el.find('.linkCheckbox').prop('checked')).toEqual(true);
+			expect(dialog.$el.find('.linkText').val()).toEqual(link);
 		});
 		describe('password', function() {
 			var slideToggleStub;
@@ -250,7 +254,7 @@ describe('OC.Share.ShareDialogView', function() {
 				configModel.set('enforcePasswordForPublicLink', true);
 				dialog.render();
 
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 
 				// The password linkPass field is shown (slideToggle is called).
 				// No request is made yet
@@ -259,7 +263,7 @@ describe('OC.Share.ShareDialogView', function() {
 				expect(fakeServer.requests.length).toEqual(0);
 				
 				// Now untoggle share by link
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				dialog.render();
 
 				// Password field disappears and no ajax requests have been made
@@ -302,31 +306,31 @@ describe('OC.Share.ShareDialogView', function() {
 				dialog.render();
 
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(false);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('');
 			});
 			it('does not check expiration date checkbox for new share', function() {
 				dialog.render();
 
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(false);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('');
 			});
 			it('checks expiration date checkbox and populates field when expiration date was set', function() {
 				shareModel.get('linkShare').expiration = '2014-02-01 00:00:00';
 				dialog.render();
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(true);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('01-02-2014');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('01-02-2014');
 			});
 			it('sets default date when default date setting is enabled', function() {
 				configModel.set('isDefaultExpireDateEnabled', true);
 				dialog.render();
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				// here fetch would be called and the server returns the expiration date
 				shareModel.get('linkShare').expiration = '2014-1-27 00:00:00';
 				dialog.render();
 
 				// enabled by default
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(true);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('27-01-2014');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('27-01-2014');
 
 				// disabling is allowed
 				dialog.$el.find('[name=expirationCheckbox]').click();
@@ -338,13 +342,13 @@ describe('OC.Share.ShareDialogView', function() {
 					isDefaultExpireDateEnforced: true
 				});
 				dialog.render();
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				// here fetch would be called and the server returns the expiration date
 				shareModel.get('linkShare').expiration = '2014-1-27 00:00:00';
 				dialog.render();
 
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(true);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('27-01-2014');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('27-01-2014');
 
 				// disabling is not allowed
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('disabled')).toEqual(true);
@@ -358,14 +362,14 @@ describe('OC.Share.ShareDialogView', function() {
 					isDefaultExpireDateEnforced: true
 				});
 				dialog.render();
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				// here fetch would be called and the server returns the expiration date
 				shareModel.get('linkShare').expiration = '2014-1-27 00:00:00';
 				dialog.render();
 
 				//Enter password
-				dialog.$el.find('#linkPassText').val('foo');
-				dialog.$el.find('#linkPassText').trigger(new $.Event('keyup', {keyCode: 13}));
+				dialog.$el.find('.linkPassText').val('foo');
+				dialog.$el.find('.linkPassText').trigger(new $.Event('keyup', {keyCode: 13}));
 				fakeServer.requests[0].respond(
 					200,
 					{ 'Content-Type': 'application/json' },
@@ -373,7 +377,7 @@ describe('OC.Share.ShareDialogView', function() {
 				);
 
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('checked')).toEqual(true);
-				expect(dialog.$el.find('#expirationDate').val()).toEqual('27-01-2014');
+				expect(dialog.$el.find('.datepicker').val()).toEqual('27-01-2014');
 
 				// disabling is not allowed
 				expect(dialog.$el.find('[name=expirationCheckbox]').prop('disabled')).toEqual(true);
@@ -382,7 +386,7 @@ describe('OC.Share.ShareDialogView', function() {
 			});
 			it('sets picker minDate to today and no maxDate by default', function() {
 				dialog.render();
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				dialog.$el.find('[name=expirationCheckbox]').click();
 				expect($.datepicker._defaults.minDate).toEqual(expectedMinDate);
 				expect($.datepicker._defaults.maxDate).toEqual(null);
@@ -393,7 +397,7 @@ describe('OC.Share.ShareDialogView', function() {
 					isDefaultExpireDateEnforced: true
 				});
 				dialog.render();
-				dialog.$el.find('[name=linkCheckbox]').click();
+				dialog.$el.find('.linkCheckbox').click();
 				expect($.datepicker._defaults.minDate).toEqual(expectedMinDate);
 				expect($.datepicker._defaults.maxDate).toEqual(new Date(2014, 0, 27, 0, 0, 0, 0));
 			});
@@ -439,12 +443,12 @@ describe('OC.Share.ShareDialogView', function() {
 			it('displayes form when sending emails is enabled', function() {
 				$('input[name=mailPublicNotificationEnabled]').val('yes');
 				dialog.render();
-				expect(dialog.$('#emailPrivateLink').length).toEqual(1);
+				expect(dialog.$('.emailPrivateLinkForm').length).toEqual(1);
 			});
 			it('form not rendered when sending emails is disabled', function() {
 				$('input[name=mailPublicNotificationEnabled]').val('no');
 				dialog.render();
-				expect(dialog.$('#emailPrivateLink').length).toEqual(0);
+				expect(dialog.$('.emailPrivateLinkForm').length).toEqual(0);
 			});
 			it('input cleared on success', function() {
 				var defer = $.Deferred();
@@ -453,17 +457,17 @@ describe('OC.Share.ShareDialogView', function() {
 				$('input[name=mailPublicNotificationEnabled]').val('yes');
 				dialog.render();
 
-				dialog.$el.find('#emailPrivateLink #email').val('a@b.c');
-				dialog.$el.find('#emailPrivateLink').trigger('submit');
+				dialog.$el.find('.emailPrivateLinkForm .emailField').val('a@b.c');
+				dialog.$el.find('.emailPrivateLinkForm').trigger('submit');
 
 				expect(sendEmailPrivateLinkStub.callCount).toEqual(1);
-				expect(dialog.$el.find('#emailPrivateLink #email').val()).toEqual('Sending ...');
+				expect(dialog.$el.find('.emailPrivateLinkForm .emailField').val()).toEqual('Sending ...');
 
 				defer.resolve();
-				expect(dialog.$el.find('#emailPrivateLink #email').val()).toEqual('Email sent');
+				expect(dialog.$el.find('.emailPrivateLinkForm .emailField').val()).toEqual('Email sent');
 
 				clock.tick(2000);
-				expect(dialog.$el.find('#emailPrivateLink #email').val()).toEqual('');
+				expect(dialog.$el.find('.emailPrivateLinkForm .emailField').val()).toEqual('');
 			});
 			it('input not cleared on failure', function() {
 				var defer = $.Deferred();
@@ -472,14 +476,14 @@ describe('OC.Share.ShareDialogView', function() {
 				$('input[name=mailPublicNotificationEnabled]').val('yes');
 				dialog.render();
 
-				dialog.$el.find('#emailPrivateLink #email').val('a@b.c');
-				dialog.$el.find('#emailPrivateLink').trigger('submit');
+				dialog.$el.find('.emailPrivateLinkForm .emailField').val('a@b.c');
+				dialog.$el.find('.emailPrivateLinkForm').trigger('submit');
 
 				expect(sendEmailPrivateLinkStub.callCount).toEqual(1);
-				expect(dialog.$el.find('#emailPrivateLink #email').val()).toEqual('Sending ...');
+				expect(dialog.$el.find('.emailPrivateLinkForm .emailField').val()).toEqual('Sending ...');
 
 				defer.reject();
-				expect(dialog.$el.find('#emailPrivateLink #email').val()).toEqual('a@b.c');
+				expect(dialog.$el.find('.emailPrivateLinkForm .emailField').val()).toEqual('a@b.c');
 			});
 		});
 	});
@@ -532,7 +536,7 @@ describe('OC.Share.ShareDialogView', function() {
 			it('test correct function calls', function() {
 				expect(avatarStub.calledTwice).toEqual(true);
 				expect(placeholderStub.calledTwice).toEqual(true);
-				expect(dialog.$('#shareWithList').children().length).toEqual(3);
+				expect(dialog.$('.shareWithList').children().length).toEqual(3);
 				expect(dialog.$('.avatar').length).toEqual(4);
 			});
 
@@ -646,7 +650,7 @@ describe('OC.Share.ShareDialogView', function() {
 					permissions: OC.PERMISSION_READ
 				});
 				dialog.render();
-				expect(dialog.$el.find('#shareWith').prop('disabled')).toEqual(true);
+				expect(dialog.$el.find('.shareWithField').prop('disabled')).toEqual(true);
 			});
 			it('shows reshare owner', function() {
 				shareModel.set({