Fix/profile input validation

src/components/ui/Toast.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+
+const Toast = ({ message, type = "success", onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 3000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div
+      className={`fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3 rounded-xl shadow-lg text-sm font-semibold backdrop-blur-sm border transition-all
+        ${type === "success"
+          ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400"
+          : "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400"
+        }`}
+      role="status"
+      aria-live="polite"
+    >
+      <span>{type === "success" ? "✅" : "❌"}</span>
+      {message}
+    </div>
+  );
+};
+
+export default Toast;

src/pages/Profile.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Toast from "../components/ui/Toast";
 import LottiePlayer from "../components/ui/LottiePlayer";
 import {
   MapPin,
@@ -26,7 +27,7 @@
   const { userData, user, setUserData } = useAuth();
   const [copied, setCopied] = useState(false);
   const [rank, setRank] = useState("Loading...");
-
+  const [toast, setToast] = useState(null);
   // Social links edit states
   const [editingSocial, setEditingSocial] = useState(null);
   const [editValue, setEditValue] = useState("");
@@ -82,9 +83,38 @@
   };
 
   // Handle social link update
-  const handleUpdateSocialLink = async (type, value) => {
+const handleUpdateSocialLink = async (type, value) => {
     if (!user) return;
-
+
+    // Validate input before updating
+    if (type === "linkedin") {
+      if (value && value.trim()) {
+        const linkedinPattern = /^(https?:\/\/)?(www\.)?linkedin\.com\/in\/[\w\-]+\/?$/i;
+        const rawVal = value.trim();
+        const testVal = rawVal.startsWith('http') ? rawVal : 'https://' + rawVal;
+        if (!linkedinPattern.test(testVal)) {
+          setToast({ message: "Invalid LinkedIn URL. Use format: linkedin.com/in/username", type: "error" });
+          return;
+        }
+      }
+    } else if (type === "instagram") {
+      if (value && value.trim()) {
+        const igPattern = /^@?[\w](?!.*?\.{2})[\w.]{1,28}[\w]$/;
+        if (!igPattern.test(value.trim())) {
+          setToast({ message: "Invalid Instagram username.", type: "error" });
+          return;
+        }
+      }
+    } else if (type === "discord") {
+      if (value && value.trim()) {
+        const discordPattern = /^.{3,32}(#\d{4})?$/;
+        if (!discordPattern.test(value.trim())) {
+          setToast({ message: "Invalid Discord username.", type: "error" });
+          return;
+        }
+      }
+    }
+
     setUpdating(true);
     try {
       const userRef = doc(db, "users", user.uid);
@@ -138,10 +168,10 @@
       setEditingSocial(null);
       setEditValue("");
 
-      alert(`${type.charAt(0).toUpperCase() + type.slice(1)} updated successfully!`);
+      setToast({ message: `${type.charAt(0).toUpperCase() + type.slice(1)} updated successfully!`, type: "success" });
     } catch (err) {
       console.error("Error updating social link:", err);
-      alert(`Failed to update ${type}. Please try again.`);
+      setToast({ message: `Failed to update ${type}. Please try again.`, type: "error" });
     } finally {
       setUpdating(false);
     }