jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(App.tsx): import 'useNavigate' from 'react-router-dom' to fix compilation error

Browse source 
✨ feat(App.tsx): add support for process.env.PORT environment variable to be able to run app on a configurable port
🐛 fix(App.tsx): change 'port' variable case from lowercase to uppercase to improve semantics
🐛 fix(App.tsx): fix typo in import statement for 'getLoggedUser' function
🐛 fix(App.tsx): add missing import statement for 'LoginType' type
🐛 fix(App.tsx): add missing import statement for 'LOCALHOST_JWT' constant
🐛 fix(App.tsx): add missing import statement for 'onLogin' function
🐛 fix(App.tsx): add missing import statement for 'setUserData' function
🐛 fix(App.tsx): add missing import statement for 'setErrorData' function
🐛 fix(App.tsx): add missing import statement for 'getUser' function
✨ feat(App.tsx): add logic to automatically log in user on localhost with predefined credentials
🐛 fix(PaginatorComponent/index.tsx): calculate 'maxIndex' based on 'totalRowsCount' and 'pageSize' to fix pagination bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update 'currentPage' state when changing pages to fix display bug
🐛 fix(PaginatorComponent/index.tsx): update

🐛 fix(UserManagementModal): change is_disabled to is_active to improve semantics and consistency

🐛 fix(AdminPage/index.tsx): import cloneDeep from lodash to fix missing import error
✨ feat(AdminPage/index.tsx): add support for user management functionality, including disabling and editing user properties

🐛 fix(AdminPage/index.tsx): fix indentation and remove unnecessary code
✨ feat(AdminPage/index.tsx): add ConfirmationModal component for editing and disabling users
🔥 chore(AdminPage/index.tsx): remove unused code and fix formatting

🔨 refactor(UserManagement.tsx): refactor UserManagement component to improve readability and maintainability
🔥 chore(UserManagement.tsx): remove unused code and unnecessary closing div tag

🔧 fix(loginPage): add useEffect hook to import statement to fix missing dependency warning
🔄 refactor(api): rename is_disabled field to is_active in Users type for better semantics
🔄 refactor(components): rename is_disabled field to is_active in UserInputType for better semantics
🔄 refactor(utils): add UserCog2 icon import to nodeIconsLucide for future use
🔄 refactor(tailwind.config.js): add text-align-last-left and text-align-last-right utility classes for text alignment
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-15 17:03:14 -03:00
commit 0383bc18ad
13 changed files with 380 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/src/App.tsx
View file

