chore: authorization module name changed and backend type and request functions added

src/features/authorization/components/AuthenticationSteps/AuthenticationSteps.tsx

@@ -0,0 +1,110 @@
+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';
+
+export const AuthenticationSteps = (): JSX.Element => {
+  const [authMode, setAuthMode] = useState<AuthMode>('register');
+  const [authType, setAuthType] = useState<AuthType>('phone');
+  const [currentStep, setCurrentStep] = useState<
+    | 'emailOrPassword'
+    | 'verify'
+    | 'enterPassword'
+    | 'addPhoneNumber'
+    | 'addedPhoneNumberVerify'
+  >('emailOrPassword');
+  const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
+  const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
+    useState<string>('');
+
+  const handleLoginRegister = (value: string) => {
+    setLoginRegisterValue(value);
+    setAuthType(isNumeric(value) ? 'phone' : 'email');
+
+    // TODO: after api: send to password if it has account and has password
+    if (true) {
+      setCurrentStep('enterPassword');
+    } else {
+      setCurrentStep('verify');
+    }
+  };
+
+  const handleOTPVerfied = (otpCode: string) => {
+    if (authMode === 'register' && authType === 'email') {
+      setCurrentStep('addPhoneNumber');
+    }
+  };
+
+  const handleEditValue = () => {
+    setCurrentStep('emailOrPassword');
+  };
+
+  const handleCompleteSignUp = (countryCode: string, value: string) => {
+    setCurrentStep('addedPhoneNumberVerify');
+  };
+
+  const handleCompleteSignUpOTPVerified = (otpCode: string) => {
+    console.log(otpCode);
+  };
+
+  const handleCompleteSignUpEditValue = () => {
+    setCurrentStep('emailOrPassword');
+  };
+
+  const handleLoggedInWithPassowrd = () => {};
+
+  return (
+    <>
+      {currentStep === 'emailOrPassword' && (
+        <LoginRegisterForm
+          loginRegisterValue={loginRegisterValue}
+          setLoginRegisterValue={setLoginRegisterValue}
+          authType={authType}
+          setAuthType={setAuthType}
+          onLoginRegisterSubmit={handleLoginRegister}
+        />
+      )}
+
+      {currentStep === 'verify' && (
+        <OtpVerifyForm
+          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' && (
+        <OtpVerifyForm
+          onOTPVerified={handleCompleteSignUpOTPVerified}
+          onEditValue={handleCompleteSignUpEditValue}
+          authMode="login"
+          authType="phone"
+          value={addedPhoneNumberValue}
+        />
+      )}
+    </>
+  );
+};