templates/monitor_app/account.html

0001 {% extends 'base.html' %}
0002
0003 {% block title %}Account Management{% endblock %}
0004
0005 {% block content %}
0006 <style>
0007     .account-container {
0008         display: flex;
0009         margin-top: 20px;
0010     }
0011     .account-nav {
0012         width: 200px;
0013         border-right: 1px solid #ddd;
0014         padding-right: 20px;
0015     }
0016     .account-nav ul {
0017         list-style: none;
0018         padding: 0;
0019         margin: 0;
0020     }
0021     .account-nav li {
0022         padding: 12px 15px;
0023         cursor: pointer;
0024         border-radius: 5px;
0025         margin-bottom: 5px;
0026     }
0027     .account-nav li:hover {
0028         background-color: #f0f0f0;
0029     }
0030     .account-nav li.active {
0031         background-color: #007bff;
0032         color: white;
0033     }
0034     .account-content {
0035         padding-left: 20px;
0036         flex-grow: 1;
0037     }
0038     .panel {
0039         display: none;
0040     }
0041     .panel.active {
0042         display: block;
0043     }
0044 </style>
0045
0046 <div class="container">
0047     <h2>Account Management</h2>
0048
0049     <div class="account-container">
0050         <div class="account-nav">
0051             <ul>
0052                 <li class="active" onclick="showPanel(event, 'account')">Account</li>
0053                 <li onclick="showPanel(event, 'change-password')">Change Password</li>
0054             </ul>
0055         </div>
0056
0057         <div class="account-content">
0058             <div id="account" class="panel active">
0059                 <h3>Account Details</h3>
0060                 <p><strong>Username:</strong> {{ user.username }}</p>
0061                 <p><strong>Email:</strong> {{ user.email|default:'Not set' }}</p>
0062                 <p><strong>Roles:</strong>
0063                     {% if user.is_superuser %}Superuser{% endif %}
0064                     {% if user.is_staff and not user.is_superuser %}Staff{% endif %}
0065                     {% if not user.is_superuser and not user.is_staff %}User{% endif %}
0066                 </p>
0067             </div>
0068
0069             <div id="change-password" class="panel">
0070                 <h3>Change Password</h3>
0071                 {% if messages %}
0072                     <ul class="messages">
0073                         {% for message in messages %}
0074                             <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
0075                         {% endfor %}
0076                     </ul>
0077                 {% endif %}
0078                 <form method="post" action="{% url 'monitor_app:account' %}">
0079                     {% csrf_token %}
0080                     {{ form.as_p }}
0081                     <button type="submit">Change Password</button>
0082                 </form>
0083             </div>
0084         </div>
0085     </div>
0086 </div>
0087
0088 <script>
0089 function showPanel(evt, panelId) {
0090     // Hide all panel content
0091     document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active'));
0092
0093     // Deactivate all nav items
0094     document.querySelectorAll('.account-nav li').forEach(nav => nav.classList.remove('active'));
0095
0096     // Show the selected panel and activate the corresponding nav item
0097     document.getElementById(panelId).classList.add('active');
0098     evt.currentTarget.classList.add('active');
0099 }
0100
0101 document.addEventListener("DOMContentLoaded", function() {
0102     // Check if the password form has errors or success messages
0103     const changePasswordPanel = document.getElementById('change-password');
0104     const hasErrors = changePasswordPanel.querySelector('.errorlist');
0105     const hasMessages = changePasswordPanel.querySelector('.messages');
0106
0107     if (hasErrors || hasMessages) {
0108         // If so, show the 'Change Password' panel by default
0109         showPanel({currentTarget: document.querySelector('li[onclick*="change-password"]_')}, 'change-password');
0110     } else {
0111         // Otherwise, show the 'Account' panel
0112         showPanel({currentTarget: document.querySelector('li[onclick*="account"]_')}, 'account');
0113     }
0114 });
0115 </script>
0116 {% endblock %}