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
@@ -1,8 +1,8 @@
|
||||
import LoginPage from './LoginPage'
|
||||
import AuthPage from './AuthPage'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<LoginPage />
|
||||
<AuthPage />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
34
adventure-rental-app/src/AuthPage.jsx
Normal file
34
adventure-rental-app/src/AuthPage.jsx
Normal 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;
|
||||
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;
|
||||
@@ -1,68 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const LoginPage = () => {
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Left side with description and image */}
|
||||
<div className="w-1/2 bg-gray-200 p-10 flex flex-col justify-center items-center text-center">
|
||||
<div className="mb-10">
|
||||
<h1 className="text-4xl font-bold mb-4">Adventure Awaits!</h1>
|
||||
<p className="text-lg">
|
||||
Rent the best camping gear from us and embark on your next great adventure.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* Placeholder for an image */}
|
||||
<div className="w-64 h-64 bg-gray-400 rounded-lg">
|
||||
<span className="text-gray-600">Image Placeholder</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side with login form */}
|
||||
<div className="w-1/2 flex justify-center items-center">
|
||||
<div className="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md">
|
||||
<h2 className="text-3xl font-bold text-center">Login</h2>
|
||||
<form className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginPage;
|
||||
70
adventure-rental-app/src/OtpForm.jsx
Normal file
70
adventure-rental-app/src/OtpForm.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
const OtpForm = () => {
|
||||
const [emailOtp, setEmailOtp] = useState('');
|
||||
const [whatsappOtp, setWhatsappOtp] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleVerify = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// Assuming you have a webhook for OTP verification
|
||||
await axios.post('https://api.karyamanswasta.my.id/webhook/verify-otp/adventure', {
|
||||
emailOtp,
|
||||
whatsappOtp,
|
||||
});
|
||||
// On success, you would typically redirect to the main app
|
||||
console.log('OTP verification successful');
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'OTP verification failed.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" onSubmit={handleVerify}>
|
||||
<input
|
||||
name="emailOtp"
|
||||
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="Email OTP"
|
||||
value={emailOtp}
|
||||
onChange={(e) => setEmailOtp(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
name="whatsappOtp"
|
||||
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="WhatsApp OTP"
|
||||
value={whatsappOtp}
|
||||
onChange={(e) => setWhatsappOtp(e.target.value)}
|
||||
/>
|
||||
{error && <p className="text-sm text-red-300 text-center">{error}</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 ? 'Verifying...' : 'Verify Account'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OtpForm;
|
||||
158
adventure-rental-app/src/SignupForm.jsx
Normal file
158
adventure-rental-app/src/SignupForm.jsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import React, { useState, useEffect } 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 PasswordRequirement = ({ meets, label }) => (
|
||||
<p className={`text-xs ${meets ? 'text-green-400' : 'text-gray-400'}`}>
|
||||
{meets ? '✓' : '✗'} {label}
|
||||
</p>
|
||||
);
|
||||
|
||||
const SignupForm = ({ toggleForm, onSuccess }) => {
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [whatsapp, setWhatsapp] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||
const [emailError, setEmailError] = useState('');
|
||||
const [passwordMatchError, setPasswordMatchError] = useState('');
|
||||
|
||||
const validateEmail = (email) => {
|
||||
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return regex.test(email);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (password && confirmPassword && password !== confirmPassword) {
|
||||
setPasswordMatchError("Passwords don't match.");
|
||||
} else {
|
||||
setPasswordMatchError('');
|
||||
}
|
||||
}, [password, confirmPassword]);
|
||||
|
||||
const handleEmailChange = (e) => {
|
||||
const value = e.target.value;
|
||||
setEmail(value);
|
||||
if (!validateEmail(value) && value.length > 0) {
|
||||
setEmailError('Please enter a valid email address.');
|
||||
} else {
|
||||
setEmailError('');
|
||||
}
|
||||
};
|
||||
|
||||
const passwordRequirements = {
|
||||
length: password.length >= 8,
|
||||
uppercase: /[A-Z]/.test(password),
|
||||
lowercase: /[a-z]/.test(password),
|
||||
number: /[0-9]/.test(password),
|
||||
};
|
||||
const allRequirementsMet = Object.values(passwordRequirements).every(Boolean);
|
||||
|
||||
const isFormValid =
|
||||
fullName.trim() !== '' &&
|
||||
email.trim() !== '' &&
|
||||
!emailError &&
|
||||
whatsapp.trim() !== '' &&
|
||||
password.trim() !== '' &&
|
||||
allRequirementsMet &&
|
||||
confirmPassword.trim() !== '' &&
|
||||
!passwordMatchError;
|
||||
|
||||
const handleWhatsappChange = (e) => {
|
||||
let value = e.target.value;
|
||||
if (value.startsWith('0')) {
|
||||
value = value.substring(1);
|
||||
}
|
||||
setWhatsapp(value.replace(/[^0-9]/g, ''));
|
||||
};
|
||||
|
||||
const handleSignup = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!isFormValid) {
|
||||
setError('Please fill in all fields correctly.');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
await axios.post('https://api.karyamanswasta.my.id/webhook/signup/adventure', {
|
||||
fullName,
|
||||
email,
|
||||
whatsapp: `62${whatsapp}`,
|
||||
password,
|
||||
});
|
||||
onSuccess();
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Signup failed. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="text-center">
|
||||
<h2 className="text-3xl font-bold text-white">Create Account</h2>
|
||||
<p className="mt-2 text-sm text-gray-300">Join the adventure</p>
|
||||
</div>
|
||||
<form className="space-y-4" onSubmit={handleSignup}>
|
||||
<input name="fullName" 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="Full Name" value={fullName} onChange={(e) => setFullName(e.target.value)} />
|
||||
<div>
|
||||
<input name="email" type="email" 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`} placeholder="Email Address" value={email} onChange={handleEmailChange} />
|
||||
{emailError && <p className="mt-2 text-xs text-red-400">{emailError}</p>}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<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="whatsapp" type="tel" 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 pl-16" placeholder="WhatsApp Number" value={whatsapp} onChange={handleWhatsappChange} />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<input name="password" type={showPassword ? 'text' : '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={() => setShowPassword(!showPassword)} className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none">{showPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-x-4">
|
||||
<PasswordRequirement meets={passwordRequirements.length} label="8+ characters" />
|
||||
<PasswordRequirement meets={passwordRequirements.uppercase} label="1 uppercase" />
|
||||
<PasswordRequirement meets={passwordRequirements.lowercase} label="1 lowercase" />
|
||||
<PasswordRequirement meets={passwordRequirements.number} label="1 number" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="relative">
|
||||
<input name="confirmPassword" type={showConfirmPassword ? 'text' : 'password'} required className={`appearance-none relative block w-full px-4 py-3 border ${passwordMatchError ? '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`} placeholder="Confirm Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
|
||||
<button type="button" onClick={() => setShowConfirmPassword(!showConfirmPassword)} className="absolute inset-y-0 right-0 z-20 flex items-center pr-3 group focus:outline-none">{showConfirmPassword ? <FlashlightOffIcon /> : <FlashlightOnIcon />}</button>
|
||||
</div>
|
||||
{passwordMatchError && <p className="mt-2 text-xs text-red-400">{passwordMatchError}</p>}
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-300 text-center">{error}</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 ? 'Creating Account...' : 'Sign Up'}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-center text-sm text-gray-300">
|
||||
Already have an account?{' '}
|
||||
<button type="button" onClick={toggleForm} className="font-medium text-brand-orange hover:underline">
|
||||
Sign In
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignupForm;
|
||||
@@ -1,3 +1,19 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply bg-login-bg bg-cover bg-center font-sans;
|
||||
}
|
||||
|
||||
/* Webkit Autofill Override */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.10) inset !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user