add groups (TEST)

webroot/index.html

@@ -119,6 +119,25 @@
             </div>
         </div>
     </div>
+
+    <div id="rotation-popup-container" class="profile-popup-container" style="display: none; z-index: 9999;">
+        <div class="profile-popup-bg" onclick="closeRotationPopup()"></div>
+        <div class="profile-popup-content">
+            <button class="profile-popup-close-btn" onclick="closeRotationPopup()">
+                <script>
+                    document.currentScript.insertAdjacentHTML('beforebegin', ICONS.close());
+                    document.currentScript.remove();
+                </script>
+            </button>
+            <div id="profile-popup-inner" style="padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;">
+                <div style="font-size: 1.2rem; font-weight: 500; text-align: center;"><blah>title.key.rotation</blah></div>
+                <div style="width: 100%; text-align: center; color: var(--text-color); opacity: 0.8; margin-top: 1rem; margin-bottom: 1rem;" id="rotation-popup-desc">
+                    <!-- content injected dynamically -->
+                </div>
+                <button class="profile-action-btn" onclick="executeKeyRotation()"><blah>action.rotate.keys</blah></button>
+            </div>
+        </div>
+    </div>
 </body>
 </html>
 
@@ -208,8 +227,59 @@
         }
     }
 
-    async function createGroup() {
+    async function refreshGroups(waittime = 0, showLoading = true) {
+        try {
+            if (showLoading) showAction("action.group.fetch", "grouprefresh");
+            await delay(waittime);
+            if (window.cachedGroups && typeof renderGroups === 'function') {
+                await renderGroups(window.cachedGroups);
+            }
+            let res = await fetchEncrypted("user/group/list");
+            window.cachedGroups = res;
+            if (typeof renderGroups === 'function') {
+                await renderGroups(res);
+            }
+            if (showLoading) clearAction("grouprefresh");
+        }
+        catch (e) {
+            if (showLoading) clearAction("grouprefresh");
+            showBlahNotification("error:group.refresh.failed");
+        }
+    }
 
+    async function createGroup() {
+        try {
+            let groupName = document.getElementById("creategroup-name").value;
+            if (!groupName || groupName.trim() === "") {
+                showBlahNotification("error:group.name.empty");
+                return;
+            }
+
+            showAction("action.group.creating", "group.action");
+
+            await ensureUserKeys();
+            const roomKey = randomRoomKey256Chars();
+            const selfWrapped = await wrapRoomKeyForSelf(roomKey);
+
+            let payload = JSON.stringify({
+                string1: groupName,
+                string2: selfWrapped
+            });
+
+            let res = await fetchEncrypted("group/create", payload);
+            clearAction("group.action");
+            
+            if (res.startsWith("success:")) {
+                showBlahNotification("success:group.created");
+                await refreshGroups(200, false);
+            } else {
+                showBlahNotification(res || "error:something.wrong");
+            }
+        } catch (e) {
+            clearAction("group.action");
+            showBlahNotification("error:something.wrong");
+            console.error(e);
+        }
     }
 </script>
 <script src="gifuct.js"></script>