import React, { useEffect, useMemo, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; // icons import { Eye, EyeOff, XCircle } from "lucide-react"; // ui import { Button, Input, Spinner } from "@plane/ui"; // components import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/account"; // constants import { FORGOT_PASSWORD } from "@/constants/event-tracker"; // helpers import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper"; import { API_BASE_URL } from "@/helpers/common.helper"; import { getPasswordStrength } from "@/helpers/password.helper"; // hooks import { useEventTracker } from "@/hooks/store"; // services import { AuthService } from "@/services/auth.service"; type Props = { email: string; isSMTPConfigured: boolean; mode: EAuthModes; handleEmailClear: () => void; handleAuthStep: (step: EAuthSteps) => void; }; type TPasswordFormValues = { email: string; password: string; confirm_password?: string; }; const defaultValues: TPasswordFormValues = { email: "", password: "", }; const authService = new AuthService(); export const AuthPasswordForm: React.FC = observer((props: Props) => { const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props; // hooks const { captureEvent } = useEventTracker(); // states const [csrfToken, setCsrfToken] = useState(undefined); const [passwordFormData, setPasswordFormData] = useState({ ...defaultValues, email }); const [showPassword, setShowPassword] = useState({ password: false, retypePassword: false, }); const [isSubmitting, setIsSubmitting] = useState(false); const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); const handleShowPassword = (key: keyof typeof showPassword) => setShowPassword((prev) => ({ ...prev, [key]: !prev[key] })); const handleFormChange = (key: keyof TPasswordFormValues, value: string) => setPasswordFormData((prev) => ({ ...prev, [key]: value })); useEffect(() => { if (csrfToken === undefined) authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token)); }, [csrfToken]); const redirectToUniqueCodeSignIn = async () => { handleAuthStep(EAuthSteps.UNIQUE_CODE); }; const passwordSupport = mode === EAuthModes.SIGN_IN ? (
{isSMTPConfigured ? ( captureEvent(FORGOT_PASSWORD)} href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`} className="text-xs font-medium text-custom-primary-100" > Forgot your password? ) : ( )}
) : ( passwordFormData.password.length > 0 && (getPasswordStrength(passwordFormData.password) < 3 || isPasswordInputFocused) && ( ) ); const isButtonDisabled = useMemo( () => !isSubmitting && !!passwordFormData.password && (mode === EAuthModes.SIGN_UP ? getPasswordStrength(passwordFormData.password) >= 3 && passwordFormData.password === passwordFormData.confirm_password : true) ? false : true, [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password] ); const password = passwordFormData?.password ?? ""; const confirmPassword = passwordFormData?.confirm_password ?? ""; const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; return (
setIsSubmitting(true)} onError={() => setIsSubmitting(false)} >
handleFormChange("email", e.target.value)} placeholder="name@company.com" className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`} disabled /> {passwordFormData.email.length > 0 && (
)}
handleFormChange("password", e.target.value)} placeholder="Enter password" className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" onFocus={() => setIsPasswordInputFocused(true)} onBlur={() => setIsPasswordInputFocused(false)} autoFocus /> {showPassword?.password ? ( handleShowPassword("password")} /> ) : ( handleShowPassword("password")} /> )}
{passwordSupport}
{mode === EAuthModes.SIGN_UP && (
handleFormChange("confirm_password", e.target.value)} placeholder="Confirm password" className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400" onFocus={() => setIsRetryPasswordInputFocused(true)} onBlur={() => setIsRetryPasswordInputFocused(false)} /> {showPassword?.retypePassword ? ( handleShowPassword("retypePassword")} /> ) : ( handleShowPassword("retypePassword")} /> )}
{!!passwordFormData.confirm_password && passwordFormData.password !== passwordFormData.confirm_password && renderPasswordMatchError && Passwords don{"'"}t match}
)}
{mode === EAuthModes.SIGN_IN ? ( <> {isSMTPConfigured && ( )} ) : ( )}
); });