Add "forgot password" after logging in

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "fwdekker/death-notifier",
     "description": "Get notified when a famous person dies.",
-    "version": "0.19.8", "_comment_version": "Also update version in `package.json`!",
+    "version": "0.19.9", "_comment_version": "Also update version in `package.json`!",
     "type": "project",
     "license": "MIT",
     "homepage": "https://git.fwdekker.com/tools/death-notifier",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "death-notifier",
-    "version": "0.19.8", "_comment_version": "Also update version in `composer.json`!",
+    "version": "0.19.9", "_comment_version": "Also update version in `composer.json`!",
     "description": "Get notified when a famous person dies.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",

src/main/index.html

@@ -360,9 +360,18 @@
                         <label for="update-password-password-new-toggle">Show password</label>
                         <br /><br />
 
-                        <button id="updatePasswordButton">Change password</button>
+                        <button id="update-password-button">Change password</button>
+                    </form>
+                    <form id="forgot-password-after-login-form" novalidate>
+                        <article class="status-card hidden" data-status-for="forgot-password-after-login-form">
+                            <output></output>
+                            <a class="close" href="#" aria-label="Close"></a>
+                        </article>
+                        <input id="forgot-password-after-login-email" type="hidden" name="email" />
+                        <a role="button" id="forgot-password-after-login-button" class="outline" href="#">
+                            Forgot password?
+                        </a>
                     </form>
-                    <!-- TODO: Add forgot password button after logging in -->
                 </article>
 
                 <article>

src/main/js/Main.ts

@@ -175,11 +175,14 @@ function refreshUserData(): void {
             today.setHours(0, 0, 0, 0);
             const updateTime = new Date(userData.password_last_change * 1000);
             updateTime.setHours(0, 0, 0, 0);
-            const diff = (+today - +updateTime) / 86400000;
+            const diff = Math.round((+today - +updateTime) / 86400000);
             $("#password-last-changed").innerText =
                 diff === 0
                     ? "today"
                     : (diff === 1 ? "1 day ago" : diff + " days ago");
+
+            // Password reset after login
+            $("#forgot-password-after-login-email").value = userData.email;
         }
     );
 }
@@ -395,8 +398,10 @@ doAfterLoad(() => {
             sendPasswordResetForm,
             () => {
                 sendPasswordResetForm.reset();
-                // TODO: Clarify that email will be sent soon; don't say it has already been sent!
-                showMessageSuccess(sendPasswordResetForm, "Password reset email sent successfully!");
+                showMessageSuccess(
+                    sendPasswordResetForm,
+                    "An email with password reset instructions has been sent and should arrive within a few minutes."
+                );
             }
         );
     });
@@ -494,7 +499,10 @@ doAfterLoad(() => {
             resendEmailVerificationForm,
             () => {
                 refreshUserData();
-                showMessageSuccess(resendEmailVerificationForm, "Email verification resent successfully!");
+                showMessageSuccess(
+                    resendEmailVerificationForm,
+                    "An email with verification instructions has been sent and should arrive within a few minutes."
+                );
             }
         );
     });
@@ -547,7 +555,7 @@ doAfterLoad(() => {
                 showMessageSuccess(
                     updateEmailForm,
                     "Email address updated successfully! " +
-                    "Check your inbox for the verification email. " +
+                    "An email with verification instructions has been sent and should arrive within a few minutes. " +
                     "You will not receive notifications until you verify your email address."
                 );
             }
@@ -582,6 +590,32 @@ doAfterLoad(() => {
         clearFormValidity(updatePasswordForm);
     });
 
+    const forgotPasswordAfterLoginForm = $("#forgot-password-after-login-form");
+    $("#forgot-password-after-login-button").addEventListener("click", (event: MouseEvent) => {
+        event.preventDefault();
+
+        if (!window.confirm("Send an email to help reset your password?")) return;
+
+        postApi(
+            {
+                action: "send-password-reset",
+                token: csrfToken,
+                email: $("#forgot-password-after-login-email").value,
+            },
+            forgotPasswordAfterLoginForm,
+            () => {
+                showMessageSuccess(
+                    forgotPasswordAfterLoginForm,
+                    "An email with password reset instructions has been sent and should arrive within a few minutes."
+                );
+            }
+        );
+    });
+    logoutHandler.addListener(() => {
+        forgotPasswordAfterLoginForm.reset();
+        clearFormValidity(forgotPasswordAfterLoginForm);
+    });
+
 
     // Tracking management
     const queryInput = $("#filter-trackings-query");