Added validation for user groups on front-end.

This commit is contained in:
Tom 2024-08-16 00:12:55 +00:00
parent b92529d8c0
commit 2d40d6fe09
2 changed files with 40 additions and 12 deletions

View File

@ -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>

View File

@ -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 [group, setGroup] = useState<{ id: string | undefined, name: string, priority: number }>({ id, name, priority })
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 [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>
}