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

refactor: change login/auto_login to use UseQuery (#3033)

Browse source 
* ✨ (App.tsx): Introduce framer-motion library for animations in the frontend
🔧 (App.tsx): Update import path for useAutoLogin function in controllers/API/queries/auth
🔧 (index.ts): Remove autoLogin function from API controllers as it is now handled by useAutoLogin hook
🔧 (use-get-autologin.ts): Update function name to useAutoLogin and adjust return type
🔧 (use-post-login-user.ts): Update function name to loginUserFn for clarity
🔧 (LoginPage/index.tsx): Update import path for useLoginUser function in controllers/API/queries/auth
🔧 (LoginPage/index.tsx): Update function name to loginUserFn for clarity
🔧 (authStore.ts): Remove unused imports and functions related to autoLogin and login operations

* 📝 (LoginPage/index.tsx): remove unnecessary console.log statement from onSuccess callback in mutate function

* ♻️ (App.tsx): remove unused import statement for 'm' from 'framer-motion' to clean up code and improve readability

* removing abort from request

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-07-31 17:23:51 -03:00 • committed by GitHub
commit 3835f8d8b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 151 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/backend/base/langflow/initial_setup/starter_projects/Basic Prompting (Hello, World).json
View file

@ -678,7 +678,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

8
src/backend/base/langflow/initial_setup/starter_projects/Blog Writer.json
View file

@ -189,13 +189,13 @@
"show": true, "show": true,
"title_case": false, "title_case": false,
"type": "code", "type": "code",
"value": "import re\n\nfrom langchain_community.document_loaders.web_base import WebBaseLoader\n\nfrom langflow.custom import Component\nfrom langflow.io import MessageTextInput, Output\nfrom langflow.schema import Data\n\n\nclass URLComponent(Component):\n display_name = \"URL\"\n description = \"Fetch content from one or more URLs.\"\n icon = \"layout-template\"\n name = \"URL\"\n\n inputs = [\n MessageTextInput(\n name=\"urls\",\n display_name=\"URLs\",\n info=\"Enter one or more URLs, separated by commas.\",\n is_list=True,\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"fetch_content\"),\n ]\n\n def ensure_url(self, string: str) -> str:\n \"\"\"\n Ensures the given string is a URL by adding 'http://' if it doesn't start with 'http://' or 'https://'.\n Raises an error if the string is not a valid URL.\n\n Parameters:\n string (str): The string to be checked and possibly modified.\n\n Returns:\n str: The modified string that is ensured to be a URL.\n\n Raises:\n ValueError: If the string is not a valid URL.\n \"\"\"\n if not string.startswith((\"http://\", \"https://\")):\n string = \"http://\" + string\n\n # Basic URL validation regex\n url_regex = re.compile(\n r\"^(https?:\\/\\/)?\" # optional protocol\n r\"(www\\.)?\" # optional www\n r\"([a-zA-Z0-9.-]+)\" # domain\n r\"(\\.[a-zA-Z]{2,})?\" # top-level domain\n r\"(:\\d+)?\" # optional port\n r\"(\\/[^\\s]*)?$\", # optional path\n re.IGNORECASE,\n )\n\n if not url_regex.match(string):\n raise ValueError(f\"Invalid URL: {string}\")\n\n return string\n\n def fetch_content(self) -> list[Data]:\n urls = [self.ensure_url(url.strip()) for url in self.urls if url.strip()]\n loader = WebBaseLoader(web_paths=urls, encoding=\"utf-8\")\n docs = loader.load()\n data = [Data(text=doc.page_content, **doc.metadata) for doc in docs]\n self.status = data\n return data\n" "value": "import re\n\nfrom langchain_community.document_loaders.web_base import WebBaseLoader\n\nfrom langflow.custom import Component\nfrom langflow.io import MessageTextInput, Output\nfrom langflow.schema import Data\n\n\nclass URLComponent(Component):\n display_name = \"URL\"\n description = \"Fetch content from one or more URLs.\"\n icon = \"layout-template\"\n name = \"URL\"\n\n inputs = [\n MessageTextInput(\n name=\"urls\",\n display_name=\"URLs\",\n info=\"Enter one or more URLs, by clicking the '+' button.\",\n is_list=True,\n ),\n ]\n\n outputs = [\n Output(display_name=\"Data\", name=\"data\", method=\"fetch_content\"),\n ]\n\n def ensure_url(self, string: str) -> str:\n \"\"\"\n Ensures the given string is a URL by adding 'http://' if it doesn't start with 'http://' or 'https://'.\n Raises an error if the string is not a valid URL.\n\n Parameters:\n string (str): The string to be checked and possibly modified.\n\n Returns:\n str: The modified string that is ensured to be a URL.\n\n Raises:\n ValueError: If the string is not a valid URL.\n \"\"\"\n if not string.startswith((\"http://\", \"https://\")):\n string = \"http://\" + string\n\n # Basic URL validation regex\n url_regex = re.compile(\n r\"^(https?:\\/\\/)?\" # optional protocol\n r\"(www\\.)?\" # optional www\n r\"([a-zA-Z0-9.-]+)\" # domain\n r\"(\\.[a-zA-Z]{2,})?\" # top-level domain\n r\"(:\\d+)?\" # optional port\n r\"(\\/[^\\s]*)?$\", # optional path\n re.IGNORECASE,\n )\n\n if not url_regex.match(string):\n raise ValueError(f\"Invalid URL: {string}\")\n\n return string\n\n def fetch_content(self) -> list[Data]:\n urls = [self.ensure_url(url.strip()) for url in self.urls if url.strip()]\n loader = WebBaseLoader(web_paths=urls, encoding=\"utf-8\")\n docs = loader.load()\n data = [Data(text=doc.page_content, **doc.metadata) for doc in docs]\n self.status = data\n return data\n"
}, },
"urls": { "urls": {
"advanced": false, "advanced": false,
"display_name": "URLs", "display_name": "URLs",
"dynamic": false, "dynamic": false,
"info": "Enter one or more URLs, separated by commas.", "info": "Enter one or more URLs, by clicking the '+' button.",
"input_types": [ "input_types": [
"Message" "Message"
], ],
@ -866,7 +866,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

24
src/backend/base/langflow/initial_setup/starter_projects/Complex Agent.json
View file

@ -908,7 +908,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -2033,7 +2035,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -2731,7 +2735,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -3149,7 +3155,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -3592,7 +3600,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -4051,7 +4061,9 @@
"display_name": "SearchAPI API Key", "display_name": "SearchAPI API Key",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

4
src/backend/base/langflow/initial_setup/starter_projects/Document QA.json
View file

@ -756,7 +756,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

12
src/backend/base/langflow/initial_setup/starter_projects/Hierarchical Agent.json
View file

@ -607,7 +607,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -1752,7 +1754,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -2635,7 +2639,9 @@
"display_name": "SearchAPI API Key", "display_name": "SearchAPI API Key",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

4
src/backend/base/langflow/initial_setup/starter_projects/Memory Chatbot.json
View file

@ -536,7 +536,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

8
src/backend/base/langflow/initial_setup/starter_projects/Sequential Agent.json
View file

@ -2054,7 +2054,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,
@ -2975,7 +2977,9 @@
"display_name": "SearchAPI API Key", "display_name": "SearchAPI API Key",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

44
src/backend/base/langflow/initial_setup/starter_projects/Vector Store RAG.json
View file

@ -569,7 +569,9 @@
"display_name": "API Endpoint", "display_name": "API Endpoint",
"dynamic": false, "dynamic": false,
"info": "API endpoint URL for the Astra DB service.", "info": "API endpoint URL for the Astra DB service.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_endpoint", "name": "api_endpoint",
"password": true, "password": true,
@ -919,7 +921,9 @@
"display_name": "Astra DB Application Token", "display_name": "Astra DB Application Token",
"dynamic": false, "dynamic": false,
"info": "Authentication token for accessing Astra DB.", "info": "Authentication token for accessing Astra DB.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "token", "name": "token",
"password": true, "password": true,
@ -1779,7 +1783,9 @@
"display_name": "API Endpoint", "display_name": "API Endpoint",
"dynamic": false, "dynamic": false,
"info": "API endpoint URL for the Astra DB service.", "info": "API endpoint URL for the Astra DB service.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_endpoint", "name": "api_endpoint",
"password": true, "password": true,
@ -2129,7 +2135,9 @@
"display_name": "Astra DB Application Token", "display_name": "Astra DB Application Token",
"dynamic": false, "dynamic": false,
"info": "Authentication token for accessing Astra DB.", "info": "Authentication token for accessing Astra DB.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "token", "name": "token",
"password": true, "password": true,
@ -2404,7 +2412,9 @@
"display_name": "OpenAI API Base", "display_name": "OpenAI API Base",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_base", "name": "openai_api_base",
"password": true, "password": true,
@ -2420,7 +2430,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_key", "name": "openai_api_key",
"password": true, "password": true,
@ -2436,7 +2448,9 @@
"display_name": "OpenAI API Type", "display_name": "OpenAI API Type",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_type", "name": "openai_api_type",
"password": true, "password": true,
@ -2851,7 +2865,9 @@
"display_name": "OpenAI API Base", "display_name": "OpenAI API Base",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_base", "name": "openai_api_base",
"password": true, "password": true,
@ -2867,7 +2883,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_key", "name": "openai_api_key",
"password": true, "password": true,
@ -2883,7 +2901,9 @@
"display_name": "OpenAI API Type", "display_name": "OpenAI API Type",
"dynamic": false, "dynamic": false,
"info": "", "info": "",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "openai_api_type", "name": "openai_api_type",
"password": true, "password": true,
@ -3119,7 +3139,9 @@
"display_name": "OpenAI API Key", "display_name": "OpenAI API Key",
"dynamic": false, "dynamic": false,
"info": "The OpenAI API Key to use for the OpenAI model.", "info": "The OpenAI API Key to use for the OpenAI model.",
"input_types": [], "input_types": [
"Message"
],
"load_from_db": true, "load_from_db": true,
"name": "api_key", "name": "api_key",
"password": true, "password": true,

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

@ -14,7 +14,7 @@ import {
LANGFLOW_AUTO_LOGIN_OPTION, LANGFLOW_AUTO_LOGIN_OPTION,
} from "./constants/constants"; } from "./constants/constants";
import { AuthContext } from "./contexts/authContext"; import { AuthContext } from "./contexts/authContext";
import { autoLogin } from "./controllers/API"; import { useAutoLogin } from "./controllers/API/queries/auth";
import { useGetHealthQuery } from "./controllers/API/queries/health"; import { useGetHealthQuery } from "./controllers/API/queries/health";
import { useGetGlobalVariables } from "./controllers/API/queries/variables"; import { useGetGlobalVariables } from "./controllers/API/queries/variables";
import { useGetVersionQuery } from "./controllers/API/queries/version"; import { useGetVersionQuery } from "./controllers/API/queries/version";
@ -38,6 +38,8 @@ export default function App() {
const dark = useDarkStore((state) => state.dark); const dark = useDarkStore((state) => state.dark);
const isAuthenticated = useAuthStore((state) => state.isAuthenticated); const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
const { mutate: mutateAutoLogin } = useAutoLogin();
useGetVersionQuery(); useGetVersionQuery();
const cookies = new Cookies(); const cookies = new Cookies();
@ -61,11 +63,10 @@ export default function App() {
}, [dark]); }, [dark]);
useEffect(() => { useEffect(() => {
const abortController = new AbortController();
const isLoginPage = location.pathname.includes("login"); const isLoginPage = location.pathname.includes("login");
autoLogin(abortController.signal) mutateAutoLogin(undefined, {
.then(async (user) => { onSuccess: async (user) => {
if (user && user["access_token"]) { if (user && user["access_token"]) {
user["refresh_token"] = "auto"; user["refresh_token"] = "auto";
login(user["access_token"], "auto"); login(user["access_token"], "auto");
@ -74,8 +75,8 @@ export default function App() {
setAutoLogin(true); setAutoLogin(true);
fetchAllData(); fetchAllData();
} }
}) },
.catch(async (error) => { onError: (error) => {
if (error.name !== "CanceledError") { if (error.name !== "CanceledError") {
setAutoLogin(false); setAutoLogin(false);
if ( if (
@ -94,14 +95,8 @@ export default function App() {
useFlowsManagerStore.setState({ isLoading: false }); useFlowsManagerStore.setState({ isLoading: false });
} }
} }
}); },
});
/*
Abort the request as it isn't needed anymore, the component being
unmounted. It helps avoid, among other things, the well-known "can't
perform a React state update on an unmounted component" warning.
*/
return () => abortController.abort();
}, []); }, []);
const fetchAllData = async () => { const fetchAllData = async () => {

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

@ -1,3 +1,4 @@
import { LANGFLOW_AUTO_LOGIN_OPTION } from "@/constants/constants";
import useAuthStore from "@/stores/authStore"; import useAuthStore from "@/stores/authStore";
import { useContext } from "react"; import { useContext } from "react";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
@ -5,8 +6,9 @@ import { AuthContext } from "../../contexts/authContext";
export const ProtectedRoute = ({ children }) => { export const ProtectedRoute = ({ children }) => {
const { logout } = useContext(AuthContext); const { logout } = useContext(AuthContext);
const isAuthenticated = useAuthStore((state) => state.isAuthenticated); const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
const hasToken = !!localStorage.getItem(LANGFLOW_AUTO_LOGIN_OPTION);
if (!isAuthenticated) { if (!isAuthenticated && hasToken) {
logout(); logout();
} else { } else {
return children; return children;

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

@ -1,7 +1,6 @@
// src/constants/constants.ts // src/constants/constants.ts
import { languageMap } from "../types/components"; import { languageMap } from "../types/components";
import { nodeNames } from "../utils/styleUtils";
/** /**
* invalid characters for flow name * invalid characters for flow name

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

@ -48,6 +48,10 @@ export function AuthProvider({ children }): React.ReactElement {
const fetchApiData = useStoreStore((state) => state.fetchApiData); const fetchApiData = useStoreStore((state) => state.fetchApiData);
const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows); const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder); const setSelectedFolder = useFolderStore((state) => state.setSelectedFolder);
const setIsAuthenticated = useAuthStore((state) => state.setIsAuthenticated);
const setIsAdmin = useAuthStore((state) => state.setIsAdmin);
const setIsLoading = useFlowsManagerStore((state) => state.setIsLoading);
const autoLogin = useAuthStore((state) => state.autoLogin);
useEffect(() => { useEffect(() => {
const storedAccessToken = cookies.get(LANGFLOW_ACCESS_TOKEN); const storedAccessToken = cookies.get(LANGFLOW_ACCESS_TOKEN);
@ -82,26 +86,27 @@ export function AuthProvider({ children }): React.ReactElement {
function login(newAccessToken: string, autoLogin: string) { function login(newAccessToken: string, autoLogin: string) {
cookies.set(LANGFLOW_AUTO_LOGIN_OPTION, autoLogin, { path: "/" }); cookies.set(LANGFLOW_AUTO_LOGIN_OPTION, autoLogin, { path: "/" });
setAccessToken(newAccessToken); setAccessToken(newAccessToken);
useAuthStore.getState().setIsAuthenticated(true); setIsAuthenticated(true);
getUser(); getUser();
} }
async function logout() { async function logout() {
if (useAuthStore.getState().autoLogin) { if (autoLogin) {
return; return;
} }
try { try {
await requestLogout(); await requestLogout();
cookies.remove(LANGFLOW_API_TOKEN, { path: "/" }); cookies.remove(LANGFLOW_API_TOKEN, { path: "/" });
cookies.remove(LANGFLOW_AUTO_LOGIN_OPTION, { path: "/" }); cookies.remove(LANGFLOW_AUTO_LOGIN_OPTION, { path: "/" });
useAuthStore.getState().setIsAdmin(false); setIsAdmin(false);
setUserData(null); setUserData(null);
setAccessToken(null); setAccessToken(null);
useAuthStore.getState().setIsAuthenticated(false); setIsAuthenticated(false);
setIsAuthenticated(false);
setAllFlows([]); setAllFlows([]);
setSelectedFolder(null); setSelectedFolder(null);
navigate("/login"); navigate("/login");
useFlowsManagerStore.setState({ isLoading: false }); setIsLoading(false);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
throw error; throw error;

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

@ -349,19 +349,6 @@ export async function uploadFile(
return await api.post(`${BASE_URL_API}files/upload/${id}`, formData); return await api.post(`${BASE_URL_API}files/upload/${id}`, formData);
} }
export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI | null> {
try {
const res = await api.get(`${BASE_URL_API}files/profile_pictures/list`);
if (res.status === 200) {
return res.data;
}
} catch (error) {
throw error;
}
return null;
}
export async function postCustomComponent( export async function postCustomComponent(
code: string, code: string,
apiClass: APIClassType, apiClass: APIClassType,
@ -387,45 +374,6 @@ export async function postCustomComponentUpdate(
}); });
} }
export async function onLogin(user: LoginType) {
try {
const response = await api.post(
`${BASE_URL_API}login`,
new URLSearchParams({
username: user.username,
password: user.password,
}).toString(),
{
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
},
);
if (response.status === 200) {
const data = response?.data;
return data;
}
} catch (error) {
throw error;
}
}
export async function autoLogin(abortSignal) {
try {
const response = await api.get(`${BASE_URL_API}auto_login`, {
signal: abortSignal,
});
if (response.status === 200) {
const data = response?.data;
return data;
}
} catch (error) {
throw error;
}
}
export async function renewAccessToken() { export async function renewAccessToken() {
try { try {
return await api.post(`${BASE_URL_API}refresh`); return await api.post(`${BASE_URL_API}refresh`);

26
src/frontend/src/controllers/API/queries/auth/use-get-autologin.ts
View file

@ -1,20 +1,24 @@
import { keepPreviousData } from "@tanstack/react-query"; import { UseMutationResult } from "@tanstack/react-query";
import { Users, useQueryFunctionType } from "../../../../types/api"; import { useMutationFunctionType } from "../../../../types/api";
import { api } from "../../api"; import { api } from "../../api";
import { getURL } from "../../helpers/constants"; import { getURL } from "../../helpers/constants";
import { UseRequestProcessor } from "../../services/request-processor"; import { UseRequestProcessor } from "../../services/request-processor";
export const useGetAutoLogin: useQueryFunctionType<undefined, Users> = () => { export const useAutoLogin: useMutationFunctionType<undefined, any> = (
const { query } = UseRequestProcessor(); options?,
) => {
const { mutate } = UseRequestProcessor();
const getIsAutoLogin = async () => { const autoLoginFn = async (): Promise<any> => {
const response = await api.get<Users>(`${getURL("AUTOLOGIN")}`); const res = await api.get(`${getURL("AUTOLOGIN")}`);
return response["data"]; return res.data;
}; };
const queryResult = query(["useGetAutoLogin"], getIsAutoLogin, { const mutation: UseMutationResult = mutate(
placeholderData: keepPreviousData, ["useAutoLogin"],
}); autoLoginFn,
options,
);
return queryResult; return mutation;
}; };

4
src/frontend/src/controllers/API/queries/auth/use-post-login-user.ts
View file

@ -9,7 +9,7 @@ export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
) => { ) => {
const { mutate } = UseRequestProcessor(); const { mutate } = UseRequestProcessor();
async function updateUser({ password, username }: LoginType): Promise<any> { async function loginUserFn({ password, username }: LoginType): Promise<any> {
const res = await api.post( const res = await api.post(
`${getURL("LOGIN")}`, `${getURL("LOGIN")}`,
new URLSearchParams({ new URLSearchParams({
@ -27,7 +27,7 @@ export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
const mutation: UseMutationResult<LoginType, any, LoginType> = mutate( const mutation: UseMutationResult<LoginType, any, LoginType> = mutate(
["useLoginUser"], ["useLoginUser"],
updateUser, loginUserFn,
options, options,
); );

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

@ -1,3 +1,4 @@
import { useLoginUser } from "@/controllers/API/queries/auth";
import { useGetGlobalVariables } from "@/controllers/API/queries/variables"; import { useGetGlobalVariables } from "@/controllers/API/queries/variables";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@ -6,7 +7,6 @@ import { Input } from "../../../components/ui/input";
import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants"; import { SIGNIN_ERROR_ALERT } from "../../../constants/alerts_constants";
import { CONTROL_LOGIN_STATE } from "../../../constants/constants"; import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
import { AuthContext } from "../../../contexts/authContext"; import { AuthContext } from "../../../contexts/authContext";
import { onLogin } from "../../../controllers/API";
import useAlertStore from "../../../stores/alertStore"; import useAlertStore from "../../../stores/alertStore";
import { LoginType } from "../../../types/api"; import { LoginType } from "../../../types/api";
import { import {
@ -32,28 +32,30 @@ export default function LoginAdminPage() {
setInputState((prev) => ({ ...prev, [name]: value })); setInputState((prev) => ({ ...prev, [name]: value }));
} }
const { mutate } = useLoginUser();
function signIn() { function signIn() {
const user: LoginType = { const user: LoginType = {
username: username, username: username,
password: password, password: password,
}; };
onLogin(user)
.then((user) => {
console.log("admin page");
mutate(user, {
onSuccess: (res) => {
setLoading(true); setLoading(true);
login(user.access_token, "login"); login(res.access_token, "login");
mutateGetGlobalVariables(); mutateGetGlobalVariables();
navigate("/admin/"); navigate("/admin/");
}) },
.catch((error) => { onError: (error) => {
setErrorData({ setErrorData({
title: SIGNIN_ERROR_ALERT, title: SIGNIN_ERROR_ALERT,
list: [error["response"]["data"]["detail"]], list: [error["response"]["data"]["detail"]],
}); });
}); },
});
} }
return ( return (

21
src/frontend/src/pages/LoginPage/index.tsx
View file

@ -1,3 +1,4 @@
import { useLoginUser } from "@/controllers/API/queries/auth";
import * as Form from "@radix-ui/react-form"; import * as Form from "@radix-ui/react-form";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
@ -7,7 +8,6 @@ import { Input } from "../../components/ui/input";
import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants"; import { SIGNIN_ERROR_ALERT } from "../../constants/alerts_constants";
import { CONTROL_LOGIN_STATE } from "../../constants/constants"; import { CONTROL_LOGIN_STATE } from "../../constants/constants";
import { AuthContext } from "../../contexts/authContext"; import { AuthContext } from "../../contexts/authContext";
import { onLogin } from "../../controllers/API";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { LoginType } from "../../types/api"; import { LoginType } from "../../types/api";
@ -32,23 +32,28 @@ export default function LoginPage(): JSX.Element {
setInputState((prev) => ({ ...prev, [name]: value })); setInputState((prev) => ({ ...prev, [name]: value }));
} }
const { mutate } = useLoginUser();
function signIn() { function signIn() {
const user: LoginType = { const user: LoginType = {
username: username.trim(), username: username.trim(),
password: password.trim(), password: password.trim(),
}; };
onLogin(user)
.then((user) => { mutate(user, {
onSuccess: (data) => {
console.log("admin page");
setLoading(true); setLoading(true);
login(user.access_token, "login"); login(data.access_token, "login");
navigate("/"); navigate("/admin/");
}) },
.catch((error) => { onError: (error) => {
setErrorData({ setErrorData({
title: SIGNIN_ERROR_ALERT, title: SIGNIN_ERROR_ALERT,
list: [error["response"]["data"]["detail"]], list: [error["response"]["data"]["detail"]],
}); });
}); },
});
} }
return ( return (

25
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
View file

@ -1,25 +0,0 @@
import axios from "axios";
import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
import { getProfilePictures } from "../../../../../../../../../controllers/API";
const useGetProfilePictures = (setErrorData) => {
const handleGetProfilePictures = async () => {
try {
const profilePictures = await getProfilePictures();
return profilePictures!.files;
} catch (error) {
if (axios.isCancel(error)) {
console.warn("Request canceled: ", error.message);
} else {
setErrorData({
title: PROFILE_PICTURES_GET_ERROR_ALERT,
list: [(error as any)?.response?.data?.detail],
});
}
}
};
return { handleGetProfilePictures };
};
export default useGetProfilePictures;

2
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-preload-images.tsx
View file

@ -2,9 +2,9 @@ import { useEffect } from "react";
import { BASE_URL_API } from "../../../../../../../../../constants/constants"; import { BASE_URL_API } from "../../../../../../../../../constants/constants";
const usePreloadImages = ( const usePreloadImages = (
profilePictures?: { [key: string]: string[] },
setImagesLoaded: (value: boolean) => void, setImagesLoaded: (value: boolean) => void,
loading: boolean, loading: boolean,
profilePictures?: { [key: string]: string[] },
) => { ) => {
const preloadImages = async (imageUrls) => { const preloadImages = async (imageUrls) => {
return Promise.all( return Promise.all(

2
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
View file

@ -30,7 +30,7 @@ export default function ProfilePictureChooserComponent({
} }
}, [ref, value]); }, [ref, value]);
usePreloadImages(profilePictures, setImagesLoaded, loading); usePreloadImages(setImagesLoaded, loading, profilePictures);
return ( return (
<div className="flex flex-col justify-center gap-2"> <div className="flex flex-col justify-center gap-2">

11
src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
View file

@ -1,4 +1,7 @@
import { ProfilePicturesQueryResponse } from "@/controllers/API/queries/files"; import {
ProfilePicturesQueryResponse,
useGetProfilePicturesQuery,
} from "@/controllers/API/queries/files";
import * as Form from "@radix-ui/react-form"; import * as Form from "@radix-ui/react-form";
import { UseQueryResult } from "@tanstack/react-query"; import { UseQueryResult } from "@tanstack/react-query";
import { Button } from "../../../../../../components/ui/button"; import { Button } from "../../../../../../components/ui/button";
@ -27,7 +30,7 @@ const ProfilePictureFormComponent = ({
handleGetProfilePictures, handleGetProfilePictures,
userData, userData,
}: ProfilePictureFormComponentProps) => { }: ProfilePictureFormComponentProps) => {
const { data: response, isFetching } = handleGetProfilePictures; const { isLoading, data, isFetching } = useGetProfilePicturesQuery();
return ( return (
<Form.Root <Form.Root
@ -46,8 +49,8 @@ const ProfilePictureFormComponent = ({
<CardContent> <CardContent>
<div className="py-2"> <div className="py-2">
<ProfilePictureChooserComponent <ProfilePictureChooserComponent
profilePictures={response} profilePictures={data}
loading={isFetching} loading={isLoading || isFetching}
value={ value={
profilePicture == "" profilePicture == ""
? userData?.profile_image ?? ? userData?.profile_image ??

1
src/frontend/src/stores/authStore.ts
View file

@ -7,7 +7,6 @@ import { create } from "zustand";
import { useFolderStore } from "../stores/foldersStore"; import { useFolderStore } from "../stores/foldersStore";
const cookies = new Cookies(); const cookies = new Cookies();
const useAuthStore = create<AuthStoreType>((set, get) => ({ const useAuthStore = create<AuthStoreType>((set, get) => ({
isAdmin: false, isAdmin: false,
isAuthenticated: !!cookies.get(LANGFLOW_ACCESS_TOKEN), isAuthenticated: !!cookies.get(LANGFLOW_ACCESS_TOKEN),