From 45da56346546a338adb185de60dffc715205dc0c Mon Sep 17 00:00:00 2001 From: Daniel Hougaard <62331820+DanielHougaard@users.noreply.github.com> Date: Thu, 20 Jun 2024 18:18:08 +0200 Subject: [PATCH] Convert navigate function to hook --- frontend/src/views/Login/Login.tsx | 9 +++-- .../components/InitialStep/InitialStep.tsx | 36 ++++++++++++------- .../Login/components/MFAStep/MFAStep.tsx | 9 ++--- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/frontend/src/views/Login/Login.tsx b/frontend/src/views/Login/Login.tsx index cad207aa8..36cd355f5 100644 --- a/frontend/src/views/Login/Login.tsx +++ b/frontend/src/views/Login/Login.tsx @@ -1,16 +1,15 @@ import { useEffect, useState } from "react"; -import { useRouter } from "next/router"; import { isLoggedIn } from "@app/reactQuery"; import { InitialStep, MFAStep, SSOStep } from "./components"; -import { navigateUserToSelectOrg } from "./Login.utils"; +import { useNavigateToSelectOrganization } from "./Login.utils"; export const Login = () => { - const router = useRouter(); const [step, setStep] = useState(0); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const { navigateToSelectOrganization } = useNavigateToSelectOrganization(); const queryParams = new URLSearchParams(window.location.search); @@ -21,10 +20,10 @@ export const Login = () => { const callbackPort = queryParams?.get("callback_port"); // case: a callback port is set, meaning it's a cli login request: redirect to select org with callback port if (callbackPort) { - navigateUserToSelectOrg(router, callbackPort); + navigateToSelectOrganization(callbackPort); } else { // case: no callback port, meaning it's a regular login request: redirect to select org - navigateUserToSelectOrg(router); + navigateToSelectOrganization(); } } catch (error) { console.log("Error - Not logged in yet"); diff --git a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx index 82bee7eb4..bce018af0 100644 --- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx +++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx @@ -1,4 +1,4 @@ -import { FormEvent, useEffect, useRef, useState } from "react"; +import { FormEvent, useCallback, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import Link from "next/link"; import { useRouter } from "next/router"; @@ -16,7 +16,7 @@ import { Button, Input } from "@app/components/v2"; import { useServerConfig } from "@app/context"; import { useFetchServerStatus } from "@app/hooks/api"; -import { navigateUserToSelectOrg } from "../../Login.utils"; +import { useNavigateToSelectOrganization } from "../../Login.utils"; type Props = { setStep: (step: number) => void; @@ -39,16 +39,28 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: const captchaRef = useRef(null); const { data: serverDetails } = useFetchServerStatus(); + const { navigateToSelectOrganization } = useNavigateToSelectOrganization(); + + const redirectToSaml = (orgSlug: string) => { + const callbackPort = queryParams.get("callback_port"); + const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${orgSlug}${ + callbackPort ? `?callback_port=${callbackPort}` : "" + }`; + router.push(redirectUrl); + }; + useEffect(() => { - if (serverDetails?.samlDefaultOrgSlug) { - const callbackPort = queryParams.get("callback_port"); - const redirectUrl = `/api/v1/sso/redirect/saml2/organizations/${ - serverDetails?.samlDefaultOrgSlug - }${callbackPort ? `?callback_port=${callbackPort}` : ""}`; - router.push(redirectUrl); - } + if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug); }, [serverDetails?.samlDefaultOrgSlug]); + const handleSaml = useCallback((step: number) => { + if (config.defaultOrgSlug) { + redirectToSaml(config.defaultOrgSlug); + } else { + setStep(step); + } + }, []); + const handleLogin = async (e: FormEvent) => { e.preventDefault(); try { @@ -75,7 +87,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: return; } - navigateUserToSelectOrg(router, callbackPort!); + navigateToSelectOrganization(callbackPort!); } else { setLoginError(true); createNotification({ @@ -100,7 +112,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: return; } - navigateUserToSelectOrg(router); + navigateToSelectOrganization(); // case: login does not require MFA step createNotification({ @@ -211,7 +223,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: colorSchema="primary" variant="outline_bg" onClick={() => { - setStep(2); + handleSaml(2); }} leftIcon={} className="mx-0 h-10 w-full" diff --git a/frontend/src/views/Login/components/MFAStep/MFAStep.tsx b/frontend/src/views/Login/components/MFAStep/MFAStep.tsx index 5e613008d..5f04454bc 100644 --- a/frontend/src/views/Login/components/MFAStep/MFAStep.tsx +++ b/frontend/src/views/Login/components/MFAStep/MFAStep.tsx @@ -16,7 +16,7 @@ import { useSelectOrganization, verifyMfaToken } from "@app/hooks/api/auth/queri import { fetchOrganizations } from "@app/hooks/api/organization/queries"; import { fetchMyPrivateKey } from "@app/hooks/api/users/queries"; -import { navigateUserToOrg, navigateUserToSelectOrg } from "../../Login.utils"; +import { navigateUserToOrg, useNavigateToSelectOrganization } from "../../Login.utils"; // The style for the verification code input const props = { @@ -50,6 +50,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => { const [isLoading, setIsLoading] = useState(false); const [isLoadingResend, setIsLoadingResend] = useState(false); const [mfaCode, setMfaCode] = useState(""); + const { navigateToSelectOrganization } = useNavigateToSelectOrganization(); const [triesLeft, setTriesLeft] = useState(undefined); const { t } = useTranslation(); @@ -93,7 +94,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => { // case: user has orgs, so we navigate the user to select an org if (userOrgs.length > 0) { - navigateUserToSelectOrg(router, callbackPort); + navigateToSelectOrganization(callbackPort); } // case: no orgs found, so we navigate the user to create an org // cli login will fail in this case @@ -166,7 +167,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => { // case: user has orgs, so we navigate the user to select an org if (userOrgs.length > 0) { - navigateUserToSelectOrg(router, callbackPort); + navigateToSelectOrganization(callbackPort); } // case: no orgs found, so we navigate the user to create an org // cli login will fail in this case @@ -195,7 +196,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => { if (organizationId) { await navigateUserToOrg(router, organizationId); } else { - navigateUserToSelectOrg(router); + navigateToSelectOrganization(); } } else { createNotification({