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
200
adventure-rental-app/src/LoginForm.jsx
Normal file
200
adventure-rental-app/src/LoginForm.jsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
const FlashlightOnIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.463c-5.786 0-10.5-4.714-10.5-10.5 0-3.863 2.07-7.222 5.042-9.016a.75.75 0 01.819.162z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const FlashlightOffIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5 text-gray-300 group-hover:text-white">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const LoginForm = ({ toggleForm, onSuccess }) => {
|
||||
const [loginMode, setLoginMode] = useState('email'); // 'email' or 'whatsapp'
|
||||
const [identifier, setIdentifier] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = 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 (loginMode === '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 handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
if (loginMode === 'email' && emailError) {
|
||||
setError('Please fix the errors before submitting.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
const finalIdentifier = loginMode === 'whatsapp' ? `62${identifier}` : identifier;
|
||||
|
||||
try {
|
||||
const response = await axios.post('https://api.karyamanswasta.my.id/webhook/login/adventure', {
|
||||
identifier: finalIdentifier,
|
||||
password,
|
||||
});
|
||||
|
||||
const { token } = response.data;
|
||||
localStorage.setItem('authToken', token);
|
||||
console.log('Login successful, token:', token);
|
||||
onSuccess(); // Call onSuccess to reset the form
|
||||
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Login failed. Please check your credentials.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleModeChange = useCallback((mode) => {
|
||||
setLoginMode(mode);
|
||||
setIdentifier('');
|
||||
setPassword('');
|
||||
setEmailError('');
|
||||
setShowPassword(false);
|
||||
setError('');
|
||||
}, []);
|
||||
|
||||
const togglePasswordVisibility = useCallback(() => {
|
||||
setShowPassword(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-white">
|
||||
Equipment Rental
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-gray-300">
|
||||
Sign in to continue your adventure
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => handleModeChange('email')}
|
||||
className={`w-1/2 py-2 text-sm font-medium rounded-md focus:outline-none transition-colors duration-300 ${
|
||||
loginMode === '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 ${
|
||||
loginMode === 'whatsapp' ? 'bg-brand-orange text-white' : 'bg-white/20 text-white hover:bg-white/30'
|
||||
}`}
|
||||
>
|
||||
WhatsApp
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleLogin}>
|
||||
<div>
|
||||
<label htmlFor="identifier" className="sr-only">
|
||||
{loginMode === 'email' ? 'Email' : 'WhatsApp Number'}
|
||||
</label>
|
||||
<div className="relative">
|
||||
{loginMode === '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
|
||||
id="identifier"
|
||||
name="identifier"
|
||||
type={loginMode === '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 ${
|
||||
loginMode === 'whatsapp' ? 'pl-16' : ''
|
||||
}`}
|
||||
placeholder={loginMode === 'email' ? 'Enter your email' : '812...'}
|
||||
value={identifier}
|
||||
onChange={handleIdentifierChange}
|
||||
/>
|
||||
</div>
|
||||
{emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
autoComplete="current-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="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePasswordVisibility}
|
||||
className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none"
|
||||
>
|
||||
{showPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-red-300 text-center">{error}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<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">
|
||||
Forgot password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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 ? 'Signing In...' : 'Sign In'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
Reference in New Issue
Block a user