fix: submit with enter in enter password form

This commit is contained in:
Koosha Lahouti
2025-09-24 12:00:40 +03:30
parent 3e4fc1960f
commit ef4085de6e

View File

@@ -142,61 +142,73 @@ export const EnterPasswordForm = ({
</LTRBox>
</Button>
</Box>
<Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
{t('enterPassword.enterThePasswordYouSetForYourAccount')}
</Typography>
<TextField
label={t('enterPassword.loginPassword')}
type={showPassword ? 'text' : 'password'}
value={passValue}
inputRef={inputRef}
onChange={(e) => setPassValue(e.target.value)}
onBlur={handleBlur}
error={!passValue && inputTouched}
helperText={
!passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : ''
}
autoFocus
slotProps={{
htmlInput: { sx: { lineHeight: 1.5 } },
input: {
endAdornment: (
<IconButton
color="primary"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<Icon Component={Eye} />
) : (
<Icon Component={EyeSlash} />
)}
</IconButton>
),
},
<Box
component="form"
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
if (!loginWithPassLoading) {
void handleSubmit();
}
}}
sx={{ my: 4 }}
/>
<Button
onClick={handleLoginWithOtp}
sx={{ width: 'auto', mb: 2 }}
variant="text"
loading={emailResendLoading || smsResendLoading}
endIcon={<Icon Component={ArrowLeft} />}
>
{t('enterPassword.loginWithOneTimeCode')}
</Button>
<Typography variant="body2" color="textSecondary" sx={{ mt: 1, mb: 2 }}>
{t('enterPassword.enterThePasswordYouSetForYourAccount')}
</Typography>
<Stack spacing={1}>
<Button loading={loginWithPassLoading} onClick={handleSubmit}>
{t('verify.confirmAndLogin')}
<TextField
label={t('enterPassword.loginPassword')}
type={showPassword ? 'text' : 'password'}
value={passValue}
inputRef={inputRef}
onChange={(e) => setPassValue(e.target.value)}
onBlur={handleBlur}
error={!passValue && inputTouched}
helperText={
!passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : ''
}
autoFocus
slotProps={{
htmlInput: { sx: { lineHeight: 1.5 } },
input: {
endAdornment: (
<IconButton
color="primary"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<Icon Component={Eye} />
) : (
<Icon Component={EyeSlash} />
)}
</IconButton>
),
},
}}
sx={{ my: 4 }}
/>
<Button
onClick={handleLoginWithOtp}
sx={{ width: 'auto', mb: 2 }}
variant="text"
loading={emailResendLoading || smsResendLoading}
endIcon={<Icon Component={ArrowLeft} />}
>
{t('enterPassword.loginWithOneTimeCode')}
</Button>
<Link to="/forget-password">
<Button variant="text">{t('enterPassword.iForgotMyPassword')}</Button>
</Link>
</Stack>
<Stack spacing={1}>
<Button loading={loginWithPassLoading}>
{t('verify.confirmAndLogin')}
</Button>
<Link to="/forget-password">
<Button variant="text">
{t('enterPassword.iForgotMyPassword')}
</Button>
</Link>
</Stack>
</Box>
</AuthenticationCard>
);
};