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

Fix: remove admin page and signout on flow page

Browse source
This commit is contained in:
igorrCarvalho 2023-08-28 20:41:54 -03:00
commit 5b75d44c3e
17 changed files with 69 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,7 +27,7 @@ export default function PaginatorComponent({
useEffect(() => {
setMaxPageIndex(Math.ceil(totalRowsCount / size));
}, [totalRowsCount]);
return (
<>
<div className="flex items-center justify-between px-2">

12
src/frontend/src/components/authAdminGuard/index.tsx
View file

@ -3,8 +3,14 @@ import { Navigate } from "react-router-dom";
import { AuthContext } from "../../contexts/authContext";
export const ProtectedAdminRoute = ({ children }) => {
const { isAdmin, isAuthenticated, logout, getAuthentication, userData, autoLogin } =
useContext(AuthContext);
const {
isAdmin,
isAuthenticated,
logout,
getAuthentication,
userData,
autoLogin,
} = useContext(AuthContext);
useEffect(() => {
if (!isAuthenticated && !getAuthentication()) {
window.location.replace("/login");
@ -16,7 +22,7 @@ export const ProtectedAdminRoute = ({ children }) => {
return <Navigate to="/login" replace />;
}
if (userData && !isAdmin || autoLogin) {
if ((userData && !isAdmin) || autoLogin) {
return <Navigate to="/" replace />;
}

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

@ -31,28 +31,31 @@ export default function Header(): JSX.Element {
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
<MenuBar flows={flows} tabId={tabId} />
)}
{autoLogin === false && (
{!autoLogin && location.pathname !== `/flow/${tabId}` && (
<Button
onClick={() => {
logout();
navigate("/login");
}}
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
className="mx-5 cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
variant="outline"
>
Sign out
</Button>
)}
{isAdmin && !autoLogin && location.pathname !== "/admin" && (
<Button
className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
onClick={() => navigate("/admin")}
variant="outline"
>
Admin page
</Button>
)}
{isAdmin &&
!autoLogin &&
location.pathname !== "/admin" &&
location.pathname !== `/flow/${tabId}` && (
<Button
className="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
onClick={() => navigate("/admin")}
variant="outline"
>
Admin page
</Button>
)}
</div>
<div className="round-button-div">
<Link to="/">

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

@ -621,15 +621,18 @@ export const FETCH_ERROR_DESCRIPION =
export const BASE_URL_API = "/api/v1/";
export const SIGN_UP_SUCCESS =
"Account created! Await admin activation. ";
export const SIGN_UP_SUCCESS = "Account created! Await admin activation. ";
export const API_PAGE_PARAGRAPH_1 = "Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them.";
export const API_PAGE_PARAGRAPH_1 =
"Your secret API keys are listed below. Please note that we do not display your secret API keys again after you generate them.";
export const API_PAGE_PARAGRAPH_2 = "Do not share your API key with others, or expose it in the browser or other client-side code.";
export const API_PAGE_PARAGRAPH_2 =
"Do not share your API key with others, or expose it in the browser or other client-side code.";
export const API_PAGE_USER_KEYS = "This user does not have any keys assigned at the moment."
export const API_PAGE_USER_KEYS =
"This user does not have any keys assigned at the moment.";
export const LAST_USED_SPAN_1 = "The last time this key was used.";
export const LAST_USED_SPAN_2 = "Accurate to within the hour from the most recent usage.";
export const LAST_USED_SPAN_2 =
"Accurate to within the hour from the most recent usage.";

1
src/frontend/src/contexts/authContext.tsx
View file

@ -98,7 +98,6 @@ export function AuthProvider({ children }): React.ReactElement {
setIsAuthenticated(false);
}
return (
// !! to convert string to boolean
<AuthContext.Provider

2
src/frontend/src/contexts/darkContext.tsx
View file

@ -1,6 +1,6 @@
import { createContext, useEffect, useState } from "react";
import { darkContextType } from "../types/typesContext";
import { getRepoStars } from "../controllers/API";
import { darkContextType } from "../types/typesContext";
const initialValue = {
dark: {},

20
src/frontend/src/contexts/tabsContext.tsx
View file

@ -116,15 +116,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}
function refreshFlows() {
getTabsDataFromDB().then((DbData) => {
if (DbData && Object.keys(templates).length > 0) {
try {
processDBData(DbData);
updateStateWithDbData(DbData);
} catch (e) {
}
}
});
getTabsDataFromDB().then((DbData) => {
if (DbData && Object.keys(templates).length > 0) {
try {
processDBData(DbData);
updateStateWithDbData(DbData);
} catch (e) {}
}
});
}
useEffect(() => {
@ -150,8 +149,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
}
processFlowEdges(flow);
processFlowNodes(flow);
} catch (e) {
}
} catch (e) {}
});
}

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

@ -102,5 +102,4 @@ function ApiInterceptor() {
return null;
}
export { ApiInterceptor, api };

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

@ -478,9 +478,9 @@ export async function getApiKey() {
}
}
export async function createApiKey(name:string) {
export async function createApiKey(name: string) {
try {
const res = await api.post(`${BASE_URL_API}api_key`,{name});
const res = await api.post(`${BASE_URL_API}api_key`, { name });
if (res.status === 200) {
return res.data;
}
@ -490,7 +490,6 @@ export async function createApiKey(name:string) {
}
}
export async function deleteApiKey(api_key: string) {
try {
const res = await api.delete(`${BASE_URL_API}api_key/${api_key}`);
@ -502,4 +501,3 @@ export async function deleteApiKey(api_key: string) {
throw error;
}
}

4
src/frontend/src/index.tsx
View file

@ -1,10 +1,8 @@
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import ContextWrapper from "./contexts";
import reportWebVitals from "./reportWebVitals";
import { ApiInterceptor } from "./controllers/API/api";
// @ts-ignore
import "./style/index.css";
// @ts-ignore
@ -17,7 +15,7 @@ const root = ReactDOM.createRoot(
);
root.render(
<ContextWrapper>
<App />
<App />
</ContextWrapper>
);
reportWebVitals();

5
src/frontend/src/modals/SecretKeyModal/index.tsx
View file

@ -21,7 +21,7 @@ export default function SecretKeyModal({
children,
icon,
data,
onCloseModal
onCloseModal,
}: ApiKeyType) {
const Icon: any = nodeIconsLucide[icon];
const [open, setOpen] = useState(false);
@ -44,8 +44,7 @@ export default function SecretKeyModal({
if (open) {
setRenderKey(false);
resetForm();
}
else{
} else {
onCloseModal();
}
}, [open]);

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

@ -273,7 +273,7 @@ export default function UserManagementModal({
</div>
<div className="float-right">
<Button
<Button
variant="outline"
onClick={() => {
setOpen(false);
@ -286,7 +286,6 @@ export default function UserManagementModal({
<Form.Submit asChild>
<Button className="mt-8">{confirmationText}</Button>
</Form.Submit>
</div>
</Form.Root>
</BaseModal.Content>

1
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -3,7 +3,6 @@ import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants/constants";
import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext";
import { FlowSettingsPropsType } from "../../types/components";
import BaseModal from "../baseModal";

6
src/frontend/src/modals/formModal/index.tsx
View file

@ -23,10 +23,10 @@ import {
} from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea";
import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext";
import { TabsContext } from "../../contexts/tabsContext";
import { TabsState } from "../../types/tabs";
import { validateNodes } from "../../utils/reactflowUtils";
import { AuthContext } from "../../contexts/authContext";
export default function FormModal({
flow,
@ -61,7 +61,7 @@ export default function FormModal({
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useContext(typesContext);
const {accessToken} = useContext(AuthContext);
const { accessToken } = useContext(AuthContext);
const { setErrorData } = useContext(alertContext);
const ws = useRef<WebSocket | null>(null);
const [lockChat, setLockChat] = useState(false);
@ -162,7 +162,7 @@ export default function FormModal({
}, 1000);
}
}
//TODO improve check of user authentication
//TODO improve check of user authentication
function getWebSocketUrl(
chatId: string,
isDevelopment: boolean = false

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

@ -4,6 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react";
import PaginatorComponent from "../../components/PaginatorComponent";
import ShadTooltip from "../../components/ShadTooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import Header from "../../components/headerComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { Input } from "../../components/ui/input";
@ -26,7 +27,6 @@ import {
import ConfirmationModal from "../../modals/ConfirmationModal";
import UserManagementModal from "../../modals/UserManagementModal";
import { UserInputType } from "../../types/components";
import Header from "../../components/headerComponent";
export default function AdminPage() {
const [inputValue, setInputValue] = useState("");
@ -194,7 +194,9 @@ export default function AdminPage() {
Welcome back!
</h2>
<p className="text-muted-foreground">
Navigate through this section to efficiently oversee all application users. From here, you can seamlessly manage user accounts.
Navigate through this section to efficiently oversee all
application users. From here, you can seamlessly manage
user accounts.
</p>
</div>
<div className="flex items-center space-x-2"></div>

20
src/frontend/src/pages/ApiKeysPage/index.tsx
View file

@ -18,8 +18,14 @@ import SecretKeyModal from "../../modals/SecretKeyModal";
import moment from "moment";
import Header from "../../components/headerComponent";
import {
API_PAGE_PARAGRAPH_1,
API_PAGE_PARAGRAPH_2,
API_PAGE_USER_KEYS,
LAST_USED_SPAN_1,
LAST_USED_SPAN_2,
} from "../../constants/constants";
import { ApiKey } from "../../types/components";
import { API_PAGE_PARAGRAPH_1, API_PAGE_PARAGRAPH_2, API_PAGE_USER_KEYS, LAST_USED_SPAN_1, LAST_USED_SPAN_2 } from "../../constants/constants";
export default function ApiKeysPage() {
const [loadingKeys, setLoadingKeys] = useState(true);
@ -29,7 +35,7 @@ export default function ApiKeysPage() {
const keysList = useRef([]);
useEffect(() => {
getKeys();
getKeys();
}, [userData]);
function getKeys() {
@ -71,7 +77,8 @@ export default function ApiKeysPage() {
return (
<div className="text-xs">
<span>
{LAST_USED_SPAN_1}<br></br> {LAST_USED_SPAN_2}
{LAST_USED_SPAN_1}
<br></br> {LAST_USED_SPAN_2}
</span>
</div>
);
@ -91,7 +98,8 @@ export default function ApiKeysPage() {
API keys
</h2>
<p className="text-muted-foreground">
{API_PAGE_PARAGRAPH_1}<br />
{API_PAGE_PARAGRAPH_1}
<br />
{API_PAGE_PARAGRAPH_2}
</p>
</div>
@ -103,9 +111,7 @@ export default function ApiKeysPage() {
!loadingKeys && (
<>
<div className="flex items-center justify-between">
<h2>
{API_PAGE_USER_KEYS}
</h2>
<h2>{API_PAGE_USER_KEYS}</h2>
</div>
</>
)}

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

@ -276,7 +276,6 @@ export type ApiKeyType = {
icon: string;
data?: any;
onCloseModal: () => void;
};
export type ApiKeyInputType = {