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';
|
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>
|
||||||
|
Reference in New Issue
Block a user