Added validation for user groups on front-end.
This commit is contained in:
parent
b92529d8c0
commit
2d40d6fe09
@ -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>
|
||||
|
@ -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>
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user