129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
import React, { useState, type JSX } from 'react';
|
|
import { LoginRegisterForm } from './LoginRegiserForm';
|
|
import type { AuthMode, AuthType } from '../../types/authTypes';
|
|
import { OtpVerifyForm } from './OtpVerifyForm';
|
|
import { isNumeric } from '@/utils/regexes/isNumeric';
|
|
import { CompleteSignUp } from './CompleteSignUp';
|
|
import { EnterPasswordForm } from './EnterPasswordForm';
|
|
import { getUserStatusByPhoneNumberOrEmail } from '../../api/authorizationAPI';
|
|
import { UserStatus } from '../../types/userTypes';
|
|
import type { CountryCode } from '@/types/commonTypes';
|
|
import { VerifyPhoneNumber } from './VerifyPhoneNumber';
|
|
|
|
export const AuthenticationSteps = (): JSX.Element => {
|
|
const [authMode, setAuthMode] = useState<AuthMode>('register');
|
|
const [authType, setAuthType] = useState<AuthType>('phone');
|
|
const [currentStep, setCurrentStep] = useState<
|
|
| 'emailOrPhone'
|
|
| 'verify'
|
|
| 'enterPassword'
|
|
| 'addPhoneNumber'
|
|
| 'addedPhoneNumberVerify'
|
|
>('emailOrPhone');
|
|
const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
|
|
const [countryCode, setCountryCode] = useState<CountryCode>('+98');
|
|
const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
|
|
useState<string>('');
|
|
|
|
const handleLoginRegister = (value: string, userStatus: UserStatus) => {
|
|
setAuthType(isNumeric(value) ? 'phone' : 'email');
|
|
|
|
switch (userStatus) {
|
|
case UserStatus.NotRegistered:
|
|
setAuthMode('register');
|
|
setCurrentStep('verify');
|
|
break;
|
|
|
|
case UserStatus.RegisteredWithoutPassword:
|
|
setAuthMode('login');
|
|
setCurrentStep('verify');
|
|
|
|
break;
|
|
|
|
case UserStatus.RegisteredWithPassword:
|
|
setAuthMode('login');
|
|
setCurrentStep('enterPassword');
|
|
|
|
break;
|
|
}
|
|
};
|
|
|
|
const handleOTPVerfied = (registeredWithoutPhoneNumber: boolean = false) => {
|
|
// if (registeredWithoutPhoneNumber) {
|
|
// setCurrentStep('addPhoneNumber');
|
|
// }
|
|
};
|
|
|
|
const handleEditValue = () => {
|
|
setCurrentStep('emailOrPhone');
|
|
};
|
|
|
|
const handleCompleteSignUp = (countryCode: string, value: string) => {
|
|
setCurrentStep('addedPhoneNumberVerify');
|
|
};
|
|
|
|
const handleCompleteSignUpOTPVerified = () => {
|
|
console.log('phoneNumberVerified');
|
|
};
|
|
|
|
const handleCompleteSignUpEditValue = () => {
|
|
setCurrentStep('emailOrPhone');
|
|
};
|
|
|
|
const handleLoggedInWithPassowrd = () => {};
|
|
|
|
return (
|
|
<>
|
|
{currentStep === 'emailOrPhone' && (
|
|
<LoginRegisterForm
|
|
countryCode={countryCode}
|
|
setCountryCode={setCountryCode}
|
|
loginRegisterValue={loginRegisterValue}
|
|
setLoginRegisterValue={setLoginRegisterValue}
|
|
authType={authType}
|
|
setAuthType={setAuthType}
|
|
onLoginRegisterSubmit={handleLoginRegister}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'verify' && (
|
|
<OtpVerifyForm
|
|
countryCode={countryCode}
|
|
onOTPVerified={handleOTPVerfied}
|
|
onEditValue={handleEditValue}
|
|
authMode={authMode}
|
|
authType={authType}
|
|
value={loginRegisterValue}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'enterPassword' && (
|
|
<EnterPasswordForm
|
|
onLoggedIn={handleLoggedInWithPassowrd}
|
|
onEditValue={handleEditValue}
|
|
onLoginWithOTP={() => setCurrentStep('verify')}
|
|
emailOrPhone={loginRegisterValue}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'addPhoneNumber' && (
|
|
<CompleteSignUp
|
|
value={addedPhoneNumberValue}
|
|
setValue={setAddedPhoneNumberValue}
|
|
email={loginRegisterValue}
|
|
onCompleteSignUp={handleCompleteSignUp}
|
|
/>
|
|
)}
|
|
|
|
{currentStep === 'addedPhoneNumberVerify' && (
|
|
<VerifyPhoneNumber
|
|
countryCode={countryCode}
|
|
onEditValue={handleCompleteSignUpEditValue}
|
|
value={addedPhoneNumberValue}
|
|
onPhoneNumberVerified={handleCompleteSignUpOTPVerified}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|