sso-mvk/views/admin/users.ejs

<div class="row">
  <div class="col-12">
    <div class="row mb-4">
      <div class="col-md-4">
        <div class="card text-bg-primary">
          <div class="card-body">
            <h5 class="card-title">Users</h5>
            <h2><%= stats.users %></h2>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card text-bg-success">
          <div class="card-body">
            <h5 class="card-title">OAuth Clients</h5>
            <h2><%= stats.clients %></h2>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card text-bg-info">
          <div class="card-body">
            <h5 class="card-title">Active Sessions</h5>
            <h2><%= stats.activeSessions %></h2>
          </div>
        </div>
      </div>
    </div>

    <ul class="nav nav-tabs mb-3">
      <li class="nav-item"><a class="nav-link active" href="/admin/users">Users</a></li>
      <li class="nav-item"><a class="nav-link" href="/admin/clients">OAuth Clients</a></li>
    </ul>

    <div class="card shadow">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span>Users (<%= users.length %>)</span>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">+ Add User</button>
      </div>
      <div class="card-body p-0">
        <table class="table table-striped mb-0">
          <thead>
            <tr>
              <th>Email</th>
              <th>Name</th>
              <th>Role</th>
              <th>Active</th>
              <th>Sessions</th>
              <th>Created</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <% users.forEach(function(u) { %>
            <tr>
              <td><%= u.email %></td>
              <td><%= u.displayName || '-' %></td>
              <td><span class="badge bg-<%= u.role === 'ADMIN' ? 'danger' : 'secondary' %>"><%= u.role %></span></td>
              <td><%= u.isActive ? 'Yes' : 'No' %></td>
              <td><%= u._count.sessions %></td>
              <td><%= new Date(u.createdAt).toLocaleDateString() %></td>
              <td>
                <button class="btn btn-sm btn-outline-danger" onclick="deleteUser('<%= u.id %>')">Delete</button>
              </td>
            </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="createUserModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Create User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="createUserForm">
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" id="newUserEmail" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Password</label>
            <input type="password" class="form-control" id="newUserPassword" minlength="8" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Display Name</label>
            <input type="text" class="form-control" id="newUserName">
          </div>
          <div class="mb-3">
            <label class="form-label">Role</label>
            <select class="form-control" id="newUserRole">
              <option value="USER">User</option>
              <option value="ADMIN">Admin</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" onclick="createUser()">Create</button>
      </div>
    </div>
  </div>
</div>

<script>
  const token = localStorage.getItem('access_token');
  if (!token) window.location.href = '/login';

  async function createUser() {
    const res = await fetch('/api/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
      body: JSON.stringify({
        email: document.getElementById('newUserEmail').value,
        password: document.getElementById('newUserPassword').value,
        displayName: document.getElementById('newUserName').value,
        role: document.getElementById('newUserRole').value,
      }),
    });
    if (res.ok) location.reload();
    else alert('Failed to create user');
  }

  async function deleteUser(id) {
    if (!confirm('Delete this user?')) return;
    const res = await fetch(`/api/admin/users/${id}`, {
      method: 'DELETE',
      headers: { 'Authorization': `Bearer ${token}` },
    });
    if (res.ok) location.reload();
    else alert('Failed to delete user');
  }
</script>