Add password reset countdown

Author: koldakov

static/js/password-change.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const countdownEl = document.getElementById("reset-password-countdown");
+  if (!countdownEl) return;
+
+  startCountdown(countdownEl);
+});
+
+function startCountdown(element) {
+  const token = new URLSearchParams(window.location.search).get("sig");
+  const payload = JSON.parse(atob(token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+
+  const BUFFER_MS = 1000;
+  const exp = payload.exp * 1000 + BUFFER_MS;
+
+  const interval = setInterval(() => updateCountdown(element, exp, interval), 1000);
+
+  updateCountdown(element, exp, interval);
+}
+
+function updateCountdown(element, exp, interval) {
+  const remaining = Math.max(0, Math.floor((exp - Date.now()) / 1000));
+  const minutes = Math.floor(remaining / 60);
+  const seconds = remaining % 60;
+
+  element.textContent = `${String(minutes).padStart(2,"0")}:${String(seconds).padStart(2,"0")}`;
+
+  if (remaining <= 0) {
+    element.textContent = "00:00";
+    clearInterval(interval);
+    setTimeout(() => location.reload(), 50);
+  }
+}

templates/auth.html

@@ -4,15 +4,15 @@
 
 {% block title %}Sign In{% endblock %}
 
-{% block extra_styles %}{% endblock %}
-
-{% block main_info %}
-<link
-  href="{{ relative_path_for('static', path='/css/auth.css') }}"
-  rel="stylesheet"
-/>
+{% block extra_styles %}
+  <link
+    href="{{ relative_path_for('static', path='/css/auth.css') }}"
+    rel="stylesheet"
+  />
 {% endblock %}
 
+{% block main_info %}{% endblock %}
+
 {% block main_content %}
 <div
   class="container"

templates/password_change.html

@@ -4,13 +4,15 @@
 
 {% block title %}Password Reset{% endblock %}
 
-{% block main_info %}
-<link
-  href="{{ relative_path_for('static', path='/css/auth.css') }}"
-  rel="stylesheet"
-/>
+{% block extra_styles %}
+  <link
+    href="{{ relative_path_for('static', path='/css/auth.css') }}"
+    rel="stylesheet"
+  />
 {% endblock %}
 
+{% block main_info %}{% endblock %}
+
 {% block main_content %}
   <div
     class="container"
@@ -83,7 +85,7 @@
           <p
             class="auth-warning"
           >
-            The link is valid for 15 minutes.
+            This reset link expires in <span id="reset-password-countdown">15:00</span>.
           </p>
         {% else %}
           <p
@@ -101,3 +103,9 @@
     </div>
   </div>
 {% endblock %}
+
+{% block extra_scripts %}
+  <script
+    src="{{ relative_path_for('static', path='/js/password-change.js') }}"
+  ></script>
+{% endblock %}