Implemented group creation button

src/Controllers/GroupsController.cs

@@ -61,12 +61,20 @@ public class GroupsController : Controller
         });
     }
 
-    [HttpGet("Create")]
-    public async Task<bool> Create(string cn, string gidNumber, GroupPermission[] permissions, string description)
+    [HttpPost("Create")]
+    public async Task<GroupsCreateResponseModel> Create([FromBody]GroupsCreateRequestModel model)
     { 
+        if (model is null)
+        {
+            return new GroupsCreateResponseModel(
+                successful: false,
+                exception: "Unable to create a group because the GroupsCreateRequestModel is null.");
+        }
         try
         {
-            description ??= JsonSerializer.Serialize(new GroupPermissions() {Permissions = []});
+            List<GroupPermission> permissions = model.Permissions;
+            string gidNumber = "0"; // TODO implement counter
+            string cn = model.Cn;
 
             LdapAttributeSet attributeSet =
             [
@@ -76,19 +84,16 @@ public class GroupsController : Controller
                 new LdapAttribute("gidNumber", gidNumber),
                 new LdapAttribute(
                     "description",
-                    JsonSerializer.Serialize(new GroupPermissions()
-                    {
-                        Permissions = [.. permissions]
-                    }))
+                    JsonSerializer.Serialize(new GroupPermissions(){Permissions = permissions}))
             ];
             
             await _ldap.CreateGroup(cn, attributeSet);
-            return true;
+            return new(true);
         }
         catch (Exception ex)
         {
-            _logger.LogError("Unable to create user: {ex.Message} - {ex.StackTrace}", [ex.Message, ex.StackTrace]);
-            return false;
+            _logger.LogError("Unable to create group: {ex.Message} - {ex.StackTrace}", [ex.Message, ex.StackTrace]);
+            return new(false, ex.Message);
         }
     }
     

src/Models/GroupsRequestModels.cs

@@ -1,3 +1,5 @@
+using System.Text.Json.Serialization;
+
 namespace Berufsschule_HAM.Models;
 
 public class GroupsIndexRequestModel
@@ -7,6 +9,16 @@ public class GroupsIndexRequestModel
     public bool Permissions { get; set; } = true;
 }
 
