Merge pull request #8 from PlxEV/codex/uniformizar-alerta-após-guardar-alterações

Standardize form alerts

src/components/Alert.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Alert({ type = 'info', children }) {
+  const base = 'p-2 mb-2 rounded';
+  const types = {
+    success: 'bg-green-600 text-white',
+    error: 'bg-red-600 text-white',
+    info: 'bg-gray-200',
+  };
+  return (
+    <div className={`${base} ${types[type] || types.info}`}>{children}</div>
+  );
+}

src/pages/Connectivity.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 const Connectivity = () => {
   const [loading, setLoading] = useState(true);
@@ -45,20 +46,20 @@ const Connectivity = () => {
   // Salvar configuração Wi-Fi
   const saveWifi = async () => {
     try {
-      await post('/api/v1/config/wifi', wifiConfig);  // Envia as configurações de Wi-Fi para o servidor
-      setWifiMsg('Configuração Wi-Fi gravada!');
+      await post('/api/v1/config/wifi', wifiConfig);
+      setWifiMsg('Alterações guardadas com sucesso!');
     } catch (error) {
-      setWifiMsg('Erro ao gravar Wi-Fi.');
+      setWifiMsg('Erro ao guardar alterações.');
     }
   };
 
   // Salvar configuração MQTT
   const saveMqtt = async () => {
     try {
-      await post('/api/v1/config/mqtt', mqttConfig);  // Envia as configurações de MQTT para o servidor
-      setMqttMsg('Configuração MQTT gravada!');
+      await post('/api/v1/config/mqtt', mqttConfig);
+      setMqttMsg('Alterações guardadas com sucesso!');
     } catch (error) {
-      setMqttMsg('Erro ao gravar MQTT.');
+      setMqttMsg('Erro ao guardar alterações.');
     }
   };
 
@@ -70,7 +71,7 @@ const Connectivity = () => {
 
 
           <h2 className="text-xl font-semibold mt-4">Configuração Wi-Fi</h2>
-          {wifiMsg && <div className="p-2 bg-gray-200 rounded mb-2">{wifiMsg}</div>}
+          {wifiMsg && <Alert type={wifiMsg.startsWith('Erro') ? 'error' : 'success'}>{wifiMsg}</Alert>}
           <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveWifi(); }}>
 
 
@@ -113,7 +114,7 @@ const Connectivity = () => {
           </form>
 
           <h2 className="text-xl font-semibold mt-6">Configuração MQTT</h2>
-          {mqttMsg && <div className="p-2 bg-gray-200 rounded mb-2">{mqttMsg}</div>}
+          {mqttMsg && <Alert type={mqttMsg.startsWith('Erro') ? 'error' : 'success'}>{mqttMsg}</Alert>}
           <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
             <div>
               <label className="flex items-center gap-2">

src/pages/ElectricalNetwork.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function ElectricalNetwork() {
   const [loading, setLoading] = useState(true);
@@ -40,17 +41,17 @@ export default function ElectricalNetwork() {
     try {
       const body = { monitor, alerts, security, loadBalancing, solar };
       await post('/api/v1/config/electrical', body);
-      setMsg('Configuração gravada com sucesso!');
+      setMsg('Alterações guardadas com sucesso!');
     } catch (err) {
       console.error('Erro ao salvar configuração:', err);
-      setError('Erro ao gravar configuração.');
+      setError('Erro ao guardar alterações.');
     }
   };
 
   return (
     <PageLayout title="Rede Elétrica">
-      {msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
-      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+      {msg && <Alert type="success">{msg}</Alert>}
+      {error && <Alert type="error">{error}</Alert>}
 
       {loading ? (
         <p>A carregar...</p>

src/pages/LoadBalancing.jsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function LoadBalancing() {
   const [enabled, setEnabled] = useState(false);
@@ -37,7 +38,7 @@ export default function LoadBalancing() {
         devices: selectedDevices,
       };
       await post('/api/v1/config/load-balancing', config);
-      setMsg('Configuração de Load Balancing salva com sucesso!');
+      setMsg('Alterações guardadas com sucesso!');
     } catch {
       setError('Erro ao salvar configuração de Load Balancing.');
     }
@@ -68,8 +69,8 @@ export default function LoadBalancing() {
 
   return (
     <PageLayout title="Configuração de Load Balancing">
-      {msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
-      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+      {msg && <Alert type="success">{msg}</Alert>}
+      {error && <Alert type="error">{error}</Alert>}
 
       <form className="flex flex-col gap-4" onSubmit={saveConfig}>
         {/* Controle de Ativação/Desativação */}

src/pages/Mqtt.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function Mqtt() {
   const [config, setConfig] = useState({
@@ -28,16 +29,16 @@ export default function Mqtt() {
     setError('');
     try {
       await post('/api/v1/config/mqtt', config);
-      setMsg('Configuração gravada com sucesso!');
+      setMsg('Alterações guardadas com sucesso!');
     } catch {
-      setError('Erro ao gravar configuração.');
+      setError('Erro ao guardar alterações.');
     }
   };
 
   return (
     <PageLayout title="Configuração MQTT">
-      {msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
-      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+      {msg && <Alert type="success">{msg}</Alert>}
+      {error && <Alert type="error">{error}</Alert>}
 
       {loading ? (
         <p>A carregar...</p>

src/pages/OCPP.jsx

@@ -2,6 +2,7 @@
 import React, { useState, useEffect } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 const OCPP = () => {
   const [status, setStatus] = useState(null);
@@ -36,9 +37,9 @@ const OCPP = () => {
     setMsg('');
     try {
       await post('/api/v1/config/ocpp', config);
-      setMsg('Configuração gravada com sucesso!');
+      setMsg('Alterações guardadas com sucesso!');
     } catch {
-      setMsg('Erro ao gravar configuração.');
+      setMsg('Erro ao guardar alterações.');
     }
   };
 
@@ -55,7 +56,7 @@ const OCPP = () => {
             </div>
           )}
 
-          {msg && <div className="p-2 mb-2 bg-gray-200 rounded">{msg}</div>}
+          {msg && <Alert type={msg.startsWith('Erro') ? 'error' : 'success'}>{msg}</Alert>}
           <form className="flex flex-col gap-4" onSubmit={e => { e.preventDefault(); save(); }}>
             <div>
               <label className="block mb-1" htmlFor="ocpp-url">Servidor:</label>

src/pages/Settings.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 const Settings = () => {
   // Estados para armazenar os valores dos sliders e caixas de entrada
@@ -57,19 +58,19 @@ const Settings = () => {
       });
 
       if (response.ok) {
-        setMsg('Configurações de energia atualizadas com sucesso!');
+        setMsg('Alterações guardadas com sucesso!');
       } else {
-        setError('Erro ao atualizar configurações');
+        setError('Erro ao guardar alterações.');
       }
     } catch {
-      setError('Erro ao atualizar configurações');
+      setError('Erro ao guardar alterações.');
     }
   };
 
   return (
     <PageLayout title="Definições de Energia">
-      {msg && <div className="p-2 mb-2 bg-green-600 text-white rounded">{msg}</div>}
-      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+      {msg && <Alert type="success">{msg}</Alert>}
+      {error && <Alert type="error">{error}</Alert>}
 
       <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
         <div>

src/pages/Wifi.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { get, post } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function Wifi() {
   const [config, setConfig] = useState({ ssid: '', password: '' });
@@ -36,15 +37,15 @@ export default function Wifi() {
   const save = async () => {
     try {
       await post('/api/v1/config/wifi', config);
-      setMsg('Configuração gravada com sucesso!');
+      setMsg('Alterações guardadas com sucesso!');
     } catch {
-      setMsg('Erro ao gravar.');
+      setMsg('Erro ao guardar alterações.');
     }
   };
 
   return (
     <PageLayout title="Configuração Wi-Fi">
-      {msg && <div className="p-2 mb-2 bg-gray-200 rounded">{msg}</div>}
+      {msg && <Alert type={msg.startsWith('Erro') ? 'error' : 'success'}>{msg}</Alert>}
 
       {loading ? (
         <p>A carregar...</p>