mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 23:25:26 +00:00
223 lines
9.2 KiB
TypeScript
223 lines
9.2 KiB
TypeScript
import { FormEvent, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
|
|
import { faLock } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import axios from "axios"
|
|
|
|
import Error from "@app/components/basic/Error";
|
|
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
|
import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
|
|
import attemptLogin from "@app/components/utilities/attemptLogin";
|
|
import { Button, Input } from "@app/components/v2";
|
|
import { fetchOrganizations } from "@app/hooks/api/organization/queries";
|
|
import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
|
|
|
|
type Props = {
|
|
setStep: (step: number) => void;
|
|
email: string;
|
|
setEmail: (email: string) => void;
|
|
password: string;
|
|
setPassword: (email: string) => void;
|
|
}
|
|
|
|
export const InitialStep = ({
|
|
setStep,
|
|
email,
|
|
setEmail,
|
|
password,
|
|
setPassword
|
|
}: Props) => {
|
|
const router = useRouter();
|
|
const { createNotification } = useNotificationContext();
|
|
const { t } = useTranslation();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [loginError, setLoginError] = useState(false);
|
|
const { data: serverDetails } = useFetchServerStatus();
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
|
|
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
try {
|
|
if (!email || !password) {
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
if (queryParams && queryParams.get("callback_port")) {
|
|
const callbackPort = queryParams.get("callback_port")
|
|
|
|
// attemptCliLogin
|
|
const isCliLoginSuccessful = await attemptCliLogin({
|
|
email,
|
|
password,
|
|
})
|
|
|
|
if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
|
|
|
|
if (isCliLoginSuccessful.mfaEnabled) {
|
|
// case: login requires MFA step
|
|
setStep(1);
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
// case: login was successful
|
|
const cliUrl = `http://localhost:${callbackPort}`
|
|
|
|
// send request to server endpoint
|
|
const instance = axios.create()
|
|
await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
|
|
|
|
// cli page
|
|
router.push("/cli-redirect");
|
|
|
|
// on success, router.push to cli Login Successful page
|
|
|
|
}
|
|
} else {
|
|
const isLoginSuccessful = await attemptLogin({
|
|
email,
|
|
password,
|
|
});
|
|
if (isLoginSuccessful && isLoginSuccessful.success) {
|
|
// case: login was successful
|
|
|
|
if (isLoginSuccessful.mfaEnabled) {
|
|
// case: login requires MFA step
|
|
setStep(1);
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
const userOrgs = await fetchOrganizations();
|
|
const userOrg = userOrgs[0] && userOrgs[0]._id;
|
|
|
|
// case: login does not require MFA step
|
|
createNotification({
|
|
text: "Successfully logged in",
|
|
type: "success"
|
|
});
|
|
router.push(`/org/${userOrg}/overview`);
|
|
}
|
|
}
|
|
|
|
|
|
} catch (err) {
|
|
setLoginError(true);
|
|
createNotification({
|
|
text: "Login unsuccessful. Double-check your credentials and try again.",
|
|
type: "error"
|
|
});
|
|
}
|
|
|
|
setIsLoading(false);
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
|
|
<h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
|
|
<Button
|
|
colorSchema="primary"
|
|
variant="outline_bg"
|
|
onClick={() => {
|
|
const callbackPort = queryParams.get("callback_port");
|
|
|
|
window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
|
|
window.close();
|
|
}}
|
|
leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
|
|
className="h-11 w-full mx-0"
|
|
>
|
|
{t("login.continue-with-google")}
|
|
</Button>
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
|
|
<Button
|
|
colorSchema="primary"
|
|
variant="outline_bg"
|
|
onClick={() => {
|
|
const callbackPort = queryParams.get("callback_port");
|
|
|
|
window.open(`/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
|
|
|
|
window.close();
|
|
}}
|
|
leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
|
|
className="h-11 w-full mx-0"
|
|
>
|
|
Continue with GitHub
|
|
</Button>
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
|
|
<Button
|
|
colorSchema="primary"
|
|
variant="outline_bg"
|
|
onClick={() => {
|
|
setStep(2);
|
|
}}
|
|
leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
|
|
className="h-11 w-full mx-0"
|
|
>
|
|
Continue with SSO
|
|
</Button>
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
|
|
<div className='w-full border-t border-mineshaft-400/60' />
|
|
<span className="mx-2 text-mineshaft-200 text-xs">or</span>
|
|
<div className='w-full border-t border-mineshaft-400/60' />
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
|
|
<Input
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
type="email"
|
|
placeholder="Enter your email..."
|
|
isRequired
|
|
autoComplete="username"
|
|
className="h-11"
|
|
/>
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
|
|
<Input
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
type="password"
|
|
placeholder="Enter your password..."
|
|
isRequired
|
|
autoComplete="current-password"
|
|
id="current-password"
|
|
className="h-11 select:-webkit-autofill:focus"
|
|
/>
|
|
</div>
|
|
<div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-5'>
|
|
<Button
|
|
type="submit"
|
|
size="sm"
|
|
isFullWidth
|
|
className='h-11'
|
|
colorSchema="primary"
|
|
variant="solid"
|
|
isLoading={isLoading}
|
|
> Continue with Email </Button>
|
|
</div>
|
|
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
|
|
{
|
|
!serverDetails?.inviteOnlySignup ?
|
|
<div className="mt-6 text-bunker-400 text-sm flex flex-row">
|
|
<span className="mr-1">Don't have an acount yet?</span>
|
|
<Link href="/signup">
|
|
<span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
|
|
</Link>
|
|
</div> : <div />
|
|
}
|
|
<div className="text-bunker-400 text-sm flex flex-row">
|
|
<span className="mr-1">Forgot password?</span>
|
|
<Link href="/verify-email">
|
|
<span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
);
|
|
} |