From 4e613554e6fb8ef7e1d711b48bf812169b96c1a0 Mon Sep 17 00:00:00 2001 From: ewandor Date: Fri, 11 Apr 2025 22:00:57 +0200 Subject: [PATCH] Reformating route and renaming firm and correcting login redirections --- gui/rpk-gui/src/App.tsx | 48 ++++++++++++++------- gui/rpk-gui/src/components/header/index.tsx | 2 + gui/rpk-gui/src/contexts/FirmContext.tsx | 25 +++++++++++ gui/rpk-gui/src/interfaces/index.tsx | 2 +- gui/rpk-gui/src/pages/firm/index.tsx | 28 ++++++++++++ gui/rpk-gui/src/pages/hub/index.tsx | 38 +++++++++++----- gui/rpk-gui/src/providers/auth-provider.tsx | 23 +++++++--- 7 files changed, 132 insertions(+), 34 deletions(-) create mode 100644 gui/rpk-gui/src/contexts/FirmContext.tsx create mode 100644 gui/rpk-gui/src/pages/firm/index.tsx diff --git a/gui/rpk-gui/src/App.tsx b/gui/rpk-gui/src/App.tsx index cdbadfc..6342d60 100644 --- a/gui/rpk-gui/src/App.tsx +++ b/gui/rpk-gui/src/App.tsx @@ -23,8 +23,8 @@ import { ForgotPassword } from "./components/auth/ForgotPassword"; import { UpdatePassword } from "./components/auth/UpdatePassword"; import { Header } from "./components"; -import { Hub } from "./pages/hub"; -import { CreateFirm } from "./pages/hub/CreateFirm"; +import { HubRoutes } from "./pages/hub"; +import { FirmRoutes } from "./pages/firm"; function App() { return ( @@ -43,26 +43,42 @@ function App() { syncWithLocation: true, warnWhenUnsavedChanges: true, useNewQueryKeys: true, - disableTelemetry: true + disableTelemetry: true, + reactQuery: { + clientConfig: { + defaultOptions: { + queries: { + retry: (failureCount, error) => { + // @ts-ignore + if (error.status >= 400 && error.status <= 499) { + return false + } + return failureCount < 4 + }, + } + } + } + } }} > -
}> - - - )} + element={( + }> + + + )} > - } /> - } /> + } /> + } /> - HOME Login} /> - } /> - } /> - } /> - } /> +
}> + } /> + } /> + } /> + } /> + +

