diff --git a/frontend/registration.html b/frontend/registration.html index 047a3b79..cefc3205 100644 --- a/frontend/registration.html +++ b/frontend/registration.html @@ -14,6 +14,7 @@ + @@ -30,7 +31,7 @@

Join the Leaderboard

your peers!

-
+
Join the Leaderboard placeholder="Enter your full name" required /> +
@@ -58,6 +60,7 @@

Join the Leaderboard

This should match your username on leetcode.com/u/username +
@@ -357,6 +360,43 @@

Join the Leaderboard

form.addEventListener("submit", async (e) => { e.preventDefault(); + const nameVal = document.getElementById("name").value.trim(); + const leetcodeVal = document + .getElementById("leetcodeId") + .value.trim(); + + // First, clear any previous error states + const nameInput = document.getElementById("name"); + const leetcodeInput = document.getElementById("leetcodeId"); + + const nameTarget = + nameInput.closest(".form-input-bash-wrapper") || nameInput; + const leetcodeTarget = + leetcodeInput.closest(".form-input-bash-wrapper") || leetcodeInput; + + const nameError = document.getElementById("name-error"); + const leetcodeError = document.getElementById("username-error"); + + nameTarget.classList.remove("input-error"); + leetcodeTarget.classList.remove("input-error"); + nameError.textContent = ""; + leetcodeError.textContent = ""; + + // Force DOM reflow to restart shake animation + void nameTarget.offsetWidth; + void leetcodeTarget.offsetWidth; + + if (!nameVal) { + nameError.textContent = "$ Error: Full name is required_"; + nameTarget.classList.add("input-error"); + } + if (!leetcodeVal) { + leetcodeError.textContent = + "$ Error: LeetCode username is required_"; + leetcodeTarget.classList.add("input-error"); + } + + if (!nameVal || !leetcodeVal) return; // Hide form fields and show execution log const fieldsets = form.querySelectorAll(".form-group"); diff --git a/frontend/styles/main.css b/frontend/styles/main.css index 8f933711..ea0122ec 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -1984,6 +1984,39 @@ body::-webkit-scrollbar-thumb { background: #000; } +.error-msg { + color: #ff4444; + font-family: "Courier New", monospace; + font-size: 0.8rem; + display: block; + margin-top: 5px; +} + +/* Input Error State */ +.input-error { + animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; +} + +/* Shake Animation */ +@keyframes shake { + 10%, + 90% { + transform: translate3d(-1px, 0, 0); + } + 20%, + 80% { + transform: translate3d(2px, 0, 0); + } + 30%, + 50%, + 70% { + transform: translate3d(-4px, 0, 0); + } + 40%, + 60% { + transform: translate3d(4px, 0, 0); + } +} /* ── Tooltip ── */ .score-header { display: flex;