awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-10 16:28:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: made reusable helper for login page

Browse Source
This commit is contained in:
Sheen Capadngan
2024-06-27 01:15:50 +08:00
parent e1ed37c713
commit 9daa5badec
1 changed files with 165 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+25 -34
View File
@@ -62,6 +62,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
}
}, []);
const shouldDisplayLoginMethod = useCallback(
(method: LoginMethod) =>
!config.enabledLoginMethods || config.enabledLoginMethods.includes(method),
[config]
);
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
try {
@@ -163,8 +169,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
<h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
Login to Infisical
</h1>
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.GOOGLE) && (
{shouldDisplayLoginMethod(LoginMethod.GOOGLE) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -173,9 +178,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
const callbackPort = queryParams.get("callback_port");
window.open(
`/api/v1/sso/redirect/google${
callbackPort ? `?callback_port=${callbackPort}` : ""
}`
`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`
);
window.close();
}}
@@ -185,9 +188,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
{t("login.continue-with-google")}
</Button>
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.GITHUB) && (
)}
{shouldDisplayLoginMethod(LoginMethod.GITHUB) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -196,9 +198,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
const callbackPort = queryParams.get("callback_port");
window.open(
`/api/v1/sso/redirect/github${
callbackPort ? `?callback_port=${callbackPort}` : ""
}`
`/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`
);
window.close();
@@ -209,9 +209,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
Continue with GitHub
</Button>
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.GITLAB) && (
)}
{shouldDisplayLoginMethod(LoginMethod.GITLAB) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -220,9 +219,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
const callbackPort = queryParams.get("callback_port");
window.open(
`/api/v1/sso/redirect/gitlab${
callbackPort ? `?callback_port=${callbackPort}` : ""
}`
`/api/v1/sso/redirect/gitlab${callbackPort ? `?callback_port=${callbackPort}` : ""}`
);
window.close();
@@ -233,9 +230,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
Continue with GitLab
</Button>
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.SAML) && (
)}
{shouldDisplayLoginMethod(LoginMethod.SAML) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -249,9 +245,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
Continue with SAML
</Button>
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.OIDC) && (
)}
{shouldDisplayLoginMethod(LoginMethod.OIDC) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -265,9 +260,8 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
Continue with OIDC
</Button>
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.LDAP) && (
)}
{shouldDisplayLoginMethod(LoginMethod.LDAP) && (
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
colorSchema="primary"
@@ -281,19 +275,16 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
Continue with LDAP
</Button>
</div>
))}
)}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.length > 1 &&
config.enabledLoginMethods.includes(LoginMethod.EMAIL) && (
{shouldDisplayLoginMethod(LoginMethod.EMAIL) && config.enabledLoginMethods.length > 1 && (
<div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
<div className="w-full border-t border-mineshaft-400/60" />
<span className="mx-2 text-xs text-mineshaft-200">or</span>
<div className="w-full border-t border-mineshaft-400/60" />
</div>
))}
{!config.enabledLoginMethods ||
(config.enabledLoginMethods.includes(LoginMethod.EMAIL) && (
)}
{shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
<>
<div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Input
@@ -344,7 +335,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
</Button>
</div>
</>
))}
)}
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
{config.allowSignUp ? (
<div className="mt-6 flex flex-row text-sm text-bunker-400">