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
@@ -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} />;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
117
adventure-rental-app/src/ForgotPasswordForm.jsx
Normal file
117
adventure-rental-app/src/ForgotPasswordForm.jsx
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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/verify-otp/adventure', {
|
||||
await axios.post('https://api.karyamanswasta.my.id/webhook/otp-verify/adventure', {
|
||||
emailOtp,
|
||||
whatsappOtp,
|
||||
});
|
||||
// On success, you would typically redirect to the main app
|
||||
console.log('OTP verification successful');
|
||||
setSuccess('Account verified successfully! Redirecting to login...');
|
||||
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>
|
||||
</>
|
||||
);
|
||||
|
||||
63
adventure-rental-app/src/ResetPasswordForm.jsx
Normal file
63
adventure-rental-app/src/ResetPasswordForm.jsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user