djangocms/templates/authenticate/user/password.html

{% extends 'dashboard/base.html' %}
{% load static %}
{% load customtag %}
{% block title %}{{ title }} - {{ seo_settings.meta_title }}{% endblock title %}
{% block content %}
<style>

    /* Media query for mobile devices */
    @media (max-width: 768px) {
      #cke_id_description {
        width: 309px !important;
      }
    }
  
    /* Media query for desktop devices */
    @media (min-width: 769px) {
      #cke_id_description {
        width: 980px !important;
        position: relative;
      }
    }
    .password-input {
        position: relative;
    }

    /* CSS to position the "Show" and "Hide" text inside the field */
    .toggle-password {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust this value to control the right-side position */
        transform: translateY(-50%);
        cursor: pointer;
        padding: 2px 5px;
    }
  </style>
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-6">
               <h3>{{ title }} of {{profile.name}}</h3>
            </div>
            <div class="col-6">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                     <a href="{% url 'adminHome' %}">
                        <svg class="stroke-icon">
                           <use href="{% static 'admin/assets/svg/icon-sprite.svg' %}#stroke-home"></use>
                        </svg>
                     </a>
                  </li>
                  <li class="breadcrumb-item">User</li>
                  <li class="breadcrumb-item">{{ profile.user }}</li>
                  <li class="breadcrumb-item active">Change Password</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <!-- Container-fluid starts-->
   <div class="container-fluid">
      <div class="row project-cards">
         <div class="col-md-12 project-list">
         </div>
         <div class="container">
            <form method="POST" action="" enctype="multipart/form-data">
                {% csrf_token %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                {% endif %}
                {% if form.errors %}
                <div class="alert alert-danger">
                    <ul>
                    {% for field in form %}
                        {% if field.errors %}
                        <li>{{ field.label }}: {{ field.errors }}</li>
                        {% endif %}
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
                <div class="row mb-2">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <label for="" class="form-label">Username ( Read Only )</label>
                                    <input type="text" value={{ profile.user }} id="" readonly class="form-control" name="username" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <label for="{{ form.old_password.id_for_label }}" class="form-label">Old Password <span class="text-danger">*</span></label>
                                <div class="password-input">
                                    <input type="password" id="{{ form.old_password.id_for_label }}" class="form-control" name="old_password" />
                                    <span class="toggle-password" onclick="togglePasswordVisibility('{{ form.old_password.id_for_label }}')"><i class="fa fa-eye"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mb-1">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <label for="{{ form.new_password1.id_for_label }}" class="form-label">New Password <span class="text-danger">*</span></label>
                                <div class="password-input">
                                    <input type="password" id="{{ form.new_password1.id_for_label }}" class="form-control" name="new_password1" />
                                    <span class="toggle-password" onclick="togglePasswordVisibility('{{ form.new_password1.id_for_label }}')"><i class="fa fa-eye"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <label for="{{ form.new_password2.id_for_label }}" class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                <div class="password-input">
                                    <input type="password" id="{{ form.new_password2.id_for_label }}" class="form-control" name="new_password2" />
                                    <span class="toggle-password" onclick="togglePasswordVisibility('{{ form.new_password2.id_for_label }}')"><i class="fa fa-eye"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <!-- Add more form fields as needed -->
                
                <button class="btn btn-primary mb-5" type="submit">Save</button>
            </form>
         </div>
      </div>
   </div>
</div>
<script>
// JavaScript to toggle password visibility
function togglePasswordVisibility(inputId) {
    var input = document.getElementById(inputId);
    var toggle = document.querySelector('[id="' + inputId + '"] + .toggle-password');

    if (input.type === 'password') {
        input.type = 'text';
        toggle.innerHTML = '<i class="fa fa-eye-slash"></i>';
    } else {
        input.type = 'password';
        toggle.innerHTML = '<i class="fa fa-eye"></i>';
    }
}

</script>
<!-- Container-fluid Ends-->
{% endblock %}