diff --git a/public/locales/en/authentication.json b/public/locales/en/authentication.json index 1d844c3..8cda9bb 100644 --- a/public/locales/en/authentication.json +++ b/public/locales/en/authentication.json @@ -7,6 +7,11 @@ "loginWithGoogle": "Login with google", "emailIsInvalid": "Email is invalid", "phoneNumberIsInvalid": "Phone number is invalid", - "thisFieldIsRequired": "This field is requried" + "thisFieldIsRequired": "This field is requried", + "verify": { + "verify": "Verify", + "a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt": "A 4-digit verification code has been sent to your mobile number. Please enter it.", + "thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount": "There is no account with this number. A 4-digit verification code has been sent to this number to create a new account." + } } } diff --git a/public/locales/fa/authentication.json b/public/locales/fa/authentication.json index 12d3a06..e1dbe20 100644 --- a/public/locales/fa/authentication.json +++ b/public/locales/fa/authentication.json @@ -8,5 +8,12 @@ "emailIsInvalid": "ایمیل وارد شده نامعتبر میباشد", "phoneNumberIsInvalid": "شماره وارد شده نامعتبر میباشد", "thisFieldIsRequired": "این فیلد الزامی است" + }, + "verify": { + "verify": "اعتبارسنجی", + "a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt": "کد تایید ۴ رقمی به شماره موبایل شما ارسال شد. لطفا آن را وارد کنید.", + "confirmAndLogin": "تایید و ورود", + "confirmAndContinue": "تایید و ادامه", + "thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount": "حساب کاربری با این شماره وجود ندارد. برای ساخت حساب جدید، کد تایید ۴ رقمی برای این شماره ارسال گردید." } } diff --git a/src/features/authentication/components/AuthenticationContainer.tsx b/src/features/authentication/components/AuthenticationContainer.tsx index 5bca25c..8b8ed9c 100644 --- a/src/features/authentication/components/AuthenticationContainer.tsx +++ b/src/features/authentication/components/AuthenticationContainer.tsx @@ -1,25 +1,46 @@ import React, { useState, type JSX } from 'react'; import { LoginRegisterForm } from './LoginRegiserForm'; import type { AuthMode, AuthType } from '../types/auth-types'; +import { OtpVerifyForm } from './OtpVerifyForm'; export const AuthenticationContainer = (): JSX.Element => { - const [authMode, setAuthMode] = useState('login'); + const [authMode, setAuthMode] = useState('register'); const [authType, setAuthType] = useState('phone'); const [currentStep, setCurrentStep] = useState< 'emailOrPassword' | 'verify' | 'enterPassword' - >('emailOrPassword'); + >('verify'); + const [loginRegisterValue, setLoginRegisterValue] = + useState('9152814093'); - const handleLoginRegister = (value: string) => {}; + const handleLoginRegister = (value: string) => { + setLoginRegisterValue(value); + setCurrentStep('verify'); + }; + + const handleEditValue = () => { + setCurrentStep('emailOrPassword'); + }; return ( <> {currentStep === 'emailOrPassword' && ( )} + + {currentStep === 'verify' && ( + + )} ); }; diff --git a/src/features/authentication/components/LoginRegiserForm.tsx b/src/features/authentication/components/LoginRegiserForm.tsx index 233eb66..edf9296 100644 --- a/src/features/authentication/components/LoginRegiserForm.tsx +++ b/src/features/authentication/components/LoginRegiserForm.tsx @@ -9,17 +9,21 @@ import { isEmail } from '@/utils/regexes/isEmail'; import parsePhoneNumberFromString from 'libphonenumber-js'; export interface LoginRegisterFormProps { + loginRegisterValue: string; + setLoginRegisterValue: Dispatch; authType: AuthType; setAuthType: Dispatch; onLoginRegisterSubmit: (value: string) => void; } export function LoginRegisterForm({ + loginRegisterValue, + setLoginRegisterValue, authType, setAuthType, + onLoginRegisterSubmit, }: LoginRegisterFormProps) { const { t, i18n } = useTranslation('authentication'); - const [value, setValue] = useState(''); const [countryCode, setCountryCode] = useState('+98'); const textFieldRef = useRef(null); const inputRef = useRef(null); @@ -30,7 +34,7 @@ export function LoginRegisterForm({ const handleInputChange = (event: React.ChangeEvent) => { const newValue = event.target.value; - setValue(newValue); + setLoginRegisterValue(newValue); // If the new value contains only digits (or is empty), it's a phone number if (isNumeric(newValue)) { @@ -42,7 +46,7 @@ export function LoginRegisterForm({ const handleBlur = () => { setTouched(true); - validateInput(value, authType); + validateInput(loginRegisterValue, authType); }; const validateInput = (value: string, authType: AuthType) => { @@ -80,14 +84,15 @@ export function LoginRegisterForm({ }; const handleSubmit = () => { - if (isInputValid(value, authType)) { + if (isInputValid(loginRegisterValue, authType)) { + onLoginRegisterSubmit(loginRegisterValue); } else { inputRef.current?.focus(); - validateInput(value, authType); + validateInput(loginRegisterValue, authType); } }; - const showAdornment = authType === 'phone' && value.length > 0; + const showAdornment = authType === 'phone' && loginRegisterValue.length > 0; return ( @@ -102,7 +107,7 @@ export function LoginRegisterForm({ ref={textFieldRef} inputRef={inputRef} label={t('loginForm.emailOrPhoneLabel')} - value={value} + value={loginRegisterValue} onChange={handleInputChange} onBlur={handleBlur} error={inputError} diff --git a/src/features/authentication/components/OtpVerifyForm.tsx b/src/features/authentication/components/OtpVerifyForm.tsx new file mode 100644 index 0000000..da80299 --- /dev/null +++ b/src/features/authentication/components/OtpVerifyForm.tsx @@ -0,0 +1,73 @@ +import { useTranslation } from 'react-i18next'; +import { Box, Button, Typography } from '@mui/material'; +import { Edit2 } from 'iconsax-reactjs'; +import DigitInput from '@/components/components/DigitsInput'; +import type { AuthMode, AuthType } from '../types/auth-types'; + +interface OtpVerifyFormProps { + value: string; + authType: AuthType; + authMode: AuthMode; + onEditValue: () => void; +} + +export function OtpVerifyForm({ + value, + authType, + authMode, + onEditValue, +}: OtpVerifyFormProps) { + const { t } = useTranslation('authentication'); + + const otpMessage = (): string => { + if (authType === 'phone' && authMode === 'login') { + return t( + 'verify.a4DigitVerificationCodeHasBeenSentToYourBobileNumberPleaseEnterIt', + ); + } else if (authType === 'phone' && authMode === 'register') { + return t( + 'verify.thereIsNoAccountWithThisNumberA4DigitVerificationCodeHasBeenSentToThisNumberToCreateANewAccount', + ); + } + + return ''; + }; + + return ( + + + {t('verify.verify')} + + + + + + {otpMessage()} + + + console.log(value)} /> + + + ); +} diff --git a/src/features/authentication/components/SmsOtpForm.tsx b/src/features/authentication/components/SmsOtpForm.tsx index 9ca0790..ce03b0a 100644 --- a/src/features/authentication/components/SmsOtpForm.tsx +++ b/src/features/authentication/components/SmsOtpForm.tsx @@ -16,7 +16,7 @@ export function SmsOtpForm({ value, type }: SmsOtpProps) {