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

format code

Browse source
This commit is contained in:
anovazzi1 2023-08-14 12:53:08 -03:00
commit 1f528072b9
14 changed files with 138 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,11 +11,11 @@ import SuccessAlert from "./alerts/success";
import CrashErrorComponent from "./components/CrashErrorComponent";
import Header from "./components/headerComponent";
import { alertContext } from "./contexts/alertContext";
import { AuthContext } from "./contexts/authContext";
import { locationContext } from "./contexts/locationContext";
import { TabsContext } from "./contexts/tabsContext";
import Router from "./routes";
import { AuthContext } from "./contexts/authContext";
import { getLoggedUser } from "./controllers/API";
import Router from "./routes";
export default function App() {
let { setCurrent, setShowSideBar, setIsStackedOpen } =
@ -130,15 +130,16 @@ export default function App() {
//this function is to get the user logged in when the page is refreshed
const { setUserData, getAuthentication } = useContext(AuthContext);
useEffect(() => {
setTimeout(() => {
if(getAuthentication && !isLoginPage){
getLoggedUser().then((user) => {
setTimeout(() => {
if (getAuthentication && !isLoginPage) {
getLoggedUser()
.then((user) => {
setUserData(user);
}).catch((error) => {});
}
}, 1000);
},[]);
})
.catch((error) => {});
}
}, 1000);
}, []);
return (
//need parent component with width and height

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

@ -17,12 +17,9 @@ export default function PaginatorComponent({
totalRowsCount = 0,
paginate,
}: PaginatorComponentType) {
const [size, setPageSize] = useState(pageSize);
const [index, setPageIndex] = useState(pageIndex);
const [maxIndex, setMaxPageIndex] = useState(
100
);
const [maxIndex, setMaxPageIndex] = useState(100);
return (
<>
@ -51,11 +48,11 @@ 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 {index + 1} of {maxIndex}
</div>
<div className="flex items-center space-x-2">
<Button
disabled={index <= 0}
disabled={index <= 0}
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {
@ -81,7 +78,7 @@ export default function PaginatorComponent({
<IconComponent name="ChevronLeft" className="h-4 w-4" />
</Button>
<Button
disabled={maxIndex === index}
disabled={maxIndex === index}
onClick={() => {
setPageIndex(index + 1);
paginate(size, index + 1);
@ -93,7 +90,7 @@ export default function PaginatorComponent({
<IconComponent name="ChevronRight" className="h-4 w-4" />
</Button>
<Button
disabled={maxIndex === index}
disabled={maxIndex === index}
variant="outline"
className="hidden h-8 w-8 p-0 lg:flex"
onClick={() => {

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

@ -6,7 +6,7 @@ export const ProtectedLoginRoute = ({ children }) => {
const { getAuthentication } = useContext(AuthContext);
if (getAuthentication()) {
window.location.replace('/');
window.location.replace("/");
return <Navigate to="/" replace />;
}

30
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -1,21 +1,19 @@
import React, { forwardRef } from 'react';
import { forwardRef } from "react";
import { IconComponentProps } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
const ForwardedIconComponent = forwardRef(({
name,
className,
iconColor,
}: IconComponentProps, ref) => {
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
return (
<TargetIcon
strokeWidth={1.5}
className={className}
style={{ color: iconColor }}
ref={ref}
/>
);
});
const ForwardedIconComponent = forwardRef(
({ name, className, iconColor }: IconComponentProps, ref) => {
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
return (
<TargetIcon
strokeWidth={1.5}
className={className}
style={{ color: iconColor }}
ref={ref}
/>
);
}
);
export default ForwardedIconComponent;

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

@ -4,6 +4,7 @@ import { Link, useLocation, useNavigate } from "react-router-dom";
import AlertDropdown from "../../alerts/alertDropDown";
import { USER_PROJECTS_HEADER } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext";
import { getRepoStars } from "../../controllers/API";
@ -11,7 +12,6 @@ import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button";
import { Separator } from "../ui/separator";
import MenuBar from "./components/menuBar";
import { AuthContext } from "../../contexts/authContext";
export default function Header() {
const { flows, tabId } = useContext(TabsContext);
@ -37,13 +37,14 @@ export default function Header() {
<Link to="/">
<span className="ml-4 text-2xl">⛓️</span>
</Link>
<Button
onClick={() => {
logout();
navigate("/login");
}}
variant="outline" className="">
<Button
onClick={() => {
logout();
navigate("/login");
}}
variant="outline"
className=""
>
Sign out
</Button>
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (

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

@ -507,7 +507,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
"/api/v1/validate/code",
"/api/v1/custom_component",
"/api/v1/validate/prompt",
"http://localhost:7860/login"
"http://localhost:7860/login",
];
export const CONTROL_INPUT_STATE = {
@ -609,4 +609,4 @@ export function tabsArray(codes: string[], method: number) {
];
}
export const BASE_URL_API = "http://localhost:7860/";
export const BASE_URL_API = "http://localhost:7860/";

40
src/frontend/src/contexts/index.tsx
View file

@ -3,38 +3,36 @@ import { ReactFlowProvider } from "reactflow";
import { TooltipProvider } from "../components/ui/tooltip";
import { SSEProvider } from "./SSEContext";
import { AlertProvider } from "./alertContext";
import { AuthProvider } from "./authContext";
import { DarkProvider } from "./darkContext";
import { LocationProvider } from "./locationContext";
import { TabsProvider } from "./tabsContext";
import { TypesProvider } from "./typesContext";
import { UndoRedoProvider } from "./undoRedoContext";
import { AuthProvider } from "./authContext";
export default function ContextWrapper({ children }: { children: ReactNode }) {
//element to wrap all context
return (
<>
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
<DarkProvider>
<TypesProvider>
<LocationProvider>
<AlertProvider>
<SSEProvider>
<TabsProvider>
<UndoRedoProvider>{children}</UndoRedoProvider>
</TabsProvider>
</SSEProvider>
</AlertProvider>
</LocationProvider>
</TypesProvider>
</DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
<AuthProvider>
<TooltipProvider>
<ReactFlowProvider>
<DarkProvider>
<TypesProvider>
<LocationProvider>
<AlertProvider>
<SSEProvider>
<TabsProvider>
<UndoRedoProvider>{children}</UndoRedoProvider>
</TabsProvider>
</SSEProvider>
</AlertProvider>
</LocationProvider>
</TypesProvider>
</DarkProvider>
</ReactFlowProvider>
</TooltipProvider>
</AuthProvider>
</>
);
}

21
src/frontend/src/controllers/API/api.tsx
View file

@ -1,11 +1,10 @@
import axios, { AxiosError, AxiosInstance } from "axios";
import { useContext, useEffect } from "react";
import { Cookies } from "react-cookie";
import { useNavigate } from "react-router-dom";
import { renewAccessToken } from ".";
import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { Cookies } from "react-cookie";
// Create a new Axios instance
const api: AxiosInstance = axios.create({
@ -14,23 +13,23 @@ const api: AxiosInstance = axios.create({
function ApiInterceptor() {
const { setErrorData } = useContext(alertContext);
let { accessToken, login, logout, authenticationErrorCount } = useContext(AuthContext);
let { accessToken, login, logout, authenticationErrorCount } =
useContext(AuthContext);
const navigate = useNavigate();
const cookies = new Cookies();
console.log(accessToken);
useEffect(() => {
const interceptor = api.interceptors.response.use(
(response) => response,
async (error: AxiosError) => {
if (error.response?.status === 401) {
const refreshToken = cookies.get('refresh_token');
const refreshToken = cookies.get("refresh_token");
if (refreshToken) {
authenticationErrorCount = authenticationErrorCount + 1;
if(authenticationErrorCount > 3){
if (authenticationErrorCount > 3) {
authenticationErrorCount = 0;
logout();
navigate("/login");
@ -39,7 +38,7 @@ function ApiInterceptor() {
const res = await renewAccessToken(refreshToken);
login(res.data.access_token, res.data.refresh_token);
try {
const accessToken = cookies.get('access_token');
const accessToken = cookies.get("access_token");
delete error.config.headers["Authorization"];
error.config.headers["Authorization"] = `Bearer ${accessToken}`;
const response = await axios.request(error.config);
@ -50,15 +49,13 @@ function ApiInterceptor() {
navigate("/login");
}
}
}
else{
} else {
logout();
navigate("/login");
}
}
else{
} else {
// if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
return Promise.reject(error);
return Promise.reject(error);
// }
}
// else {

4
src/frontend/src/controllers/API/index.ts
View file

@ -1,5 +1,6 @@
import { AxiosResponse } from "axios";
import { ReactFlowJsonObject } from "reactflow";
import { BASE_URL_API } from "../../constants/constants";
import { api } from "../../controllers/API/api";
import {
APIObjectType,
@ -17,8 +18,6 @@ import {
UploadFileTypeAPI,
errorsTypeAPI,
} from "./../../types/api/index";
import { BASE_URL_API } from "../../constants/constants";
/**
* Fetches all objects from the API endpoint.
@ -390,7 +389,6 @@ export async function renewAccessToken(token: string) {
export async function getLoggedUser(): Promise<Users> {
try {
const res = await api.get(`${BASE_URL_API}user`);
if (res.status === 200) {

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

@ -4,6 +4,7 @@ import { useContext, useEffect, useState } from "react";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { CONTROL_NEW_USER } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import {
UserInputType,
UserManagementType,
@ -11,7 +12,6 @@ import {
} from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal";
import { AuthContext } from "../../contexts/authContext";
export default function UserManagementModal({
title,
@ -24,7 +24,6 @@ export default function UserManagementModal({
index,
onConfirm,
}: UserManagementType) {
const Icon: any = nodeIconsLucide[icon];
const [pwdVisible, setPwdVisible] = useState(false);
const [confirmPwdVisible, setConfirmPwdVisible] = useState(false);
@ -35,11 +34,9 @@ export default function UserManagementModal({
const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false);
const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
const { userData} = useContext(AuthContext);
const { userData } = useContext(AuthContext);
console.log(userData);
console.log(userData);
function handleInput({
target: { name, value },
@ -50,8 +47,7 @@ export default function UserManagementModal({
useEffect(() => {
if (!data) {
resetForm();
}
else{
} else {
handleInput({ target: { name: "username", value: username } });
handleInput({ target: { name: "is_disabled", value: isDisabled } });
handleInput({ target: { name: "is_superuser", value: isSuperUser } });
@ -138,16 +134,18 @@ export default function UserManagementModal({
</span>
{pwdVisible && (
<Eye
onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} />
onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)}
{!pwdVisible && (
{!pwdVisible && (
<EyeOff
onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} />
onClick={() => setPwdVisible(!pwdVisible)}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)}
</Form.Label>
</div>
<Form.Control asChild>
@ -194,14 +192,21 @@ export default function UserManagementModal({
</span>
{confirmPwdVisible && (
<Eye
onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} />
onClick={() =>
setConfirmPwdVisible(!confirmPwdVisible)
}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)}
{!confirmPwdVisible && (
{!confirmPwdVisible && (
<EyeOff
onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
className="h-5 cursor-pointer" strokeWidth={1.5} />
onClick={() =>
setConfirmPwdVisible(!confirmPwdVisible)
}
className="h-5 cursor-pointer"
strokeWidth={1.5}
/>
)}
</Form.Label>
</div>
@ -242,30 +247,29 @@ export default function UserManagementModal({
</Form.Control>
</div>
</Form.Field>
{userData?.is_superuser && (
<Form.Field name="is_superuser">
<div>
<Form.Label className="data-[invalid]:label-invalid mr-3">
Superuser
</Form.Label>
<Form.Control asChild>
<Checkbox
checked={isSuperUser}
value={isSuperUser}
id="is_superuser"
className="relative top-0.5"
onCheckedChange={(value) => {
handleInput({
target: { name: "is_superuser", value },
});
setIsSuperUser(value);
}}
/>
</Form.Control>
</div>
</Form.Field>
)}
{userData?.is_superuser && (
<Form.Field name="is_superuser">
<div>
<Form.Label className="data-[invalid]:label-invalid mr-3">
Superuser
</Form.Label>
<Form.Control asChild>
<Checkbox
checked={isSuperUser}
value={isSuperUser}
id="is_superuser"
className="relative top-0.5"
onCheckedChange={(value) => {
handleInput({
target: { name: "is_superuser", value },
});
setIsSuperUser(value);
}}
/>
</Form.Control>
</div>
</Form.Field>
)}
</div>
</div>

14
src/frontend/src/pages/AdminPage/LoginPage/index.tsx
View file

@ -47,15 +47,17 @@ export default function LoginAdminPage() {
});
}
function getUser(){
if(getAuthentication){
function getUser() {
if (getAuthentication) {
setTimeout(() => {
getLoggedUser().then((user) => {
setUserData(user);
}).catch((error) => {});
getLoggedUser()
.then((user) => {
setUserData(user);
})
.catch((error) => {});
}, 1000);
}
}
}
return (
<div className="flex h-full w-full flex-col items-center justify-center bg-muted">

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

@ -1,7 +1,6 @@
import * as Form from "@radix-ui/react-form";
import { useContext, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";
@ -49,15 +48,17 @@ export default function LoginPage(): JSX.Element {
});
}
function getUser(){
if(getAuthentication){
function getUser() {
if (getAuthentication) {
setTimeout(() => {
getLoggedUser().then((user) => {
setUserData(user);
}).catch((error) => {});
getLoggedUser()
.then((user) => {
setUserData(user);
})
.catch((error) => {});
}, 1000);
}
}
}
return (
<Form.Root
@ -126,9 +127,7 @@ export default function LoginPage(): JSX.Element {
</div>
<div className="w-full">
<Form.Submit asChild>
<Button className="mr-3 mt-6 w-full">
Sign in
</Button>
<Button className="mr-3 mt-6 w-full">Sign in</Button>
</Form.Submit>
</div>
<div className="w-full">

1
src/frontend/src/pages/signUpPage/index.tsx
View file

@ -1,7 +1,6 @@
import * as Form from "@radix-ui/react-form";
import { FormEvent, useState } from "react";
import { Link } from "react-router-dom";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Input } from "../../components/ui/input";

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_disabled: boolean;
is_superuser: boolean;
};