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.

adventure-rental-app/src/AuthPage.jsx

@@ -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} />;
     }
   };
 

adventure-rental-app/src/ForgotPasswordForm.jsx

@@ -0,0 +1,117 @@
+import React, { useState, useCallback } from 'react';
+import axios from 'axios';
+
+const ForgotPasswordForm = ({ showLogin, showReset }) => {
+  const [mode, setMode] = useState('email'); // 'email' or 'whatsapp'
+  const [identifier, setIdentifier] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [emailError, setEmailError] = useState('');
+
+  const validateEmail = (email) => {
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return regex.test(email);
+  };
+
+  const handleIdentifierChange = (e) => {
+    let value = e.target.value;
+    if (mode === 'email') {
+      if (!validateEmail(value) && value.length > 0) {
+        setEmailError('Please enter a valid email address.');
+      } else {
+        setEmailError('');
+      }
+    } else {
+      setEmailError('');
+      if (value.startsWith('0')) {
+        value = value.substring(1);
+      }
+      value = value.replace(/[^0-9]/g, '');
+    }
+    setIdentifier(value);
+  };
+
+  const handleModeChange = useCallback((newMode) => {
+    setMode(newMode);
+    setIdentifier('');
+    setEmailError('');
+    setError('');
+    setSuccess('');
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (mode === 'email' && emailError) {
+      setError('Please fix the errors before submitting.');
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    const finalIdentifier = mode === 'whatsapp' ? `62${identifier}` : identifier;
+
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { identifier: finalIdentifier });
+      setSuccess('Password reset link sent. Please check your email/WhatsApp.');
+      // showReset(); // You might want to navigate to reset password form after a delay
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to send reset link.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormValid = identifier.trim() !== '' && !emailError;
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Forgot Password</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter your email or WhatsApp to reset</p>
+      </div>
+      <div className="flex space-x-2 mt-6">
+        <button onClick={() => handleModeChange('email')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'email' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
+          Email
+        </button>
+        <button onClick={() => handleModeChange('whatsapp')} className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${mode === 'whatsapp' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'}`}>
+          WhatsApp
+        </button>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <div>
+          <div className="relative">
+            {mode === 'whatsapp' && (
+              <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"><span className="text-white font-medium sm:text-sm">+62</span><span className="text-gray-400 mx-2">|</span></div>
+            )}
+            <input
+              name="identifier"
+              type={mode === 'email' ? 'email' : 'tel'}
+              required
+              className={`appearance-none relative block w-full px-4 py-3 border ${emailError ? 'border-red-500' : 'border-gray-500'} bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md ${mode === 'whatsapp' ? 'pl-16' : ''}`}
+              placeholder={mode === 'email' ? 'Enter your email' : '812...'}
+              value={identifier}
+              onChange={handleIdentifierChange}
+            />
+          </div>
+          {emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
+        </div>
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
+        <div>
+          <button type="submit" disabled={loading || !isFormValid} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
+            {loading ? 'Sending...' : 'Reset Password'}
+          </button>
+        </div>
+        <p className="text-center text-sm text-gray-300">
+          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
+            Back to Login
+          </button>
+        </p>
+      </form>
+    </>
+  );
+};
+
+export default ForgotPasswordForm;

adventure-rental-app/src/LoginForm.jsx

@@ -13,7 +13,7 @@ const FlashlightOffIcon = () => (
   </svg>
 );
 
-const LoginForm = ({ toggleForm, onSuccess }) => {
+const LoginForm = ({ toggleForm, onSuccess, showForgotPassword }) => {
   const [loginMode, setLoginMode] = useState('email'); // 'email' or 'whatsapp'
   const [identifier, setIdentifier] = useState('');
   const [password, setPassword] = useState('');
@@ -178,9 +178,9 @@ const LoginForm = ({ toggleForm, onSuccess }) => {
             <button type="button" onClick={toggleForm} className="font-medium text-brand-orange hover:underline">
               Sign up for an adventure
             </button>
-            <a href="#" className="font-medium text-gray-300 hover:text-white">
+            <button type="button" onClick={showForgotPassword} className="font-medium text-gray-300 hover:text-white">
               Forgot password?
-            </a>
+            </button>
           </div>
 
           <div>

adventure-rental-app/src/OtpForm.jsx

@@ -1,25 +1,64 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
-const OtpForm = () => {
+const OtpForm = ({ onSuccess }) => {
   const [emailOtp, setEmailOtp] = useState('');
   const [whatsappOtp, setWhatsappOtp] = useState('');
   const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
   const [loading, setLoading] = useState(false);
+  const [timer, setTimer] = useState(60); // 1 minute in seconds
+
+  useEffect(() => {
+    if (timer > 0) {
+      const interval = setInterval(() => {
+        setTimer(prev => prev - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [timer]);
+
+  const formatTime = (seconds) => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  const handleOtpChange = (setter) => (e) => {
+    const value = e.target.value.replace(/[^0-9]/g, '');
+    setter(value);
+  };
+
+  const handleResend = async () => {
+    setLoading(true);
+    setError('');
+    setSuccess('');
+    try {
+      await axios.post('https://api.karyamanswasta.my.id/webhook/otp-request/adventure');
+      setSuccess('A new OTP has been sent.');
+      setTimer(60); // Reset timer
+    } catch (err) {
+      setError('Failed to resend OTP.');
+    } finally {
+      setLoading(false);
+    }
+  };
 
   const handleVerify = async (e) => {
     e.preventDefault();
     setLoading(true);
     setError('');
+    setSuccess('');
 
     try {
-      // Assuming you have a webhook for OTP verification
+      await axios.post('https://api.karyamanswasta.my.id/webhook/otp-verify/adventure', {
-      await axios.post('https://api.karyamanswasta.my.id/webhook/verify-otp/adventure', {
         emailOtp,
         whatsappOtp,
       });
-      // On success, you would typically redirect to the main app
+      setSuccess('Account verified successfully! Redirecting to login...');
-      console.log('OTP verification successful');
+      setTimeout(() => {
+        onSuccess();
+      }, 2000);
     } catch (err) {
       setError(err.response?.data?.message || 'OTP verification failed.');
     } finally {
@@ -27,41 +66,57 @@ const OtpForm = () => {
     }
   };
 
+  const isFormValid = emailOtp.length >= 6 && whatsappOtp.length >= 6;
+
   return (
     <>
       <div className="text-center">
         <h2 className="text-3xl font-bold text-white">Verify Your Account</h2>
         <p className="mt-2 text-sm text-gray-300">Enter the OTP sent to your email and WhatsApp</p>
+        <p className="mt-4 text-lg font-medium text-brand-orange">{formatTime(timer)}</p>
       </div>
       <form className="mt-8 space-y-6" onSubmit={handleVerify}>
         <input
           name="emailOtp"
           type="text"
+          maxLength="6"
           required
           className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
           placeholder="Email OTP"
           value={emailOtp}
-          onChange={(e) => setEmailOtp(e.target.value)}
+          onChange={handleOtpChange(setEmailOtp)}
         />
         <input
           name="whatsappOtp"
           type="text"
+          maxLength="6"
           required
           className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md"
           placeholder="WhatsApp OTP"
           value={whatsappOtp}
-          onChange={(e) => setWhatsappOtp(e.target.value)}
+          onChange={handleOtpChange(setWhatsappOtp)}
         />
         {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
         <div>
           <button
             type="submit"
-            disabled={loading}
+            disabled={loading || timer === 0 || !isFormValid}
             className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60"
           >
             {loading ? 'Verifying...' : 'Verify Account'}
           </button>
         </div>
+        {timer === 0 && (
+          <button
+            type="button"
+            onClick={handleResend}
+            disabled={loading}
+            className="w-full text-center text-sm font-medium text-brand-orange hover:underline disabled:opacity-60"
+          >
+            Resend OTP
+          </button>
+        )}
       </form>
     </>
   );

adventure-rental-app/src/ResetPasswordForm.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const ResetPasswordForm = ({ showLogin }) => {
+  const [token, setToken] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      setError("Passwords don't match.");
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      // Assuming you have a webhook for resetting the password
+      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { token, newPassword });
+      setSuccess('Password has been sent successfully!');
+      setTimeout(() => {
+        showLogin();
+      }, 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || 'Failed to reset password.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-white">Reset Password</h2>
+        <p className="mt-2 text-sm text-gray-300">Enter the token from your email/WhatsApp and a new password.</p>
+      </div>
+      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+        <input name="token" type="text" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Reset Token" value={token} onChange={(e) => setToken(e.target.value)} />
+        <input name="newPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="New Password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+        <input name="confirmPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Confirm New Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
+        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
+        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
+        <div>
+          <button type="submit" disabled={loading} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
+            {loading ? 'Resetting...' : 'Reset Password'}
+          </button>
+        </div>
+        <p className="text-center text-sm text-gray-300">
+          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
+            Back to Login
+          </button>
+        </p>
+      </form>
+    </>
+  );
+};
+
+export default ResetPasswordForm;

adventure-rental-app/tailwind.config.js

@@ -17,7 +17,7 @@ export default {
         sans: ['Poppins', 'sans-serif'],
       },
       backgroundImage: {
-        'login-bg': "url('https://images.unsplash.com/photo-1515444744559-7be63e1600de?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
+        'login-bg': "url('https://images.unsplash.com/photo-1723067950251-af96d68b9c1e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')",
       }
     },
   },