fc-server: polish user management; add starred jobs UI

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: Ie3034d4a66a55cb71c23ba25b40d678f6a6a6964

crates/server/templates/base.html

@@ -15,6 +15,8 @@
       <a href="/builds">Builds</a>
       <a href="/queue">Queue</a>
       <a href="/channels">Channels</a>
+      <a href="/starred">Starred</a>
+      <a href="/users">Users</a>
       <a href="/admin">Admin</a>
     </div>
     <div class="nav-auth">

crates/server/templates/jobset.html

@@ -15,10 +15,23 @@
   <dd><code>{{ jobset.nix_expression }}</code></dd>
   <dt>Flake mode</dt>
   <dd>{% if jobset.flake_mode %}Yes{% else %}No{% endif %}</dd>
-  <dt>Enabled</dt>
-  <dd>{% if jobset.enabled %}Yes{% else %}No{% endif %}</dd>
+  <dt>State</dt>
+  <dd>
+    {% match jobset.state %}
+      {% when fc_common::models::JobsetState::Disabled %}
+        <span class="badge badge-cancelled">Disabled</span>
+      {% when fc_common::models::JobsetState::Enabled %}
+        <span class="badge badge-completed">Enabled</span>
+      {% when fc_common::models::JobsetState::OneShot %}
+        <span class="badge badge-pending">One-Shot</span>
+      {% when fc_common::models::JobsetState::OneAtATime %}
+        <span class="badge badge-running">One-at-a-Time</span>
+    {% endmatch %}
+  </dd>
   <dt>Check interval</dt>
   <dd>{{ jobset.check_interval }}s</dd>
+  <dt>Last checked</dt>
+  <dd>{% if let Some(t) = jobset.last_checked_at %}{{ t.format("%Y-%m-%d %H:%M:%S") }}{% else %}Never{% endif %}</dd>
 </dl>
 
 {% if !eval_summaries.is_empty() %}

crates/server/templates/starred.html

