Added validation for user groups on front-end.

app/(protected)/settings/groups/permissions/page.tsx

@@ -44,6 +44,10 @@ const GroupPermissionPage = () => {
         setGroups(groups.filter(g => g.id != group.id))
     }
 
+    function containsGroup(groupName: string) {
+        return groups.some(g => g.name == groupName)
+    }
+
     useEffect(() => {
         if (status !== "authenticated" || previousUsername == session.user?.name)
             return
@@ -56,7 +60,6 @@ const GroupPermissionPage = () => {
                     if (!d.data.some((g: { id: string, name: string, priority: number }) => g.name == groupName))
                         d.data.push({ id: "$" + groupName, name: groupName, priority: 0 });
 
-
                 axios.get('/api/settings/groups/permissions')
                     .then(d2 => {
                         setPermissions(d2.data)
@@ -89,7 +92,8 @@ const GroupPermissionPage = () => {
                         permissionPaths={permissionPaths}
                         specialGroups={specialGroups}
                         adder={addGroup}
-                        remover={removeGroup} />
+                        remover={removeGroup}
+                        contains={containsGroup} />
                 </div>
             )}
             <div
@@ -105,7 +109,8 @@ const GroupPermissionPage = () => {
                     permissionPaths={permissionPaths}
                     specialGroups={specialGroups}
                     adder={addGroup}
-                    remover={removeGroup} />
+                    remover={removeGroup}
+                    contains={containsGroup} />
             </div>
             </div>
         </div>