Spaces:
Sleeping
Sleeping
File size: 4,660 Bytes
87ae9fd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import React, { useState } from 'react';
import axios from 'axios';
import { motion } from 'framer-motion';
import { FaLock, FaSpinner } from 'react-icons/fa';
const LoginScreen = ({ onAuthenticated }) => {
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
if (!password.trim()) {
setError('Please enter a password');
return;
}
setLoading(true);
setError(null);
try {
const response = await axios.post('/api/auth/verify', { password });
if (response.data.authenticated) {
// Store auth state in sessionStorage (cleared when browser closes)
sessionStorage.setItem('auth_verified', 'true');
onAuthenticated();
}
} catch (err) {
if (err.response?.status === 401) {
setError('Invalid password. Please try again.');
} else {
setError('Authentication failed. Please try again.');
}
console.error('Auth error:', err);
} finally {
setLoading(false);
}
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700 flex items-center justify-center p-4">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md"
>
<div className="text-center mb-8">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
<FaLock className="text-3xl text-blue-600" />
</div>
<h1 className="text-2xl font-bold text-gray-900">Certificate Manager</h1>
<p className="text-gray-600 mt-2">Enter password to access</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Password
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full border border-gray-300 rounded-lg p-3 text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
placeholder="Enter access password"
autoFocus
/>
</div>
{error && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm"
>
{error}
</motion.div>
)}
<motion.button
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
type="submit"
disabled={loading}
className={`w-full py-3 rounded-lg text-white font-semibold shadow-md flex items-center justify-center space-x-2 transition-all ${loading
? 'bg-gray-400 cursor-not-allowed'
: 'bg-blue-600 hover:bg-blue-700 hover:shadow-lg'
}`}
>
{loading ? (
<>
<FaSpinner className="animate-spin" />
<span>Verifying...</span>
</>
) : (
<>
<FaLock />
<span>Access Application</span>
</>
)}
</motion.button>
</form>
<p className="text-center text-xs text-gray-500 mt-6">
Protected application. Contact administrator for access.
</p>
</motion.div>
</div>
);
};
export default LoginScreen;
|