Mousedown - mouseout - mouseover - mouseup now counts a click (#13550)

Change-Id: Id1f58b1ac6c207cec3357bcd96e1eb8d8de256a0

3 files changed, 130 insertions, 5 deletions

diff --git a/client/src/com/vaadin/client/ui/VButton.java b/client/src/com/vaadin/client/ui/VButton.java
index 840ed39114..98df258f57 100644
--- a/client/src/com/vaadin/client/ui/VButton.java
+++ b/client/src/com/vaadin/client/ui/VButton.java
@@ -225,10 +225,16 @@ public class VButton extends FocusWidget implements ClickHandler {
                 DOM.eventPreventDefault(event);
             }
             break;
+        case Event.ONMOUSEOVER:
+            if (isCapturing && isTargetInsideButton(event)) {
+                // This means a mousedown happened on the button and a mouseup
+                // has not happened yet
+                setHovering(true);
+                addStyleName(CLASSNAME_PRESSED);
+            }
+            break;
         case Event.ONMOUSEOUT:
-            Element to = event.getRelatedTarget();
-            if (getElement().isOrHasChild(DOM.eventGetTarget(event))
-                    && (to == null || !getElement().isOrHasChild(to))) {
+            if (isTargetInsideButton(event)) {
                 if (clickPending
                         && Math.abs(mousedownX - event.getClientX()) < MOVE_THRESHOLD
                         && Math.abs(mousedownY - event.getClientY()) < MOVE_THRESHOLD) {
@@ -236,8 +242,6 @@ public class VButton extends FocusWidget implements ClickHandler {
                     break;
                 }
                 clickPending = false;
-                if (isCapturing) {
-                }
                 setHovering(false);
                 removeStyleName(CLASSNAME_PRESSED);
             }
@@ -290,6 +294,15 @@ public class VButton extends FocusWidget implements ClickHandler {
         }
     }
 
+    /**
+     * Check if the event occurred over an element which is part of this button
+     */
+    private boolean isTargetInsideButton(Event event) {
+        Element to = event.getRelatedTarget();
+        return getElement().isOrHasChild(DOM.eventGetTarget(event))
+                && (to == null || !getElement().isOrHasChild(to));
+    }
+
     final void setHovering(boolean hovering) {
         if (hovering != isHovering()) {
             isHovering = hovering;
diff --git a/uitest/src/com/vaadin/tests/components/button/ButtonClick.java b/uitest/src/com/vaadin/tests/components/button/ButtonClick.java
new file mode 100644
index 0000000000..30692649c5
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/button/ButtonClick.java
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.button;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Alignment;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.VerticalLayout;
+
+public class ButtonClick extends AbstractTestUI {
+
+    public final static String SUCCESS_TEXT = "Click received succesfully!";
+    public final static String WRONG_BUTTON_TEXT = "Wrong button clicked.";
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        final VerticalLayout rootLayout = new VerticalLayout();
+        final Label statusLabel = new Label("Test initialized");
+        rootLayout.addComponent(new Button("Click here", new ClickListener() {
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                statusLabel.setValue(SUCCESS_TEXT);
+            }
+
+        }));
+        Button visitLocation = new Button("Drag here", new ClickListener() {
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                statusLabel.setValue(WRONG_BUTTON_TEXT);
+            }
+
+        });
+        rootLayout.addComponent(statusLabel);
+        rootLayout.addComponent(visitLocation);
+        rootLayout.setComponentAlignment(visitLocation, Alignment.BOTTOM_RIGHT);
+        rootLayout.setSizeFull();
+        rootLayout.setMargin(true);
+        setContent(rootLayout);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Verify button click logic";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 13550;
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/components/button/ButtonClickTest.java b/uitest/src/com/vaadin/tests/components/button/ButtonClickTest.java
new file mode 100644
index 0000000000..77b35092de
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/button/ButtonClickTest.java
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2000-2013 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.button;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ButtonClickTest extends MultiBrowserTest {
+
+    @Test
+    public void buttonMouseDownOutOverUp() {
+        openTestURL();
+
+        WebElement clickedButton = vaadinElement("/VVerticalLayout[0]/VButton[0]");
+        WebElement visitedButton = vaadinElement("/VVerticalLayout[0]/VButton[1]");
+
+        new Actions(driver).moveToElement(clickedButton).clickAndHold()
+                .moveToElement(visitedButton).moveToElement(clickedButton)
+                .release().perform();
+
+        assertEquals(ButtonClick.SUCCESS_TEXT,
+                vaadinElement("/VVerticalLayout[0]/VLabel[0]").getText());
+    }
+}

path: root/apps/settings/src/components/Encryption/EncryptionSettings.vue

<!--
  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<script setup lang="ts">
import type { OCSResponse } from '@nextcloud/typings/ocs'
import { showError, spawnDialog } from '@nextcloud/dialogs'
import { loadState } from '@nextcloud/initial-state'
import { t } from '@nextcloud/l10n'
import { confirmPassword } from '@nextcloud/password-confirmation'
import { generateOcsUrl } from '@nextcloud/router'
import { ref } from 'vue'
import { textExistingFilesNotEncrypted } from './sharedTexts.ts'

import axios from '@nextcloud/axios'
import logger from '../../logger.ts'

import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
import EncryptionWarningDialog from './EncryptionWarningDialog.vue'

interface EncryptionModule {
	default?: boolean
	displayName: string
}

const allEncryptionModules = loadState<never[]|Record<string, EncryptionModule>>('settings', 'encryption-modules')
/** Available encryption modules on the backend */
const encryptionModules = Array.isArray(allEncryptionModules) ? [] : Object.entries(allEncryptionModules).map(([id, module]) => ({ ...module, id }))
/** ID of the default encryption module */
const defaultCheckedModule = encryptionModules.find((module) => module.default)?.id

/** Is the server side encryptio ready to be enabled */
const encryptionReady = loadState<boolean>('settings', 'encryption-ready')
/** Are external backends enabled (legacy ownCloud stuff) */
const externalBackendsEnabled = loadState<boolean>('settings', 'external-backends-enabled')
/** URL to the admin docs */
const encryptionAdminDoc = loadState<string>('settings', 'encryption-admin-doc')

/** Is the encryption enabled */
const encryptionEnabled = ref(loadState<boolean>('settings', 'encryption-enabled'))

/** Loading state while enabling encryption (e.g. because the confirmation dialog is open) */
const loadingEncryptionState = ref(false)

/**
 * Open the encryption-enabling warning (spawns a dialog)
 * @param enabled The enabled state of encryption
 */
function displayWarning(enabled: boolean) {
	if (loadingEncryptionState.value || enabled === false) {
		return
	}

	loadingEncryptionState.value = true
	spawnDialog(EncryptionWarningDialog, {}, async (confirmed) => {
		try {
			if (confirmed) {
				await enableEncryption()
			}
		} finally {
			loadingEncryptionState.value = false
		}
	})
}

/**
 * Update an encryption setting on the backend
 * @param key The setting to update
 * @param value The new value
 */
async function update(key: string, value: string) {
	await confirmPassword()

	const url = generateOcsUrl('/apps/provisioning_api/api/v1/config/apps/{appId}/{key}', {
		appId: 'core',
		key,
	})

	try {
		const { data } = await axios.post<OCSResponse>(url, {
			value,
		})
		if (data.ocs.meta.status !== 'ok') {
			throw new Error('Unsuccessful OCS response', { cause: data.ocs })
		}
	} catch (error) {
		showError(t('settings', 'Unable to update server side encryption config'))
		logger.error('Unable to update server side encryption config', { error })
		return false
	}
	return true
}

/**
 * Choose the default encryption module
 */
async function checkDefaultModule(): Promise<void> {
	if (defaultCheckedModule) {
		await update('default_encryption_module', defaultCheckedModule)
	}
}

/**
 * Enable encryption - sends an async POST request
 */
async function enableEncryption(): Promise<void> {
	encryptionEnabled.value = await update('encryption_enabled', 'yes')
}
</script>

<template>
	<NcSettingsSection :name="t('settings', 'Server-side encryption')"
		:description="t('settings', 'Server-side encryption makes it possible to encrypt files which are uploaded to this server. This comes with limitations like a performance penalty, so enable this only if needed.')"
		:doc-url="encryptionAdminDoc">
		<NcNoteCard v-if="encryptionEnabled" type="info">
			<p>
				{{ textExistingFilesNotEncrypted }}
				{{ t('settings', 'To encrypt all existing files run this OCC command:') }}
			</p>
			<code>
				<pre>occ encryption:encrypt-all</pre>
			</code>
		</NcNoteCard>

		<NcCheckboxRadioSwitch :class="{ disabled: encryptionEnabled }"
			:checked="encryptionEnabled"
			:aria-disabled="encryptionEnabled ? 'true' : undefined"
			:aria-describedby="encryptionEnabled ? 'server-side-encryption-disable-hint' : undefined"
			:loading="loadingEncryptionState"
			type="switch"
			@update:checked="displayWarning">
			{{ t('settings', 'Enable server-side encryption') }}
		</NcCheckboxRadioSwitch>
		<p v-if="encryptionEnabled" id="server-side-encryption-disable-hint" class="disable-hint">
			{{ t('settings', 'Disabling server side encryption is only possible using OCC, please refer to the documentation.') }}
		</p>

		<NcNoteCard v-if="encryptionModules.length === 0"
			type="warning"
			:text="t('settings', 'No encryption module loaded, please enable an encryption module in the app menu.')" />

		<template v-else-if="encryptionEnabled">
			<div v-if="encryptionReady && encryptionModules.length > 0">
				<h3>{{ t('settings', 'Select default encryption module:') }}</h3>
				<fieldset>
					<NcCheckboxRadioSwitch v-for="module in encryptionModules"
						:key="module.id"
						:checked.sync="defaultCheckedModule"
						:value="module.id"
						type="radio"
						name="default_encryption_module"
						@update:checked="checkDefaultModule">
						{{ module.displayName }}
					</NcCheckboxRadioSwitch>
				</fieldset>
			</div>

			<div v-else-if="externalBackendsEnabled">
				{{
					t(
						'settings',
						'You need to migrate your encryption keys from the old encryption (ownCloud <= 8.0) to the new one. Please enable the "Default encryption module" and run {command}',
						{ command: '"occ encryption:migrate"' },
					)
				}}
			</div>
		</template>
	</NcSettingsSection>
</template>

<style scoped>
code {
	background-color: var(--color-background-dark);
	color: var(--color-main-text);

	display: block;
	margin-block-start: 0.5rem;
	padding: .25lh .5lh;
	width: fit-content;
}

.disabled {
	opacity: .75;
}

.disabled :deep(*) {
	cursor: not-allowed !important;
}

.disable-hint {
	color: var(--color-text-maxcontrast);
	padding-inline-start: 10px;
}
</style>