Change password form

TEKDB/TEKDB/urls.py

@@ -35,7 +35,11 @@
 
 
 urlpatterns = [
-    # url(r'^login/', include('login.urls')),
+    path(
+        "change_password/",
+        login_views.TEKDBPasswordChangeView.as_view(),
+        name="change_password",
+    ),
     path("admin/filebrowser/", tekdb_filebrowser.urls),
     path("login/", login_views.login, name="login"),
     path("login_async/", login_views.login_async, name="login_async"),

TEKDB/explore/static/explore/css/forms.css

@@ -2,10 +2,6 @@
   text-align: center;
 }
 
-.registration-form .helptext {
-  visibility: hidden;
-}
-
 input[type="text"],
 .form-control,
 input[type="password"] {

TEKDB/explore/static/explore/js/modals.js

@@ -4,7 +4,7 @@ $("#loginModal").on("shown.bs.modal", function () {
   const LOGIN_ERROR_MESSAGE = "Invalid username or password";
   loginForm.addEventListener("submit", function (event) {
     event.preventDefault();
-    var signIn = account.signIn(event, this, function (success) {
+    account.signIn(event, this, function (success) {
       if (success) {
         $("#loginModal").modal("hide");
         const exploreLink = document.querySelector(".nav-explore");
@@ -19,3 +19,70 @@ $("#loginModal").on("shown.bs.modal", function () {
     });
   });
 });
+
+$("#changePasswordModal").on("shown.bs.modal", function () {
+  const changePasswordForm = document.querySelector("#changePasswordModal form");
+
+  changePasswordForm.addEventListener("submit", function (event) {
+    event.preventDefault();
+    account.changePassword(event, this, function (response) {
+      if (response.success) {
+        // clear any previous error messages
+        const errorLists = document.querySelectorAll("#changePasswordModal ul");
+        if (errorLists.length) {
+           errorLists.forEach((list) => list.remove());
+        }
+        // clear any previous success message
+        const previousSuccessMessage = document.querySelector("#changePasswordSuccessMessage");
+        if (!previousSuccessMessage) {
+          // display success message
+          const successMessage = document.createElement("p");
+          successMessage.setAttribute("id", "changePasswordSuccessMessage");
+          successMessage.textContent = "Password successfully changed!";
+          successMessage.setAttribute("style", "color: green;");
+          successMessage.setAttribute("class", "m-0");
+
+          // insert success message after submit button
+          const submitButton = changePasswordForm.querySelector('#changePasswordSubmit');
+          submitButton.after(successMessage);
+        }
+
+        // reset form
+        changePasswordForm.reset();
+      } else {
+        // display error messages
+        for (const elementId in response.data.data) {
+          const errorList = document.createElement("ul");
+          const erroredInput = document.querySelector(`#${elementId}`);
+          erroredInput.after(errorList);
+          erroredInput.setAttribute("style", "border-color: red;");
+          if (response.data.data[elementId].length > 0) {
+            for (const error in response.data.data[elementId]) {
+              const listItem = document.createElement("li");
+              listItem.textContent = response.data.data[elementId][error];
+              errorList.appendChild(listItem);
+            }
+
+          }
+        }
+      }
+    });
+  });
+});
+
+$("#changePasswordModal").on("hidden.bs.modal", function () {
+  // clear error messages
+  const errorLists = document.querySelectorAll("#changePasswordModal ul");
+  errorLists.forEach((list) => list.remove());
+  // reset input border color
+  const passwordInputs = document.querySelectorAll("#changePasswordModal input[type='password']");
+  passwordInputs.forEach((input) => input.setAttribute("style", ""));
+  // clear form
+  document.querySelector("#changePasswordModal form").reset();
+  // clear success message
+  const successMessage = document.querySelector("#changePasswordSuccessMessage");
+
+  if (successMessage) {
+    successMessage.remove();
+  }
+});

TEKDB/explore/templates/modals.html

@@ -15,35 +15,32 @@ <h4 class="modal-title" id="loginModalLabel">Please Log In</h4>
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
-        ></button>
+        ><i class="bi bi-x-lg text-light"></i></button>
       </div>
       <div class="modal-body">{% include 'registration/login.html' %}</div>
     </div>
   </div>
 </div>
 
-{% comment %}
-<!-- Results Map -->
 <div
   class="modal fade"
-  id="resultsMapModal"
+  id="changePasswordModal"
   tabindex="-1"
   role="dialog"
-  aria-labelledby="resultsMapModalLabel"
+  aria-labelledby="changePasswordModalLabel"
 >
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title" id="resultsMapModalLabel">Results Map</h4>
+        <h4 class="modal-title" id="changePasswordModalLabel">Change Password</h4>
         <button
           type="button"
           class="btn-close"
           data-bs-dismiss="modal"
           aria-label="Close"
-        ></button>
+        ><i class="bi bi-x-lg text-light"></i></button>
       </div>
-      <div class="modal-body">{% include 'results_map.html' %}</div>
+      <div class="modal-body">{% include 'change_password.html' %}</div>
     </div>
   </div>
 </div>
-{% endcomment %}

TEKDB/explore/templates/navbar.html

@@ -37,19 +37,20 @@
           </li>
           {% if user.is_authenticated %}
             <li class="nav-item dropdown user-menu">
-              <a class="nav-link dropdown-toggle" hred="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+              <a class="nav-link dropdown-toggle" href="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                 {{ user.username }}
               </a>
               <ul class="dropdown-menu" aria-labelledby="userDropdown">
                 {% if user.is_staff %}
                   <li><a class="dropdown-item" href="/admin" target="_blank">Administration</a></li>
                 {% endif %}
+                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#changePasswordModal" href="#">Change Password</a></li>
                 <li><a class="dropdown-item" href="/logout?next=/">Logout</a></li>
               </ul>
             </li>
           {% else %}
             <li class="nav-item user-menu">
-              <a class="header-button nav-link" data-bs-toggle="modal" data-bs-target="#loginModal">
+              <a class="header-button nav-link" data-bs-toggle="modal" data-bs-target="#loginModal" href="#">
                 Login
               </a>
             </li>

TEKDB/login/static/login/js/account.js

@@ -51,5 +51,28 @@ var account = {
                 callback(false);
             }
         });
+    },
+    changePassword: function(event, form, callback) {
+        var formData = $(form).serialize();
+        var url = '/change_password/';
+        $.ajax({
+            url: url,
+            type: 'POST',
+            data: formData,
+            dataType: 'json',
+            success: function(response) {
+                if (response.success) {
+                    console.log('%csuccessfully changed password', 'color:green;');
+                    callback({success: true, data: response.data});
+                } else {
+                    console.log('%cerror changing password: %o', 'color: red;', response.data);
+                    callback({success: false, data: response.data});
+                }
+            },
+            error: function(response) {
+                console.log('%cerror with change password request submission: %o', 'color: red', response.data);
+                callback({success: false, data: response.responseJSON});
+            }
+        });
     }
 };

TEKDB/login/templates/change_password.html

@@ -0,0 +1,14 @@
+<form method="post" action="{% url 'change_password' %}">
+  {% csrf_token %}
+  <div class="form-group">
+    <label for="old_password">Old Password</label>
+    <input type="password" class="form-control" id="old_password" name="old_password" placeholder="Old Password" required>
+    <label for="new_password1">New Password</label>
+    <input type="password" class="form-control" id="new_password1" name="new_password1" placeholder="New Password" required>
+    <label for="new_password2">Confirm New Password</label>
+    <input type="password" class="form-control" id="new_password2" name="new_password2" placeholder="Confirm New Password" required>
+  </div>
+  <div class="modal-center">
+    <input type="submit" class="btn" id="changePasswordSubmit" value="Change My Password">
+  </div>
+</form>

TEKDB/login/templates/registration/login.html

@@ -12,10 +12,3 @@
     <input type="submit" class="btn" value="Login"><br/>
   </div>
 </form>
-<!--
-<div class="modal-center">
-  <a href="/accounts/register">Request Signup</a>
-  <span class="splitter">|</span>
-  <a>Forgot Username or Password</a>
-</div>
--->