+public class GroupsCreateRequestModel
+{
+    [JsonPropertyName("Cn")]
+    public required string Cn { get; set; }
+    [JsonPropertyName("DisplayName")]
+    public required string DisplayName { get; set; }
+    [JsonPropertyName("Permissions")]
+    public required List<GroupPermission> Permissions { get; set; }
+}
+
 public class GroupsModifyRequestModel
 {
     public required string Cn { get; set; }

src/Models/GroupsResponseModels.cs

@@ -1,4 +1,11 @@
 namespace Berufsschule_HAM.Models;
+
+public class GroupsCreateResponseModel(bool successful, string exception = "None")
+{
+    public bool Success { get; set; } = successful;
+    public string? Exception { get; set; } = exception;
+}
+
 public class GroupsDeleteResponseModel(bool successful, string exception = "None")
 {
     public bool Success { get; set; } = successful;

src/Views/Home/Groups.cshtml

@@ -13,7 +13,9 @@
 
     
     <div class="mb-4 d-flex flex-wrap gap-2">
-        <button class="btn btn-primary">@T["Create group"]</button>
+        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createGroupModal">
+            @T["Create group"]
+        </button>
     </div>
 
     
@@ -83,6 +85,33 @@
 
 
 <script>
+
+    // Simple toast helper
+    function showToast(message, type) {
+        const toastContainer = document.getElementById('toastContainer') || createToastContainer();
+        const toast = document.createElement('div');
+        toast.className = `toast align-items-center text-white bg-${type} border-0`;
+        toast.role = 'alert';
+        toast.innerHTML = `
+            <div class="d-flex">
+                <div class="toast-body">${message}</div>
+                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+            </div>
+        `;
+        toastContainer.appendChild(toast);
+        const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
+        bsToast.show();
+        toast.addEventListener('hidden.bs.toast', () => toast.remove());
+    }
+
+    function createToastContainer() {
+        const container = document.createElement('div');
+        container.id = 'toastContainer';
+        container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+        document.body.appendChild(container);
+        return container;
+    }
+
     document.addEventListener('DOMContentLoaded', () => {
         const deleteModal = document.getElementById('deleteModal');
         let currentButton = null; // The delete button that opened the modal
@@ -129,40 +158,142 @@
                     row.classList.add('table-danger');
                     setTimeout(() => row.remove(), 300);
 
-                    showToast('Group deleted successfully', 'success');
+                    showToast('@T["Group deleted successfully"]', 'success');
                 } else {
-                    showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
+                    let exception = result.exception;
+                    switch (exception) {
+                        case "None":
+                            exception = "@T["Unknown error"]";
+                        default:
+                            break;
+                    }
+                    showToast(`${@T["Error"] + ": " + exception}`, 'danger');
                 }
             } catch (error) {
                 console.error(error);
-                showToast('Error contacting server', 'danger');
+                showToast('@T["Error contacting server"]', 'danger');
+            }
+        });
+    });
+</script>
+
+<!-- Groups Create Modal -->
+<div class="modal fade" id="createGroupModal" tabindex="-1" aria-labelledby="createGroupModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title" id="createGroupModalLabel">@T["Create Group"]</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+
+            <form id="createGroupForm">
+                <div class="modal-body">
+                    <div class="row g-3 justify-content-center">
+                        <!-- Basic Info -->
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Group ID"] *</label>
+                            <input type="text" class="form-control" name="Cn" required />
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label">@T["Display name"] *</label>
+                            <input type="text" class="form-control" name="DisplayName" />
+                        </div>
+
+                        <div class="col-md-3">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" name="Permissions.CanInventorize" id="canInventorize" />
+                                <label class="form-check-label" for="canInventorize">@T["Can inventorize"]</label>
+                            </div>
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" name="Permissions.CanManageAssets" id="canManageAssets" />
+                                <label class="form-check-label" for="canManageAssets">@T["Can manage assets"]</label>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" name="Permissions.CanManageUsers" id="canManageUsers" />
+                                <label class="form-check-label" for="canManageUsers">@T["Can manage users"]</label>
+                            </div>
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" name="Permissions.CanManageGroups" id="canManageGroups" />
+                                <label class="form-check-label" for="canManageGroups">@T["Can manage groups"]</label>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-check">
+                                <input type="checkbox" class="form-check-input" name="Permissions.CanManageLocations" id="canManageLocations" />
+                                <label class="form-check-label" for="canManageLocations">@T["Can manage locations"]</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">@T["Cancel"]</button>
+                    <button type="submit" class="btn btn-primary">@T["Create"]</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const createForm = document.getElementById('createGroupForm');
+
+        createForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(createForm);
+            const jsonData = {};
+
+            // Basic fields
+            jsonData.Cn = formData.get('Cn');
+            jsonData.DisplayName = formData.get('DisplayName');
+
+            // Permissions
+            jsonData.Permissions = [];
+            if (createForm.querySelector('[name="Permissions.CanInventorize"]').checked) jsonData.Permissions.push("CanInventorize");
+            if (createForm.querySelector('[name="Permissions.CanManageAssets"]').checked) jsonData.Permissions.push("CanManageAssets");
+            if (createForm.querySelector('[name="Permissions.CanManageUsers"]').checked) jsonData.Permissions.push("CanManageUsers");
+            if (createForm.querySelector('[name="Permissions.CanManageGroups"]').checked) jsonData.Permissions.push("CanManageGroups");
+            if (createForm.querySelector('[name="Permissions.CanManageLocations"]').checked) jsonData.Permissions.push("CanManageLocations");
+
+            try {
+                const response = await fetch('/Groups/Create', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    },
+                    body: JSON.stringify(jsonData)
+                });
+
+                const result = await response.json();
+
+                const createModalEl = document.getElementById('createGroupModal');
+                if (result.success) {
+                    bootstrap.Modal.getInstance(createModalEl).hide();
+                    createForm.reset();
+                    showToast('@T["Group created successfully"]', 'success');
+                } else {
+                    let exception = result.exception;
+                    switch (exception) {
+                        case "Entry Already Exists":
+                            exception = "@T["Entry Already Exists"]";
+                            break;
+                        case "None":
+                            exception = "@T["Unknown error"]";
+                        default:
+                            break;
+                    }
+                    showToast("@T["Error"]: " + result.exception || '@T["Error creating group"]', 'danger');
+                }
+            } catch (err) {
+                console.error(err);
+                showToast('@T["Error contacting server"]', 'danger');
             }
         });
-
-        // Simple toast helper
-        function showToast(message, type) {
-            const toastContainer = document.getElementById('toastContainer') || createToastContainer();
-            const toast = document.createElement('div');
-            toast.className = `toast align-items-center text-white bg-${type} border-0`;
-            toast.role = 'alert';
-            toast.innerHTML = `
-                <div class="d-flex">
-                    <div class="toast-body">${message}</div>
-                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
-                </div>
-            `;
-            toastContainer.appendChild(toast);
-            const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
-            bsToast.show();
-            toast.addEventListener('hidden.bs.toast', () => toast.remove());
-        }
-
-        function createToastContainer() {
-            const container = document.createElement('div');
-            container.id = 'toastContainer';
-            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
-            document.body.appendChild(container);
-            return container;
-        }
     });
 </script>