admin/36661-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto commit: 2025-12-04T19:25:43.471Z

Browse Source
This commit is contained in:
Flatlogic Bot 2025-12-04 19:25:43 +00:00
parent 156d39a9c8
commit 9064a10bd8
6 changed files with 139 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.php
View File

@ -13,7 +13,7 @@
<link rel="stylesheet" href="https://unpkg.com/primeflex/primeflex.css"> <link rel="stylesheet" href="https://unpkg.com/primeflex/primeflex.css">
<!-- Custom CSS --> <!-- Custom CSS -->
<link rel="stylesheet" href="public/css/styles.css"> <link rel="stylesheet" href="src/App.css">
<!-- React and Babel for JSX in browser --> <!-- React and Babel for JSX in browser -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
@ -22,22 +22,18 @@
<script src="https://unpkg.com/primereact/core/core.min.js"></script> <script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/button/button.min.js"></script> <script src="https://unpkg.com/primereact/button/button.min.js"></script>
<script src="https://unpkg.com/primereact/card/card.min.js"></script> <script src="https://unpkg.com/primereact/card/card.min.js"></script>
<script src="https://unpkg.com/primereact/inputtext/inputtext.min.js"></script>
<script src="https://unpkg.com/react-router-dom@6/dist/umd/react-router-dom.min.js"></script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<!-- Load App.js which will import other components -->
<script type="text/babel" data-type="module" data-presets="react" data-plugins="transform-modules-umd" src="src/App.js"></script>
<script type="text/babel"> <script type="text/babel">
const App = () => {
return (
<LandingPage />
);
};
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />); root.render(React.createElement(App));
</script> </script>
<!-- Load React components -->
<script type="text/babel" data-type="module" data-presets="react" data-plugins="transform-modules-umd" src="src/pages/LandingPage.js"></script>
</body> </body>
</html> </html>

1
public/css/styles.css → src/App.css
View File

@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body { body {

35
src/App.js Normal file
View File

@ -0,0 +1,35 @@
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes, useNavigate, Navigate } from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import LoginPage from './pages/LoginPage';
import Dashboard from './pages/Dashboard'; // Import the new Dashboard component
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false); // State for authentication
// Function to handle login
const handleLogin = () => {
setIsLoggedIn(true);
};
// Function to handle logout (optional, but good for completeness)
const handleLogout = () => {
setIsLoggedIn(false);
};
return (
<Router>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage onLogin={handleLogin} />} /> {/* Pass handleLogin to LoginPage */}
{/* Protected Dashboard Route */}
<Route
path="/dashboard"
element={isLoggedIn ? <Dashboard onLogout={handleLogout} /> : <Navigate to="/login" replace />}
/>
</Routes>
</Router>
);
}
export default App;

12
src/pages/Dashboard.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
const Dashboard = () => {
return (
<div className="flex align-items-center justify-content-center min-h-screen surface-ground p-4">
<h1 className="text-4xl text-900">Welcome to the Dashboard!</h1>
<p className="text-600">You are logged in.</p>
</div>
);
};
export default Dashboard;

6
src/pages/LandingPage.js
View File

@ -1,3 +1,5 @@
import { Link } from 'react-router-dom';
const LandingPage = () => { const LandingPage = () => {
const { Button } = primereact.button; const { Button } = primereact.button;
const { Card } = primereact.card; const { Card } = primereact.card;
@ -9,7 +11,9 @@ const LandingPage = () => {
<h1 className="mb-3 text-6xl" style={{ color: '#4DD0E1' }}>GenFleet IoT Command Center</h1> <h1 className="mb-3 text-6xl" style={{ color: '#4DD0E1' }}>GenFleet IoT Command Center</h1>
<p className="mb-4 text-2xl">Unified telemetry for gensets, fleets, and heavy equipment.</p> <p className="mb-4 text-2xl">Unified telemetry for gensets, fleets, and heavy equipment.</p>
<p className="mb-5 text-lg max-w-30rem mx-auto text-color-secondary">Monitor uptime, optimize fuel consumption, and enable predictive maintenance to keep your operations running at peak efficiency.</p> <p className="mb-5 text-lg max-w-30rem mx-auto text-color-secondary">Monitor uptime, optimize fuel consumption, and enable predictive maintenance to keep your operations running at peak efficiency.</p>
<Button label="Go to Dashboard / Login" size="large" className="p-button-info" /> <Link to="/login" className="p-button p-button-info p-component p-button-large" style={{ textDecoration: 'none' }}>
<span className="p-button-label">Go to Dashboard / Login</span>
</Link>
</div> </div>
</div> </div>

80
src/pages/LoginPage.js Normal file
View File

@ -0,0 +1,80 @@
import React, { useState } from 'react';
import { Card } from 'primereact/card';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { classNames } from 'primereact/utils';
import { useNavigate } from 'react-router-dom'; // Import useNavigate
const LoginPage = ({ onLogin }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const navigate = useNavigate(); // Initialize useNavigate
const handleSubmit = (event) => {
event.preventDefault();
// Mocked authentication logic
if (username === 'user' && password === 'password') {
onLogin(); // Call the onLogin prop from App.js
navigate('/dashboard'); // Redirect to dashboard on successful login
} else {
alert('Invalid username or password.');
}
};
return (
<div className="flex align-items-center justify-content-center min-h-screen surface-ground p-4">
<Card className="p-fluid surface-card shadow-2 border-round-lg" style={{ width: 'min(90vw, 400px)' }}>
<div className="text-center mb-5">
<img src="https://primefaces.org/cdn/primereact/images/primereact-logo.png" alt="PrimeReact Logo" height="50" className="mb-3" />
<div className="text-900 text-3xl font-medium mb-3">Welcome Back</div>
<span className="text-600 font-medium line-height-3">Don't have an account?</span>
<a className="font-medium no-underline ml-2 text-cyan-500 cursor-pointer">Sign up now!</a>
</div>
<form onSubmit={handleSubmit}>
<div className="field">
<label htmlFor="username" className="block text-900 font-medium mb-2">Username</label>
<InputText
id="username"
type="text"
placeholder="Username"
className="w-full p-3"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</div>
<div className="field mt-3">
<label htmlFor="password" className="block text-900 font-medium mb-2">Password</label>
<InputText
id="password"
type="password"
placeholder="Password"
className="w-full p-3"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="flex align-items-center justify-content-between mt-4 mb-5">
<div className="field-checkbox">
<input type="checkbox" id="rememberme" className="mr-2" />
<label htmlFor="rememberme" className="text-900">Remember me</label>
</div>
<a className="font-medium no-underline ml-2 text-cyan-500 cursor-pointer">Forgot your password?</a>
</div>
<Button label="Sign In" icon="pi pi-user" className="w-full p-3 text-xl" type="submit"></Button>
<div className="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left mb-4 mt-5">
<div className="p-divider-content">OR</div>
</div>
<Button label="Sign In with Google" icon="pi pi-google" className="w-full p-3 text-xl p-button-outlined p-button-secondary"></Button>
</form>
</Card>
</div>
);
};
export default LoginPage;