🔧 Streamlined Login Experience

Fixed confusing dual login experience by:

 Consolidated Multiple Login Elements:
- Removed confusing 'Fill Admin Credentials' button
- Removed separate Admin Info Card with hardcoded credentials
- Replaced with clean, organized quick login section

🧪 Improved Testing UX:
- Added 3 quick login buttons: Admin, Alice, Bob
- Clear labeling with role indicators (👑 Admin, 👤 Users)
- Grid layout for organized presentation
- Unified handleQuickLogin function

🎯 Cleaner Interface:
- Single, clear login form as primary method
- Quick testing buttons as secondary option
- Removed broken 'Sign up' link (no register page yet)
- Better messaging and user guidance

🚀 Result:
- One clear login page with primary form
- Organized testing section with all accounts
- No more confusion about multiple login methods
- Better UX for both testing and production use

Ready for streamlined testing workflow! 🎮
This commit is contained in:
Randall Stillwell 2025-07-25 10:47:09 -05:00
parent 72de168fc6
commit 083c4f61ac

View file

@ -57,11 +57,8 @@ export default function Login() {
} }
}; };
const handleQuickAdminLogin = () => { const handleQuickLogin = (email, password) => {
setFormData({ setFormData({ email, password });
email: 'admin@tcgvault.com',
password: 'admin123'
});
}; };
return ( return (
@ -153,51 +150,71 @@ export default function Login() {
</button> </button>
</div> </div>
{/* Quick Admin Login for Development */} {/* Quick Login for Testing */}
<div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border)' }}> <div className="mt-6 pt-6 border-t" style={{ borderColor: 'var(--border)' }}>
<div className="text-center"> <div className="text-center">
<p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}> <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
Development Quick Login: Quick Login for Testing:
</p> </p>
<button <div className="grid grid-cols-3 gap-2">
type="button" <button
onClick={handleQuickAdminLogin} type="button"
className="px-4 py-2 rounded-lg text-sm font-medium border transition-all duration-200 hover:shadow-md" onClick={() => handleQuickLogin('admin@tcgvault.com', 'admin123')}
style={{ className="px-3 py-2 rounded-lg text-xs font-medium border transition-all duration-200 hover:shadow-md"
backgroundColor: 'var(--bg-primary)', style={{
borderColor: 'var(--border)', backgroundColor: 'var(--bg-primary)',
color: 'var(--text-primary)' borderColor: 'var(--border)',
}} color: 'var(--text-primary)'
> }}
🔧 Fill Admin Credentials >
</button> 👑 Admin
</button>
<button
type="button"
onClick={() => handleQuickLogin('alice@tcgvault.com', 'alice123')}
className="px-3 py-2 rounded-lg text-xs font-medium border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)'
}}
>
👤 Alice
</button>
<button
type="button"
onClick={() => handleQuickLogin('bob@tcgvault.com', 'bob123')}
className="px-3 py-2 rounded-lg text-xs font-medium border transition-all duration-200 hover:shadow-md"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border)',
color: 'var(--text-primary)'
}}
>
👤 Bob
</button>
</div>
</div> </div>
</div> </div>
</form> </form>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}> <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
Don't have an account?{' '} Use the quick login buttons above for testing, or enter credentials manually.
<button
onClick={() => router.push('/register')}
className="font-medium hover:underline"
style={{ color: 'var(--text-accent)' }}
>
Sign up
</button>
</p> </p>
</div> </div>
</div> </div>
{/* Admin Info Card */} {/* Testing Guide */}
<div className="p-4 rounded-xl border" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}> <div className="p-4 rounded-xl border" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
<div className="text-center"> <div className="text-center">
<h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-primary)' }}> <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
🛡 Admin Access 🧪 Testing Accounts
</h3> </h3>
<div className="text-xs space-y-1" style={{ color: 'var(--text-secondary)' }}> <div className="text-xs space-y-1" style={{ color: 'var(--text-secondary)' }}>
<p><strong>Email:</strong> admin@tcgvault.com</p> <p><strong>Admin:</strong> Full system access</p>
<p><strong>Password:</strong> admin123</p> <p><strong>Alice:</strong> Regular user for testing</p>
<p><strong>Bob:</strong> Collaborator for testing</p>
</div> </div>
</div> </div>
</div> </div>