Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved change password form and add functionality #3125

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improved change password form and add functionality #3125

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 78 additions & 41 deletions website/templates/account/password_change.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,23 @@
{% load i18n %}
{% block style %}
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling */
}

.min-h-screen {
min-height: 100vh;
}

.inner-addon {
position: relative;
}

.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}

Expand All @@ -46,53 +56,80 @@
</style>
{% endblock style %}
{% block content %}
<div class="row">
<div class="panel-heading">
<div class="panel-title text-center">
<h1 class="text-center">{% trans "Change Password" %}</h1>
<hr />
</div>
</div>
<div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
{% include "includes/sidenav.html" %}
<div class="min-h-screen flex justify-center items-start bg-white overflow-hidden pt-14 ">
<div class="bg-gray p-8 rounded-lg shadow-xl w-full sm:w-96 md:w-1/2 lg:w-1/3 max-w-4xl">
<h1 class="text-center font-bold text-xl mb-6">{% trans "Change Password" %}</h1>
<form method="post"
action="{% url 'account_change_password' %}"
class="password_change">
class="password_change"
id="password-change-form">
{% csrf_token %}
<div class="row main">
<div class="main-issue-form main-center">
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control"
type="password"
id="id_oldpassword"
name="oldpassword"
placeholder="Old Password">
<span class="help-block">{{ form.oldpassword.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control"
type="password"
id="id_password1"
name="password1"
placeholder="New Password">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<div class="form-group inner-addon left-addon {% if form.password2.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control"
type="password"
id="id_password2"
name="password2"
placeholder="Confirm Password">
<span class="help-block">{{ form.password2.errors }}</span>
</div>
<div class="space-y-4">
<!-- Old Password -->
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
id="id_oldpassword"
name="oldpassword"
placeholder="Old Password"
value="{{ form.oldpassword.value|default:'' }}">
<span class="help-block">{{ form.oldpassword.errors }}</span>
</div>
<!-- New Password -->
<div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
id="id_password1"
name="password1"
placeholder="New Password"
value="{{ form.password1.value|default:'' }}">
<span class="help-block">{{ form.password1.errors }}</span>
</div>
<!-- Confirm Password -->
<div class="form-group inner-addon left-addon {% if form.password2.errors %}has-error{% endif %}">
<i class="glyphicon glyphicon-lock"></i>
<input class="form-control form-input w-full py-2 px-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
type="password"
id="id_password2"
name="password2"
placeholder="Confirm Password"
value="{{ form.password2.value|default:'' }}">
<span class="help-block">{{ form.password2.errors }}</span>
</div>
<!-- Show Password Checkbox -->
<div class="form-group show-password-checkbox flex items-center space-x-2 space-y-2 ">
<input type="checkbox"
class="form-checkbox text-blue-500"
id="show-password">
<label for="show-password" class="text-lg">{% trans "Show Password" %}</label>
</div>
<div class="mt-4">
<button type="submit"
class="btn btn-success pull-right text-black"
name="action">{% trans "Change Password" %}</button>
class="btn btn-success w-full py-2 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-600">
{% trans "Change Password" %}
</button>
</div>
</div>
</form>
</div>
</div>
<script>
// Toggle show password functionality
const showPasswordCheckbox = document.getElementById('show-password');
const passwordFields = document.querySelectorAll('#id_oldpassword, #id_password1, #id_password2');

showPasswordCheckbox.addEventListener('change', function() {
passwordFields.forEach(function(field) {
if (showPasswordCheckbox.checked) {
field.type = 'text';
} else {
field.type = 'password';
}
});
});

</script>
{% endblock content %}
Loading