+
- {emailError?.email && (
+ {emailError?.email && !isFocused && (
{emailError.email}
diff --git a/web/components/account/auth-forms/password.tsx b/web/components/account/auth-forms/password.tsx
index 37c6d6506a..35385ee714 100644
--- a/web/components/account/auth-forms/password.tsx
+++ b/web/components/account/auth-forms/password.tsx
@@ -14,15 +14,17 @@ import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper";
// hooks
-import { useEventTracker, useInstance } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
// services
import { AuthService } from "@/services/auth.service";
type Props = {
email: string;
+ isPasswordAutoset: boolean;
+ isSMTPConfigured: boolean;
mode: EAuthModes;
- handleStepChange: (step: EAuthSteps) => void;
handleEmailClear: () => void;
+ handleAuthStep: (step: EAuthSteps) => void;
};
type TPasswordFormValues = {
@@ -39,9 +41,8 @@ const defaultValues: TPasswordFormValues = {
const authService = new AuthService();
export const AuthPasswordForm: React.FC = observer((props: Props) => {
- const { email, handleStepChange, handleEmailClear, mode } = props;
+ const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
// hooks
- const { instance } = useInstance();
const { captureEvent } = useEventTracker();
// states
const [csrfToken, setCsrfToken] = useState(undefined);
@@ -56,9 +57,6 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => {
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
- // derived values
- const isSmtpConfigured = instance?.config?.is_smtp_configured;
-
const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
setPasswordFormData((prev) => ({ ...prev, [key]: value }));
@@ -68,13 +66,13 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => {
}, [csrfToken]);
const redirectToUniqueCodeSignIn = async () => {
- handleStepChange(EAuthSteps.UNIQUE_CODE);
+ handleAuthStep(EAuthSteps.UNIQUE_CODE);
};
const passwordSupport =
mode === EAuthModes.SIGN_IN ? (
-
- {isSmtpConfigured ? (
+
+ {isSMTPConfigured ? (
captureEvent(FORGOT_PASSWORD)}
href={`/accounts/forgot-password?email=${email}`}
@@ -87,7 +85,10 @@ export const AuthPasswordForm: React.FC
= observer((props: Props) => {
)}
) : (
- isPasswordInputFocused &&
+ passwordFormData.password.length > 0 &&
+ (getPasswordStrength(passwordFormData.password) < 3 || isPasswordInputFocused) && (
+
+ )
);
const isButtonDisabled = useMemo(
@@ -112,11 +113,14 @@ export const AuthPasswordForm: React.FC
= observer((props: Props) => {
onError={() => setIsSubmitting(false)}
>
+
-
+
{mode === EAuthModes.SIGN_UP && (
@@ -178,7 +182,7 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => {
value={passwordFormData.confirm_password}
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
placeholder="Confirm password"
- className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+ className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
/>
{showPassword?.retypePassword ? (
= observer((props: Props) => {
)}
)}
+
{mode === EAuthModes.SIGN_IN ? (
<>
- {instance && isSmtpConfigured && (
+ {isSMTPConfigured && (