diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx index 29921c60a..8fcd8683f 100644 --- a/src/frontend/src/components/PaginatorComponent/index.tsx +++ b/src/frontend/src/components/PaginatorComponent/index.tsx @@ -1,9 +1,3 @@ -import { - ChevronLeft, - ChevronRight, - ChevronsLeft, - ChevronsRight, -} from "lucide-react"; import { useState } from "react"; import { Select, @@ -13,6 +7,7 @@ import { SelectValue, } from "../../components/ui/select"; import { PaginatorComponentType } from "../../types/components"; +import IconComponent from "../genericIconComponent"; import { Button } from "../ui/button"; export default function PaginatorComponent({ @@ -20,7 +15,7 @@ export default function PaginatorComponent({ pageIndex = 1, rowsCount = [10, 20, 30], totalRowsCount = 0, - paginate + paginate, }: PaginatorComponentType) { const [size, setPageSize] = useState(pageSize); const [index, setPageIndex] = useState(pageIndex); @@ -68,7 +63,7 @@ export default function PaginatorComponent({ }} > Go to first page - + diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx index 32647f159..681835f44 100644 --- a/src/frontend/src/components/genericIconComponent/index.tsx +++ b/src/frontend/src/components/genericIconComponent/index.tsx @@ -7,5 +7,5 @@ export default function IconComponent({ iconColor, }: IconComponentProps): JSX.Element { const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; - return ; + return ; } diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx index 1ab661223..22595faf3 100644 --- a/src/frontend/src/modals/UserManagementModal/index.tsx +++ b/src/frontend/src/modals/UserManagementModal/index.tsx @@ -1,9 +1,9 @@ -import { useState } from "react"; +import * as Form from "@radix-ui/react-form"; +import { useEffect, useState } from "react"; import { Button } from "../../components/ui/button"; -import { ConfirmationModalType, UserManagementType } from "../../types/components"; +import { UserManagementType } from "../../types/components"; import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; -import * as Form from '@radix-ui/react-form'; export default function UserManagementModal({ title, @@ -19,8 +19,25 @@ export default function UserManagementModal({ const Icon: any = nodeIconsLucide[icon]; const [open, setOpen] = useState(false); + + const [password, setPassword] = useState(data?.password ?? ""); + const [username, setUserName] = useState(data?.user ?? ""); + const [confirmPassword, setConfirmPassword] = useState(data?.password ?? ""); + + useEffect(() => { + if (!data) { + resetForm(); + } + }, [data, open]); + + function resetForm() { + setPassword(""); + setUserName(""); + setConfirmPassword(""); + } + return ( - + {children} {title} @@ -31,64 +48,190 @@ export default function UserManagementModal({ /> + { + if (password !== confirmPassword) { + event.preventDefault(); + return; + } + const data = Object.fromEntries(new FormData(event.currentTarget)); + resetForm(); + onConfirm(index ?? -1, data); + setOpen(false); + event.preventDefault(); + }} + > +
+ +
+ + Username{" "} + * + +
+ + { + setUserName(input.target.value); + }} + value={username} + className="primary-input" + required + /> + + + Please enter your username + +
- - -
- Email - - Please enter your email - - - Please provide a valid email - -
- - - -
- -
- Question - - Please enter a question - -
- -