@ -1,6 +1,6 @@
import _ from "lodash";
import { useContext, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import "reactflow/dist/style.css";
import "./App.css";
@ -14,8 +14,10 @@ import { alertContext } from "./contexts/alertContext";
import { AuthContext } from "./contexts/authContext";
import { locationContext } from "./contexts/locationContext";
import { TabsContext } from "./contexts/tabsContext";
import { getLoggedUser } from "./controllers/API";
import { getLoggedUser, onLogin } from "./controllers/API";
import Router from "./routes";
import { LOCALHOST_JWT } from "./constants/constants";
import { LoginType } from "./types/api";
export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } =
@ -37,7 +39,9 @@ export default function App() {
successData,
successOpen,
setSuccessOpen,
setErrorData
} = useContext(alertContext);
const navigate = useNavigate();
// Initialize state variable for the list of alerts
const [alertsList, setAlertsList] = useState<
@ -51,6 +55,7 @@ export default function App() {
const isLoginPage = location.pathname.includes("login");
const isAdminPage = location.pathname.includes("admin");
const isSignUpPage = location.pathname.includes("signup");
const isLocalHost = window.location.href.includes("localhost");
// Use effect hook to update alertsList when a new alert is added
useEffect(() => {
@ -128,7 +133,7 @@ export default function App() {
};
//this function is to get the user logged in when the page is refreshed
const { setUserData, getAuthentication } = useContext(AuthContext);
const { setUserData, getAuthentication, login } = useContext(AuthContext);
useEffect(() => {
setTimeout(() => {
if (getAuthentication && !isLoginPage) {
@ -141,6 +146,40 @@ export default function App() {
}, 1000);
}, []);
useEffect(() => {
if(LOCALHOST_JWT === true && isLocalHost === true){
const user: LoginType = {
username: "superuser",
password: "12345",
};
onLogin(user)
.then((user) => {
login(user.access_token, user.refresh_token);
getUser();
navigate("/");
})
.catch((error) => {
setErrorData({
title: "Error signing in",
list: [error["response"]["data"]["detail"]],
});
});
}
}, [])
function getUser() {
if (getAuthentication) {
setTimeout(() => {
getLoggedUser()
.then((user) => {
setUserData(user);
})
.catch((error) => {});
}, 1000);
}
}
return (
//need parent component with width and height
<div className="flex h-full flex-col">

41
src/frontend/src/components/PaginatorComponent/index.tsx
View file

@ -19,7 +19,8 @@ export default function PaginatorComponent({
}: PaginatorComponentType) {
const [size, setPageSize] = useState(pageSize);
const [index, setPageIndex] = useState(pageIndex);
const [maxIndex, setMaxPageIndex] = useState(100);
const [maxIndex, setMaxPageIndex] = useState(Math.ceil(totalRowsCount/pageSize));
const [currentPage, setCurrentPage] = useState(1);
return (
<>
@ -31,7 +32,7 @@ export default function PaginatorComponent({
<Select
onValueChange={(pageSize: string) => {
setPageSize(Number(pageSize));
setMaxPageIndex(100);
setMaxPageIndex(Math.ceil(totalRowsCount/Number(pageSize)))
paginate(Number(pageSize), 0);
}}
>
@ -48,7 +49,7 @@ export default function PaginatorComponent({
</Select>
</div>
<div className="flex w-[100px] items-center justify-center text-sm font-medium">
Page {index + 1} of {maxIndex}
Page {currentPage} of {maxIndex}
</div>
<div className="flex items-center space-x-2">
<Button
@ -57,18 +58,25 @@ export default function PaginatorComponent({
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {
setPageIndex(0);
setCurrentPage(1);
paginate(size, 0);
}}
>
<span className="sr-only">Go to first page</span>
<IconComponent name="ChevronsLeft" className="h-4 w-4" />
</Button>
<Button
disabled={index <= 0}
onClick={() => {
if (index > 0) {
setPageIndex(index - 1);
paginate(size, index - 1);
const pgIndex = size - index;
setCurrentPage(currentPage-1);
setPageIndex(pgIndex);
paginate(size, pgIndex);
}
}}
variant="outline"
@ -77,11 +85,17 @@ export default function PaginatorComponent({
<span className="sr-only">Go to previous page</span>
<IconComponent name="ChevronLeft" className="h-4 w-4" />
</Button>
<Button
disabled={maxIndex === index}
disabled={currentPage === maxIndex}
onClick={() => {
setPageIndex(index + 1);
paginate(size, index + 1);
const pgIndex = size + index;
setPageIndex(pgIndex);
setCurrentPage(currentPage+1);
paginate(size, pgIndex);
}}
variant="outline"
className="h-8 w-8 p-0"
@ -89,13 +103,18 @@ export default function PaginatorComponent({
<span className="sr-only">Go to next page</span>
<IconComponent name="ChevronRight" className="h-4 w-4" />
</Button>
<Button
disabled={maxIndex === index}
disabled={currentPage === maxIndex}
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {
setPageIndex(maxIndex);
paginate(size, maxIndex);
setPageIndex(maxIndex-1);
setCurrentPage(maxIndex);
paginate(size, size);
}}
>
<span className="sr-only">Go to last page</span>

8
src/frontend/src/components/authLoginGuard/index.tsx
View file

@ -1,10 +1,18 @@
import { useContext } from "react";
import { Navigate } from "react-router-dom";
import { AuthContext } from "../../contexts/authContext";
import { LOCALHOST_JWT } from "../../constants/constants";
export const ProtectedLoginRoute = ({ children }) => {
const { getAuthentication } = useContext(AuthContext);
const isLocalHost = window.location.href.includes("localhost");
if(isLocalHost && LOCALHOST_JWT){
window.location.replace("/");
return <Navigate to="/" replace />;
}
if (getAuthentication()) {
window.location.replace("/");
return <Navigate to="/" replace />;

27
src/frontend/src/components/headerComponent/index.tsx
View file

@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
import { Link, useLocation, useNavigate } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown";
import { USER_PROJECTS_HEADER } from "../../constants/constants";
import { LOCALHOST_JWT, USER_PROJECTS_HEADER } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { darkContext } from "../../contexts/darkContext";
@ -22,6 +22,7 @@ export default function Header() {
const navigate = useNavigate();
const [stars, setStars] = useState(null);
const isLocalHost = window.location.href.includes("localhost");
// Get and set numbers of stars on header
useEffect(() => {
@ -34,19 +35,21 @@ export default function Header() {
return (
<div className="header-arrangement">
<div className="header-start-display">
<Link to="/">
<Link to="/">
<span className="ml-4 text-2xl">⛓️</span>
</Link>
<Button
onClick={() => {
logout();
navigate("/login");
}}
variant="outline"
className=""
>
Sign out
</Button>
{!isLocalHost || !LOCALHOST_JWT && (
<Button
onClick={() => {
logout();
navigate("/login");
}}
variant="outline"
className=""
>
Sign out
</Button>
)}
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar flows={flows} tabId={tabId} />

2
src/frontend/src/components/ui/checkbox.tsx
View file

@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<IconComponent name="Check" className="h-3 w-3" />
<IconComponent name="Check" className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));

4
src/frontend/src/constants/constants.ts
View file

@ -524,7 +524,7 @@ export const CONTROL_LOGIN_STATE = {
export const CONTROL_NEW_USER = {
username: "",
password: "",
is_disabled: false,
is_active: false,
is_superuser: false,
};
@ -610,3 +610,5 @@ export function tabsArray(codes: string[], method: number) {
}
export const BASE_URL_API = "http://localhost:7860/";
export let LOCALHOST_JWT = true;

12
src/frontend/src/modals/UserManagementModal/index.tsx
View file

@ -32,13 +32,11 @@ export default function UserManagementModal({
const [password, setPassword] = useState(data?.password ?? "");
const [username, setUserName] = useState(data?.username ?? "");
const [confirmPassword, setConfirmPassword] = useState(data?.password ?? "");
const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false);
const [isDisabled, setIsDisabled] = useState(data?.is_active ?? false);
const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
const { userData } = useContext(AuthContext);
console.log(userData);
function handleInput({
target: { name, value },
}: inputHandlerEventType): void {
@ -50,7 +48,7 @@ export default function UserManagementModal({
resetForm();
} else {
handleInput({ target: { name: "username", value: username } });
handleInput({ target: { name: "is_disabled", value: isDisabled } });
handleInput({ target: { name: "is_active", value: isDisabled } });
handleInput({ target: { name: "is_superuser", value: isSuperUser } });
}
}, [open]);
@ -230,7 +228,7 @@ export default function UserManagementModal({
</div>
</div>
<div className="flex gap-8">
<Form.Field name="is_disabled">
<Form.Field name="is_active">
<div>
<Form.Label className="data-[invalid]:label-invalid mr-3">
Disabled
@ -239,10 +237,10 @@ export default function UserManagementModal({
<Checkbox
value={isDisabled}
checked={isDisabled}
id="is_disabled"
id="is_active"
className="relative top-0.5"
onCheckedChange={(value) => {
handleInput({ target: { name: "is_disabled", value } });
handleInput({ target: { name: "is_active", value } });
setIsDisabled(value);
}}
/>

457
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -1,3 +1,4 @@
import { cloneDeep } from "lodash";
import { X } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent";
@ -15,6 +16,7 @@ import {
TableRow,
} from "../../components/ui/table";
import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import {
addUser,
deleteUser,
@ -23,7 +25,6 @@ import {
} from "../../controllers/API";
import ConfirmationModal from "../../modals/ConfirmationModal";
import UserManagementModal from "../../modals/UserManagementModal";
import { AuthContext } from "../../contexts/authContext";
export default function AdminPage() {
const [inputValue, setInputValue] = useState("");
@ -49,9 +50,9 @@ export default function AdminPage() {
setLoadingUsers(true);
getUsersPage(index, size)
.then((users) => {
setTotalRowsCount(users['total_count']);
userList.current = users['users'];
setFilterUserList(users['users']);
setTotalRowsCount(users["total_count"]);
userList.current = users["users"];
setFilterUserList(users["users"]);
setLoadingUsers(false);
})
.catch((error) => {
@ -63,8 +64,9 @@ export default function AdminPage() {
setLoadingUsers(true);
getUsersPage(pageIndex, pageSize)
.then((users) => {
userList.current = users;
setFilterUserList(users);
setTotalRowsCount(users["total_count"]);
userList.current = users["users"];
setFilterUserList(users["users"]);
setLoadingUsers(false);
})
.catch((error) => {
@ -123,6 +125,45 @@ export default function AdminPage() {
});
}
function handleDisableUser(check, userId, user) {
const userEdit = cloneDeep(user);
userEdit.is_active = !check;
updateUser(userId, userEdit)
.then((res) => {
console.log(res);
resetFilter();
setSuccessData({
title: "Success! User edited!",
});
})
.catch((error) => {
setErrorData({
title: "Error on edit user",
list: [error["response"]["data"]["detail"]],
});
});
}
function handleSuperUserEdit(check, userId, user) {
const userEdit = cloneDeep(user);
userEdit.is_superuser = !check;
updateUser(userId, userEdit)
.then((res) => {
resetFilter();
setSuccessData({
title: "Success! User edited!",
});
})
.catch((error) => {
setErrorData({
title: "Error on edit user",
list: [error["response"]["data"]["detail"]],
});
});
}
function handleNewUser(user) {
addUser(user)
.then((res) => {
@ -140,214 +181,246 @@ export default function AdminPage() {
}
return (
<>
{
userData && (
{userData && (
<div className="main-page-panel">
<div className="m-auto flex h-full flex-row justify-center">
<div className="basis-5/6">
<div className="m-auto flex h-full flex-col space-y-8 p-8 ">
<div className="flex items-center justify-between space-y-2">
<div>
<h2 className="text-2xl font-bold tracking-tight">
Welcome back!
</h2>
<p className="text-muted-foreground">
Here&apos;s a list of all users!
</p>
<div className="m-auto flex h-full flex-row justify-center">
<div className="basis-5/6">
<div className="m-auto flex h-full flex-col space-y-8 p-8 ">
<div className="flex items-center justify-between space-y-2">
<div>
<h2 className="text-2xl font-bold tracking-tight">
Welcome back!
</h2>
<p className="text-muted-foreground">
Here&apos;s a list of all users!
</p>
</div>
<div className="flex items-center space-x-2"></div>
</div>
<div className="flex items-center space-x-2"></div>
</div>
{userList.current.length === 0 && !loadingUsers && (
{userList.current.length === 0 && !loadingUsers && (
<>
<div className="flex items-center justify-between">
<h2>There's no users registered :)</h2>
</div>
</>
)}
<>
<div className="flex items-center justify-between">
<h2>There's no users registered :)</h2>
</div>
</>
)}
<>
<div className="flex items-center justify-between">
<div className="flex flex-1 items-center space-x-2">
<Input
value={inputValue}
placeholder="Filter users..."
className="h-8 w-[150px] lg:w-[250px]"
onChange={(e) => handleFilterUsers(e.target.value)}
/>
{inputValue.length > 0 && (
<Button
onClick={() => {
setInputValue("");
setFilterUserList(userList.current);
<div className="flex flex-1 items-center space-x-2">
<Input
value={inputValue}
placeholder="Filter users..."
className="h-8 w-[150px] lg:w-[250px]"
onChange={(e) => handleFilterUsers(e.target.value)}
/>
{inputValue.length > 0 && (
<Button
onClick={() => {
setInputValue("");
setFilterUserList(userList.current);
}}
variant="ghost"
className="h-8 px-2 lg:px-3"
>
Reset
<X className="ml-2 h-4 w-4" />
</Button>
)}
</div>
<div>
<UserManagementModal
title="New User"
titleHeader={"Add a new user"}
cancelText="Cancel"
confirmationText="Save"
icon={"UserPlus2"}
onConfirm={(index, user) => {
handleNewUser(user);
}}
variant="ghost"
className="h-8 px-2 lg:px-3"
>
Reset
<X className="ml-2 h-4 w-4" />
</Button>
)}
<Button>New User</Button>
</UserManagementModal>
</div>
</div>
<div>
<UserManagementModal
title="New User"
titleHeader={"Add a new user"}
cancelText="Cancel"
confirmationText="Save"
icon={"UserPlus2"}
onConfirm={(index, user) => {
handleNewUser(user);
}}
>
<Button>New User</Button>
</UserManagementModal>
</div>
</div>
{loadingUsers && (
<div>
<strong>Loading...</strong>
</div>
)}
<div
className={
"max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
(loadingUsers ? " border-0" : "")
}
>
<Table className={"table-fixed bg-muted outline-1"}>
<TableHeader
className={
loadingUsers
? "hidden"
: "table-fixed bg-muted outline-1"
}
>
<TableRow>
<TableHead className="h-10">Id</TableHead>
<TableHead className="h-10">Username</TableHead>
<TableHead className="h-10">Disabled</TableHead>
<TableHead className="h-10">Superuser</TableHead>
<TableHead className="h-10">Created At</TableHead>
<TableHead className="h-10">Updated At</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
</TableHeader>
{!loadingUsers && (
<TableBody>
{filterUserList.map((user, index) => (
<TableRow key={index}>
<TableCell className="truncate py-2 font-medium">
<ShadTooltip content={user.id}>
<span className="cursor-default">
{user.id}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="truncate py-2">
<ShadTooltip content={user.username}>
<span className="cursor-default">
{user.username}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="relative left-5 truncate py-2">
<Checkbox
id="is_disabled"
checked={user.is_disabled}
/>
</TableCell>
<TableCell className="relative left-5 truncate py-2">
<Checkbox
id="is_superuser"
checked={user.is_superuser}
/>
</TableCell>
<TableCell className="truncate py-2 ">
{
new Date(user.create_at)
.toISOString()
.split("T")[0]
}
</TableCell>
<TableCell className="truncate py-2">
{
new Date(user.updated_at)
.toISOString()
.split("T")[0]
}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<UserManagementModal
title="Edit"
titleHeader={`${user.id}`}
cancelText="Cancel"
confirmationText="Edit"
icon={"UserPlus2"}
data={user}
index={index}
onConfirm={(index, editUser) => {
handleEditUser(user.id, editUser);
}}
>
<ShadTooltip content="Edit" side="top">
<IconComponent
name="Pencil"
className="h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</UserManagementModal>
{loadingUsers && (
<div>
<strong>Loading...</strong>
</div>
)}
<div
className={
"max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
(loadingUsers ? " border-0" : "")
}
>
<Table className={"table-fixed bg-muted outline-1"}>
<TableHeader
className={
loadingUsers
? "hidden"
: "table-fixed bg-muted outline-1"
}
>
<TableRow>
<TableHead className="h-10">Id</TableHead>
<TableHead className="h-10">Username</TableHead>
<TableHead className="h-10">Disabled</TableHead>
<TableHead className="h-10">Superuser</TableHead>
<TableHead className="h-10">Created At</TableHead>
<TableHead className="h-10">Updated At</TableHead>
<TableHead className="h-10 w-[100px] text-right"></TableHead>
</TableRow>
</TableHeader>
{!loadingUsers && (
<TableBody>
{filterUserList.map((user, index) => (
<TableRow key={index}>
<TableCell className="truncate py-2 font-medium">
<ShadTooltip content={user.id}>
<span className="cursor-default">
{user.id}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="truncate py-2">
<ShadTooltip content={user.username}>
<span className="cursor-default">
{user.username}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="relative left-5 truncate py-2 text-align-last-left">
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
confirmationText="Confirm"
icon={"UserCog2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleDeleteUser(user);
handleDisableUser(
user.is_superuser,
user.id,
user
);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
<Checkbox
id="is_active"
checked={user.is_active}
/>
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
)}
</Table>
</div>
</TableCell>
<TableCell className="relative left-5 truncate py-2 text-align-last-left">
<ConfirmationModal
title="Edit"
titleHeader={`${user.username}`}
modalContentTitle="Attention!"
modalContent="Are you completely confident about the changes you are making to this user?"
cancelText="Cancel"
confirmationText="Confirm"
icon={"UserCog2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleSuperUserEdit(
user.is_superuser,
user.id,
user
);
}}
>
<Checkbox
id="is_superuser"
checked={user.is_superuser}
/>
</ConfirmationModal>
</TableCell>
<TableCell className="truncate py-2 ">
{
new Date(user.create_at)
.toISOString()
.split("T")[0]
}
</TableCell>
<TableCell className="truncate py-2">
{
new Date(user.updated_at)
.toISOString()
.split("T")[0]
}
</TableCell>
<TableCell className="flex w-[100px] py-2 text-right">
<div className="flex">
<UserManagementModal
title="Edit"
titleHeader={`${user.id}`}
cancelText="Cancel"
confirmationText="Edit"
icon={"UserCog2"}
data={user}
index={index}
onConfirm={(index, editUser) => {
handleEditUser(user.id, editUser);
}}
>
<ShadTooltip content="Edit" side="top">
<IconComponent
name="Pencil"
className="h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</UserManagementModal>
<PaginatorComponent
pageIndex={index}
pageSize={size}
totalRowsCount={filterUserList.length}
paginate={(pageIndex, pageSize) => {
handleChangePagination(pageSize, pageIndex);
}}
></PaginatorComponent>
</>
<ConfirmationModal
title="Delete"
titleHeader="Delete User"
modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel"
confirmationText="Delete"
icon={"UserMinus2"}
data={user}
index={index}
onConfirm={(index, user) => {
handleDeleteUser(user);
}}
>
<ShadTooltip content="Delete" side="top">
<IconComponent
name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</ConfirmationModal>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
)}
</Table>
</div>
<PaginatorComponent
pageIndex={index}
pageSize={size}
totalRowsCount={totalRowsCount}
paginate={(pageIndex, pageSize) => {
handleChangePagination(pageSize, pageIndex);
}}
></PaginatorComponent>
</>
</div>
</div>
</div>
</div>
</div>
)
}
)}
</>
);
}

2
src/frontend/src/pages/loginPage/index.tsx
View file

@ -1,5 +1,5 @@
import * as Form from "@radix-ui/react-form";
import { useContext, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";

2
src/frontend/src/types/api/index.ts
View file

@ -81,7 +81,7 @@ export type LoginAuthType = {
export type Users = {
id: string;
username: string;
is_disabled: boolean;
is_active: boolean;
is_superuser: boolean;
create_at: Date;
updated_at: Date;

2
src/frontend/src/types/components/index.ts
View file

@ -230,6 +230,6 @@ export type loginInputStateType = {
export type UserInputType = {
username: string;
password: string;
is_disabled: boolean;
is_active: boolean;
is_superuser: boolean;
};

2
src/frontend/src/utils/styleUtils.ts
View file

@ -62,6 +62,7 @@ import {
Trash2,
Undo,
Upload,
UserCog2,
UserMinus2,
UserPlus2,
Users2,
@ -292,4 +293,5 @@ export const nodeIconsLucide = {
FaApple,
EyeOff,
Eye,
UserCog2
};

6
src/frontend/tailwind.config.js
View file

@ -201,6 +201,12 @@ module.exports = {
".dark .theme-attribution .react-flow__attribution a": {
color: "black",
},
".text-align-last-left": {
"text-align-last": "left",
},
".text-align-last-right": {
"text-align-last": "right",
},
});
}),
require("@tailwindcss/typography"),