Login — Autocomplete Demo

Sign in

/* Simple responsive styles for the login page */ :root { --bg: #f6f8fb; --card: #ffffff; --accent: #2563eb; --muted: #6b7280; --border: #e6e9ef; --shadow: 0 6px 18px rgba(16,24,40,0.06); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; background: linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 420px; margin: 6vh auto; background: var(--card); padding: 28px; border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--border); } h1 { margin: 0 0 18px 0; font-size: 1.5rem; color: #0f172a; } .login-form { display: grid; gap: 12px; } label { display: block; font-size: 0.875rem; color: var(--muted); margin-bottom: 6px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: 0.95rem; } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; } .checkbox { font-size: 0.9rem; color: var(--muted); display: flex; align-items: center; gap: 8px; } .btn-primary { background: var(--accent); color: #fff; border: none; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; } .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); padding: 8px 12px; border-radius: 8px; cursor: pointer; margin-top: 12px; } .btn-secondary + .btn-secondary { margin-left: 8px; } .downloads { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); } /* Autocomplete dropdown */ .autocomplete-wrapper { position: relative; } .suggestions { list-style: none; margin: 6px 0 0 0; padding: 4px; position: absolute; left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow: auto; z-index: 30; box-shadow: 0 8px 24px rgba(15,23,42,0.06); } .suggestions li { padding: 10px 12px; cursor: pointer; font-size: 0.95rem; color: #0f172a; border-radius: 6px; } .suggestions li[aria-selected="true"], .suggestions li:hover { background: rgba(37,99,235,0.06); color: var(--accent); } /* small screens */ @media (max-width: 480px) { .container { margin: 4vh 12px; padding: 18px; } } /* Autocomplete + download helpers. Features: - Local suggestions stored in localStorage under "recentLogins" - Filtered suggestions dropdown with keyboard navigation - Submit form to add username to suggestions - Buttons to download suggestions JSON and current page HTML */ (function () { const STORAGE_KEY = "recentLogins"; const DEFAULT_SUGGESTIONS = [ "alice@example.com", "bob@example.com", "carol@example.com", "daniel@example.com" ]; // Elements const usernameInput = document.getElementById("username"); const suggestionsEl = document.getElementById("suggestions"); const loginForm = document.getElementById("loginForm"); const downloadDataBtn = document.getElementById("downloadData"); const downloadPageBtn = document.getElementById("downloadPage"); // State let suggestions = loadSuggestions(); let filtered = []; let selectedIndex = -1; function loadSuggestions() { try { const raw = localStorage.getItem(STORAGE_KEY); if (!raw) { localStorage.setItem(STORAGE_KEY, JSON.stringify(DEFAULT_SUGGESTIONS)); return DEFAULT_SUGGESTIONS.slice(); } const parsed = JSON.parse(raw); if (Array.isArray(parsed)) { return parsed; } } catch (e) { console.warn("Failed to load suggestions, using defaults.", e); } return DEFAULT_SUGGESTIONS.slice(); } function saveSuggestions() { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(suggestions)); } catch (e) { console.warn("Failed to save suggestions.", e); } } function updateSuggestionsList(items) { // Clear suggestionsEl.innerHTML = ""; if (!items || items.length === 0) { suggestionsEl.hidden = true; usernameInput.setAttribute("aria-expanded", "false"); return; } const fragment = document.createDocumentFragment(); items.forEach((item, idx) => { const li = document.createElement("li"); li.textContent = item; li.setAttribute("role", "option"); li.id = `suggestion-${idx}`; li.tabIndex = -1; li.setAttribute("aria-selected", "false"); li.addEventListener("click", () => { applySuggestion(item); }); fragment.appendChild(li); }); suggestionsEl.appendChild(fragment); suggestionsEl.hidden = false; usernameInput.setAttribute("aria-expanded", "true"); } function filterSuggestions(value) { const q = (value || "").trim().toLowerCase(); if (!q) { return suggestions.slice(0, 8); } return suggestions.filter(s => s.toLowerCase().includes(q)).slice(0, 8); } function applySuggestion(value) { usernameInput.value = value; closeSuggestions(); usernameInput.focus(); } function closeSuggestions() { suggestionsEl.hidden = true; usernameInput.setAttribute("aria-expanded", "false"); selectedIndex = -1; } function openSuggestionsForCurrent() { filtered = filterSuggestions(usernameInput.value); updateSuggestionsList(filtered); selectedIndex = -1; } // Keyboard navigation usernameInput.addEventListener("keydown", function (ev) { if (suggestionsEl.hidden) { if (ev.key === "ArrowDown") { // open suggestions openSuggestionsForCurrent(); ev.preventDefault(); } return; } const items = Array.from(suggestionsEl.querySelectorAll("li")); if (items.length === 0) return; if (ev.key === "ArrowDown") { selectedIndex = Math.min(selectedIndex + 1, items.length - 1); updateSelected(items); ev.preventDefault(); } else if (ev.key === "ArrowUp") { selectedIndex = Math.max(selectedIndex - 1, 0); updateSelected(items); ev.preventDefault(); } else if (ev.key === "Enter") { if (selectedIndex >= 0 && selectedIndex < items.length) { applySuggestion(items[selectedIndex].textContent); ev.preventDefault(); } } else if (ev.key === "Escape") { closeSuggestions(); } }); function updateSelected(items) { items.forEach((li, i) => { const isSelected = i === selectedIndex; li.setAttribute("aria-selected", isSelected ? "true" : "false"); if (isSelected) { // ensure visible li.scrollIntoView({ block: "nearest" }); } }); } // Input / focus events usernameInput.addEventListener("input", function () { openSuggestionsForCurrent(); }); usernameInput.addEventListener("focus", function () { openSuggestionsForCurrent(); }); document.addEventListener("click", function (ev) { if (!document.querySelector(".autocomplete-wrapper").contains(ev.target)) { closeSuggestions(); } }); // Form submit loginForm.addEventListener("submit", function (ev) { ev.preventDefault(); const username = usernameInput.value.trim(); if (!username) { alert("Please enter your username or email."); usernameInput.focus(); return; } // Add to recent suggestions if not present (keep most recent first) const idx = suggestions.findIndex(s => s.toLowerCase() === username.toLowerCase()); if (idx !== -1) { // move to front suggestions.splice(idx, 1); } suggestions.unshift(username); // keep a reasonable limit suggestions = suggestions.slice(0, 50); saveSuggestions(); // Simulate successful login alert("Form submitted (demo). Username saved to local suggestions."); closeSuggestions(); }); // Download autocomplete data as JSON downloadDataBtn.addEventListener("click", function () { const data = JSON.stringify({ suggestions: suggestions }, null, 2); downloadBlob(data, "application/json", "autocomplete-data.json"); }); // Download current page HTML downloadPageBtn.addEventListener("click", function () { const html = "\n" + document.documentElement.outerHTML; downloadBlob(html, "text/html", "login-page.html"); }); function downloadBlob(content, mime, filename) { const blob = new Blob([content], { type: mime + ";charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 5000); } // Initialize UI updateSuggestionsList(suggestions.slice(0, 8)); })();