diff --git a/public/locales/en/authentication.json b/public/locales/en/authentication.json index 7b70125..2414a85 100644 --- a/public/locales/en/authentication.json +++ b/public/locales/en/authentication.json @@ -7,24 +7,31 @@ "loginWithGoogle": "Login with google", "emailIsInvalid": "Email is invalid", "phoneNumberIsInvalid": "Phone number is invalid", - "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.", - "a4digitVerificationCodeHasBeenSentToYourEmailAddressPleaseEnterIt": "A 4-digit verification code has been sent to your email address. Please enter it.", - "thereIsNoAccountWithThisEmailAddressA4DigitVerificationCodeHasBeenSentToThisEmailAddressToCreateANewAccount": "There is no account with this email address. A 4-digit verification code has been sent to this email address to create a new account.", - "theVerificationCodeIsIncorrect": "The verification code is incorrect.", - "youHaveSuccessfullyLoggedIn": "You have successfully logged in", - "youHaveSuccessfullySignedIn": "You have successfully signed in", - "resendCodeIn": "Resend code in", - "moreMinute": "minute", - "resendCode": "Resend code" - }, - "completeSignUp": { - "completeSignUp": "Complete Sign Up", - "emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue": "Email {{ email }} has been successfully verified. Please enter your contact number to continue.", - "phoneNumber": "Phone number" - } + "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.", + "a4digitVerificationCodeHasBeenSentToYourEmailAddressPleaseEnterIt": "A 4-digit verification code has been sent to your email address. Please enter it.", + "thereIsNoAccountWithThisEmailAddressA4DigitVerificationCodeHasBeenSentToThisEmailAddressToCreateANewAccount": "There is no account with this email address. A 4-digit verification code has been sent to this email address to create a new account.", + "theVerificationCodeIsIncorrect": "The verification code is incorrect.", + "youHaveSuccessfullyLoggedIn": "You have successfully logged in", + "youHaveSuccessfullySignedIn": "You have successfully signed in", + "resendCodeIn": "Resend code in", + "moreMinute": "minute", + "resendCode": "Resend code" + }, + "completeSignUp": { + "completeSignUp": "Complete Sign Up", + "emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue": "Email {{ email }} has been successfully verified. Please enter your contact number to continue.", + "phoneNumber": "Phone number" + }, + "enterPassword": { + "loginWithPassword": "Login with password", + "enterThePasswordYouSetForYourAccount": "Enter the password you set for your account.", + "loginPassword": "Login password", + "loginWithOneTimeCode": "Login with one-time code", + "iForgotMyPassword": "I forgot my password." } } diff --git a/public/locales/fa/authentication.json b/public/locales/fa/authentication.json index 224d34d..ff6f92c 100644 --- a/public/locales/fa/authentication.json +++ b/public/locales/fa/authentication.json @@ -28,5 +28,12 @@ "completeSignUp": "تکمیل ثبت نام", "emailHasBeenSuccessfullyVerifiedPleaseEnterYourContactNumberToContinue": "ایمیل {{ email }} با موفقیت تایید شد. برای ادامه لطفا شماره تماس خود را وارد کنید", "phoneNumber": "شماره تماس" + }, + "enterPassword": { + "loginWithPassword": "ورود با رمز", + "enterThePasswordYouSetForYourAccount": "رمز ورودی که برای اکانت خود تعیین کردید را وارد کنید", + "loginPassword": "رمز ورود", + "loginWithOneTimeCode": "ورود با کد یکبار مصرف", + "iForgotMyPassword": "رمز ورودم را فراموش کردم" } } diff --git a/src/features/authentication/components/AuthenticationCard.tsx b/src/features/authentication/components/AuthenticationCard.tsx index 9e82632..bde57cd 100644 --- a/src/features/authentication/components/AuthenticationCard.tsx +++ b/src/features/authentication/components/AuthenticationCard.tsx @@ -7,7 +7,7 @@ export const AuthenticationCard = ({ children }: PropsWithChildren) => { { const handleLoginRegister = (value: string) => { setLoginRegisterValue(value); setAuthType(isNumeric(value) ? 'phone' : 'email'); - setCurrentStep('verify'); + + // TODO: after api: send to password if it has account and has password + if (true) { + setCurrentStep('enterPassword'); + } else { + setCurrentStep('verify'); + } }; const handleOTPVerfied = (otpCode: string) => { @@ -45,9 +51,11 @@ export const AuthenticationContainer = (): JSX.Element => { }; const handleCompleteSignUpEditValue = () => { - setCurrentStep('addPhoneNumber'); + setCurrentStep('emailOrPassword'); }; + const handleLoggedInWithPassowrd = () => {}; + return ( <> {currentStep === 'emailOrPassword' && ( @@ -72,7 +80,9 @@ export const AuthenticationContainer = (): JSX.Element => { {currentStep === 'enterPassword' && ( {}} + onLoggedIn={handleLoggedInWithPassowrd} + onEditValue={handleEditValue} + onLoginWithOTP={() => setCurrentStep('verify')} emailOrPhone={loginRegisterValue} /> )} diff --git a/src/features/authentication/components/EnterPasswordForm.tsx b/src/features/authentication/components/EnterPasswordForm.tsx index 72ce370..5414a66 100644 --- a/src/features/authentication/components/EnterPasswordForm.tsx +++ b/src/features/authentication/components/EnterPasswordForm.tsx @@ -1,14 +1,146 @@ -import React from 'react'; +import React, { useRef, useState } from 'react'; import { AuthenticationCard } from './AuthenticationCard'; +import { ArrowLeft, Edit2, Eye, EyeSlash, MaskLeft } from 'iconsax-reactjs'; +import { + Box, + Button, + IconButton, + Stack, + TextField, + Typography, +} from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { Toast } from '@/components/Toast'; export interface EnterPasswordFormProps { - onLoginWithPassword: () => void; + onEditValue: () => void; + onLoginWithOTP: () => void; + onLoggedIn: () => void; emailOrPhone: string; } export const EnterPasswordForm = ({ - onLoginWithPassword, + onEditValue, + onLoginWithOTP, + onLoggedIn, emailOrPhone, }: EnterPasswordFormProps) => { - return ; + const { t } = useTranslation('authentication'); + const [passValue, setPassValue] = useState(''); + const [inputTouched, setInputTouched] = useState(false); + const [showPassword, setShowPassword] = useState(false); + const inputRef = useRef(null); + const [loginLoading, setLoginLoading] = useState(false); + const [loginStatus, setLoginStatus] = useState<'success' | 'failed'>(); + const [loginAlertOpen, setLoginAlertOpen] = useState(false); + const [loginFailedMessage, setLoginFailedMessage] = useState(''); + + const handleBlur = () => { + setInputTouched(true); + }; + + const handleSubmit = () => { + if (!passValue) { + inputRef.current?.focus(); + } else { + setLoginLoading(true); + + // Change setTimeout to api call + setTimeout(() => { + setLoginAlertOpen(true); + // setLoginStatus('success'); + setLoginStatus('failed'); + setLoginFailedMessage('رمز عبور اشتباه میباشد'); + onLoggedIn(); + setLoginLoading(false); + }, 1000); + } + }; + + return ( + + setLoginAlertOpen(false)} + color={loginStatus === 'failed' ? 'error' : 'success'} + > + {loginStatus === 'failed' + ? loginFailedMessage + : t('verify.youHaveSuccessfullyLoggedIn')} + + + + + {t('enterPassword.loginWithPassword')} + + + + + + + {t('enterPassword.enterThePasswordYouSetForYourAccount')} + + + setPassValue(e.target.value)} + onBlur={handleBlur} + error={!passValue && inputTouched} + helperText={ + !passValue && inputTouched ? t('loginForm.thisFieldIsRequired') : '' + } + autoFocus + slotProps={{ + htmlInput: { sx: { lineHeight: 1.5 } }, + input: { + endAdornment: ( + setShowPassword(!showPassword)} + > + {showPassword ? : } + + ), + }, + }} + sx={{ my: 4 }} + /> + + + + + + + + + ); };