Call Confluence REST API

<div id="group-audit-container">
    <form class="aui" style="margin-top: 20px; margin-left: 10px; margin-right: 10px;" onsubmit="return false;" >
        <label for="groupName">Select Group: </label>
        <select id="groupName" class="select">
            <option value="1">administrators</option>
            <option value="2">site-admins</option>
            <option value="3">confluence-users</option>
        </select>
        <button id="fetchGroupDetails" class="aui-button">Fetch Group Details</button>
        <div id="groupDetails" style="margin-top: 20px; border: 1px solid #ddd; padding: 10px;"></div>
    </form>
</div>

<script>    
    fetchGroups();
    async function fetchGroups(){

        let groups = [];
        let url = `/rest/api/group`;
        while(url){

            try{
                const response = await AP.request({
                    url: url,            
                    type: "GET",
                    contentType: "application/json"
                });

                let data = JSON.parse(response.body);

                if (!data.results || data.results.length === 0) {
                    break;
                }

                groups = groups.concat(data.results);
                url = data._links.next;        

            } catch (error) {
                console.error("Error:", error);
                url = undefined;
            }   
        }

        if(groups.length === 0){            
            return;
        }

        const groupSelect = document.getElementById("groupName");
        groupSelect.innerHTML = ""; // Clear existing options

        groups.forEach(group => {
            const option = document.createElement("option");
            option.value = group.id;
            option.textContent = group.name;
            groupSelect.appendChild(option);
        });
    }    

    async function fetchGroupMembers(groupId) {
        const groupDetailsDiv = document.getElementById("groupDetails");
        groupDetailsDiv.textContent = "Fetching group details...";

        let groupMembers = [];
        let url = `/rest/api/group/${groupId}/membersByGroupId`;

        while(url){

            try {
                const response = await AP.request({
                    url: url,            
                    type: "GET",
                    contentType: "application/json"
                });

                if (response.xhr.status !== 200) {
                    throw new Error(`Error fetching group members: ${response.statusText}`);
                }

                let data = JSON.parse(response.body);

                if (!data.results || data.results.length === 0) {                
                    break;
                }

                groupMembers = groupMembers.concat(data.results);
                url = data._links.next;             

            } catch (error) {
                console.error("Error:", error);
                groupDetailsDiv.textContent = "Failed to fetch group members. Check the console for details.";
                url = undefined;
            }
        }

        if (groupMembers.length === 0) {
            groupDetailsDiv.textContent = "No members found for this group.";
            return;            
        }

        // Build and display the table
        let table = `
                <table class="aui" border="1" style="width: 100%; border-collapse: collapse;">
                <thead>
                <tr>
                    <th></th>                
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                `;

        for (const member of groupMembers) {

            let img = `https://www.gravatar.com/avatar/${member.emailAddress}?s=32&d=identicon`;
            img = member.profilePicture?.path;
            if (!img) {
                img = `https://www.gravatar.com/avatar/${member.emailAddress}?s=32&d=identicon`;
            }
            else{
                if(!img.startsWith("http")){
                    img = `${AP._hostOrigin}/${img}`;
                }
            }
            table += `
                        <tr>
                            <td><img style="width:32px; hight:32px;" src="${img}" alt="Avatar"></td>
                            <td>${member.displayName}</td>
                            <td>${member.emailAddress || "N/A"}</td>                            
                        </tr>
                        `;
        }

        table += "</tbody></table>";
        groupDetailsDiv.innerHTML = table;
    }

    document.getElementById("fetchGroupDetails").addEventListener("click", () => {
        const groupId = document.getElementById("groupName").value.trim();

        if (!groupId) {
            alert("Please select a group.");
            return;
        }

        fetchGroupMembers(groupId);
    });   

</script>