From 1a8b5b21b15ad3c6a4e2672730e8a42481e821f8 Mon Sep 17 00:00:00 2001
From: PlxEV <mail@plixin.com>
Date: Sat, 7 Jun 2025 16:57:26 +0100
Subject: [PATCH] Uniformize success/error alerts across forms

---
 src/components/Alert.jsx        | 13 +++++++++++++
 src/pages/Connectivity.jsx      | 17 +++++++++--------
 src/pages/ElectricalNetwork.jsx |  9 +++++----
 src/pages/LoadBalancing.jsx     |  7 ++++---
 src/pages/Mqtt.jsx              |  9 +++++----
 src/pages/OCPP.jsx              |  7 ++++---
 src/pages/Settings.jsx          | 11 ++++++-----
 src/pages/Wifi.jsx              |  7 ++++---
 8 files changed, 50 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Alert.jsx

diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx
new file mode 100644
index 0000000..153b83c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/Connectivity.jsx b/src/pages/Connectivity.jsx
index 65d912d..3d8a21a 100755
--- a/src/pages/Connectivity.jsx
+++ b/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">
diff --git a/src/pages/ElectricalNetwork.jsx b/src/pages/ElectricalNetwork.jsx
index 059592c..86abf75 100755
--- a/src/pages/ElectricalNetwork.jsx
+++ b/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>
diff --git a/src/pages/LoadBalancing.jsx b/src/pages/LoadBalancing.jsx
index 01460c1..2630a41 100755
--- a/src/pages/LoadBalancing.jsx
+++ b/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 */}
diff --git a/src/pages/Mqtt.jsx b/src/pages/Mqtt.jsx
index 9c9e33f..1828a1b 100755
--- a/src/pages/Mqtt.jsx
+++ b/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>
diff --git a/src/pages/OCPP.jsx b/src/pages/OCPP.jsx
index 300f754..961b83c 100755
--- a/src/pages/OCPP.jsx
+++ b/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>
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index e043751..e03ee93 100755
--- a/src/pages/Settings.jsx
+++ b/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>
diff --git a/src/pages/Wifi.jsx b/src/pages/Wifi.jsx
index 287e591..5d3ad9b 100755
--- a/src/pages/Wifi.jsx
+++ b/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>