From 3450239fe4e7deb8b75dae91f931eb0125b47633 Mon Sep 17 00:00:00 2001
From: dereklseitz <derekseitz@dsnet.works>
Date: Sun, 28 Sep 2025 11:55:47 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20demo=20login=20guidance=20?=
 =?UTF-8?q?=E2=80=A2=20Pre-populate=20login=20form=20with=20demo=20credent?=
 =?UTF-8?q?ials=20=E2=80=A2=20Add=20user=20guidance=20message=20for=20demo?=
 =?UTF-8?q?=20access?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LoginComponent.jsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/LoginComponent.jsx b/src/components/LoginComponent.jsx
index c3a9f92..c282141 100644
--- a/src/components/LoginComponent.jsx
+++ b/src/components/LoginComponent.jsx
@@ -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>