awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 13:27:22 +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
+165 -174
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>) => { const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
try { try {
@@ -163,188 +169,173 @@ 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"> <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 Login to Infisical
</h1> </h1>
{!config.enabledLoginMethods || {shouldDisplayLoginMethod(LoginMethod.GOOGLE) && (
(config.enabledLoginMethods.includes(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">
<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
<Button colorSchema="primary"
colorSchema="primary" variant="outline_bg"
variant="outline_bg" onClick={() => {
onClick={() => { const callbackPort = queryParams.get("callback_port");
const callbackPort = queryParams.get("callback_port");
window.open( window.open(
`/api/v1/sso/redirect/google${ `/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`
callbackPort ? `?callback_port=${callbackPort}` : "" );
}` window.close();
); }}
window.close(); leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
}} className="mx-0 h-10 w-full"
leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />} >
className="mx-0 h-10 w-full" {t("login.continue-with-google")}
> </Button>
{t("login.continue-with-google")} </div>
</Button> )}
</div> {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">
{!config.enabledLoginMethods || <Button
(config.enabledLoginMethods.includes(LoginMethod.GITHUB) && ( colorSchema="primary"
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6"> variant="outline_bg"
<Button onClick={() => {
colorSchema="primary" const callbackPort = queryParams.get("callback_port");
variant="outline_bg"
onClick={() => {
const callbackPort = queryParams.get("callback_port");
window.open( window.open(
`/api/v1/sso/redirect/github${ `/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`
callbackPort ? `?callback_port=${callbackPort}` : "" );
}`
);
window.close(); window.close();
}} }}
leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />} leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
className="mx-0 h-10 w-full" className="mx-0 h-10 w-full"
> >
Continue with GitHub Continue with GitHub
</Button> </Button>
</div> </div>
))} )}
{!config.enabledLoginMethods || {shouldDisplayLoginMethod(LoginMethod.GITLAB) && (
(config.enabledLoginMethods.includes(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">
<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
<Button colorSchema="primary"
colorSchema="primary" variant="outline_bg"
variant="outline_bg" onClick={() => {
onClick={() => { const callbackPort = queryParams.get("callback_port");
const callbackPort = queryParams.get("callback_port");
window.open( window.open(
`/api/v1/sso/redirect/gitlab${ `/api/v1/sso/redirect/gitlab${callbackPort ? `?callback_port=${callbackPort}` : ""}`
callbackPort ? `?callback_port=${callbackPort}` : "" );
}`
);
window.close(); window.close();
}} }}
leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />} leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
className="mx-0 h-10 w-full" className="mx-0 h-10 w-full"
> >
Continue with GitLab Continue with GitLab
</Button> </Button>
</div> </div>
))} )}
{!config.enabledLoginMethods || {shouldDisplayLoginMethod(LoginMethod.SAML) && (
(config.enabledLoginMethods.includes(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">
<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
<Button colorSchema="primary"
colorSchema="primary" variant="outline_bg"
variant="outline_bg" onClick={() => {
onClick={() => { handleSaml(2);
handleSaml(2); }}
}} leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />} className="mx-0 h-10 w-full"
className="mx-0 h-10 w-full" >
> Continue with SAML
Continue with SAML </Button>
</Button> </div>
</div> )}
))} {shouldDisplayLoginMethod(LoginMethod.OIDC) && (
{!config.enabledLoginMethods || <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
(config.enabledLoginMethods.includes(LoginMethod.OIDC) && ( <Button
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6"> colorSchema="primary"
<Button variant="outline_bg"
colorSchema="primary" onClick={() => {
variant="outline_bg" setStep(3);
onClick={() => { }}
setStep(3); leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
}} className="mx-0 h-10 w-full"
leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />} >
className="mx-0 h-10 w-full" Continue with OIDC
> </Button>
Continue with OIDC </div>
</Button> )}
</div> {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">
{!config.enabledLoginMethods || <Button
(config.enabledLoginMethods.includes(LoginMethod.LDAP) && ( colorSchema="primary"
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6"> variant="outline_bg"
<Button onClick={() => {
colorSchema="primary" router.push("/login/ldap");
variant="outline_bg" }}
onClick={() => { leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
router.push("/login/ldap"); className="mx-0 h-10 w-full"
}} >
leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />} Continue with LDAP
className="mx-0 h-10 w-full" </Button>
> </div>
Continue with LDAP )}
</Button>
</div>
))}
{!config.enabledLoginMethods || {shouldDisplayLoginMethod(LoginMethod.EMAIL) && config.enabledLoginMethods.length > 1 && (
(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">
config.enabledLoginMethods.includes(LoginMethod.EMAIL) && ( <div className="w-full border-t border-mineshaft-400/60" />
<div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6"> <span className="mx-2 text-xs text-mineshaft-200">or</span>
<div className="w-full border-t border-mineshaft-400/60" /> <div className="w-full border-t border-mineshaft-400/60" />
<span className="mx-2 text-xs text-mineshaft-200">or</span> </div>
<div className="w-full border-t border-mineshaft-400/60" /> )}
</div> {shouldDisplayLoginMethod(LoginMethod.EMAIL) && (
))} <>
{!config.enabledLoginMethods || <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
(config.enabledLoginMethods.includes(LoginMethod.EMAIL) && ( <Input
<> value={email}
<div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6"> onChange={(e) => setEmail(e.target.value)}
<Input type="email"
value={email} placeholder="Enter your email..."
onChange={(e) => setEmail(e.target.value)} isRequired
type="email" autoComplete="username"
placeholder="Enter your email..." className="h-10"
isRequired />
autoComplete="username" </div>
className="h-10" <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Input
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
placeholder="Enter your password..."
isRequired
autoComplete="current-password"
id="current-password"
className="select:-webkit-autofill:focus h-10"
/>
</div>
{shouldShowCaptcha && (
<div className="mt-4">
<HCaptcha
theme="dark"
sitekey={CAPTCHA_SITE_KEY}
onVerify={(token) => setCaptchaToken(token)}
ref={captchaRef}
/> />
</div> </div>
<div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6"> )}
<Input <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
value={password} <Button
onChange={(e) => setPassword(e.target.value)} disabled={shouldShowCaptcha && captchaToken === ""}
type="password" type="submit"
placeholder="Enter your password..." size="sm"
isRequired isFullWidth
autoComplete="current-password" className="h-10"
id="current-password" colorSchema="primary"
className="select:-webkit-autofill:focus h-10" variant="solid"
/> isLoading={isLoading}
</div> >
{shouldShowCaptcha && ( {" "}
<div className="mt-4"> Continue with Email{" "}
<HCaptcha </Button>
theme="dark" </div>
sitekey={CAPTCHA_SITE_KEY} </>
onVerify={(token) => setCaptchaToken(token)} )}
ref={captchaRef}
/>
</div>
)}
<div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
<Button
disabled={shouldShowCaptcha && captchaToken === ""}
type="submit"
size="sm"
isFullWidth
className="h-10"
colorSchema="primary"
variant="solid"
isLoading={isLoading}
>
{" "}
Continue with Email{" "}
</Button>
</div>
</>
))}
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />} {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
{config.allowSignUp ? ( {config.allowSignUp ? (
<div className="mt-6 flex flex-row text-sm text-bunker-400"> <div className="mt-6 flex flex-row text-sm text-bunker-400">