Change stuff

public/css/style.css

@@ -434,20 +434,6 @@ button.danger {
 	font-size: 14px;
 }
 
-.input-with-button {
-	display: flex;
-	gap: 8px;
-}
-
-.input-with-button input {
-	flex: 1;
-	margin-bottom: 0;
-}
-
-.input-with-button button {
-	white-space: nowrap;
-}
-
 .field-hint {
 	display: block;
 	font-size: 12px;

public/dashboard/index.html

@@ -206,10 +206,7 @@
 					</div>
 					<div class="field-group" id="acl-data-group">
 						<label for="acl-data">User ID</label>
-						<div class="input-with-button">
+						<input type="text" id="acl-data" placeholder="User id or username">
-							<input type="text" id="acl-data">
-							<button type="button" class="secondary" id="acl-data-lookup-btn">Look up username</button>
-						</div>
 						<span class="field-hint hidden" id="acl-data-hint"></span>
 					</div>
 					<div class="field-group hidden" id="acl-group-id-group">
@@ -273,10 +270,7 @@
 					</div>
 					<div class="field-group" id="group-member-data-group">
 						<label for="group-member-data">User ID</label>
-						<div class="input-with-button">
+						<input type="text" id="group-member-data" placeholder="User id or username">
-							<input type="text" id="group-member-data">
-							<button type="button" class="secondary" id="group-member-data-lookup-btn">Look up username</button>
-						</div>
 						<span class="field-hint hidden" id="group-member-data-hint"></span>
 					</div>
 					<div class="field-group hidden" id="group-member-group-id-group">

public/js/dashboard.js

@@ -545,45 +545,38 @@ function formatRobloxUserId(userId) {
 	return escapeHtml(userId);
 }
 
-// Wires up a "Look up username" button next to a User ID input: on click, prompts for a username,
+// Wires up a User ID input so it accepts either a plain numeric id or a Roblox username: on blur,
-// resolves it via the Roblox API, fills the input with the id, and shows a status hint.
+// if the current value isn't purely digits, it's treated as a username, resolved to an id via the
-function setupUsernameLookupButton(buttonId, inputId, hintId) {
+// Roblox API, and the input is rewritten to hold the id (with a status hint shown either way).
-	const button = document.getElementById(buttonId);
+function setupUserIdField(inputId, hintId) {
 	const input = document.getElementById(inputId);
 	const hint = document.getElementById(hintId);
-	if (!button || !input) return;
+	if (!input || !hint) return;
 
-	button.addEventListener('click', async () => {
+	input.addEventListener('blur', async () => {
-		const username = prompt('Enter a Roblox username to look up its user id:');
+		const value = input.value.trim();
-		if (username === null) return;
-		if (!username.trim()) return;
-
-		const originalLabel = button.textContent;
-		button.textContent = 'Looking up...';
-		button.disabled = true;
 		hint.classList.add('hidden');
+		if (!value || /^\d+$/.test(value)) return; // Blank, or already a plain numeric id - nothing to resolve.
 
-		try {
+		hint.textContent = 'Looking up username...';
-			const userId = await lookupRobloxUsername(username);
+		hint.className = 'field-hint';
+		hint.classList.remove('hidden');
+
+		const userId = await lookupRobloxUsername(value);
 		if (userId) {
 			input.value = userId;
 			const user = robloxUserCache.get(userId);
 			hint.textContent = `Found: ${user.name} (id ${userId})`;
 			hint.className = 'field-hint success';
 		} else {
-				hint.textContent = `No Roblox user found with username "${username.trim()}"`;
+			hint.textContent = `No Roblox user found with username "${value}"`;
 			hint.className = 'field-hint error';
 		}
-			hint.classList.remove('hidden');
-		} finally {
-			button.textContent = originalLabel;
-			button.disabled = false;
-		}
 	});
 }
 
-setupUsernameLookupButton('acl-data-lookup-btn', 'acl-data', 'acl-data-hint');
+setupUserIdField('acl-data', 'acl-data-hint');
-setupUsernameLookupButton('group-member-data-lookup-btn', 'group-member-data', 'group-member-data-hint');
+setupUserIdField('group-member-data', 'group-member-data-hint');
 
 
 async function saveReader(readerId, card) {
@@ -1029,7 +1022,18 @@ document.getElementById('add-acl-form').addEventListener('submit', async (e) =>
 	const type = parseInt(document.getElementById('acl-type').value, 10);
 	let data;
 
-	if (type === 0 || type === 1) {
+	if (type === 0) {
+		data = document.getElementById('acl-data').value.trim();
+		if (!data) return;
+		if (!/^\d+$/.test(data)) {
+			const userId = await lookupRobloxUsername(data);
+			if (!userId) {
+				alert(`No Roblox user found with username "${data}"`);
+				return;
+			}
+			data = userId;
+		}
+	} else if (type === 1) {
 		data = document.getElementById('acl-data').value.trim();
 		if (!data) return;
 	} else if (type === 2 || type === 3) {
@@ -1230,7 +1234,18 @@ document.getElementById('add-group-member-form').addEventListener('submit', asyn
 	const type = parseInt(document.getElementById('group-member-type').value, 10);
 	let data;
 
-	if (type === 0 || type === 1) {
+	if (type === 0) {
+		data = document.getElementById('group-member-data').value.trim();
+		if (!data) return;
+		if (!/^\d+$/.test(data)) {
+			const userId = await lookupRobloxUsername(data);
+			if (!userId) {
+				alert(`No Roblox user found with username "${data}"`);
+				return;
+			}
+			data = userId;
+		}
+	} else if (type === 1) {
 		data = document.getElementById('group-member-data').value.trim();
 		if (!data) return;
 	} else if (type === 2 || type === 3) {