From 634a5591cc72c93a1d25a8cd7773c34304d596d2 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 16 Aug 2023 15:23:22 -0300 Subject: [PATCH 1/3] feat: Add admin page button and refactor protected route /admin --- .../src/components/authAdminGuard/index.tsx | 10 +++------- .../src/components/headerComponent/index.tsx | 16 +++++++++++++++- src/frontend/src/contexts/authContext.tsx | 16 ++++++++++++++++ src/frontend/src/types/contexts/auth.ts | 2 ++ 4 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/frontend/src/components/authAdminGuard/index.tsx b/src/frontend/src/components/authAdminGuard/index.tsx index 3b57de8a2..b20cd5815 100644 --- a/src/frontend/src/components/authAdminGuard/index.tsx +++ b/src/frontend/src/components/authAdminGuard/index.tsx @@ -3,25 +3,21 @@ import { Navigate } from "react-router-dom"; import { AuthContext } from "../../contexts/authContext"; export const ProtectedAdminRoute = ({ children }) => { - const { isAuthenticated, logout, getAuthentication, userData } = + const { isAdmin, isAuthenticated, logout, getAuthentication, userData } = useContext(AuthContext); useEffect(() => { if (!isAuthenticated && !getAuthentication()) { window.location.replace("/login"); logout(); } - - if (userData && userData?.is_superuser === false) { - logout(); - } }, [isAuthenticated, getAuthentication, logout, userData]); if (!isAuthenticated && !getAuthentication()) { return ; } - if (userData && userData?.is_superuser === false) { - return ; + if (userData && !isAdmin) { + return ; } return children; diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 45b80ffa9..fb491a571 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -7,11 +7,12 @@ 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"; +import { getLoggedUser, getRepoStars } from "../../controllers/API"; import IconComponent from "../genericIconComponent"; import { Button } from "../ui/button"; import { Separator } from "../ui/separator"; import MenuBar from "./components/menuBar"; +import { Users } from "../../types/api"; export default function Header() { const { flows, tabId } = useContext(TabsContext); @@ -24,6 +25,8 @@ export default function Header() { const [stars, setStars] = useState(null); const isLocalHost = window.location.href.includes("localhost"); + const { isAdmin, setIsAdmin } = useContext(AuthContext); + // Get and set numbers of stars on header useEffect(() => { async function fetchStars() { @@ -32,6 +35,7 @@ export default function Header() { } fetchStars(); }, []); + return (
@@ -50,6 +54,16 @@ export default function Header() { Sign out )} + + {isAdmin && ( + + )} + {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 18baa0ae2..ee0cf11d9 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -2,8 +2,11 @@ import { createContext, useEffect, useState } from "react"; import Cookies from "universal-cookie"; import { Users } from "../types/api"; import { AuthContextType } from "../types/contexts/auth"; +import { getLoggedUser } from "../controllers/API"; const initialValue: AuthContextType = { + isAdmin: false, + setIsAdmin: () => false, isAuthenticated: false, accessToken: null, refreshToken: null, @@ -22,6 +25,7 @@ export function AuthProvider({ children }): React.ReactElement { const [accessToken, setAccessToken] = useState(null); const [refreshToken, setRefreshToken] = useState(null); const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isAdmin, setIsAdmin] = useState(false); const [userData, setUserData] = useState(null); const cookies = new Cookies(); @@ -31,6 +35,15 @@ export function AuthProvider({ children }): React.ReactElement { setAccessToken(storedAccessToken); } }, []); + + useEffect(() => { + if (accessToken) { + getLoggedUser().then((user) => { + const isSuperUser = user.is_superuser + setIsAdmin(isSuperUser); + }); + } + }, [accessToken, isAdmin]) function getAuthentication() { const storedRefreshToken = cookies.get("refresh_token"); @@ -69,6 +82,7 @@ export function AuthProvider({ children }): React.ReactElement { if (response.ok) { const data = await response.json(); login(data.accessToken, refreshToken); + getLoggedUser().then((user) => { console.log('oi')}); } else { logout(); } @@ -81,6 +95,8 @@ export function AuthProvider({ children }): React.ReactElement { // !! to convert string to boolean void; isAuthenticated: boolean; accessToken: string | null; refreshToken: string | null; From 5202e1348af05843654c0ecb3ab26acbc2a63e10 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 16 Aug 2023 16:15:43 -0300 Subject: [PATCH 2/3] feat[headerComponent]: Add api icon on header --- src/frontend/src/components/genericIconComponent/index.tsx | 2 +- src/frontend/src/components/headerComponent/index.tsx | 6 ++++++ src/frontend/src/utils/styleUtils.ts | 4 +++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx index 86c304beb..5cb6bdeca 100644 --- a/src/frontend/src/components/genericIconComponent/index.tsx +++ b/src/frontend/src/components/genericIconComponent/index.tsx @@ -9,7 +9,7 @@ const ForwardedIconComponent = forwardRef( ); diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index 3c400a860..274b4bdc3 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -146,6 +146,12 @@ export default function Header() { />
+
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 9f4ebe21d..1c2018f69 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -72,6 +72,7 @@ import { X, XCircle, Zap, + Key } from "lucide-react"; import { FaApple, FaGithub } from "react-icons/fa"; import { AirbyteIcon } from "../icons/Airbyte"; @@ -294,5 +295,6 @@ export const nodeIconsLucide = { FaApple, EyeOff, Eye, - UserCog2 + UserCog2, + Key, }; From a93f44d0540087cdf7bd1c3ae024568f8c2e7288 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 16 Aug 2023 16:25:09 -0300 Subject: [PATCH 3/3] fix: login form submit when changing password visibility --- src/frontend/src/components/inputComponent/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 5e3c5543c..48efbc1c1 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -74,7 +74,8 @@ export default function InputComponent({ ? "input-component-true-button" : "input-component-false-button" )} - onClick={() => { + onClick={(event) => { + event.preventDefault(); setPwdVisible(!pwdVisible); }} >