From b05f1a731d6a2ff8d774f8a12e05526d629d27d4 Mon Sep 17 00:00:00 2001
From: hyzen <hyzen@disroot.org>
Date: Sun, 7 Jun 2026 00:30:37 +0530
Subject: [PATCH] Fix: otp verification

---
 docs/css/auth-additions.css   |  69 -----------
 docs/signup/index.html        |  16 +--
 layouts/signup/single.html    | 212 ++++++++++++----------------------
 static/css/auth-additions.css |  69 -----------
 4 files changed, 80 insertions(+), 286 deletions(-)

diff --git a/docs/css/auth-additions.css b/docs/css/auth-additions.css
index f6e4094..9b8bbec 100644
--- a/docs/css/auth-additions.css
+++ b/docs/css/auth-additions.css
@@ -199,75 +199,6 @@
 	color: #fff;
 }
 
-/* ── OTP step indicator ─────────────────────────────────────────────────── */
-
-.otp-steps {
-	display: flex;
-	align-items: center;
-	margin-bottom: 1.6rem;
-}
-
-.otp-steps__line {
-	flex: 1;
-	height: 2px;
-	background: var(--background-color1, #ccc);
-	transition: background 0.25s ease;
-}
-
-.otp-steps__item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 0.3rem;
-}
-
-.otp-steps__num {
-	width: 1.8rem;
-	height: 1.8rem;
-	border-radius: 50%;
-	border: 2px solid var(--background-color1, #ccc);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 0.78rem;
-	font-weight: 700;
-	color: var(--foreground-color3, #888);
-	background: var(--background-color);
-	transition:
-		border-color 0.25s ease,
-		color 0.25s ease,
-		background 0.25s ease;
-}
-
-.otp-steps__label {
-	font-size: 0.7rem;
-	color: var(--foreground-color3, #888);
-	white-space: nowrap;
-	transition: color 0.25s ease;
-}
-
-/* Active step */
-.otp-steps__item--active .otp-steps__num {
-	border-color: var(--accent-color);
-	color: var(--accent-color);
-}
-
-.otp-steps__item--active .otp-steps__label {
-	color: var(--accent-color);
-	font-weight: 600;
-}
-
-/* Completed step */
-.otp-steps__item--done .otp-steps__num {
-	border-color: var(--accent-color);
-	background: var(--accent-color);
-	color: #fff;
-}
-
-.otp-steps__item--done .otp-steps__label {
-	color: var(--accent-color);
-}
-
 /* ── OTP panel ───────────────────────────────────────────────────────────── */
 
 .otp-panel__hint {
diff --git a/docs/signup/index.html b/docs/signup/index.html
index 7bf0661..894e300 100644
--- a/docs/signup/index.html
+++ b/docs/signup/index.html
@@ -5,20 +5,14 @@
 <a href=/signup/ class="auth-link auth-link--signup">Sign Up</a></div></div><div class=rss-subscribe><button class=rss-subscribe__btn aria-label="Subscribe via RSS" title="Subscribe via RSS">
 <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true"><path d="M6.18 15.64a2.18 2.18.0 012.18 2.18c0 1.19-.98 2.18-2.18 2.18C4.98 20 4 19.01 4 17.82a2.18 2.18.0 012.18-2.18M4 4.44A15.56 15.56.0 0119.56 20h-2.83A12.73 12.73.0 004 7.27V4.44m0 5.66a9.9 9.9.0 019.9 9.9h-2.83A7.07 7.07.0 004 12.93V10.1z"/></svg>
 <span>Subscribe</span></button><div class=rss-subscribe__dropdown><button class=rss-subscribe__item data-rss-url=https://freedoms4.org/index.xml>All updates</button>
-<button class=rss-subscribe__item data-rss-url=https://freedoms4.org/blog/index.xml>Blog posts</button></div></div></div></div><nav class="menu language"><ul class="menu__list language__list"><li class=menu__item><a class=menu__link href=/>Home</a></li><li class=menu__item><a class=menu__link href=/blog/>Blog</a></li><li class=menu__item><a class=menu__link href=/services/>Services</a></li><li class=menu__item><a class=menu__link href=/uninotes/>UniNotes</a></li><li class=menu__item><a class=menu__link href=/contact/>Contact</a></li></ul></nav></header><main class=main><div class=auth-page><h1 class=auth-page__title>Sign Up</h1><div class=auth-card><div id=auth-message class=auth-message aria-live=polite style=display:none></div><div class=otp-steps id=otp-steps aria-label="Sign-up steps"><div class="otp-steps__item otp-steps__item--active" id=step-ind-1><span class=otp-steps__num>1</span>
-<span class=otp-steps__label>Details</span></div><div class=otp-steps__line></div><div class=otp-steps__item id=step-ind-2><span class=otp-steps__num>2</span>
-<span class=otp-steps__label>Verify email</span></div><div class=otp-steps__line></div><div class=otp-steps__item id=step-ind-3><span class=otp-steps__num>3</span>
-<span class=otp-steps__label>Done</span></div></div><form id=signup-form class=auth-form novalidate><div class=auth-form__input-wrap><div class=auth-form__group><label class=auth-form__label for=signup-username>Username</label>
+<button class=rss-subscribe__item data-rss-url=https://freedoms4.org/blog/index.xml>Blog posts</button></div></div></div></div><nav class="menu language"><ul class="menu__list language__list"><li class=menu__item><a class=menu__link href=/>Home</a></li><li class=menu__item><a class=menu__link href=/blog/>Blog</a></li><li class=menu__item><a class=menu__link href=/services/>Services</a></li><li class=menu__item><a class=menu__link href=/uninotes/>UniNotes</a></li><li class=menu__item><a class=menu__link href=/contact/>Contact</a></li></ul></nav></header><main class=main><div class=auth-page><h1 class=auth-page__title>Sign Up</h1><div class=auth-card><div id=auth-message class=auth-message aria-live=polite style=display:none></div><form id=signup-form class=auth-form novalidate><div class=auth-form__group><label class=auth-form__label for=signup-username>Username</label>
 <input class=auth-form__input type=text id=signup-username name=username autocomplete=username required minlength=3 maxlength=32 pattern=[a-zA-Z0-9_\-]+>
 <span class=auth-form__hint>(3-32 characters; letters, numbers, _ and - only)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-email>Email</label>
-<input class=auth-form__input type=email id=signup-email name=email autocomplete=email required></div><div class=auth-form__group><label class=auth-form__label for=signup-password>Password</label>
-<input class=auth-form__input type=password id=signup-password name=password autocomplete=new-password required minlength=8>
+<input class=auth-form__input type=email id=signup-email name=email autocomplete=email required></div><div class=auth-form__group><label class=auth-form__label for=signup-password>Password</label><div class=auth-form__input-wrap><input class=auth-form__input type=password id=signup-password name=password autocomplete=new-password required minlength=8>
 <button type=button class=auth-form__eye aria-label="Toggle password visibility" tabindex=-1>
 <svg class="eye-show" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76.0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66.0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
-<svg class="eye-hide" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:none"><path d="M12 7c2.76.0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4.0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55.0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65.0 1.66 1.34 3 3 3 .22.0.44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76.0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
-</button>
-<span class=auth-form__hint>(at least 8 characters)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-confirm>Confirm Password</label>
-<input class=auth-form__input type=password id=signup-confirm name=confirm_password autocomplete=new-password required></div></div><button type=submit class=auth-form__submit id=signup-submit>
+<svg class="eye-hide" viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style="display:none"><path d="M12 7c2.76.0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4.0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55.0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65.0 1.66 1.34 3 3 3 .22.0.44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76.0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg></button></div><span class=auth-form__hint>(at least 8 characters)</span></div><div class=auth-form__group><label class=auth-form__label for=signup-confirm>Confirm Password</label>
+<input class=auth-form__input type=password id=signup-confirm name=confirm_password autocomplete=new-password required></div><button type=submit class=auth-form__submit id=signup-submit>
 <span class=auth-form__submit-text>Send verification code</span>
 <span class=auth-form__submit-loader style=display:none><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" class="spin"><path d="M12 4V1L8 5l4 4V6c3.31.0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31.0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg></span></button></form><div id=otp-panel style=display:none><p class=otp-panel__hint>A 6-digit code was sent to <strong id=otp-email-display></strong>.<br>Enter it below. The code expires in 10&nbsp;minutes.</p><div class=auth-form style=margin-top:1rem><div class=auth-form__group><label class=auth-form__label for=otp-input>Verification code</label>
 <input class="auth-form__input otp-panel__input" type=text id=otp-input inputmode=numeric maxlength=6 pattern=\d{6} placeholder=000000 autocomplete=one-time-code></div><button type=button class=auth-form__submit id=otp-submit>
@@ -27,4 +21,4 @@
 <button type=button id=otp-resend class=otp-panel__resend-btn>
 Resend code
 </button>
-<span id=otp-resend-timer style=display:none></span></p></div></div><p class=auth-card__footer>Already have an account? <a href=/login/ class=auth-card__link>Log in</a></p></div></div><script>(function(){var m,a="https://backend.freedoms4.org/auth.php",t={username:"",email:"",password:"",otpToken:null},i=document.getElementById("auth-message"),h=document.getElementById("signup-form"),p=document.getElementById("signup-submit"),f=document.getElementById("otp-panel"),b=document.getElementById("otp-email-display"),c=document.getElementById("otp-input"),o=document.getElementById("otp-submit"),n=document.getElementById("otp-resend"),r=document.getElementById("otp-resend-timer"),d=document.getElementById("signup-password"),u=h.querySelector(".auth-form__eye"),j=[document.getElementById("step-ind-1"),document.getElementById("step-ind-2"),document.getElementById("step-ind-3")];function e(e,t){i.textContent=e,i.className="auth-message auth-message--"+t,i.style.display="block"}function l(){i.style.display="none"}function s(e,t){e.disabled=t,e.querySelector(".auth-form__submit-text").style.display=t?"none":"",e.querySelector(".auth-form__submit-loader").style.display=t?"inline-flex":"none"}function g(e){j.forEach(function(t,n){t.classList.toggle("otp-steps__item--active",n+1===e),t.classList.toggle("otp-steps__item--done",n+1<e)})}u.addEventListener("click",function(){var e=d.type==="text";d.type=e?"password":"text",u.querySelector(".eye-show").style.display=e?"":"none",u.querySelector(".eye-hide").style.display=e?"none":""}),m=null;function v(e){n.style.display="none",r.style.display="";var t=e;r.textContent="Resend in "+t+"s",m=setInterval(function(){t--,t<=0?(clearInterval(m),r.style.display="none",n.style.display=""):r.textContent="Resend in "+t+"s"},1e3)}h.addEventListener("submit",function(n){n.preventDefault(),l();var r=document.getElementById("signup-username").value.trim(),o=document.getElementById("signup-email").value.trim(),i=d.value,u=document.getElementById("signup-confirm").value;if(!r||!o||!i||!u){e("Please fill in all fields.","error");return}if(!/^[a-zA-Z0-9_-]{3,32}$/.test(r)){e("Username must be 3–32 characters: letters, numbers, _ or -.","error");return}if(i.length<8){e("Password must be at least 8 characters.","error");return}if(i!==u){e("Passwords do not match.","error");return}t.username=r,t.email=o,t.password=i,s(p,!0),fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"send_otp",email:o})}).then(function(e){return e.json()}).then(function(t){t.success?(h.style.display="none",b.textContent=o,f.style.display="",c.value="",c.focus(),g(2),v(60),e("Code sent! Check your inbox (and spam folder).","success")):e(t.message||"Failed to send code. Please try again.","error")}).catch(function(){e("Network error. Please try again.","error")}).finally(function(){s(p,!1)})}),n.addEventListener("click",function(){l(),n.disabled=!0,fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"send_otp",email:t.email})}).then(function(e){return e.json()}).then(function(t){t.success?(e("New code sent!","success"),v(60)):(e(t.message||"Could not resend. Please try again.","error"),n.disabled=!1)}).catch(function(){e("Network error. Please try again.","error"),n.disabled=!1})}),o.addEventListener("click",function(){l();var n=c.value.trim();if(!/^\d{6}$/.test(n)){e("Please enter the 6-digit code from your email.","error");return}s(o,!0),fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"verify_otp",email:t.email,otp:n})}).then(function(e){return e.json()}).then(function(n){if(!n.success){e(n.message||"Invalid or expired code.","error"),s(o,!1);return}return t.otpToken=n.otp_token,fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"signup",username:t.username,email:t.email,password:t.password,otp_token:t.otpToken})}).then(function(e){return e.json()}).then(function(t){t.success?(g(3),f.style.display="none",e("Account created! Redirecting to login…","success"),setTimeout(function(){window.location.href="/login/"},1800)):(e(t.message||"Sign-up failed. Please try again.","error"),s(o,!1))})}).catch(function(){e("Network error. Please try again.","error"),s(o,!1)})}),c.addEventListener("keydown",function(e){e.key==="Enter"&&o.click()})})()</script></main><footer class=footer><p class=footer__copyright-notice>&copy; <a href=https://freedoms4.org>freedoms4.org</a> <a href=/changelog/>Changelog</a></p><p class=footer__theme-info>Built with <a href=https://gohugo.io>Hugo</a> and based on <a href=https://github.com/CyrusYip/hugo-theme-yue>Yue</a> theme</p></footer><script>(function(){document.querySelectorAll(".menu__item").forEach(function(e){var t=e.querySelector("a");t&&t.getAttribute("href")==="/uninotes/"&&e.classList.add("menu__item--uninotes")})})()</script><script>(function(){var e=document.getElementById("theme-toggle");if(!e)return;function t(){var e=localStorage.getItem("theme");return e?e:window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"}function n(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e)}n(t()),e.addEventListener("click",function(){var e=document.documentElement.getAttribute("data-theme")||t();n(e==="dark"?"light":"dark")})})()</script><script>(function(){var t="https://backend.freedoms4.org/auth.php",e=localStorage.getItem("f4_username");if(!e)return;function n(e){var t,n,o,i,r,a=document.querySelector(".brand__auth");a&&(a.classList.add("brand__auth--loggedin"),t=document.createElement("div"),t.className="brand__auth-user",n=document.createElement("button"),n.className="brand__auth-user-btn",n.setAttribute("aria-label","Account menu"),r=document.createElement("span"),r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>',n.appendChild(r.firstChild),n.appendChild(document.createTextNode(" "+e)),i=document.createElement("div"),i.className="brand__auth-user-dropdown",o=document.createElement("button"),o.className="brand__auth-user-logout",o.textContent="Log Out",o.addEventListener("click",s),i.appendChild(o),t.appendChild(n),t.appendChild(i),a.appendChild(t),n.addEventListener("click",function(e){e.stopPropagation(),t.classList.toggle("is-open")}),document.addEventListener("click",function(){t.classList.remove("is-open")}))}function s(){fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"logout"})}).finally(function(){localStorage.removeItem("f4_username"),window.location.href="/"})}n(e)})()</script><script>(function(){var t,e=document.querySelector(".rss-subscribe");if(!e)return;t=e.querySelector(".rss-subscribe__btn"),t.addEventListener("click",function(t){t.stopPropagation(),e.classList.toggle("is-open")}),document.addEventListener("click",function(t){e.contains(t.target)||e.classList.remove("is-open")}),e.querySelectorAll(".rss-subscribe__item").forEach(function(t){t.addEventListener("click",function(n){n.stopPropagation();var s,o=t.getAttribute("data-rss-url"),a=t.textContent;function i(){t.textContent="Copied!",setTimeout(function(){t.textContent=a,e.classList.remove("is-open")},1200)}try{s=document.createElement("textarea"),s.value=o,s.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none;",document.body.appendChild(s),s.focus(),s.select(),document.execCommand("copy"),document.body.removeChild(s),i()}catch{navigator.clipboard&&navigator.clipboard.writeText(o).then(i).catch(function(){t.textContent=o})}})})})()</script></body></html>
\ No newline at end of file
+<span id=otp-resend-timer style=display:none></span></p></div></div><p class=auth-card__footer>Already have an account? <a href=/login/ class=auth-card__link>Log in</a></p></div></div><script>(function(){var m,d="https://backend.freedoms4.org/auth.php",t={username:"",email:"",password:""},i=document.getElementById("auth-message"),h=document.getElementById("signup-form"),f=document.getElementById("signup-submit"),b=document.getElementById("otp-panel"),v=document.getElementById("otp-email-display"),r=document.getElementById("otp-input"),o=document.getElementById("otp-submit"),n=document.getElementById("otp-resend"),a=document.getElementById("otp-resend-timer"),l=document.getElementById("signup-password"),c=h.querySelector(".auth-form__eye");function e(e,t){i.textContent=e,i.className="auth-message auth-message--"+t,i.style.display="block"}function u(){i.style.display="none"}function s(e,t){e.disabled=t,e.querySelector(".auth-form__submit-text").style.display=t?"none":"",e.querySelector(".auth-form__submit-loader").style.display=t?"inline-flex":"none"}c.addEventListener("click",function(){var e=l.type==="text";l.type=e?"password":"text",c.querySelector(".eye-show").style.display=e?"":"none",c.querySelector(".eye-hide").style.display=e?"none":""}),m=null;function p(e){n.style.display="none",a.style.display="";var t=e;a.textContent="Resend in "+t+"s",m=setInterval(function(){t--,t<=0?(clearInterval(m),a.style.display="none",n.style.display="",n.disabled=!1):a.textContent="Resend in "+t+"s"},1e3)}h.addEventListener("submit",function(n){n.preventDefault(),u();var a=document.getElementById("signup-username").value.trim(),o=document.getElementById("signup-email").value.trim(),i=l.value,c=document.getElementById("signup-confirm").value;if(!a||!o||!i||!c){e("Please fill in all fields.","error");return}if(!/^[a-zA-Z0-9_-]{3,32}$/.test(a)){e("Username must be 3–32 characters: letters, numbers, _ or -.","error");return}if(i.length<8){e("Password must be at least 8 characters.","error");return}if(i!==c){e("Passwords do not match.","error");return}t.username=a,t.email=o,t.password=i,s(f,!0),fetch(d,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"send_otp",email:o})}).then(function(e){return e.json()}).then(function(t){t.success?(h.style.display="none",v.textContent=o,b.style.display="",r.value="",r.focus(),p(60),e("Code sent! Check your inbox (and spam folder).","success")):e(t.message||"Failed to send code. Please try again.","error")}).catch(function(){e("Network error. Please try again.","error")}).finally(function(){s(f,!1)})}),n.addEventListener("click",function(){u(),n.disabled=!0,fetch(d,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"send_otp",email:t.email})}).then(function(e){return e.json()}).then(function(t){t.success?(e("New code sent!","success"),p(60)):(e(t.message||"Could not resend. Please try again.","error"),n.disabled=!1)}).catch(function(){e("Network error. Please try again.","error"),n.disabled=!1})});function g(){u();var n=r.value.trim();if(!/^\d{6}$/.test(n)){e("Please enter the 6-digit code from your email.","error");return}s(o,!0),fetch(d,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"signup",username:t.username,email:t.email,password:t.password,otp:n})}).then(function(e){return e.json()}).then(function(t){t.success?(e("Account created! Redirecting to login…","success"),setTimeout(function(){window.location.href="/login/"},1800)):(e(t.message||"Sign-up failed. Please try again.","error"),s(o,!1))}).catch(function(){e("Network error. Please try again.","error"),s(o,!1)})}o.addEventListener("click",g),r.addEventListener("keydown",function(e){e.key==="Enter"&&g()})})()</script></main><footer class=footer><p class=footer__copyright-notice>&copy; <a href=https://freedoms4.org>freedoms4.org</a> <a href=/changelog/>Changelog</a></p><p class=footer__theme-info>Built with <a href=https://gohugo.io>Hugo</a> and based on <a href=https://github.com/CyrusYip/hugo-theme-yue>Yue</a> theme</p></footer><script>(function(){document.querySelectorAll(".menu__item").forEach(function(e){var t=e.querySelector("a");t&&t.getAttribute("href")==="/uninotes/"&&e.classList.add("menu__item--uninotes")})})()</script><script>(function(){var e=document.getElementById("theme-toggle");if(!e)return;function t(){var e=localStorage.getItem("theme");return e?e:window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"}function n(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e)}n(t()),e.addEventListener("click",function(){var e=document.documentElement.getAttribute("data-theme")||t();n(e==="dark"?"light":"dark")})})()</script><script>(function(){var t="https://backend.freedoms4.org/auth.php",e=localStorage.getItem("f4_username");if(!e)return;function n(e){var t,n,o,i,r,a=document.querySelector(".brand__auth");a&&(a.classList.add("brand__auth--loggedin"),t=document.createElement("div"),t.className="brand__auth-user",n=document.createElement("button"),n.className="brand__auth-user-btn",n.setAttribute("aria-label","Account menu"),r=document.createElement("span"),r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/></svg>',n.appendChild(r.firstChild),n.appendChild(document.createTextNode(" "+e)),i=document.createElement("div"),i.className="brand__auth-user-dropdown",o=document.createElement("button"),o.className="brand__auth-user-logout",o.textContent="Log Out",o.addEventListener("click",s),i.appendChild(o),t.appendChild(n),t.appendChild(i),a.appendChild(t),n.addEventListener("click",function(e){e.stopPropagation(),t.classList.toggle("is-open")}),document.addEventListener("click",function(){t.classList.remove("is-open")}))}function s(){fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},credentials:"include",body:JSON.stringify({action:"logout"})}).finally(function(){localStorage.removeItem("f4_username"),window.location.href="/"})}n(e)})()</script><script>(function(){var t,e=document.querySelector(".rss-subscribe");if(!e)return;t=e.querySelector(".rss-subscribe__btn"),t.addEventListener("click",function(t){t.stopPropagation(),e.classList.toggle("is-open")}),document.addEventListener("click",function(t){e.contains(t.target)||e.classList.remove("is-open")}),e.querySelectorAll(".rss-subscribe__item").forEach(function(t){t.addEventListener("click",function(n){n.stopPropagation();var s,o=t.getAttribute("data-rss-url"),a=t.textContent;function i(){t.textContent="Copied!",setTimeout(function(){t.textContent=a,e.classList.remove("is-open")},1200)}try{s=document.createElement("textarea"),s.value=o,s.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none;",document.body.appendChild(s),s.focus(),s.select(),document.execCommand("copy"),document.body.removeChild(s),i()}catch{navigator.clipboard&&navigator.clipboard.writeText(o).then(i).catch(function(){t.textContent=o})}})})})()</script></body></html>
\ No newline at end of file
diff --git a/layouts/signup/single.html b/layouts/signup/single.html
index 0119454..5cb2ba6 100644
--- a/layouts/signup/single.html
+++ b/layouts/signup/single.html
@@ -5,59 +5,41 @@
 	<div class="auth-card">
 		<div id="auth-message" class="auth-message" aria-live="polite" style="display: none"></div>
 
