Change page names

src/App.jsx

@@ -6,7 +6,7 @@ import Dashboard from './pages/Dashboard';
 import Settings from './pages/Settings';
 import Security from './pages/Security';
 import Connectivity from './pages/Connectivity';
-import OCPPCommunication from './pages/OCPPCommunication';
+import OCPP from './pages/OCPP';
 import ElectricalNetwork from './pages/ElectricalNetwork';
 
 const App = () => {
@@ -18,7 +18,7 @@ const App = () => {
         <Route path="/settings" element={<Settings />} />
         <Route path="/security" element={<Security />} />
         <Route path="/connectivity" element={<Connectivity />} />
-        <Route path="/ocpp" element={<OCPPCommunication />} />
+        <Route path="/ocpp" element={<OCPP />} />
         <Route path="/electrical-network" element={<ElectricalNetwork />} />
       </Routes>
     </Router>

src/components/Navbar.jsx

@@ -13,14 +13,13 @@ const Navbar = () => {
     <nav className="navbar">
       <div className="navbar-container">
         <div className="navbar-logo">
-          <h2>Carregamento</h2>
         </div>
         <ul className={`navbar-links ${isMenuOpen ? 'active' : ''}`}>
           <li><Link to="/dashboard">Dashboard</Link></li>
           <li><Link to="/settings">Settings</Link></li>
           <li><Link to="/security">Security</Link></li>
           <li><Link to="/connectivity">Connectivity</Link></li>
-          <li><Link to="/ocpp">OCPP Communication</Link></li>
+          <li><Link to="/ocpp">OCPP</Link></li>
           <li><Link to="/electrical-network">Rede Elétrica</Link></li>
         </ul>
         <button className="menu-icon" onClick={toggleMenu}>

src/pages/Connectivity.jsx

@@ -81,20 +81,18 @@ const Connectivity = () => {
           <h2>Configuração Wi-Fi</h2>
           {wifiMsg && <div className="message">{wifiMsg}</div>}
           <form className="form" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
+            
             <div className="form-group">
               <label htmlFor="wifi-ssid">SSID:</label>
-              <select
+              <input
                 id="wifi-ssid"
+                type="text"
                 value={wifiConfig.ssid}
                 onChange={e => setWifiConfig({ ...wifiConfig, ssid: e.target.value })}
-              >
+              />
-                <option value="">-- Escolher --</option>
-                {wifiNetworks.map(n => (
-                  <option key={n.ssid} value={n.ssid}>{n.ssid}</option>
-                ))}
-              </select>
             </div>
 
+
             <div className="form-group">
               <label htmlFor="wifi-password">Palavra-passe:</label>
               <input

src/pages/OCPP.jsx

@@ -1,9 +1,9 @@
-// src/pages/OCPPCommunication.jsx
+// src/pages/OCPP.jsx
 import React, { useState, useEffect } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
 
-const OCPPCommunication = () => {
+const OCPP = () => {
   const [status, setStatus] = useState(null);
   const [loading, setLoading] = useState(true);
 
@@ -43,7 +43,7 @@ const OCPPCommunication = () => {
   };
 
   return (
-    <PageLayout title="OCPP Communication">
+    <PageLayout title="OCPP">
       {loading ? (
         <p>A carregar...</p>
       ) : (
@@ -105,4 +105,4 @@ const OCPPCommunication = () => {
   );
 };
 
-export default OCPPCommunication;
+export default OCPP;

src/pages/Security.jsx

@@ -10,14 +10,10 @@ const Security = () => {
     Password: true,
   });
   const [users, setUsers] = useState([
-    { username: 'admin', role: 'Administrator' },
+    { username: 'admin' },
-    { username: 'user1', role: 'User' },
+    { username: 'user1' },
   ]);
 
-  const handleMFAChange = (e) => {
-    setIsMFAEnabled(e.target.checked);
-  };
-
   const handleAuthMethodChange = (method) => {
     setAuthMethods({
       ...authMethods,
@@ -25,14 +21,9 @@ const Security = () => {
     });
   };
 
-  const handleUserRoleChange = (username, newRole) => {
-    setUsers(users.map((user) =>
-      user.username === username ? { ...user, role: newRole } : user
-    ));
-  };
 
-  const addUser = (username, role) => {
+  const addUser = (username) => {
-    setUsers([...users, { username, role }]);
+    setUsers([...users, { username }]);
   };
 
   const removeUser = (username) => {
@@ -41,19 +32,7 @@ const Security = () => {
 
   return (
     <div className="security-container">
-      <h1 className="security-title">Segurança e Autorização</h1>
+      <h1 className="security-title">Segurança</h1>
-
-      {/* MFA Checkbox */}
-      <div className="security-item">
-        <label>
-          <input
-            type="checkbox"
-            checked={isMFAEnabled}
-            onChange={handleMFAChange}
-          />
-          Ativar Autenticação Multifatorial (MFA)
-        </label>
-      </div>
 
       {/* Métodos de Autorização */}
       <div className="security-item">
@@ -93,14 +72,6 @@ const Security = () => {
           {users.map((user, index) => (
             <li key={index}>
               <span>{user.username} - {user.role}</span>
-              <select
-                value={user.role}
-                onChange={(e) => handleUserRoleChange(user.username, e.target.value)}
-              >
-                <option value="Administrator">Administrador</option>
-                <option value="User">Usuário</option>
-                <option value="Maintenance">Manutenção</option>
-              </select>
               <button onClick={() => removeUser(user.username)}>Remover</button>
             </li>
           ))}