multiple messages for phone login and signup added

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<AuthMode>('login');
+  const [authMode, setAuthMode] = useState<AuthMode>('register');
   const [authType, setAuthType] = useState<AuthType>('phone');
   const [currentStep, setCurrentStep] = useState<
     'emailOrPassword' | 'verify' | 'enterPassword'
-  >('emailOrPassword');
+  >('verify');
+  const [loginRegisterValue, setLoginRegisterValue] =
+    useState<string>('9152814093');
 
-  const handleLoginRegister = (value: string) => {};
+  const handleLoginRegister = (value: string) => {
+    setLoginRegisterValue(value);
+    setCurrentStep('verify');
+  };
+
+  const handleEditValue = () => {
+    setCurrentStep('emailOrPassword');
+  };
 
   return (
     <>
       {currentStep === 'emailOrPassword' && (
         <LoginRegisterForm
+          loginRegisterValue={loginRegisterValue}
+          setLoginRegisterValue={setLoginRegisterValue}
           authType={authType}
           setAuthType={setAuthType}
           onLoginRegisterSubmit={handleLoginRegister}
         />
       )}
+
+      {currentStep === 'verify' && (
+        <OtpVerifyForm
+          onEditValue={handleEditValue}
+          authMode={authMode}
+          authType={authType}
+          value={loginRegisterValue}
+        />
+      )}
     </>
   );
 };