HOME Login

} /> diff --git a/gui/rpk-gui/src/components/header/index.tsx b/gui/rpk-gui/src/components/header/index.tsx index 74ca12a..bb0f56e 100644 --- a/gui/rpk-gui/src/components/header/index.tsx +++ b/gui/rpk-gui/src/components/header/index.tsx @@ -12,11 +12,13 @@ import React, { useContext } from "react"; import { ColorModeContext } from "../../contexts/color-mode"; import { Logout } from "../auth/Logout"; import { IUser } from "../../interfaces"; +import { FirmContext } from "../../contexts/FirmContext"; export const Header: React.FC = ({ sticky = true, }) => { const { mode, setMode } = useContext(ColorModeContext); + const { currentFirm } = useContext(FirmContext); const { data: user } = useGetIdentity(); diff --git a/gui/rpk-gui/src/contexts/FirmContext.tsx b/gui/rpk-gui/src/contexts/FirmContext.tsx new file mode 100644 index 0000000..536bd56 --- /dev/null +++ b/gui/rpk-gui/src/contexts/FirmContext.tsx @@ -0,0 +1,25 @@ +import React, { createContext, PropsWithChildren } from 'react'; +import { IFirm } from "../interfaces"; +import { useParams } from "react-router"; + +type FirmContextType = { + currentFirm: IFirm, +} + +export const FirmContext = createContext( + {} as FirmContextType +); + + +export const FirmContextProvider: React.FC = ({ children }: PropsWithChildren) => { + const { instance, firm } = useParams() + + if (instance === undefined || firm === undefined) { + return "Error" + } + return ( + + { children } + + ); +} diff --git a/gui/rpk-gui/src/interfaces/index.tsx b/gui/rpk-gui/src/interfaces/index.tsx index d6e795a..cf7eb48 100644 --- a/gui/rpk-gui/src/interfaces/index.tsx +++ b/gui/rpk-gui/src/interfaces/index.tsx @@ -1,7 +1,7 @@ export type IFirm = { instance: string, - name: string + firm: string } type User = { diff --git a/gui/rpk-gui/src/pages/firm/index.tsx b/gui/rpk-gui/src/pages/firm/index.tsx new file mode 100644 index 0000000..ecb648d --- /dev/null +++ b/gui/rpk-gui/src/pages/firm/index.tsx @@ -0,0 +1,28 @@ +import {Route, Routes} from "react-router"; +import React, { useContext } from "react"; +import { FirmContext, FirmContextProvider } from "../../contexts/FirmContext"; +import { Header } from "../../components"; + +export const FirmRoutes = () => { + return ( + <> +
+ + + + } /> + + + } /> + + + ); +} + +const FirmHome = () => { + const { currentFirm } = useContext(FirmContext); + return ( +

This is la firme {currentFirm.instance} / {currentFirm.firm}

+ ); +} diff --git a/gui/rpk-gui/src/pages/hub/index.tsx b/gui/rpk-gui/src/pages/hub/index.tsx index 2901ab4..aa36b1c 100644 --- a/gui/rpk-gui/src/pages/hub/index.tsx +++ b/gui/rpk-gui/src/pages/hub/index.tsx @@ -1,14 +1,30 @@ import { Button } from "@mui/material"; -import { Link } from "react-router"; +import ExitToAppIcon from '@mui/icons-material/ExitToApp'; +import React from 'react'; +import {Link, Route, Routes} from "react-router"; import { useGetIdentity, useList } from "@refinedev/core"; import { IAuthUser, IFirm } from "../../interfaces"; +import {CreateFirm} from "./CreateFirm"; +import {Header} from "../../components"; -export const Hub = () => { - const { data: user } = useGetIdentity(); +export const HubRoutes = () => { + return ( + <> +
+ + } /> + } /> + + + ); +}; + +const HubHome = () => { + const { data: user, refetch } = useGetIdentity(); const { data: list } = useList({resource: "hub/users/firms/", pagination: { mode: "off" }}, ) if (user === undefined || list === undefined) { - return

Loading

+ return

Loading

; } console.log("list data: ", list); const ownedFirms = list.data; @@ -16,23 +32,25 @@ export const Hub = () => { return

Loading

} console.log("owned firms: ", ownedFirms); - return (

HUB

List of managed firms

    {ownedFirms.map((f: IFirm, index) => ( -
  • {f.instance} / {f.name}
    • +
  • {f.instance} / {f.firm}
    • ))}

List of firm you're working at

    {user.firms.map((f: IFirm, index) => ( -
  • {f.instance} / {f.name}
    • +
  • + {f.instance} / {f.firm}  +
    • ))}
- + +
- ); -}; + ) +} diff --git a/gui/rpk-gui/src/providers/auth-provider.tsx b/gui/rpk-gui/src/providers/auth-provider.tsx index 3355254..38ee3ba 100644 --- a/gui/rpk-gui/src/providers/auth-provider.tsx +++ b/gui/rpk-gui/src/providers/auth-provider.tsx @@ -7,9 +7,12 @@ const LOCAL_STORAGE_USER_KEY = "rpk-gui-current-user"; const GOOGLE_SCOPES = { "scopes": "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email" }; const DISCORD_SCOPES = { "scopes": "identify email" } +const DEFAULT_LOGIN_REDIRECT = "/hub" + export const authProvider: AuthProvider = { login: async ({ providerName, email, password }) => { const to_param = findGetParameter("to"); + const redirect = to_param === null ? DEFAULT_LOGIN_REDIRECT : to_param if (providerName) { let scope = {}; if (providerName === "google") { @@ -22,11 +25,14 @@ export const authProvider: AuthProvider = { const response = await fetch(url, { method: "GET", },); const body = await response.json(); - if (to_param) { - localStorage.setItem("redirect_after_login", to_param); - } + + localStorage.setItem("redirect_after_login", redirect); + window.location.href = body.authorization_url; - return { success: true }; + return { + success: true, + redirectTo: "" + }; } else if (email !== undefined && password !== undefined) { const params = new URLSearchParams({"grant_type": "password", "username": email, "password": password}); const response = await fetch( @@ -42,7 +48,10 @@ export const authProvider: AuthProvider = { const user = await response.json(); store_user(user); - return { success: true }; + return { + success: true, + redirectTo: redirect, + }; } } @@ -60,7 +69,7 @@ export const authProvider: AuthProvider = { if (get_user() == null) { return { authenticated: false, - redirectTo: "/login", + redirectTo: "/auth/login", logout: true } } @@ -142,7 +151,7 @@ export const authProvider: AuthProvider = { if (error?.status === 401) { forget_user(); return { - redirectTo: "/login", + redirectTo: "/auth/login", logout: true, error: { message: "Authentication required" }, } as OnErrorResponse;