From b62600821f022120ce3d651f97c57df0e68f80a9 Mon Sep 17 00:00:00 2001
From: JiriUhlir <149317995+JiriUhlir@users.noreply.github.com>
Date: Wed, 17 Jun 2026 12:03:00 +0200
Subject: [PATCH] users styles

---
 app/routes/users.py   | 109 +++++++++++++++++++++++++-----------------
 app/static/styles.css |  28 +++++------
 2 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/app/routes/users.py b/app/routes/users.py
index 5bd948c..88ee673 100644
--- a/app/routes/users.py
+++ b/app/routes/users.py
@@ -112,69 +112,96 @@ def users_page(request: Request, message: str = "", error: str = "", user=Depend
         enabled = bool(managed_user.get("is_enabled", True))
         gitea_user_id = managed_user.get("gitea_user_id")
         gitea_sync_status = managed_user.get("gitea_sync_status", "not_required") or "not_required"
-        gitea_sync_error = html.escape(managed_user.get("gitea_sync_error", "") or "")
-        gitea_synced_at = html.escape(managed_user.get("gitea_synced_at", "") or "")
+        gitea_sync_error = (managed_user.get("gitea_sync_error", "") or "").strip()
+        gitea_synced_at = (managed_user.get("gitea_synced_at", "") or "").strip()
         gitea_username_value = (managed_user.get("gitea_username") or "").strip()
         current_gitea_username = gitea_username_value or (f"portal-{user_id}" if gitea_user_id else "")
-        gitea_details = f"ID {html.escape(str(gitea_user_id))}" if gitea_user_id else "No account"
+        toggle_label = "Vypnout" if enabled else "Zapnout"
+        toggle_action = "disable" if enabled else "enable"
+
+        # Gitea: pill (synced/…) + (i) s detaily v tooltipu (ID, jméno, čas synchronizace, chyba).
+        detail_parts = []
+        if gitea_user_id:
+            detail_parts.append(f"ID {gitea_user_id}")
         if current_gitea_username:
-            gitea_details += f"<br><small>@{html.escape(current_gitea_username)}</small>"
+            detail_parts.append(f"@{current_gitea_username}")
         if gitea_synced_at:
-            gitea_details += f"<br><small>{gitea_synced_at}</small>"
+            detail_parts.append(f"synced {gitea_synced_at}")
         if gitea_sync_error:
-            gitea_details += f'<br><small class="text-danger">{gitea_sync_error}</small>'
-        gitea_cred_form = f"""
-            <details class="gitea-cred">
-                <summary>Změnit jméno/heslo</summary>
-                <form method="post" action="/portal/admin/users/{user_id_html}/gitea-credentials" class="metadata-form"
-                      onsubmit="return confirm('Změnit Gitea přihlašovací údaje uživatele {username}?');">
-                    <label>Gitea jméno</label>
+            detail_parts.append(f"chyba: {gitea_sync_error}")
+        tooltip = html.escape(" · ".join(detail_parts) or "Bez Gitea účtu", quote=True)
+        gitea_info = (
+            f'<span class="info-dot" tabindex="0" role="note" aria-label="{tooltip}" data-tooltip="{tooltip}">'
+            '<i class="fa-solid fa-circle-info" aria-hidden="true"></i></span>'
+        )
+
+        avatar_block = avatar or '<span class="user-avatar user-avatar-empty"><i class="fa-solid fa-user" aria-hidden="true"></i></span>'
+        provider_label = auth_provider or "—"
+        email_line = f'<br><span class="muted">{email}</span>' if email else ""
+
+        # Nastavení Gitea jména a hesla – v modálu (nezarovnává řádek a neořízne se scrollem tabulky).
+        gitea_modal_id = f"gitea-modal-{user_id_html}"
+        gitea_modal = f"""
+            <dialog class="resource-modal" id="{gitea_modal_id}">
+                <form method="post" action="/portal/admin/users/{user_id_html}/gitea-credentials">
+                    <div class="modal-header">
+                        <h3>Gitea účet – {display_name or username}</h3>
+                        <button type="button" class="icon-button" onclick="closeResourceModal('{gitea_modal_id}')" aria-label="Zavřít">×</button>
+                    </div>
+                    <p class="muted">Nastaví uživatelské jméno a/nebo heslo přímo v Gitea. Heslo se nikam neukládá.</p>
+                    <label>Gitea uživatelské jméno</label>
                     <input name="gitea_username" value="{html.escape(current_gitea_username, quote=True)}" placeholder="portal-{user_id_html}" autocomplete="off">
                     <label>Nové heslo</label>
                     <input type="password" name="gitea_password" placeholder="prázdné = beze změny" autocomplete="new-password">
-                    <div class="form-actions">
+                    <div class="modal-actions">
+                        <button type="button" class="btn btn-secondary" onclick="closeResourceModal('{gitea_modal_id}')"><i class="fa-solid fa-xmark" aria-hidden="true"></i> Zrušit</button>
                         <button type="submit"><i class="fa-solid fa-key" aria-hidden="true"></i> Uložit</button>
                     </div>
                 </form>
-            </details>
+            </dialog>
         """
-        toggle_label = "Disable" if enabled else "Enable"
-        toggle_action = "disable" if enabled else "enable"
 
         rows += f"""
-        <tr>
-            <td>{user_id_html}</td>
-            <td><strong>{username}</strong></td>
-            <td>{display_name}</td>
-            <td>{avatar}</td>
-            <td>{email}</td>
-            <td>{auth_provider}</td>
+        <tr class="user-row">
+            <td class="service-name-cell">
+                <div class="service-title">
+                    {avatar_block}
+                    <div>
+                        <strong>{display_name or username}</strong><br>
+                        <span class="muted">@{username}</span>{email_line}
+                    </div>
+                </div>
+            </td>
             <td>
                 <form method="post" action="/portal/admin/users/{user_id_html}/role" class="inline-form">
                     <select name="role">{render_role_options(role)}</select>
-                    <button type="submit" class="icon-action" title="Save" aria-label="Save"><i class="fa-solid fa-floppy-disk" aria-hidden="true"></i></button>
+                    <button type="submit" class="icon-action" title="Uložit roli" aria-label="Uložit roli"><i class="fa-solid fa-floppy-disk" aria-hidden="true"></i></button>
                 </form>
             </td>
-            <td>{render_enabled_pill(enabled)}</td>
-            <td>{render_sync_pill(gitea_sync_status)}<br><small>{gitea_details}</small>{gitea_cred_form}</td>
-            <td>{created_at}</td>
-            <td>{last_login_at}</td>
+            <td>{render_enabled_pill(enabled)}<br><span class="muted">{provider_label}</span></td>
+            <td>{render_sync_pill(gitea_sync_status)} {gitea_info}</td>
+            <td class="muted-cell">
+                <span class="muted">vytvořeno</span><br>{created_at or "—"}<br>
+                <span class="muted">poslední přihlášení</span><br>{last_login_at or "—"}
+            </td>
             <td class="actions-cell service-actions">
                 <form method="post" action="/portal/admin/users/{user_id_html}/{toggle_action}" class="inline-form">
                     <button type="submit" class="icon-action" title="{toggle_label}" aria-label="{toggle_label}"><i class="fa-solid fa-power-off" aria-hidden="true"></i></button>
                 </form>
                 <form method="post" action="/portal/admin/users/{user_id_html}/sync-gitea" class="inline-form">
-                    <button type="submit" class="icon-action" title="Sync Gitea" aria-label="Sync Gitea"><i class="fa-solid fa-rotate" aria-hidden="true"></i></button>
+                    <button type="submit" class="icon-action" title="Synchronizovat Gitea" aria-label="Synchronizovat Gitea"><i class="fa-solid fa-rotate" aria-hidden="true"></i></button>
                 </form>
-                <form method="post" action="/portal/admin/users/{user_id_html}/delete" class="inline-form" onsubmit="return confirm('Delete this user? This removes the portal account.');">
-                    <button type="submit" class="icon-action icon-action-danger" title="Delete" aria-label="Delete"><i class="fa-solid fa-trash" aria-hidden="true"></i></button>
+                <button type="button" class="icon-action" onclick="return openResourceModal('{gitea_modal_id}')" title="Gitea jméno a heslo" aria-label="Gitea jméno a heslo"><i class="fa-solid fa-code-branch" aria-hidden="true"></i></button>
+                <form method="post" action="/portal/admin/users/{user_id_html}/delete" class="inline-form" onsubmit="return confirm('Smazat uživatele {username}? Odstraní se portálový účet.');">
+                    <button type="submit" class="icon-action icon-action-danger" title="Smazat" aria-label="Smazat"><i class="fa-solid fa-trash" aria-hidden="true"></i></button>
                 </form>
+                {gitea_modal}
             </td>
         </tr>
         """
 
     if not rows:
-        rows = '<tr><td colspan="12">No users found.</td></tr>'
+        rows = '<tr><td colspan="6">Žádní uživatelé.</td></tr>'
 
     return page(
         "Users",
@@ -186,21 +213,15 @@ def users_page(request: Request, message: str = "", error: str = "", user=Depend
         </div>
 
         <div class="card">
-            <h2>User List</h2>
+            <h2>Seznam uživatelů</h2>
             <table>
                 <tr>
-                    <th>ID</th>
-                    <th>Username</th>
-                    <th>Display name</th>
-                    <th>Avatar</th>
-                    <th>Email</th>
-                    <th>Provider</th>
+                    <th>Uživatel</th>
                     <th>Role</th>
-                    <th>Status</th>
-                    <th>Gitea sync</th>
-                    <th>Created</th>
-                    <th>Last login</th>
-                    <th>Actions</th>
+                    <th>Stav</th>
+                    <th>Gitea</th>
+                    <th>Aktivita</th>
+                    <th>Akce</th>
                 </tr>
                 {rows}
             </table>
diff --git a/app/static/styles.css b/app/static/styles.css
index 8b3f675..0deef16 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1037,26 +1037,22 @@ pre {
     border-radius: 10px;
 }
 
-/* Rozbalovací formulář pro změnu Gitea jména/hesla v tabulce uživatelů. */
-.gitea-cred {
-    margin-top: 8px;
+/* Tabulka uživatelů: zarovnání do řádků jako u seznamu služeb. */
+.user-row td {
+    vertical-align: middle;
 }
 
-.gitea-cred summary {
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--primary);
+.user-avatar-empty {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
 }
 
-.gitea-cred .metadata-form {
-    margin-top: 8px;
-    min-width: 200px;
-    gap: 4px;
-}
-
-.gitea-cred input {
-    min-height: 32px;
+.muted-cell {
+    font-size: 13px;
+    line-height: 1.5;
+    white-space: nowrap;
 }
 
 .log-stdout {