Merge pull request #12491 from nextcloud/share-menu-click-fix

Fix share link password input

apps/files_sharing/css/sharetabview.scss

@@ -48,16 +48,13 @@
 	.shareWithLoading {
 		padding-left: 10px;
 		right: 35px;
-		top: 0px;
+		top: 3px;
 	}
-	.shareWithConfirm,
-	.linkPass .icon-loading-small {
+	.shareWithConfirm {
 		position: absolute;
 		right: 2px;
 		top: 6px;
 		padding: 14px;
-	}
-	.shareWithConfirm {
 		opacity: 0.5;
 	}
 	.shareWithField:focus ~ .shareWithConfirm {
@@ -70,6 +67,21 @@
 		padding: 14px;
 	}
 	.popovermenu {
+		.linkPassMenu {
+			.share-pass-submit {
+				width: auto !important;
+			}
+			.icon-loading-small {
+				background-color: var(--color-main-background);
+				position: absolute;
+				right: 8px;
+				margin: 3px;
+				padding: 10px;
+				width: 32px;
+				height: 32px;
+				z-index: 10;
+			}
+		}
 		.datepicker {
 			margin-left: 35px;
 		}

core/js/share/sharedialoglinkshareview_popover_menu.handlebars

@@ -58,6 +58,7 @@
 			<li class="{{#unless isPasswordSet}}hidden{{/unless}} linkPassMenu">
 				<span class="menuitem icon-share-pass">
 					<input id="linkPassText-{{cid}}" class="linkPassText" type="password" placeholder="{{passwordPlaceholder}}" autocomplete="new-password" />
+					<input type="submit" class="icon-confirm share-pass-submit" value="" />
 					<span class="icon icon-loading-small hidden"></span>
 				</span>
 			</li>

core/js/sharedialoglinkshareview.js

@@ -54,8 +54,8 @@
 			// hide download
 			'change .hideDownloadCheckbox': 'onHideDownloadChange',
 			// password
-			'focusout input.linkPassText': 'onPasswordEntered',
-			'keyup input.linkPassText': 'onPasswordKeyUp',
+			'click input.share-pass-submit': 'onPasswordEntered', 
+			'keyup input.linkPassText': 'onPasswordKeyUp', // check for the enter key
 			'change .showPasswordCheckbox': 'onShowPasswordClick',
 			'change .passwordByTalkCheckbox': 'onPasswordByTalkChange',
 			'change .publicEditingCheckbox': 'onAllowPublicEditingChange',
@@ -381,11 +381,12 @@
 				},
 				error: function(model, msg) {
 					// destroy old tooltips
-					$input.tooltip('destroy');
+					var $container = $input.parent();
+					$container.tooltip('destroy');
 					$input.addClass('error');
-					$input.attr('title', msg);
-					$input.tooltip({placement: 'bottom', trigger: 'manual'});
-					$input.tooltip('show');
+					$container.attr('title', msg);
+					$container.tooltip({placement: 'bottom', trigger: 'manual'});
+					$container.tooltip('show');
 				}
 			});
 		},

core/js/sharetemplates.js

@@ -154,7 +154,7 @@ templates['sharedialoglinkshareview_popover_menu'] = template({"1":function(cont
     + alias4(((helper = (helper = helpers.cid || (depth0 != null ? depth0.cid : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"cid","hash":{},"data":data}) : helper)))
     + "\" class=\"linkPassText\" type=\"password\" placeholder=\""
     + alias4(((helper = (helper = helpers.passwordPlaceholder || (depth0 != null ? depth0.passwordPlaceholder : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"passwordPlaceholder","hash":{},"data":data}) : helper)))
-    + "\" autocomplete=\"new-password\" />\n					<span class=\"icon icon-loading-small hidden\"></span>\n				</span>\n			</li>\n";
+    + "\" autocomplete=\"new-password\" />\n					<input type=\"submit\" class=\"icon-confirm share-pass-submit\" value=\"\" />\n					<span class=\"icon icon-loading-small hidden\"></span>\n				</span>\n			</li>\n";
 },"9":function(container,depth0,helpers,partials,data) {
     return "disabled=\"disabled\"";
 },"11":function(container,depth0,helpers,partials,data) {

core/js/tests/specs/sharedialoglinkshareview.js

@@ -186,13 +186,11 @@ describe('OC.Share.ShareDialogLinkShareView', function () {
 			});
 			view.render();
 
-			var $passwordDiv = view.$el.find('#linkPass');
 			$passwordText = view.$el.find('.linkPassText');
 			$workingIcon = view.$el.find('.linkPassMenu .icon-loading-small');
 
 			sinon.stub(shareModel, 'saveLinkShare');
 
-			expect($passwordDiv.hasClass('hidden')).toBeFalsy();
 			expect($passwordText.hasClass('hidden')).toBeFalsy();
 			expect($workingIcon.hasClass('hidden')).toBeTruthy();
 

core/js/tests/specs/sharedialogviewSpec.js

@@ -127,28 +127,6 @@ describe('OC.Share.ShareDialogView', function() {
 	describe('Share with link', function() {
 		// TODO: test ajax calls
 		// TODO: test password field visibility (whenever enforced or not)
-		it('update password on focus out', function() {
-			$('#allowShareWithLink').val('yes');
-
-			dialog.model.set({
-				linkShares: [{
-					id: 123
-				}]
-			});
-			dialog.render();
-
-			// 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();
-
-			expect(saveLinkShareStub.calledOnce).toEqual(true);
-			expect(saveLinkShareStub.firstCall.args[0]).toEqual({
-				cid: 123,
-				password: 'foo'
-			});
-		});
 		it('update password on enter', function() {
 			$('#allowShareWithLink').val('yes');
 
@@ -171,6 +149,28 @@ describe('OC.Share.ShareDialogView', function() {
 				password: 'foo'
 			});
 		});
+		it('update password on submit', function() {
+			$('#allowShareWithLink').val('yes');
+
+			dialog.model.set({
+				linkShares: [{
+					id: 123
+				}]
+			});
+			dialog.render();
+
+			// 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 + .icon-confirm').click();
+
+			expect(saveLinkShareStub.calledOnce).toEqual(true);
+			expect(saveLinkShareStub.firstCall.args[0]).toEqual({
+				cid: 123,
+				password: 'foo'
+			});
+		});
 		it('shows add share with link button when allowed', function() {
 			$('#allowShareWithLink').val('yes');