-		<!-- ── Step indicator ─────────────────────────────────────────── -->
-		<div class="otp-steps" id="otp-steps" aria-label="Sign-up steps">
-			<div class="otp-steps__item otp-steps__item--active" id="step-ind-1">
-				<span class="otp-steps__num">1</span>
-				<span class="otp-steps__label">Details</span>
-			</div>
-			<div class="otp-steps__line"></div>
-			<div class="otp-steps__item" id="step-ind-2">
-				<span class="otp-steps__num">2</span>
-				<span class="otp-steps__label">Verify email</span>
-			</div>
-			<div class="otp-steps__line"></div>
-			<div class="otp-steps__item" id="step-ind-3">
-				<span class="otp-steps__num">3</span>
-				<span class="otp-steps__label">Done</span>
-			</div>
-		</div>
-
 		<!-- ── STEP 1 — Account details ───────────────────────────────── -->
 		<form id="signup-form" class="auth-form" novalidate>
-			<div class="auth-form__input-wrap">
-				<div class="auth-form__group">
-					<label class="auth-form__label" for="signup-username">Username</label>
-					<input
-						class="auth-form__input"
-						type="text"
-						id="signup-username"
-						name="username"
-						autocomplete="username"
-						required
-						minlength="3"
-						maxlength="32"
-						pattern="[a-zA-Z0-9_\-]+"
-					/>
-					<span class="auth-form__hint"
-						>(3-32 characters; letters, numbers, _ and - only)</span
-					>
-				</div>
+			<div class="auth-form__group">
+				<label class="auth-form__label" for="signup-username">Username</label>
+				<input
+					class="auth-form__input"
+					type="text"
+					id="signup-username"
+					name="username"
+					autocomplete="username"
+					required
+					minlength="3"
+					maxlength="32"
+					pattern="[a-zA-Z0-9_\-]+"
+				/>
+				<span class="auth-form__hint"
+					>(3-32 characters; letters, numbers, _ and - only)</span
+				>
+			</div>
 
