feat(auth): implement multi-step authentication flow

This commit introduces a complete user authentication system, replacing the previous placeholder login page. The new flow includes signup, login, and OTP verification, all integrated with backend webhooks.

- Adds `AuthPage` to manage the view state between login, signup, and OTP forms.
- Implements `LoginForm` with support for both email and WhatsApp credentials.
- Implements `SignupForm` with password strength and confirmation validation.
- Adds `OtpForm` for two-factor verification after a successful signup.
- Integrates `axios` for making API calls to the backend webhooks.
- Updates styling with a new background, custom brand colors, and the Poppins font.

BREAKING CHANGE: The `LoginPage` component has been deleted and is replaced by the new `AuthPage` component. Any imports of `LoginPage` must be updated.
This commit is contained in:
Emmanuel Rizky
2025-08-02 16:32:07 +07:00
parent c9e7daf801
commit 18b23119ef
6 changed files with 259 additions and 16 deletions

View File

@@ -2,23 +2,31 @@ import React, { useState, useCallback } from 'react';
import LoginForm from './LoginForm';
import SignupForm from './SignupForm';
import OtpForm from './OtpForm';
import ForgotPasswordForm from './ForgotPasswordForm';
import ResetPasswordForm from './ResetPasswordForm';
const AuthPage = () => {
const [view, setView] = useState('login'); // 'login', 'signup', or 'otp'
const [view, setView] = useState('login'); // 'login', 'signup', 'otp', 'forgotPassword', 'resetPassword'
const showSignup = useCallback(() => setView('signup'), []);
const showLogin = useCallback(() => setView('login'), []);
const showOtp = useCallback(() => setView('otp'), []);
const showForgotPassword = useCallback(() => setView('forgotPassword'), []);
const showResetPassword = useCallback(() => setView('resetPassword'), []);
const renderForm = () => {
switch (view) {
case 'signup':
return <SignupForm toggleForm={showLogin} onSuccess={showOtp} />;
case 'otp':
return <OtpForm />;
return <OtpForm onSuccess={showLogin} />;
case 'forgotPassword':
return <ForgotPasswordForm showLogin={showLogin} showReset={showResetPassword} />;
case 'resetPassword':
return <ResetPasswordForm showLogin={showLogin} />;
case 'login':
default:
return <LoginForm toggleForm={showSignup} onSuccess={showLogin} />;
return <LoginForm toggleForm={showSignup} showForgotPassword={showForgotPassword} />;
}
};