feat: Add demo login guidance

• Pre-populate login form with demo credentials
• Add user guidance message for demo access
This commit is contained in:
2025-09-28 11:55:47 -05:00
parent 3692e08245
commit 3450239fe4

View File

@@ -7,16 +7,18 @@ import { Link } from 'react-router-dom';
import { Notification, NotificationGroup } from '@progress/kendo-react-notification'; import { Notification, NotificationGroup } from '@progress/kendo-react-notification';
const LoginComponent = ({ onLogin }) => { const LoginComponent = ({ onLogin }) => {
const [username, setUsername] = useState(''); // Get credentials from environment
const [password, setPassword] = useState(''); 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 [error, setError] = useState('');
const handleSubmit = (event) => { const handleSubmit = (event) => {
event.preventDefault(); event.preventDefault();
const mockUsername = import.meta.env.VITE_MOCK_USERNAME;
const mockPassword = import.meta.env.VITE_MOCK_PASSWORD;
if (username === mockUsername && password === mockPassword) { if (username === mockUsername && password === mockPassword) {
onLogin(true); onLogin(true);
} else { } 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" /> <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>
<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> <Button look="flat" type="submit" style={{ padding: '0 20px' }}>Login</Button>
</div> </div>
<div> <div>