-				<div class="auth-form__group">
-					<label class="auth-form__label" for="signup-email">Email</label>
-					<input
-						class="auth-form__input"
-						type="email"
-						id="signup-email"
-						name="email"
-						autocomplete="email"
-						required
-					/>
-				</div>
+			<div class="auth-form__group">
+				<label class="auth-form__label" for="signup-email">Email</label>
+				<input
+					class="auth-form__input"
+					type="email"
+					id="signup-email"
+					name="email"
+					autocomplete="email"
+					required
+				/>
+			</div>
 
-				<div class="auth-form__group">
-					<label class="auth-form__label" for="signup-password">Password</label>
+			<div class="auth-form__group">
+				<label class="auth-form__label" for="signup-password">Password</label>
+				<div class="auth-form__input-wrap">
 					<input
 						class="auth-form__input"
 						type="password"
@@ -99,20 +81,20 @@
 							/>
 						</svg>
 					</button>
-					<span class="auth-form__hint">(at least 8 characters)</span>
 				</div>
+				<span class="auth-form__hint">(at least 8 characters)</span>
+			</div>
 
-				<div class="auth-form__group">
-					<label class="auth-form__label" for="signup-confirm">Confirm Password</label>
-					<input
-						class="auth-form__input"
-						type="password"
-						id="signup-confirm"
-						name="confirm_password"
-						autocomplete="new-password"
-						required
-					/>
-				</div>
+			<div class="auth-form__group">
+				<label class="auth-form__label" for="signup-confirm">Confirm Password</label>
+				<input
+					class="auth-form__input"
+					type="password"
+					id="signup-confirm"
+					name="confirm_password"
+					autocomplete="new-password"
+					required
+				/>
 			</div>
 
 			<button type="submit" class="auth-form__submit" id="signup-submit">
