Files
CloudOps/platform/templates/pages/users.html
2026-06-21 18:05:52 +01:00

73 lines
3.7 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="card">
<div class="card-header"><div class="card-title"><i class="fas fa-user-plus"></i> Create New User</div></div>
<div class="form-grid">
<div class="form-group"><label class="form-label">USERNAME</label><input type="text" id="new-username" class="form-input" placeholder="e.g. secuser2"></div>
<div class="form-group"><label class="form-label">PASSWORD (optional)</label><input type="password" id="new-password" class="form-input"></div>
<div class="form-group"><label class="form-label">DISK SIZE MB (creates dedicated virtual disk)</label><input type="number" id="new-quota" class="form-input" placeholder="e.g. 10240 for 10GB"></div>
<div class="form-group" style="justify-content:flex-end;">
<label class="form-check" style="margin-bottom:8px;"><input type="checkbox" id="new-docker" checked><span>Setup rootless Docker</span></label>
<button class="btn btn-primary" onclick="createUser()"><i class="fas fa-plus"></i> Create User</button>
</div>
</div>
<div id="create-user-result" class="alert" style="margin-top:14px;"></div>
<div id="create-user-log" class="log-console" style="display:none; margin-top:12px; max-height:200px;"></div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title"><i class="fas fa-users"></i> System Users</div>
<button class="btn btn-ghost btn-sm" onclick="loadUsers()"><i class="fas fa-sync-alt"></i> Refresh</button>
</div>
<div class="users-grid" id="users-grid">
{% for u in users %}
<div class="user-card" data-user="{{ u.name }}" onclick="loadUserContainers('{{ u.name }}')">
<div class="user-card-top">
<div class="user-avatar" style="background:#3b82f6">{{ u.name[0].upper() }}</div>
<div>
<div class="user-name">{{ u.name }}</div>
<div class="user-uid">uid {{ u.uid }}</div>
</div>
</div>
<div class="user-tags">
{% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}
{% if u.linger %}<span class="user-tag linger"><i class="fas fa-clock"></i> linger</span>{% endif %}
{% if u.has_vdisk %}<span class="user-tag vdisk"><i class="fas fa-hard-drive"></i> vdisk</span>{% endif %}
</div>
<div class="user-stats">
<div class="user-stat"><span class="user-stat-label">Disk</span><strong>{{ u.disk_used }}</strong></div>
<div class="user-stat"><span class="user-stat-label">Containers</span><strong>{{ u.container_count }}</strong></div>
</div>
</div>
{% else %}
<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
{% endfor %}
</div>
</div>
<div class="card" id="user-detail-panel" style="display:none;">
<div class="card-header">
<div class="card-title"><i class="fas fa-cube"></i> <span id="user-detail-title">Containers</span></div>
<div style="display:flex;gap:8px;">
<button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button>
<button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'; document.querySelectorAll('.user-card.selected').forEach(c=>c.classList.remove('selected'))" title="Close"></button>
</div>
</div>
<div class="user-detail-table-wrap">
<table class="ct-table user-containers-table">
<thead>
<tr>
<th>NAME</th>
<th>STATUS</th>
<th>IMAGE</th>
<th>PORTS</th>
</tr>
</thead>
<tbody id="user-containers-body"></tbody>
</table>
</div>
<div id="user-action-result" class="alert" style="margin-top:14px;"></div>
</div>
{% endblock %}