From 34da83121357350a9b08ebe222f80cedc24ed43b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 30 Aug 2023 10:34:30 -0300 Subject: [PATCH 1/4] Reset flows cache when logged out --- src/frontend/src/contexts/tabsContext.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index ac0d676e0..114c1ff93 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -72,7 +72,7 @@ export const TabsContext = createContext( export function TabsProvider({ children }: { children: ReactNode }) { const { setErrorData, setNoticeData, setSuccessData } = useContext(alertContext); - const { getAuthentication } = useContext(AuthContext); + const { getAuthentication, isAuthenticated } = useContext(AuthContext); const [tabId, setTabId] = useState(""); @@ -86,6 +86,12 @@ export function TabsProvider({ children }: { children: ReactNode }) { const [tabsState, setTabsState] = useState({}); const [getTweak, setTweak] = useState([]); + useEffect(() => { + if(!isAuthenticated){ + hardReset(); + } + }, [isAuthenticated]) + const newNodeId = useRef(uid()); function incrementNodeId() { newNodeId.current = uid(); From 3c9a6af4cdfe8fb9140b3327458c22bdda2e161b Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 30 Aug 2023 11:42:58 -0300 Subject: [PATCH 2/4] Autocomplete style fix and input type fixed for signup and login --- .../src/components/inputComponent/index.tsx | 4 ++++ src/frontend/src/pages/loginPage/index.tsx | 5 +++-- src/frontend/src/pages/signUpPage/index.tsx | 2 ++ src/frontend/src/style/classes.css | 15 +++++++++++++++ 4 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 987c53a8f..46acdc1b0 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -30,6 +30,7 @@ export default function InputComponent({ {isForm ? ( ) : ( { handleInput({ target: { name: "username", value } }); }} @@ -129,12 +130,12 @@ export default function LoginPage(): JSX.Element {
- +
- diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx index 92f3eff97..c15a905c0 100644 --- a/src/frontend/src/pages/signUpPage/index.tsx +++ b/src/frontend/src/pages/signUpPage/index.tsx @@ -84,6 +84,7 @@ export default function SignUp(): JSX.Element { { handleInput({ target: { name: "username", value } }); }} @@ -157,6 +158,7 @@ export default function SignUp(): JSX.Element {
- - } - onDelete={() => { - removeFlow(flow.id); - }} - /> - ))} + {isLoading && flows.length == 0 ? ( + <> + + + + + + ) : ( + flows.map((flow, idx) => ( + + + + } + onDelete={() => { + removeFlow(flow.id); + }} + /> + )) + )}
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index 4f6f9b3a5..685d81b05 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -126,6 +126,18 @@ @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm; } + .skeleton-card { + @apply bg-background h-48 p-4 border rounded-lg flex flex-col gap-6; + } + + .skeleton-card-wrapper { + @apply flex items-center space-x-4; + } + + .skeleton-card-text { + @apply flex flex-col gap-3; + } + /* The same as primary-input but no-truncate */ .textarea-primary { @apply form-input block w-full rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground focus:border-ring focus:placeholder-transparent focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm; diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index a87cdb35e..036f82717 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -5,6 +5,7 @@ export type TabsContextType = { saveFlow: (flow: FlowType) => Promise; save: () => void; tabId: string; + isLoading: boolean; setTabId: (index: string) => void; flows: Array; removeFlow: (id: string) => void; From 03599541c24db41a8f89ee4c4abb357b30082092 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 31 Aug 2023 08:20:23 -0300 Subject: [PATCH 4/4] Added user dropdown instead of buttons --- .../src/components/headerComponent/index.tsx | 79 +++++++++++-------- 1 file changed, 44 insertions(+), 35 deletions(-) diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx index c74cdaa76..2a7219fed 100644 --- a/src/frontend/src/components/headerComponent/index.tsx +++ b/src/frontend/src/components/headerComponent/index.tsx @@ -7,8 +7,17 @@ import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; import { darkContext } from "../../contexts/darkContext"; import { TabsContext } from "../../contexts/tabsContext"; +import { gradients } from "../../utils/styleUtils"; import IconComponent from "../genericIconComponent"; import { Button } from "../ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../ui/dropdown-menu"; import { Separator } from "../ui/separator"; import MenuBar from "./components/menuBar"; @@ -17,7 +26,7 @@ export default function Header(): JSX.Element { const { dark, setDark } = useContext(darkContext); const { notificationCenter } = useContext(alertContext); const location = useLocation(); - const { logout, autoLogin, isAdmin } = useContext(AuthContext); + const { logout, autoLogin, isAdmin, userData } = useContext(AuthContext); const { stars } = useContext(darkContext); const navigate = useNavigate(); @@ -31,40 +40,6 @@ export default function Header(): JSX.Element { {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( )} - {!autoLogin && location.pathname !== `/flow/${tabId}` && ( - { - logout(); - navigate("/login"); - }} - className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5" - > - Sign out - - )} - - {location.pathname === "/admin" && ( - { - navigate("/"); - }} - className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer" - > - Home - - )} - - {isAdmin && - !autoLogin && - location.pathname !== "/admin" && - location.pathname !== `/flow/${tabId}` && ( - navigate("/admin")} - > - Admin page - - )}
@@ -156,6 +131,40 @@ export default function Header(): JSX.Element { /> )} + {!autoLogin && ( + <> + + + +