Modified Alerts

app/Components/AlertBox/AlertBox.css

@@ -1,4 +1,3 @@
-/* Animaciones */
 @keyframes slideInLeft {
   0% {
     opacity: 0;

app/Components/ChangePassword/changePassword.tsx

@@ -61,7 +61,7 @@ export default function ChangePassword() {
           </button>
 
           <button
-            className="button buttonSearch"
+            className="button buttonCancel"
             style={{ maxWidth: "100%", width: "100%" }}
             type="submit"
           >

app/Components/ClearParams/ClearParams.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ClearParamsProps {
+  paramsToClear: string[];
+}
+
+export default function ClearParams({ paramsToClear }: ClearParamsProps) {
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    let changed = false;
+
+    paramsToClear.forEach((param) => {
+      if (url.searchParams.has(param)) {
+        url.searchParams.delete(param);
+        changed = true;
+      }
+    });
+
+    if (changed) {
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [paramsToClear]);
+
+  return null;
+}

app/Components/visual/GlobalAlert.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AlertBox from "@/app/Components/AlertBox/AlertBox";
+import ClearParams from "@/app/Components/ClearParams/ClearParams";
+
+export default function GlobalAlert() {
+  const [showSuccess, setShowSuccess] = useState<string | null>(null);
+  const [showError, setShowError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const success = url.searchParams.get("success");
+    const error = url.searchParams.get("error");
+
+    if (success) setShowSuccess(success);
+    if (error) setShowError(error);
+  }, []);
+
+  return (
+    <section className="containerAlerts">
+      {showError && (
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+          <ClearParams paramsToClear={["error"]} />
+        </>
+      )}
+
+      {showSuccess && (
+        <>
+          <AlertBox key={Date.now()} message={showSuccess} type="success" />
+          <ClearParams paramsToClear={["success"]} />
+        </>
+      )}
+    </section>
+  );
+}