fix: can redirect to password form from otp form
This commit is contained in:
@@ -22,7 +22,8 @@
|
|||||||
"resendCodeIn": "Resend code in",
|
"resendCodeIn": "Resend code in",
|
||||||
"moreMinute": "minute",
|
"moreMinute": "minute",
|
||||||
"resendCode": "Resend code",
|
"resendCode": "Resend code",
|
||||||
"confirmAndLogin": "Confirm & login"
|
"confirmAndLogin": "Confirm & login",
|
||||||
|
"loginWithPassword": "Login with password"
|
||||||
},
|
},
|
||||||
"completeSignUp": {
|
"completeSignUp": {
|
||||||
"completeSignUp": "Complete Sign Up",
|
"completeSignUp": "Complete Sign Up",
|
||||||
|
|||||||
@@ -23,7 +23,8 @@
|
|||||||
"youHaveSuccessfullySignedIn": "ثبت نام با موفقیت انجام شد",
|
"youHaveSuccessfullySignedIn": "ثبت نام با موفقیت انجام شد",
|
||||||
"resendCodeIn": "ارسال مجدد کد تا",
|
"resendCodeIn": "ارسال مجدد کد تا",
|
||||||
"moreMinute": "دقیقه دیگر",
|
"moreMinute": "دقیقه دیگر",
|
||||||
"resendCode": "ارسال مجدد"
|
"resendCode": "ارسال مجدد",
|
||||||
|
"loginWithPassword": "ورود با رمز"
|
||||||
},
|
},
|
||||||
"completeSignUp": {
|
"completeSignUp": {
|
||||||
"completeSignUp": "تکمیل ثبت نام",
|
"completeSignUp": "تکمیل ثبت نام",
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ export const AuthenticationSteps = (): JSX.Element => {
|
|||||||
const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
|
const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
|
||||||
useState<string>('');
|
useState<string>('');
|
||||||
const [memoryTokenRes, setMemoryTokenRes] = useState<GenerateTokenResponse>();
|
const [memoryTokenRes, setMemoryTokenRes] = useState<GenerateTokenResponse>();
|
||||||
|
const [hasPassword, setHasPassword] = useState(false);
|
||||||
const { login } = useAuth();
|
const { login } = useAuth();
|
||||||
|
|
||||||
const authFactory: AuthFactory = useMemo(() => {
|
const authFactory: AuthFactory = useMemo(() => {
|
||||||
@@ -83,6 +84,7 @@ export const AuthenticationSteps = (): JSX.Element => {
|
|||||||
case UserStatus.RegisteredWithPassword:
|
case UserStatus.RegisteredWithPassword:
|
||||||
setAuthMode('login');
|
setAuthMode('login');
|
||||||
setCurrentStep('enterPassword');
|
setCurrentStep('enterPassword');
|
||||||
|
setHasPassword(true);
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -165,6 +167,8 @@ export const AuthenticationSteps = (): JSX.Element => {
|
|||||||
authMode={authMode}
|
authMode={authMode}
|
||||||
authType={authType}
|
authType={authType}
|
||||||
value={loginRegisterValue}
|
value={loginRegisterValue}
|
||||||
|
hasPassword={hasPassword}
|
||||||
|
onLoginWithPassword={() => setCurrentStep('enterPassword')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Box, Button, Stack, Typography } from '@mui/material';
|
import { Box, Button, Stack, Typography } from '@mui/material';
|
||||||
import { Edit2 } from 'iconsax-react';
|
import { ArrowLeft, ArrowRight, Edit2 } from 'iconsax-react';
|
||||||
import DigitInput from '@/components/DigitsInput';
|
import DigitInput from '@/components/DigitsInput';
|
||||||
import type { AuthFactory, AuthMode, AuthType } from '../../types/authTypes';
|
import type { AuthFactory, AuthMode, AuthType } from '../../types/authTypes';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
@@ -31,6 +31,8 @@ interface OtpVerifyFormProps {
|
|||||||
tokenResponse: GenerateTokenResponse,
|
tokenResponse: GenerateTokenResponse,
|
||||||
) => void;
|
) => void;
|
||||||
authFactory: AuthFactory;
|
authFactory: AuthFactory;
|
||||||
|
hasPassword: boolean;
|
||||||
|
onLoginWithPassword: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function OtpVerifyForm({
|
export function OtpVerifyForm({
|
||||||
@@ -41,11 +43,13 @@ export function OtpVerifyForm({
|
|||||||
onEditValue,
|
onEditValue,
|
||||||
onOTPVerified,
|
onOTPVerified,
|
||||||
authFactory,
|
authFactory,
|
||||||
|
hasPassword,
|
||||||
|
onLoginWithPassword,
|
||||||
}: OtpVerifyFormProps) {
|
}: OtpVerifyFormProps) {
|
||||||
const [otpCode, setOtpCode] = useState<string>('');
|
const [otpCode, setOtpCode] = useState<string>('');
|
||||||
const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
|
const [otpDigitInvalid, setOtpDigitInvalid] = useState<boolean>(false);
|
||||||
const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
|
const [isStatusSuccess, setIsStatusSuccess] = useState<boolean>();
|
||||||
const { t } = useTranslation('authentication');
|
const { t, i18n } = useTranslation('authentication');
|
||||||
const [resendTimer, setResendTimer] = useState<number>(120);
|
const [resendTimer, setResendTimer] = useState<number>(120);
|
||||||
const [canResend, setCanResend] = useState(false);
|
const [canResend, setCanResend] = useState(false);
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
@@ -219,6 +223,21 @@ export function OtpVerifyForm({
|
|||||||
onChange={(value) => setOtpCode(value)}
|
onChange={(value) => setOtpCode(value)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{hasPassword && (
|
||||||
|
<Button
|
||||||
|
onClick={onLoginWithPassword}
|
||||||
|
sx={{ width: 'auto', mb: 2 }}
|
||||||
|
variant="text"
|
||||||
|
endIcon={
|
||||||
|
<Icon
|
||||||
|
Component={i18n.dir() === 'rtl' ? ArrowLeft : ArrowRight}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t('verify.loginWithPassword')}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
<Button type="submit" loading={loginSignUpLoading}>
|
<Button type="submit" loading={loginSignUpLoading}>
|
||||||
{authMode === 'register'
|
{authMode === 'register'
|
||||||
? t('verify.confirmAndContinue')
|
? t('verify.confirmAndContinue')
|
||||||
|
|||||||
Reference in New Issue
Block a user