Update

2026-10-16 06:45:28 +00:00 · 2023-07-19 22:23:48 +07:00
parent dfcd6b1efd
commit 846e2e037f
88 changed files with 4557 additions and 2320 deletions
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router"
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import attemptLogin from "@app/components/utilities/attemptLogin";
+import { Button, Input } from "@app/components/v2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+
+type Props = { 
+    providerAuthToken: string;
+    email: string;
+    password: string;
+    setPassword: (password: string) => void;
+    setStep: (step: number) => void;
+}
+
+export const PasswordStep = ({
+    providerAuthToken,
+    email,
+    password,
+    setPassword,
+    setStep
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const { t } = useTranslation();
+    const router = useRouter();
+    
+    const handleLogin = async () => {
+        try {
+            setIsLoading(true);
+            const loginAttempt = await attemptLogin({
+                email,
+                password,
+                providerAuthToken,
+            });
+
+            if (loginAttempt && loginAttempt.success) {
+                // case: login was successful
+
+                if (loginAttempt.mfaEnabled) {
+                    // TODO: deal with MFA
+                    // case: login requires MFA step
+                    setIsLoading(false);
+                    setStep(2);
+                    return;
+                }
+
+                // case: login does not require MFA step
+                const userOrgs = await getOrganizations();
+                const userOrg = userOrgs[0]._id;
+                setIsLoading(false);
+                createNotification({
+                    text: "Successfully logged in",
+                    type: "success"
+                });
+                router.push(`/org/${userOrg?._id}/overview`);
+            }
+
+        } catch (err) {
+            setIsLoading(false);
+            createNotification({
+                text: "Login unsuccessful. Double-check your master password and try again.",
+                type: "error"
+            });
+            console.error(err);
+        }
+    };
+    
+    return (
+        <form 
+            onSubmit={(e) => e.preventDefault()}
+            className="h-full mx-auto w-full max-w-md px-6 pt-8"
+        >
+            <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
+                What’s your Infisical Password?
+            </p>
+            <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
+                <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
+                    <Input
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        type="password"
+                        placeholder="Enter your password..."
+                        isRequired
+                        autoComplete="current-password"
+                        id="current-password"
+                        className="h-12"
+                    />
+                </div>
+            </div>
+            <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[22rem] text-center rounded-md mt-4'>
+                <Button
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    onClick={async () => handleLogin()} 
+                    isFullWidth
+                    isLoading={isLoading}
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            <div className="text-bunker-400 text-xs flex flex-col items-center w-max mx-auto mt-4">
+                <span className='duration-200 max-w-sm text-center px-4'>
+                    Infisical Master Password serves as a decryption mechanism so that even Google is not able to access your secrets.
+                </span>
+                <Link href="/verify-email">
+                    <span className='hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.forgot-password")}</span>
+                </Link>
+            </div>
+            <div className="flex flex-row items-center justify-center">
+                <button
+                    onClick={() => {
+                        router.push("/login");
+                    }}
+                    type="button"
+                    className="text-bunker-400 text-xs hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
+                >
+                    {t("login.other-option")}
+                </button>
+            </div>
+        </form>
+    );
+}