feat(auth): implement multi-step authentication flow with UI
This commit replaces the placeholder login page with a comprehensive, multi-step authentication system. It introduces a new `AuthPage` that orchestrates the user flow between login, signup, and OTP verification. - **Login Form**: Supports both email and WhatsApp credentials, with input validation and API integration. - **Signup Form**: Includes fields for full name, email, and WhatsApp, with real-time password strength validation. - **OTP Form**: Provides a view for users to verify their account after signup. - **UI/UX**: The entire authentication experience is restyled with a new background, Poppins font, custom brand colors, and improved form components for a polished look and feel. - **Dependencies**: Adds `axios` for handling API requests to the backend. BREAKING CHANGE: The `LoginPage` component has been deleted and is replaced by the new `AuthPage` component. All references to `LoginPage` must be updated.
This commit is contained in:
34
adventure-rental-app/src/AuthPage.jsx
Normal file
34
adventure-rental-app/src/AuthPage.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import LoginForm from './LoginForm';
|
||||
import SignupForm from './SignupForm';
|
||||
import OtpForm from './OtpForm';
|
||||
|
||||
const AuthPage = () => {
|
||||
const [view, setView] = useState('login'); // 'login', 'signup', or 'otp'
|
||||
|
||||
const showSignup = useCallback(() => setView('signup'), []);
|
||||
const showLogin = useCallback(() => setView('login'), []);
|
||||
const showOtp = useCallback(() => setView('otp'), []);
|
||||
|
||||
const renderForm = () => {
|
||||
switch (view) {
|
||||
case 'signup':
|
||||
return <SignupForm toggleForm={showLogin} onSuccess={showOtp} />;
|
||||
case 'otp':
|
||||
return <OtpForm />;
|
||||
case 'login':
|
||||
default:
|
||||
return <LoginForm toggleForm={showSignup} onSuccess={showLogin} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md p-8 space-y-6 bg-black/30 backdrop-blur-xl rounded-2xl shadow-2xl">
|
||||
{renderForm()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AuthPage;
|
||||
Reference in New Issue
Block a user