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>

components/elements/group.tsx

@@ -19,7 +19,8 @@ interface Group {
     permissionPaths: { path: string, description: string }[]
     specialGroups: string[]
     adder: (id: string, name: string, priority: number) => void
-    remover: (group: { id: string, name: string, priority: number }) => void
+    remover: (group: { id: string, name: string, priority: number }) => void,
+    contains: (groupName: string) => boolean
 }
 
 const GroupElement = ({
@@ -33,16 +34,17 @@ const GroupElement = ({
     permissionPaths,
     specialGroups,
     adder,
-    remover
+    remover,
+    contains
 }: Group) => {
     const [isEditable, setIsEditable] = useState(edit)
     const [isNew, setIsNew] = useState(isNewGroup)
     const [isMinimized, setIsMinimized] = useState(true)
-    const [oldData, setOldData] = useState<{ name: string, priority: number } | undefined>(undefined)
+    const [oldData, setOldData] = useState<{ id: string|undefined, name: string, priority: number } | undefined>(undefined)
-    const [group, setGroup] = useState<{ id: string | undefined, name: string, priority: number }>({ id, name, priority })
+    const [group, setGroup] = useState<{ id: string|undefined, name: string, priority: number }>({ id, name, priority })
     const [permissions, setPermissions] = useState<{ id: string, path: string, allow: boolean | null }[]>(permissionsLoaded);
     const isSpecial = (isEditable || oldData === undefined) && !!group && specialGroups.includes(group?.name)
-    const [error, setError] = useState<string | undefined>(undefined)
+    const [error, setError] = useState<string|undefined>(undefined)
 
 
     function addPermission(id: string, path: string, allow: boolean | null) {
@@ -64,6 +66,11 @@ const GroupElement = ({
         if (!isNew && !id)
             return
 
+        if (!group.name) {
+            setError("Set a value for the group name")
+            return
+        }
+
         const nameValidation = nameSchema.safeParse(group.name)
         if (!nameValidation.success) {
             setError(JSON.parse(nameValidation.error['message'])[0].message)
@@ -76,6 +83,11 @@ const GroupElement = ({
             return
         }
 
+        if (contains(group.name)) {
+            setError("Group already exist. Use another name.")
+            return;
+        }
+
         if (isNew || group.id?.startsWith('$')) {
             axios.post("/api/settings/groups", {
                 name: group.name,
@@ -96,7 +108,7 @@ const GroupElement = ({
                     setGroup({ id: undefined, name: "", priority: 0 })
                 }
             }).catch(() => {
-                setError("Potential group name duplicate.")
+                setError("Something went wrong.")
             })
         } else {
             axios.put("/api/settings/groups", {
@@ -104,10 +116,9 @@ const GroupElement = ({
                 name: group.name,
                 priority: group.priority
             }).then(d => {
-                console.log("DATA", d.data)
                 setIsEditable(false)
             }).catch(() => {
-                setError("Potential group name duplicate.")
+                setError("Something went wrong.")
             })
         }
     }
@@ -123,6 +134,18 @@ const GroupElement = ({
     }
 
     function Delete() {
+        if (!group.id) {
+            return;
+        }
+
+        if (!contains(oldData?.name ?? group.name)) {
+            if (oldData?.id)
+                remover({ ...oldData, id: oldData.id })
+            else
+                remover({ ...group, id: group.id })
+            return;
+        }
+
         axios.delete("/api/settings/groups?id=" + group.id)
             .then(d => {
                 if (specialGroups.includes(group.name)) {
@@ -150,7 +173,7 @@ const GroupElement = ({
                         Group Name
                     </Label>
                     {isSpecial &&
-                        <div className="bg-white text-muted text-xs p-1 rounded m-1 inline-block">
+                        <div className="bg-white text-muted text-xs p-1 rounded m-0 inline-block">
                             auto-generated
                         </div>
                     }