feat: Add demo login guidance
• Pre-populate login form with demo credentials • Add user guidance message for demo access
This commit is contained in:
@@ -7,16 +7,18 @@ import { Link } from 'react-router-dom';
|
||||
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';
|
||||
|
||||
const LoginComponent = ({ onLogin }) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
// Get credentials from environment
|
||||
const mockUsername = import.meta.env.VITE_MOCK_USERNAME;
|
||||
const mockPassword = import.meta.env.VITE_MOCK_PASSWORD;
|
||||
|
||||
// Prepopulate with demo credentials from env
|
||||
const [username, setUsername] = useState(mockUsername);
|
||||
const [password, setPassword] = useState(mockPassword);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const mockUsername = import.meta.env.VITE_MOCK_USERNAME;
|
||||
const mockPassword = import.meta.env.VITE_MOCK_PASSWORD;
|
||||
|
||||
if (username === mockUsername && password === mockPassword) {
|
||||
onLogin(true);
|
||||
} else {
|
||||
@@ -40,7 +42,15 @@ const LoginComponent = ({ onLogin }) => {
|
||||
<Input style={{ border: '1px solid #edbd7d', marginBottom: '10px', width: '300px', maxWidth: '300px', minWidth: '300px' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: '10px' }}>
|
||||
<p style={{
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
fontStyle: 'italic',
|
||||
margin: '0 0 10px 0'
|
||||
}}>
|
||||
Just click 'Login'. The credentials are already loaded for you.
|
||||
</p>
|
||||
<Button look="flat" type="submit" style={{ padding: '0 20px' }}>Login</Button>
|
||||
</div>
|
||||
<div>
|
||||
|
Reference in New Issue
Block a user