@@ -194,15 +176,8 @@
 	(function () {
 		var BACKEND = 'https://backend.freedoms4.org/auth.php';
 
-		// ── State ──────────────────────────────────────────────────────
-		var state = {
-			username: '',
-			email: '',
-			password: '',
-			otpToken: null,
-		};
+		var state = { username: '', email: '', password: '' };
 
-		// ── DOM refs ───────────────────────────────────────────────────
 		var msgBox = document.getElementById('auth-message');
 		var signupForm = document.getElementById('signup-form');
 		var signupSubmit = document.getElementById('signup-submit');
@@ -215,13 +190,6 @@
 		var pwdInput = document.getElementById('signup-password');
 		var eyeBtn = signupForm.querySelector('.auth-form__eye');
 
-		var stepInds = [
-			document.getElementById('step-ind-1'),
-			document.getElementById('step-ind-2'),
-			document.getElementById('step-ind-3'),
-		];
-
-		// ── Helpers ────────────────────────────────────────────────────
 		function showMsg(text, type) {
 			msgBox.textContent = text;
 			msgBox.className = 'auth-message auth-message--' + type;
@@ -231,22 +199,15 @@
 			msgBox.style.display = 'none';
 		}
 
-		function setLoading(btn, loading) {
-			btn.disabled = loading;
-			btn.querySelector('.auth-form__submit-text').style.display = loading ? 'none' : '';
-			btn.querySelector('.auth-form__submit-loader').style.display = loading
+		function setLoading(btn, on) {
+			btn.disabled = on;
+			btn.querySelector('.auth-form__submit-text').style.display = on ? 'none' : '';
+			btn.querySelector('.auth-form__submit-loader').style.display = on
 				? 'inline-flex'
 				: 'none';
 		}
 
-		function setStep(n) {
-			stepInds.forEach(function (el, i) {
-				el.classList.toggle('otp-steps__item--active', i + 1 === n);
-				el.classList.toggle('otp-steps__item--done', i + 1 < n);
-			});
-		}
-
-		// ── Password eye toggle ────────────────────────────────────────
+		// Password eye toggle
 		eyeBtn.addEventListener('click', function () {
 			var isText = pwdInput.type === 'text';
 			pwdInput.type = isText ? 'password' : 'text';
@@ -254,26 +215,27 @@
 			eyeBtn.querySelector('.eye-hide').style.display = isText ? 'none' : '';
 		});
 
-		// ── Resend cooldown ────────────────────────────────────────────
-		var resendTimeout = null;
+		// Resend cooldown
+		var resendInterval = null;
 		function startResendCooldown(seconds) {
 			otpResendBtn.style.display = 'none';
 			otpResendTimer.style.display = '';
 			var remaining = seconds;
 			otpResendTimer.textContent = 'Resend in ' + remaining + 's';
-			resendTimeout = setInterval(function () {
+			resendInterval = setInterval(function () {
 				remaining--;
 				if (remaining <= 0) {
-					clearInterval(resendTimeout);
+					clearInterval(resendInterval);
 					otpResendTimer.style.display = 'none';
 					otpResendBtn.style.display = '';
+					otpResendBtn.disabled = false;
 				} else {
 					otpResendTimer.textContent = 'Resend in ' + remaining + 's';
 				}
 			}, 1000);
 		}
 
-		// ── STEP 1 submit — validate + send_otp ───────────────────────
+		// STEP 1 — validate fields and send OTP
 		signupForm.addEventListener('submit', function (e) {
 			e.preventDefault();
 			hideMsg();
@@ -320,13 +282,11 @@
 				})
 				.then(function (data) {
 					if (data.success) {
-						// Switch to OTP panel
 						signupForm.style.display = 'none';
 						otpEmailDisp.textContent = email;
 						otpPanel.style.display = '';
 						otpInput.value = '';
 						otpInput.focus();
-						setStep(2);
 						startResendCooldown(60);
 						showMsg('Code sent! Check your inbox (and spam folder).', 'success');
 					} else {
@@ -341,7 +301,7 @@
 				});
 		});
 
-		// ── Resend button ──────────────────────────────────────────────
+		// Resend
 		otpResendBtn.addEventListener('click', function () {
 			hideMsg();
 			otpResendBtn.disabled = true;
@@ -370,8 +330,8 @@
 				});
 		});
 
-		// ── STEP 2 submit — verify_otp then signup ────────────────────
-		otpSubmit.addEventListener('click', function () {
+		// STEP 2 — verify OTP and create account in one request
+		function doSignup() {
 			hideMsg();
 			var otp = otpInput.value.trim();
 
@@ -382,63 +342,41 @@
 
 			setLoading(otpSubmit, true);
 
-			// 2a. Verify OTP → get token
 			fetch(BACKEND, {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
 				credentials: 'include',
-				body: JSON.stringify({ action: 'verify_otp', email: state.email, otp: otp }),
+				body: JSON.stringify({
+					action: 'signup',
+					username: state.username,
+					email: state.email,
+					password: state.password,
+					otp: otp,
+				}),
 			})
 				.then(function (r) {
 					return r.json();
 				})
 				.then(function (data) {
-					if (!data.success) {
-						showMsg(data.message || 'Invalid or expired code.', 'error');
+					if (data.success) {
+						showMsg('Account created! Redirecting to login\u2026', 'success');
+						setTimeout(function () {
+							window.location.href = '/login/';
+						}, 1800);
+					} else {
+						showMsg(data.message || 'Sign-up failed. Please try again.', 'error');
 						setLoading(otpSubmit, false);
-						return;
 					}
-					state.otpToken = data.otp_token;
-
-					// 2b. Create account
-					return fetch(BACKEND, {
-						method: 'POST',
-						headers: { 'Content-Type': 'application/json' },
-						credentials: 'include',
-						body: JSON.stringify({
-							action: 'signup',
-							username: state.username,
-							email: state.email,
-							password: state.password,
-							otp_token: state.otpToken,
-						}),
-					})
-						.then(function (r) {
-							return r.json();
-						})
-						.then(function (d) {
-							if (d.success) {
-								setStep(3);
-								otpPanel.style.display = 'none';
-								showMsg('Account created! Redirecting to login\u2026', 'success');
-								setTimeout(function () {
-									window.location.href = '/login/';
-								}, 1800);
-							} else {
-								showMsg(d.message || 'Sign-up failed. Please try again.', 'error');
-								setLoading(otpSubmit, false);
-							}
-						});
 				})
 				.catch(function () {
 					showMsg('Network error. Please try again.', 'error');
 					setLoading(otpSubmit, false);
 				});
-		});
+		}
 
-		// Allow pressing Enter in OTP box to submit
+		otpSubmit.addEventListener('click', doSignup);
 		otpInput.addEventListener('keydown', function (e) {
-			if (e.key === 'Enter') otpSubmit.click();
+			if (e.key === 'Enter') doSignup();
 		});
 	})();
 </script>
diff --git a/static/css/auth-additions.css b/static/css/auth-additions.css
index f6e4094..9b8bbec 100644
--- a/static/css/auth-additions.css
+++ b/static/css/auth-additions.css
@@ -199,75 +199,6 @@
 	color: #fff;
 }
 
