Setting up the reset password page

cmd/web/handlers.go

@@ -335,12 +335,16 @@ func (app *application) ShowResetPassword(w http.ResponseWriter, r *http.Request
 		Secret: []byte(app.config.secretkey),
 	}
 	valid := signer.VerifyToken(testURL)
-	if valid {
-		w.Write([]byte("valid"))
-	} else {
-		w.Write([]byte("invalid"))
+	if !valid {
+		app.errorLog.Println("Invalid url - tampering detected")
+		return
+	}
+
+	data := make(map[string]interface{})
+	data["email"] = r.URL.Query().Get("email")
+	if err := app.renderTemplate(w, r, "reset-password", &templateData{
+		Data: data,
+	}); err != nil {
+		app.errorLog.Println(err)
 	}
-	// if err := app.renderTemplate(w, r, "reset-password", &templateData{}); err != nil {
-	// 	app.errorLog.Println(err)
-	// }
 }

cmd/web/templates/reset-password.page.gohtml

@@ -0,0 +1,51 @@
+{{template "base" .}}
+{{define "title"}}
+Reset Password
+{{end}}
+
+{{define "content"}}
+<div class="row">
+    <div class="col-md-6 offset-md-3">
+        <div class="alert alert-danger text-center d-none" id="reset-messages"></div>
+        <form action=""
+              method="post"
+              name="reset-form"
+              id="reset-form"
+              class="d-blick needs-validation"
+              autocomplete="off"
+              novalidate="">
+            <h2 class="mt-2 mb-3 text-center">Reset Password</h2>
+            <hr>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <input type="password"
+                       id="password"
+                       name="password"
+                       autocomplete="password-new"
+                       required=""
+                       class="form-control">
+            </div>
+            <div class="mb-3">
+                <label for="verify-password" class="form-label">Verify Password</label>
+                <input type="password"
+                       id="verify-password"
+                       name="verify-password"
+                       autocomplete="verify-password-new"
+                       required=""
+                       class="form-control">
+            </div>
+            <hr>
+            <a href="javascript:void(0)" id="reset-btn" class="btn btn-primary">Reset Password</a>
+        </form>
+    </div>
+</div>
+{{end}}
+{{define "js"}}
+<script type="module">
+    import {reset} from "/static/js/login.js"
+    document.getElementById("reset-btn").addEventListener("click", () => {
+        reset({{.API}});
+    })
+</script>
+{{end}}
+

static/js/login.js

@@ -80,3 +80,44 @@ export function forgot(api) {
             }
         });
 }
+
+export function reset(api) {
+    let form = document.getElementById("reset-form");
+
+    if (form.checkValidity() === false) {
+        // this.event.preventDefault();
+        // this.event.stopPropagation();
+        form.classList.add("was-validated");
+        return;
+    }
+    form.classList.add("was-validated");
+
+    if (document.getElementById("password").value !== document.getElementById("verify-password").value) {
+        showError("reset-messages", "Passwords do not match.")
+        return
+    }
+
+    let payload = {
+        email: document.getElementById("email").value,
+    };
+
+    const requestOptions = {
+        method: 'post',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+    };
+
+    fetch(api + "/api/reset-password", requestOptions)
+        .then(response => response.json())
+        .then(response => {
+            console.log(response)
+            if (response.error === false) {
+                showSuccess("reset-messages", "Password reset")
+            } else {
+                showError("reset-messages", response.message)
+            }
+        });
+}