69 lines
3.2 KiB
JavaScript
69 lines
3.2 KiB
JavaScript
// LoginComponent.jsx
|
|
import React, { useState } from 'react';
|
|
import { Input } from '@progress/kendo-react-inputs';
|
|
import { Label } from '@progress/kendo-react-labels';
|
|
import { Button } from '@progress/kendo-react-buttons';
|
|
import { Link } from 'react-router-dom';
|
|
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';
|
|
|
|
const LoginComponent = ({ onLogin }) => {
|
|
// 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();
|
|
|
|
if (username === mockUsername && password === mockPassword) {
|
|
onLogin(true);
|
|
} else {
|
|
console.error("Invalid username or password");
|
|
setError("Invalid username or password. Please try again.");
|
|
// Clear error after 50 seconds (long timeout for demo purposes)
|
|
setTimeout(() => {
|
|
setError('');
|
|
}, 50000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ marginBottom: '100px', width: '350px', margin: '0 auto 100px auto' }}>
|
|
<form onSubmit={handleSubmit} style={{ width: '350px', contain: 'layout' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<Label htmlFor="username">Username: </Label>
|
|
<Input style={{ border: '1px solid #edbd7d', width: '300px', maxWidth: '300px', minWidth: '300px' }} type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<Label htmlFor="password">Password: </Label>
|
|
<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', 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>
|
|
<NotificationGroup style={{ textAlign: 'center' }}>
|
|
{error && (<Notification type={{ style: 'error', icon: true }} closeable={true} onClose={() => setError('')}>
|
|
<span>{error}</span>
|
|
</Notification> )}
|
|
</NotificationGroup>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoginComponent; |