Fix share link password input

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files_sharing/css/sharetabview.scss

@@ -23,17 +23,13 @@
 	.shareWithLoading {
 		padding-left: 10px;
 		right: 35px;
-		top: 0px;
+		top: 3px;
 	}
-	.shareWithConfirm,
+	.shareWithConfirm {
-	.clipboardButton,
-	.linkPass .icon-loading-small {
 		position: absolute;
 		right: 2px;
 		top: 6px;
 		padding: 14px;
-	}
-	.shareWithConfirm {
 		opacity: 0.5;
 	}
 	.shareWithField:focus ~ .shareWithConfirm {
@@ -46,6 +42,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/sharedialoglinkshareview.js

@@ -93,6 +93,7 @@
 				'	</span></li>' +
 				'	<li class="{{#unless isPasswordSet}}hidden{{/unless}} linkPassMenu"><span class="shareOption 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>' +
 				'{{/if}}' +
@@ -189,8 +190,8 @@
 			// open menu
 			'click .share-menu .icon-more': 'onToggleMenu',
 			// password
-			'focusout input.linkPassText': 'onPasswordEntered',
+			'click input.share-pass-submit': 'onPasswordEntered', 
-			'keyup input.linkPassText': 'onPasswordKeyUp',
+			'keyup input.linkPassText': 'onPasswordKeyUp', // check for the enter key
 			'change .showPasswordCheckbox': 'onShowPasswordClick',
 			'change .publicEditingCheckbox': 'onAllowPublicEditingChange',
 			// copy link url
@@ -374,11 +375,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);
+					$container.attr('title', msg);
-					$input.tooltip({placement: 'bottom', trigger: 'manual'});
+					$container.tooltip({placement: 'bottom', trigger: 'manual'});
-					$input.tooltip('show');
+					$container.tooltip('show');
 				}
 			});
 		},

core/js/tests/specs/sharedialogviewSpec.js

@@ -127,25 +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('linkShare', {
-				isLinkShare: true
-			});
-			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({
-				password: 'foo'
-			});
-		});
 		it('update password on enter', function() {
 			$('#allowShareWithLink').val('yes');
 
@@ -168,6 +149,28 @@ describe('OC.Share.ShareDialogView', function() {
 				password: 'foo'
 			});
 		});
+		it('update password on submit', function() {
+			$('#allowShareWithLink').val('yes');
+
+			dialog.model.set('linkShare', {
+				isLinkShare: true
+			});
+			dialog.render();
+
+			// Toggle linkshare
+			dialog.$el.find('.linkCheckbox').click();
+
+			// 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({
+				password: 'foo'
+			});
+		});
 		it('shows share with link checkbox when allowed', function() {
 			$('#allowShareWithLink').val('yes');