Initial

web/js/src/ftpAccountHints.js

@@ -0,0 +1,54 @@
+import { debounce } from './helpers';
+
+// Attach event listeners to FTP account "Username" and "Path" fields to update their hints
+export default function handleFtpAccountHints() {
+	addHintListeners('.js-ftp-user', updateFtpUsernameHint);
+	addHintListeners('.js-ftp-path', updateFtpPathHint);
+}
+
+function addHintListeners(selector, updateHintFunction) {
+	document.querySelectorAll(selector).forEach((inputElement) => {
+		const currentValue = inputElement.value.trim();
+
+		if (currentValue !== '') {
+			updateHintFunction(inputElement, currentValue);
+		}
+
+		inputElement.addEventListener(
+			'input',
+			debounce((event) => updateHintFunction(event.target, event.target.value))
+		);
+	});
+}
+
+function updateFtpUsernameHint(usernameInput, username) {
+	const inputWrapper = usernameInput.parentElement;
+	const hintElement = inputWrapper.querySelector('.js-ftp-user-hint');
+
+	// Remove special characters
+	const sanitizedUsername = username.replace(/[^\w\d]/gi, '');
+
+	if (sanitizedUsername !== username) {
+		usernameInput.value = sanitizedUsername;
+	}
+
+	hintElement.textContent = Alpine.store('globals').USER_PREFIX + sanitizedUsername;
+}
+
+function updateFtpPathHint(pathInput, path) {
+	const inputWrapper = pathInput.parentElement;
+	const hintElement = inputWrapper.querySelector('.js-ftp-path-hint');
+	const normalizedPath = normalizePath(path);
+
+	hintElement.textContent = normalizedPath;
+}
+
+function normalizePath(path) {
+	// Add leading slash
+	if (path[0] !== '/') {
+		path = '/' + path;
+	}
+
+	// Remove double slashes
+	return path.replace(/\/(\/+)/g, '/');
+}