Skip to content

Commit ebfe6fc

Browse files
paigewilliamspaigewilliams
authored
Merge pull request #271 from Ecotrust/change-password
Change password form
2 parents 89c7829 + f59c1bd commit ebfe6fc

14 files changed

Lines changed: 260 additions & 123 deletions

File tree

‎TEKDB/TEKDB/urls.py‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@
3535

3636

3737
urlpatterns = [
38-
# url(r'^login/', include('login.urls')),
38+
path(
39+
"change_password/",
40+
login_views.TEKDBPasswordChangeView.as_view(),
41+
name="change_password",
42+
),
3943
path("admin/filebrowser/", tekdb_filebrowser.urls),
4044
path("login/", login_views.login, name="login"),
4145
path("login_async/", login_views.login_async, name="login_async"),

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
text-align: center;
33
}
44

5-
.registration-form .helptext {
6-
visibility: hidden;
7-
}
8-
95
input[type="text"],
106
.form-control,
117
input[type="password"] {

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

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,93 @@
1-
$("#loginModal").on("shown.bs.modal", function () {
2-
$("#loginInput").focus();
3-
var loginForm = document.querySelector("#loginModal form");
4-
const LOGIN_ERROR_MESSAGE = "Invalid username or password";
5-
loginForm.addEventListener("submit", function (event) {
6-
event.preventDefault();
7-
var signIn = account.signIn(event, this, function (success) {
8-
if (success) {
9-
$("#loginModal").modal("hide");
10-
const exploreLink = document.querySelector(".nav-explore");
11-
exploreLink.classList.remove("disabled");
12-
exploreLink.href = "/explore";
13-
exploreLink.click();
14-
} else {
15-
if (!loginForm.innerHTML.includes(LOGIN_ERROR_MESSAGE)) {
16-
loginForm.append(LOGIN_ERROR_MESSAGE);
1+
const LOGIN_MODAL_ID = "loginModal";
2+
const LOGIN_INPUT_ID = "loginInput";
3+
const loginForm = document.querySelector(`#${LOGIN_MODAL_ID} form`);
4+
const LOGIN_ERROR_MESSAGE = "Invalid username or password";
5+
6+
$(`#${LOGIN_MODAL_ID}`).on("shown.bs.modal", function () {
7+
$(`#${LOGIN_INPUT_ID}`).focus();
8+
});
9+
10+
loginForm.addEventListener("submit", function (event) {
11+
event.preventDefault();
12+
account.signIn(event, this, function (success) {
13+
if (success) {
14+
$(`#${LOGIN_MODAL_ID}`).modal("hide");
15+
const exploreLink = document.querySelector(".nav-explore");
16+
exploreLink.classList.remove("disabled");
17+
exploreLink.href = "/explore";
18+
exploreLink.click();
19+
} else {
20+
if (!loginForm.innerHTML.includes(LOGIN_ERROR_MESSAGE)) {
21+
loginForm.append(LOGIN_ERROR_MESSAGE);
22+
}
23+
}
24+
});
25+
});
26+
27+
const CHANGE_PASSWORD_MODAL_ID = "changePasswordModal";
28+
const CHANGE_PASSWORD_SUCCESS_ID = "changePasswordSuccessMessage";
29+
const CHANGE_PASSWORD_SUCCESS_MESSAGE = "Password successfully changed!";
30+
const changePasswordForm = document.querySelector(`#${CHANGE_PASSWORD_MODAL_ID} form`);
31+
32+
changePasswordForm.addEventListener("submit", function (event) {
33+
event.preventDefault();
34+
account.changePassword(event, this, function (response) {
35+
if (response.success) {
36+
// clear any previous error messages
37+
const errorLists = document.querySelectorAll(`#${CHANGE_PASSWORD_MODAL_ID} ul`);
38+
if (errorLists.length) {
39+
errorLists.forEach((list) => list.remove());
40+
}
41+
// clear any previous success message
42+
const previousSuccessMessage = document.querySelector(`#${CHANGE_PASSWORD_SUCCESS_ID}`);
43+
if (!previousSuccessMessage) {
44+
// display success message
45+
const successMessage = document.createElement("p");
46+
successMessage.setAttribute("id", `${CHANGE_PASSWORD_SUCCESS_ID}`);
47+
successMessage.textContent = CHANGE_PASSWORD_SUCCESS_MESSAGE;
48+
successMessage.setAttribute("style", "color: green;");
49+
successMessage.setAttribute("class", "m-0");
50+
51+
// insert success message after submit button
52+
const submitButton = changePasswordForm.querySelector('#changePasswordSubmit');
53+
submitButton.after(successMessage);
54+
}
55+
56+
// reset form
57+
changePasswordForm.reset();
58+
} else {
59+
// display error messages
60+
for (const elementId in response.data.data) {
61+
const errorList = document.createElement("ul");
62+
const erroredInput = document.querySelector(`#${elementId}`);
63+
erroredInput.after(errorList);
64+
erroredInput.setAttribute("style", "border-color: red;");
65+
if (response.data.data[elementId].length > 0) {
66+
for (const error in response.data.data[elementId]) {
67+
const listItem = document.createElement("li");
68+
listItem.textContent = response.data.data[elementId][error];
69+
errorList.appendChild(listItem);
70+
}
71+
1772
}
1873
}
19-
});
74+
}
2075
});
2176
});
77+
78+
$(`#${CHANGE_PASSWORD_MODAL_ID}`).on("hidden.bs.modal", function () {
79+
// clear error messages
80+
const errorLists = document.querySelectorAll(`#${CHANGE_PASSWORD_MODAL_ID} ul`);
81+
errorLists.forEach((list) => list.remove());
82+
// reset input border color
83+
const passwordInputs = document.querySelectorAll(`#${CHANGE_PASSWORD_MODAL_ID} input[type='password']`);
84+
passwordInputs.forEach((input) => input.setAttribute("style", ""));
85+
// clear form
86+
document.querySelector(`#${CHANGE_PASSWORD_MODAL_ID} form`).reset();
87+
// clear success message
88+
const successMessage = document.querySelector(`#${CHANGE_PASSWORD_SUCCESS_ID}`);
89+
90+
if (successMessage) {
91+
successMessage.remove();
92+
}
93+
});

‎TEKDB/explore/templates/modals.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,35 +15,32 @@ <h4 class="modal-title" id="loginModalLabel">Please Log In</h4>
1515
class="btn-close"
1616
data-bs-dismiss="modal"
1717
aria-label="Close"
18-
></button>
18+
><i class="bi bi-x-lg text-light"></i></button>
1919
</div>
2020
<div class="modal-body">{% include 'registration/login.html' %}</div>
2121
</div>
2222
</div>
2323
</div>
2424

25-
{% comment %}
26-
<!-- Results Map -->
2725
<div
2826
class="modal fade"
29-
id="resultsMapModal"
27+
id="changePasswordModal"
3028
tabindex="-1"
3129
role="dialog"
32-
aria-labelledby="resultsMapModalLabel"
30+
aria-labelledby="changePasswordModalLabel"
3331
>
3432
<div class="modal-dialog" role="document">
3533
<div class="modal-content">
3634
<div class="modal-header">
37-
<h4 class="modal-title" id="resultsMapModalLabel">Results Map</h4>
35+
<h4 class="modal-title" id="changePasswordModalLabel">Change Password</h4>
3836
<button
3937
type="button"
4038
class="btn-close"
4139
data-bs-dismiss="modal"
4240
aria-label="Close"
43-
></button>
41+
><i class="bi bi-x-lg text-light"></i></button>
4442
</div>
45-
<div class="modal-body">{% include 'results_map.html' %}</div>
43+
<div class="modal-body">{% include 'change_password.html' %}</div>
4644
</div>
4745
</div>
4846
</div>
49-
{% endcomment %}

‎TEKDB/explore/templates/navbar.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,20 @@
3737
</li>
3838
{% if user.is_authenticated %}
3939
<li class="nav-item dropdown user-menu">
40-
<a class="nav-link dropdown-toggle" hred="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
40+
<a class="nav-link dropdown-toggle" href="#" role="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
4141
{{ user.username }}
4242
</a>
4343
<ul class="dropdown-menu" aria-labelledby="userDropdown">
4444
{% if user.is_staff %}
4545
<li><a class="dropdown-item" href="/admin" target="_blank">Administration</a></li>
4646
{% endif %}
47+
<li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#changePasswordModal" href="#">Change Password</a></li>
4748
<li><a class="dropdown-item" href="/logout?next=/">Logout</a></li>
4849
</ul>
4950
</li>
5051
{% else %}
5152
<li class="nav-item user-menu">
52-
<a class="header-button nav-link" data-bs-toggle="modal" data-bs-target="#loginModal">
53+
<a class="header-button nav-link" data-bs-toggle="modal" data-bs-target="#loginModal" href="#">
5354
Login
5455
</a>
5556
</li>

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,28 @@ var account = {
5151
callback(false);
5252
}
5353
});
54+
},
55+
changePassword: function(event, form, callback) {
56+
var formData = $(form).serialize();
57+
var url = '/change_password/';
58+
$.ajax({
59+
url: url,
60+
type: 'POST',
61+
data: formData,
62+
dataType: 'json',
63+
success: function(response) {
64+
if (response.success) {
65+
console.log('%csuccessfully changed password', 'color:green;');
66+
callback({success: true, data: response.data});
67+
} else {
68+
console.log('%cerror changing password: %o', 'color: red;', response.data);
69+
callback({success: false, data: response.data});
70+
}
71+
},
72+
error: function(response) {
73+
console.log('%cerror with change password request submission: %o', 'color: red', response.data);
74+
callback({success: false, data: response.responseJSON});
75+
}
76+
});
5477
}
5578
};

‎TEKDB/login/templates/change_password.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<form method="post" action="{% url 'change_password' %}">
2+
{% csrf_token %}
3+
<div class="form-group">
4+
<label for="old_password">Old Password</label>
5+
<input type="password" class="form-control" id="old_password" name="old_password" placeholder="Old Password" required>
6+
<label for="new_password1">New Password</label>
7+
<input type="password" class="form-control" id="new_password1" name="new_password1" placeholder="New Password" required>
8+
<label for="new_password2">Confirm New Password</label>
9+
<input type="password" class="form-control" id="new_password2" name="new_password2" placeholder="Confirm New Password" required>
10+
</div>
11+
<div class="modal-center">
12+
<input type="submit" class="btn" id="changePasswordSubmit" value="Change My Password">
13+
</div>
14+
</form>

‎TEKDB/login/templates/create.html‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎TEKDB/login/templates/forgot.html‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎TEKDB/login/templates/registration/login.html‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,3 @@
1212
<input type="submit" class="btn" value="Login"><br/>
1313
</div>
1414
</form>
15-
<!--
16-
<div class="modal-center">
17-
<a href="/accounts/register">Request Signup</a>
18-
<span class="splitter">|</span>
19-
<a>Forgot Username or Password</a>
20-
</div>
21-
-->

0 commit comments

Comments
 (0)