snapshot of https://github.com/seaweedfs/seaweedfs.git (master, 2026-09-16; blobs > 131072B omitted)

weed/admin/view/app/groups.templ

@@ -0,0 +1,442 @@
+package app
+
+import (
+    "fmt"
+    "github.com/seaweedfs/seaweedfs/weed/admin/dash"
+)
+
+templ Groups(data dash.GroupsPageData) {
+    <div class="container-fluid">
+        <!-- Page Header -->
+        <div class="d-sm-flex align-items-center justify-content-between mb-4">
+            <div>
+                <h1 class="h3 mb-0 text-gray-800">
+                    <i class="fas fa-users-cog me-2"></i>Groups
+                </h1>
+                <p class="mb-0 text-muted">Manage IAM groups for organizing users and policies</p>
+            </div>
+            <div class="d-flex gap-2">
+                <button type="button" class="btn btn-primary"
+                        data-bs-toggle="modal"
+                        data-bs-target="#createGroupModal">
+                    <i class="fas fa-plus me-1"></i>Create Group
+                </button>
+            </div>
+        </div>
+
+        <!-- Summary Cards -->
+        <div class="row mb-4">
+            <div class="col-xl-3 col-md-6 mb-4">
+                <div class="card border-left-primary shadow h-100 py-2">
+                    <div class="card-body">
+                        <div class="row no-gutters align-items-center">
+                            <div class="col mr-2">
+                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
+                                    Total Groups
+                                </div>
+                                <div class="h5 mb-0 font-weight-bold text-gray-800">
+                                    {fmt.Sprintf("%d", data.TotalGroups)}
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <i class="fas fa-users-cog fa-2x text-gray-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xl-3 col-md-6 mb-4">
+                <div class="card border-left-success shadow h-100 py-2">
+                    <div class="card-body">
+                        <div class="row no-gutters align-items-center">
+                            <div class="col mr-2">
+                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
+                                    Active Groups
+                                </div>
+                                <div class="h5 mb-0 font-weight-bold text-gray-800">
+                                    {fmt.Sprintf("%d", data.ActiveGroups)}
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <i class="fas fa-check-circle fa-2x text-gray-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Groups Table -->
+        <div class="card shadow mb-4">
+            <div class="card-header py-3">
+                <h6 class="m-0 font-weight-bold text-primary">Groups</h6>
+            </div>
+            <div class="card-body">
+                if len(data.Groups) == 0 {
+                    <div class="text-center py-5 text-muted">
+                        <i class="fas fa-users-cog fa-3x mb-3"></i>
+                        <p>No groups found. Create a group to get started.</p>
+                    </div>
+                } else {
+                    <div class="table-responsive">
+                        <table class="table table-bordered table-hover" id="groupsTable" width="100%" cellspacing="0">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Members</th>
+                                    <th>Policies</th>
+                                    <th>Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                for _, group := range data.Groups {
+                                    <tr>
+                                        <td>
+                                            <strong>{group.Name}</strong>
+                                        </td>
+                                        <td>
+                                            <span class="badge bg-info">{fmt.Sprintf("%d", group.MemberCount)}</span>
+                                        </td>
+                                        <td>
+                                            <span class="badge bg-secondary">{fmt.Sprintf("%d", group.PolicyCount)}</span>
+                                        </td>
+                                        <td>
+                                            if group.Status == "enabled" {
+                                                <span class="badge bg-success">Enabled</span>
+                                            } else {
+                                                <span class="badge bg-danger">Disabled</span>
+                                            }
+                                        </td>
+                                        <td>
+                                            <button class="btn btn-sm btn-outline-primary me-1"
+                                                    data-group-name={group.Name}
+                                                    data-action="view"
+                                                    aria-label={"View group " + group.Name}
+                                                    title={"View " + group.Name}>
+                                                <i class="fas fa-eye"></i>
+                                            </button>
+                                            <button class="btn btn-sm btn-outline-danger"
+                                                    data-group-name={group.Name}
+                                                    data-action="delete"
+                                                    aria-label={"Delete group " + group.Name}
+                                                    title={"Delete " + group.Name}>
+                                                <i class="fas fa-trash"></i>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                }
+            </div>
+        </div>
+
+        <!-- Create Group Modal -->
+        <div class="modal fade" id="createGroupModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Create Group</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="createGroupForm">
+                            <div class="mb-3">
+                                <label for="groupName" class="form-label">Group Name</label>
+                                <input type="text" class="form-control" id="groupName" name="name" required
+                                       placeholder="Enter group name"/>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-primary" onclick="createGroup()">Create</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- View Group Modal -->
+        <div class="modal fade" id="viewGroupModal" tabindex="-1">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="viewGroupTitle">Group Details</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <ul class="nav nav-tabs" id="groupTabs" role="tablist">
+                            <li class="nav-item">
+                                <a class="nav-link active" id="members-tab" data-bs-toggle="tab" href="#membersPane" role="tab">Members</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" id="policies-tab" data-bs-toggle="tab" href="#policiesPane" role="tab">Policies</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settingsPane" role="tab">Settings</a>
+                            </li>
+                        </ul>
+                        <div class="tab-content mt-3" id="groupTabContent">
+                            <!-- Members Tab -->
+                            <div class="tab-pane fade show active" id="membersPane" role="tabpanel">
+                                <div class="mb-3">
+                                    <div class="input-group">
+                                        <select class="form-select" id="addMemberSelect">
+                                            <option value="">Select user to add...</option>
+                                            for _, user := range data.AvailableUsers {
+                                                <option value={user}>{user}</option>
+                                            }
+                                        </select>
+                                        <button class="btn btn-outline-primary" type="button" onclick="addMemberToGroup()">
+                                            <i class="fas fa-plus"></i> Add
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="membersList"></div>
+                            </div>
+                            <!-- Policies Tab -->
+                            <div class="tab-pane fade" id="policiesPane" role="tabpanel">
+                                <div class="mb-3">
+                                    <div class="input-group">
+                                        <select class="form-select" id="attachPolicySelect">
+                                            <option value="">Select policy to attach...</option>
+                                            for _, policy := range data.AvailablePolicies {
+                                                <option value={policy}>{policy}</option>
+                                            }
+                                        </select>
+                                        <button class="btn btn-outline-primary" type="button" onclick="attachPolicyToGroup()">
+                                            <i class="fas fa-plus"></i> Attach
+                                        </button>
+                                    </div>
+                                </div>
+                                <div id="policiesList"></div>
+                            </div>
+                            <!-- Settings Tab -->
+                            <div class="tab-pane fade" id="settingsPane" role="tabpanel">
+                                <div class="form-check form-switch mb-3">
+                                    <input class="form-check-input" type="checkbox" id="groupEnabledSwitch" checked
+                                           onchange="toggleGroupStatus()"/>
+                                    <label class="form-check-label" for="groupEnabledSwitch">Group Enabled</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Groups page JavaScript
+        let currentGroupName = '';
+
+        async function createGroup() {
+            const name = document.getElementById('groupName').value.trim();
+            if (!name) {
+                showAlert('Group name is required', 'error');
+                return;
+            }
+            try {
+                const response = await fetch(basePath('/api/groups'), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name: name })
+                });
+                if (response.ok) {
+                    showAlert('Group created successfully', 'success');
+                    setTimeout(() => window.location.reload(), 1000);
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to create group: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to create group: ' + error.message, 'error');
+            }
+        }
+
+        async function viewGroup(name) {
+            currentGroupName = name;
+            document.getElementById('viewGroupTitle').textContent = 'Group: ' + name;
+            await refreshGroupDetails(name);
+            new bootstrap.Modal(document.getElementById('viewGroupModal')).show();
+        }
+
+        async function refreshGroupDetails(requestedName) {
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(requestedName)));
+                if (!response.ok) throw new Error('Failed to fetch group');
+                if (requestedName !== currentGroupName) return; // stale response
+                const group = await response.json();
+
+                // Render members using DOM APIs to prevent XSS
+                const membersList = document.getElementById('membersList');
+                membersList.innerHTML = '';
+                const membersTable = document.createElement('table');
+                membersTable.className = 'table table-sm';
+                const membersTbody = document.createElement('tbody');
+                if (group.members && group.members.length > 0) {
+                    for (const member of group.members) {
+                        const tr = membersTbody.insertRow();
+                        const td1 = tr.insertCell();
+                        td1.textContent = member;
+                        const td2 = tr.insertCell();
+                        const btn = document.createElement('button');
+                        btn.className = 'btn btn-sm btn-outline-danger';
+                        btn.onclick = () => removeMember(member);
+                        btn.innerHTML = '<i class="fas fa-times"></i>';
+                        td2.appendChild(btn);
+                    }
+                } else {
+                    const tr = membersTbody.insertRow();
+                    const td = tr.insertCell();
+                    td.className = 'text-muted';
+                    td.textContent = 'No members';
+                }
+                membersTable.appendChild(membersTbody);
+                membersList.appendChild(membersTable);
+
+                // Render policies using DOM APIs to prevent XSS
+                const policiesList = document.getElementById('policiesList');
+                policiesList.innerHTML = '';
+                const policiesTable = document.createElement('table');
+                policiesTable.className = 'table table-sm';
+                const policiesTbody = document.createElement('tbody');
+                if (group.policy_names && group.policy_names.length > 0) {
+                    for (const policy of group.policy_names) {
+                        const tr = policiesTbody.insertRow();
+                        const td1 = tr.insertCell();
+                        td1.textContent = policy;
+                        const td2 = tr.insertCell();
+                        const btn = document.createElement('button');
+                        btn.className = 'btn btn-sm btn-outline-danger';
+                        btn.onclick = () => detachPolicy(policy);
+                        btn.innerHTML = '<i class="fas fa-times"></i>';
+                        td2.appendChild(btn);
+                    }
+                } else {
+                    const tr = policiesTbody.insertRow();
+                    const td = tr.insertCell();
+                    td.className = 'text-muted';
+                    td.textContent = 'No policies attached';
+                }
+                policiesTable.appendChild(policiesTbody);
+                policiesList.appendChild(policiesTable);
+
+                // Update status toggle
+                document.getElementById('groupEnabledSwitch').checked = (group.status === 'enabled');
+            } catch (error) {
+                console.error('Error fetching group details:', error);
+            }
+        }
+
+        async function addMemberToGroup() {
+            const username = document.getElementById('addMemberSelect').value;
+            if (!username) return;
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(currentGroupName) + '/members'), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username: username })
+                });
+                if (response.ok) {
+                    await refreshGroupDetails(currentGroupName);
+                    showAlert('Member added', 'success');
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to add member: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to add member: ' + error.message, 'error');
+            }
+        }
+
+        async function removeMember(username) {
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(currentGroupName) + '/members/' + encodeURIComponent(username)), {
+                    method: 'DELETE'
+                });
+                if (response.ok) {
+                    await refreshGroupDetails(currentGroupName);
+                    showAlert('Member removed', 'success');
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to remove member: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to remove member: ' + error.message, 'error');
+            }
+        }
+
+        async function attachPolicyToGroup() {
+            const policyName = document.getElementById('attachPolicySelect').value;
+            if (!policyName) return;
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies'), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ policy_name: policyName })
+                });
+                if (response.ok) {
+                    await refreshGroupDetails(currentGroupName);
+                    showAlert('Policy attached', 'success');
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to attach policy: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to attach policy: ' + error.message, 'error');
+            }
+        }
+
+        async function detachPolicy(policyName) {
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(currentGroupName) + '/policies/' + encodeURIComponent(policyName)), {
+                    method: 'DELETE'
+                });
+                if (response.ok) {
+                    await refreshGroupDetails(currentGroupName);
+                    showAlert('Policy detached', 'success');
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to detach policy: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to detach policy: ' + error.message, 'error');
+            }
+        }
+
+        async function toggleGroupStatus() {
+            const enabled = document.getElementById('groupEnabledSwitch').checked;
+            try {
+                const response = await fetch(basePath('/api/groups/' + encodeURIComponent(currentGroupName) + '/status'), {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled: enabled })
+                });
+                if (response.ok) {
+                    showAlert('Group status updated', 'success');
+                } else {
+                    const error = await response.json().catch(() => ({}));
+                    showAlert('Failed to update status: ' + (error.error || 'Unknown error'), 'error');
+                }
+            } catch (error) {
+                showAlert('Failed to update status: ' + error.message, 'error');
+            }
+        }
+
+        // Event delegation for group action buttons
+        document.addEventListener('click', function(e) {
+            const btn = e.target.closest('[data-action]');
+            if (!btn) return;
+            const name = btn.dataset.groupName;
+            if (!name) return;
+            if (btn.dataset.action === 'view') viewGroup(name);
+            else if (btn.dataset.action === 'delete') deleteGroup(name);
+        });
+    </script>
+}