Use Alert component for user messages

src/pages/Dashboard.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 const Dashboard = () => {
   // Estados para armazenar os dados do dashboard
@@ -12,6 +13,7 @@ const Dashboard = () => {
     chargingTime: 0,
     alerts: [],
   });
+  const [error, setError] = useState('');
 
   // Função para obter os dados do dashboard
   const fetchDashboardData = async () => {
@@ -21,11 +23,11 @@ const Dashboard = () => {
         const data = await response.json();
         setDashboardData(data); // Atualiza o estado com os dados recebidos
       } else {
-        alert('Erro ao obter os dados do dashboard');
+        setError('Erro ao obter os dados do dashboard');
       }
     } catch (error) {
       console.error('Erro ao buscar dados do dashboard:', error);
-      alert('Erro de conexão');
+      setError('Erro de conexão');
     }
   };
 
@@ -36,6 +38,7 @@ const Dashboard = () => {
 
   return (
     <PageLayout title="Visão Geral">
+      {error && <Alert type="error">{error}</Alert>}
 
       {/* Cards com informações resumidas */}
       <div className="flex flex-wrap gap-4 mb-6">

src/pages/Login.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function Login({ setAuthData }) {
   const [user, setUser] = useState('');
@@ -18,7 +19,7 @@ export default function Login({ setAuthData }) {
 
   return (
     <PageLayout title="Início de Sessão">
-      {error && <div className="p-2 mb-4 bg-red-500 text-white rounded">{error}</div>}
+      {error && <Alert type="error">{error}</Alert>}
 
       <form className="flex flex-col gap-4" onSubmit={submit}>
         <div className="mb-4">

src/pages/Logs.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { fetchLogs } from '../api';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 
 export default function Logs() {
   const [logs, setLogs] = useState('');
@@ -26,7 +27,7 @@ export default function Logs() {
 
   return (
     <PageLayout title="Registos do Sistema">
-      {error && <div className="p-2 mb-2 bg-red-600 text-white rounded">{error}</div>}
+      {error && <Alert type="error">{error}</Alert>}
 
       {loading ? (
         <p>A carregar...</p>

src/pages/OCPP.jsx

@@ -50,7 +50,9 @@ const OCPP = () => {
         <p>A carregar...</p>
       ) : (
         <>
-          {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(); }}>

src/pages/Security.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PageLayout from '../components/PageLayout';
+import Alert from '../components/Alert';
 import { post, get } from '../api'; // Supondo que os métodos post e get estejam definidos na API.
 
 const Security = () => {
@@ -17,6 +18,8 @@ const Security = () => {
 
   // Estado para o novo nome de usuário
   const [newUser, setNewUser] = useState('');
+  const [msg, setMsg] = useState('');
+  const [error, setError] = useState('');
 
   // Função para alterar os métodos de autenticação
   const handleAuthMethodChange = (method) => {
@@ -33,7 +36,7 @@ const Security = () => {
       setAuthMethods(data); // Preenche o estado com os dados recebidos
     } catch (error) {
       console.error('Erro ao buscar configurações de autenticação:', error);
-      alert('Erro ao buscar configurações de autenticação.');
+      setError('Erro ao buscar configurações de autenticação.');
     }
   };
 
@@ -43,10 +46,10 @@ const Security = () => {
 
     try {
       await post('/api/v1/config/auth-methods', authMethods); // Envia os dados de authMethods para o servidor
-      alert('Configurações de Autorização salvas com sucesso!');
+      setMsg('Configurações de Autorização salvas com sucesso!');
     } catch (error) {
       console.error('Erro ao salvar configurações:', error);
-      alert('Erro ao salvar configurações.');
+      setError('Erro ao salvar configurações.');
     }
   };
 
@@ -70,6 +73,8 @@ const Security = () => {
 
   return (
     <PageLayout title="Segurança">
+      {msg && <Alert type="success">{msg}</Alert>}
+      {error && <Alert type="error">{error}</Alert>}
       {/* Métodos de Autorização */}
       <div className="mb-5">
         <h2 className="text-xl font-semibold mb-2">Métodos de Autorização</h2>

src/pages/Settings.jsx

@@ -23,7 +23,7 @@ const Settings = () => {
       setChargingTimeLimit(data.chargingTimeLimit);
       setTemperatureLimit(data.temperatureLimit);
     } else {
-      alert('Erro ao obter as configurações');
+      setError('Erro ao obter as configurações');
     }
   };