openpanel/templates/tabler/users/all.html

<!-- users/ass.html -->
{% extends 'base.html' %}

{% block content %}

<style>
.suspended-user-row {
  //background-color: #f4c6cb;
  background-color: rgba(var(--tblr-secondary-rgb),.08);
  border-left: .25rem var(--tblr-border-style) red;
}

/* Styles specific to dark theme */
body[data-bs-theme="dark"] .suspended-user-row {
  background-color: rgb(68, 55, 57);
}

.people-item {
  padding:1em;
}

</style>  


{% if users %}

      <div class="page-wrapper">
        <!-- Page header -->
<div class="page-header mt-0 d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  OpenPanel
                </div>
                <h2 class="page-title">
                  Users
                </h2>
              </div>
              <!-- Page title actions -->
              <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                  <span class="d-none d-sm-inline">
                    
                      <div class="input-icon">
                        <span class="input-icon-addon">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
                        </span>
                        <input type="text" id="userSearchInput" class="form-control" placeholder="Search users…" aria-label="Search in website">

                      </div>
                  </span>



                  <a href="/user/new" class="btn btn-primary d-sm-inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>New User</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
              <div class="col-12">
                <div class="card">
                  <div class="table-responsive">
                    <table id="exiting_users"
		class="table table-vcenter table-mobile-md card-table">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>IP Address</th>
                          <th>Plan</th>
                          {% if license_type == "Enterprise" %}
                          <!--th>Server</th-->
                          {% endif %}
                          <th>Setup Date</th>
                          <th class="w-1"></th>
                        </tr>
                      </thead>
                      <tbody>
                {% for user in users %}
    {% if "SUSPENDED_" in user[1] %}
        <tr class="suspended-user-row" data-username="{{ user[1].split('_')[-1] }}" data-email="{{ user[3] }}" style="vertical-align: middle;">
    {% else %}
        <tr style="vertical-align: middle;" data-username="{{ user[1] }}" data-email="{{ user[3] }}">
    {% endif %}
                          <td data-label="Name" >
                            <div class="d-flex py-1 align-items-center">
                            <a href="/users/{{ user[1] }}">
                              <span class="avatar me-2" style="background-image: url({{ gravatar_url(user[3], 150) }})" alt="Gravatar">
                                    {% if "SUSPENDED_" in user[1] %}
                                    <span class="badge bg-red"></span>
                                    {% endif %}
                                </span>
                            </a>
                              <div class="flex-fill">
                                <div class="font-weight-medium">
                                    <a href="/users/{{ user[1] }}"{% if "SUSPENDED_" in user[1] %} style="color: red;"{% endif %}>
                                    {{ user[1].split('_')[-1] }}</a> 
                                    {% if "SUSPENDED_" in user[1] %}
                                        <span class="badge bg-red-lt">SUSPENDED</span>
                                    {% endif %}
                                    </div>
                                <div class="text-muted"><a href="#" class="text-reset">{{ user[3] }}</a></div>

                              </div>
                            </div>
                          </td>
                          <td data-label="IP Address"  data-label="Server" data-bs-toggle="tooltip" data-bs-placement="top" title="IPv4 that can be used by account to access services and domains.">
                            <div class="public-ip">{{ public_ip }}</div>
                          </td>
                          <td class="text-muted" data-label="Plan" >
                            <a href="/plans#{{ user[12] }}">{{ user[12] }}</a>
                          </td>

                          {% if license_type == "Enterprise" %}
                          <!--td class="text-muted" data-label="Server" data-bs-toggle="tooltip" data-bs-placement="top" title="Cluster member that the account container is located on.">
                            <a href="/settings/cluster#{{ user[11] }}">{{ user[11] }}</a>
                          </td-->
                          {% endif %}


                        <td data-label="Date" >
                            <div class="text-muted">{{ user[9].strftime('%d.%m.%Y %H:%M') }}</div>
                          </td>
                          <td>
                            <div class="btn-list flex-nowrap">
    {% if "SUSPENDED_" in user[1] %}  
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Login is disbaled for suspended user" class="btn btn-disabled"  disabled>
Login
 </button>     
    {% else %}
<a href="#" class="btn loginLink" user="{{ user[1] }}" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" title="Login as {{ user[1] }} into OpenPanel">
Login
 </a>
    {% endif %}
<a href="/users/{{ user[1] }}" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="View and Edit user">Manage</a>
                            </div>
                          </td>
                        </tr>
                        {% endfor %}

                      </tbody>
                    </table>

<script>
    fetch('/json/ips')
        .then(response => response.json())
        .then(data => {
            {% for user in users %}
                (function() {
                    const username = "{{ user[1] }}";
                    const publicIP = "{{ public_ip }}";

                    if (data.hasOwnProperty(username)) {
                        const ip = data[username];
                        updatePublicIP(username, ip);
                    }
                })();
            {% endfor %}
        })
        .catch(error => console.error('Error fetching /json/ips:', error));
</script>  


                  </div>
                </div>
          </div>
        </div>




      </div>
    </div>






{% else %}

<div class="page page-center">
      <div class="container-tight py-4">
        <div class="empty">
          <div class="empty-header">No Users</div>
          <p class="empty-title">No users or the MySQL service is not running.</p>
          <p class="d-none empty-subtitle text-secondary">
          </p>
          <div class="empty-action">
            <a href="/user/new" id="addUserButton" class="btn btn-primary">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
              Create your first user
            </a>
          </div>
        </div>
      </div>
    </div>

{% endif %}


<script src="{{ url_for('static', filename='pages/users_all.js') }}?v=0.39" defer></script>
<script src="{{ url_for('static', filename='pages/users_both.js') }}?v=0.39" defer></script>


{% endblock %}