-/* ── OTP step indicator ─────────────────────────────────────────────────── */
-
-.otp-steps {
-	display: flex;
-	align-items: center;
-	margin-bottom: 1.6rem;
-}
-
-.otp-steps__line {
-	flex: 1;
-	height: 2px;
-	background: var(--background-color1, #ccc);
-	transition: background 0.25s ease;
-}
-
-.otp-steps__item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 0.3rem;
-}
-
-.otp-steps__num {
-	width: 1.8rem;
-	height: 1.8rem;
-	border-radius: 50%;
-	border: 2px solid var(--background-color1, #ccc);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 0.78rem;
-	font-weight: 700;
-	color: var(--foreground-color3, #888);
-	background: var(--background-color);
-	transition:
-		border-color 0.25s ease,
-		color 0.25s ease,
-		background 0.25s ease;
-}
-
-.otp-steps__label {
-	font-size: 0.7rem;
-	color: var(--foreground-color3, #888);
-	white-space: nowrap;
-	transition: color 0.25s ease;
-}
-
-/* Active step */
-.otp-steps__item--active .otp-steps__num {
-	border-color: var(--accent-color);
-	color: var(--accent-color);
-}
-
-.otp-steps__item--active .otp-steps__label {
-	color: var(--accent-color);
-	font-weight: 600;
-}
-
-/* Completed step */
-.otp-steps__item--done .otp-steps__num {
-	border-color: var(--accent-color);
-	background: var(--accent-color);
-	color: #fff;
-}
-
-.otp-steps__item--done .otp-steps__label {
-	color: var(--accent-color);
-}
-
 /* ── OTP panel ───────────────────────────────────────────────────────────── */
 
 .otp-panel__hint {