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:
Emmanuel Rizky
2025-08-02 15:26:12 +07:00
parent c845ea5827
commit c9e7daf801
11 changed files with 759 additions and 74 deletions

View 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;