@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+{% block title %}Starred Jobs - FC CI{% endblock %}
+{% block auth %}
+{% if !auth_name.is_empty() %}
+<span class="auth-user">{{ auth_name }}</span>
+<form method="POST" action="/logout"><button type="submit">Logout</button></form>
+{% else %}
+<a href="/login">Login</a>
+{% endif %}
+{% endblock %}
+{% block content %}
+<h1>Starred Jobs</h1>
+
+{% if !is_logged_in %}
+<div class="empty">
+  <div class="empty-title">Login required</div>
+  <div class="empty-hint">Please <a href="/login">login</a> to view your starred jobs.</div>
+</div>
+{% else %}
+{% if starred_jobs.is_empty() %}
+<div class="empty">
+  <div class="empty-title">No starred jobs</div>
+  <div class="empty-hint">Star jobs from project or build pages to track them here.</div>
+</div>
+{% else %}
+<div class="table-wrap">
+<table>
+  <thead>
+    <tr>
+      <th>Project</th>
+      <th>Jobset</th>
+      <th>Job Name</th>
+      <th>Latest Status</th>
+      <th>Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for s in starred_jobs %}
+    <tr>
+      <td><a href="/project/{{ s.project_id }}">{{ s.project_name }}</a></td>
+      <td>
+        {% if let Some(id) = s.jobset_id %}
+        <a href="/jobset/{{ id }}">{{ s.jobset_name }}</a>
+        {% else %}
+        -
+        {% endif %}
+      </td>
+      <td>{{ s.job_name }}</td>
+      <td>
+        <span class="badge badge-{{ s.status_class }}">{{ s.status_text }}</span>
+      </td>
+      <td>
+        <button class="btn btn-small" onclick="unstar('{{ s.id }}')">Unstar</button>
+        {% if let Some(id) = s.latest_build_id %}
+        <a href="/build/{{ id }}" class="btn btn-small">View Build</a>
+        {% endif %}
+      </td>
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+</div>
+{% endif %}
+{% endif %}
+{% endblock %}
+{% block scripts %}
+<script>
+async function unstar(id) {
+  if (!confirm('Remove this job from your starred list?')) return;
+  try {
+    const res = await fetch('/api/v1/me/starred/' + id, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to unstar');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(err.message);
+  }
+}
+</script>
+{% endblock %}

crates/server/templates/users.html

@@ -0,0 +1,168 @@
+{% extends "base.html" %}
+{% block title %}Users - FC CI{% endblock %}
+{% block auth %}
+{% if !auth_name.is_empty() %}
+<span class="auth-user">{{ auth_name }}</span>
+<form method="POST" action="/logout"><button type="submit">Logout</button></form>
+{% else %}
+<a href="/login">Login</a>
+{% endif %}
+{% endblock %}
+{% block content %}
+<h1>User Management</h1>
+
+{% if is_admin %}
+<details>
+  <summary>Create User</summary>
+  <div class="form-card">
+    <form id="create-user-form">
+      <div class="form-group">
+        <label for="user-username">Username</label>
+        <input type="text" id="user-username" required pattern="[a-zA-Z0-9_-]+" minlength="3" maxlength="50">
+      </div>
+      <div class="form-group">
+        <label for="user-email">Email</label>
+        <input type="email" id="user-email" required>
+      </div>
+      <div class="form-group">
+        <label for="user-fullname">Full Name (optional)</label>
+        <input type="text" id="user-fullname">
+      </div>
+      <div class="form-group">
+        <label for="user-password">Password</label>
+        <input type="password" id="user-password" required minlength="8">
+      </div>
+      <div class="form-group">
+        <label for="user-role">Role</label>
+        <select id="user-role">
+          <option value="read-only" selected>read-only</option>
+          <option value="admin">admin</option>
+          <option value="create-projects">create-projects</option>
+          <option value="eval-jobset">eval-jobset</option>
+          <option value="cancel-build">cancel-build</option>
+          <option value="restart-jobs">restart-jobs</option>
+          <option value="bump-to-front">bump-to-front</option>
+        </select>
+      </div>
+      <button type="submit" class="btn">Create User</button>
+    </form>
+    <div id="user-msg"></div>
+  </div>
+</details>
+{% endif %}
+
+{% if users.is_empty() %}
+<div class="empty">
+  <div class="empty-title">No users</div>
+  <div class="empty-hint">Create a user above to enable user authentication.</div>
+</div>
+{% else %}
+<div class="table-wrap">
+<table>
+  <thead>
+    <tr>
+      <th>Username</th>
+      <th>Email</th>
+      <th>Role</th>
+      <th>Type</th>
+      <th>Enabled</th>
+      <th>Last Login</th>
+      {% if is_admin %}<th>Actions</th>{% endif %}
+    </tr>
+  </thead>
+  <tbody>
+    {% for u in users %}
+    <tr>
+      <td>{{ u.username }}</td>
+      <td>{{ u.email }}</td>
+      <td><span class="badge badge-pending">{{ u.role }}</span></td>
+      <td>{{ u.user_type }}</td>
+      <td>{% if u.enabled %}Yes{% else %}No{% endif %}</td>
+      <td>{{ u.last_login_at }}</td>
+      {% if is_admin %}
+      <td>
+        <button class="btn btn-small" onclick="toggleUser('{{ u.id }}', {{ !u.enabled }})">
+          {% if u.enabled %}Disable{% else %}Enable{% endif %}
+        </button>
+        <button class="btn btn-danger btn-small" onclick="deleteUser('{{ u.id }}')">Delete</button>
+      </td>
+      {% endif %}
+    </tr>
+    {% endfor %}
+  </tbody>
+</table>
+</div>
+
+<nav class="pagination">
+  {% if has_prev %}
+  <a href="/users?limit={{ limit }}&offset={{ prev_offset }}" class="btn btn-small">Previous</a>
+  {% endif %}
+  <span>Page {{ page }} of {{ total_pages }}</span>
+  {% if has_next %}
+  <a href="/users?limit={{ limit }}&offset={{ next_offset }}" class="btn btn-small">Next</a>
+  {% endif %}
+</nav>
+{% endif %}
+{% endblock %}
+{% block scripts %}
+{% if is_admin %}
+<script>
+document.getElementById('create-user-form')?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const msg = document.getElementById('user-msg');
+  try {
+    const fullName = document.getElementById('user-fullname').value;
+    const res = await fetch('/api/v1/users', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({
+        username: document.getElementById('user-username').value,
+        email: document.getElementById('user-email').value,
+        full_name: fullName || null,
+        password: document.getElementById('user-password').value,
+        role: document.getElementById('user-role').value,
+      }),
+    });
+    const data = await res.json().catch(() => ({}));
+    if (res.ok) {
+      msg.innerHTML = '<div class="flash-message flash-success">User created successfully!</div>';
+      setTimeout(() => window.location.reload(), 1500);
+    } else {
+      throw new Error(data.error || data.message || 'Unknown error');
+    }
+  } catch(err) {
+    showError(msg, err.message);
+  }
+});
+async function toggleUser(id, enable) {
+  try {
+    const res = await fetch('/api/v1/users/' + id, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ enabled: enable }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to update user');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
+}
+async function deleteUser(id) {
+  if (!confirm('Delete this user? This action cannot be undone.')) return;
+  try {
+    const res = await fetch('/api/v1/users/' + id, { method: 'DELETE' });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }));
+      throw new Error(err.error || err.message || 'Failed to delete user');
+    }
+    window.location.reload();
+  } catch(err) {
+    alert(escapeHtml(err.message));
+  }
+}
+</script>
+{% endif %}
+{% endblock %}