Add change password form

TEKDB/TEKDB/settings.py

@@ -262,7 +262,7 @@
 TINYMCE_FILEBROWSER = False
 
 # Add Version to the admin site header
-VERSION = "2.10.0"
+VERSION = "2.11.0"
 ADMIN_SITE_HEADER = os.environ.get(
     "ADMIN_SITE_HEADER", default="ITK DB Admin v{}".format(VERSION)
 )

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

@@ -1,21 +1,93 @@
-$("#loginModal").on("shown.bs.modal", function () {
-  $("#loginInput").focus();
-  var loginForm = document.querySelector("#loginModal form");
-  const LOGIN_ERROR_MESSAGE = "Invalid username or password";
-  loginForm.addEventListener("submit", function (event) {
-    event.preventDefault();
-    var signIn = account.signIn(event, this, function (success) {
-      if (success) {
-        $("#loginModal").modal("hide");
-        const exploreLink = document.querySelector(".nav-explore");
-        exploreLink.classList.remove("disabled");
-        exploreLink.href = "/explore";
-        exploreLink.click();
-      } else {
-        if (!loginForm.innerHTML.includes(LOGIN_ERROR_MESSAGE)) {
-          loginForm.append(LOGIN_ERROR_MESSAGE);
+const LOGIN_MODAL_ID = "loginModal";
+const LOGIN_INPUT_ID = "loginInput";
+const loginForm = document.querySelector(`#${LOGIN_MODAL_ID} form`);
+const LOGIN_ERROR_MESSAGE = "Invalid username or password";
+
+$(`#${LOGIN_MODAL_ID}`).on("shown.bs.modal", function () {
+  $(`#${LOGIN_INPUT_ID}`).focus();
+});
+
+loginForm.addEventListener("submit", function (event) {
+  event.preventDefault();
+  account.signIn(event, this, function (success) {
+    if (success) {
+      $(`#${LOGIN_MODAL_ID}`).modal("hide");
+      const exploreLink = document.querySelector(".nav-explore");
+      exploreLink.classList.remove("disabled");
+      exploreLink.href = "/explore";
+      exploreLink.click();
+    } else {
+      if (!loginForm.innerHTML.includes(LOGIN_ERROR_MESSAGE)) {
+        loginForm.append(LOGIN_ERROR_MESSAGE);
+      }
+    }
+  });
+});
+
+const CHANGE_PASSWORD_MODAL_ID = "changePasswordModal";
+const CHANGE_PASSWORD_SUCCESS_ID = "changePasswordSuccessMessage";
+const CHANGE_PASSWORD_SUCCESS_MESSAGE = "Password successfully changed!";
+const changePasswordForm = document.querySelector(`#${CHANGE_PASSWORD_MODAL_ID} 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(`#${CHANGE_PASSWORD_MODAL_ID} ul`);
+      if (errorLists.length) {
+          errorLists.forEach((list) => list.remove());
+      }
+      // clear any previous success message
+      const previousSuccessMessage = document.querySelector(`#${CHANGE_PASSWORD_SUCCESS_ID}`);
+      if (!previousSuccessMessage) {
+        // display success message
+        const successMessage = document.createElement("p");
+        successMessage.setAttribute("id", `${CHANGE_PASSWORD_SUCCESS_ID}`);
+        successMessage.textContent = CHANGE_PASSWORD_SUCCESS_MESSAGE;
+        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);
+          }
+
         }
       }
-    });
+    }
   });
 });
+
+$(`#${CHANGE_PASSWORD_MODAL_ID}`).on("hidden.bs.modal", function () {
+  // clear error messages
+  const errorLists = document.querySelectorAll(`#${CHANGE_PASSWORD_MODAL_ID} ul`);
+  errorLists.forEach((list) => list.remove());
+  // reset input border color
+  const passwordInputs = document.querySelectorAll(`#${CHANGE_PASSWORD_MODAL_ID} input[type='password']`);
+  passwordInputs.forEach((input) => input.setAttribute("style", ""));
+  // clear form
+  document.querySelector(`#${CHANGE_PASSWORD_MODAL_ID} form`).reset();
+  // clear success message
+  const successMessage = document.querySelector(`#${CHANGE_PASSWORD_SUCCESS_ID}`);
+
+  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>
--->