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.

1 files changed, 48 insertions, 44 deletions

diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js
index fe4cf8e8c2b..55aa0541bd0 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({