Fix: Set isLoggedIn state and handle redirects

This commit addresses several issues related to the login flow:

- Corrects the `isLoggedIn` variable to use `setIsLoggedIn` in `App.jsx`.
- Passes `onLogin` and `isLoggedIn` props to `CampfireAppBar`.
- Enables logout functionality in `AppBar.jsx`.
- Modifies `AppRoutes.jsx` to conditionally render `CampfireAppBar`.
- Converts pages to use `React.forwardRef` for page transitions.
- Fixes the `useState` import in `App.jsx`.
- Moves `NotificationGroup` to the top of the form in `LoginComponent.jsx` to prevent overlap.
- Corrects the logo path in `LoginPage.jsx`.
- Improves input accessibility with a border in `LoginComponent.jsx`.

src/components/LoginComponent.jsx

@@ -0,0 +1,55 @@
+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 }) => {
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+    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 {
+            console.error("Invalid username or password");
+            setError("Invalid username or password. Please try again.");
+            setTimeout(() => {
+                setError('');
+            }, 50000);
+        }
+    };
+
+    return (
+        <>
+            <form onSubmit={handleSubmit}>
+                <div>
+                    <Label htmlFor="username">Username: </Label>
+                    <Input style={{ border: '1px solid #edbd7d' }} type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" />
+                </div>
+                <div>
+                    <Label htmlFor="password">Password: </Label>
+                    <Input style={{ border: '1px solid #edbd7d' }} type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
+                </div>
+                
+                <Button look="flat" type="submit">Login</Button>
+                <div>
+                    <NotificationGroup style={{ textAlign: 'center' }}>
+                    {error && (<Notification type={{ style: 'error', icon: true }} closeable={true} onClose={() => setError('')}>
+                        <span>{error}</span>
+                        </Notification> )}
+                    </NotificationGroup>
+                </div>
+            </form>
+        </>
+    );
+};
+
+export default LoginComponent;