Update ProfilePage: Replace username with email in profile form

Replaced the username field with an email field in the profile form. Updated form logic, validation messages, and input placeholders accordingly. Adjusted UI labels and input types to reflect the change.

src/components/Profile/ProfilePage.js

@@ -58,7 +58,7 @@ const ProfilePage = () => {
   const initials = computeInitials(profile.firstName, profile.lastName);
 
   const [form, setForm] = useState({
-    username: profile.username,
+    email: profile.email,
     firstName: profile.firstName,
     lastName: profile.lastName,
     password: '',
@@ -67,7 +67,7 @@ const ProfilePage = () => {
   useEffect(() => {
     if (showModal) {
       setForm({
-        username: profile.username,
+        email: profile.email,
         firstName: profile.firstName,
         lastName: profile.lastName,
         password: '',
@@ -87,8 +87,8 @@ const ProfilePage = () => {
     e.preventDefault();
 
     // Validaciones básicas
-    if (!form.username.trim() || !form.firstName.trim() || !form.lastName.trim()) {
+    if (!form.email.trim() || !form.firstName.trim() || !form.lastName.trim()) {
-      alert('Por favor, completa los campos: usuario, nombre y apellido.');
+      alert('Por favor, completa los campos: correo, nombre y apellido.');
       return;
     }
 
@@ -100,7 +100,7 @@ const ProfilePage = () => {
     // En una app real, aquí llamarías a la API para actualizar perfil y contraseña.
     setProfile((prev) => ({
       ...prev,
-      username: form.username.trim(),
+      email: form.email.trim(),
       firstName: form.firstName.trim(),
       lastName: form.lastName.trim(),
       // La contraseña NO se guarda en localStorage; solo se simula el flujo.
@@ -169,15 +169,15 @@ const ProfilePage = () => {
                 <div className="form-row">
                   <div className="form-group" style={{ flex: 1 }}>
                     <label>
-                      <i className="fas fa-user-circle" aria-hidden="true"></i> Usuario
+                      <i className="fas fa-envelope" aria-hidden="true"></i> Correo electrónico
                     </label>
                     <input
                       className="input"
-                      type="text"
+                      type="email"
-                      name="username"
+                      name="email"
-                      value={form.username}
+                      value={form.email}
                       onChange={handleChange}
-                      placeholder="Nombre de usuario"
+                      placeholder="correo@ejemplo.com"
                       required
                     />
                   </div>