1

Estoy haciendo un login en react para practicar y me encuentro con el problema de que si google traduce automaticamente mi pagina un evento que tengo en un span de mi codigo no funciona, lo he probado en ingles que es el idioma original y funciona perfectamente. ¿Por que pasa esto y como podria coregirlo?

Estoy aprediendo a programar en react y es primera vez que me pasa esto

import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { NetflixButton, NetflixInput } from "../styles/stylesComponents";
import { useRef, useState } from "react";
import { auth } from "../firebase";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { authenticationUser } from "../helpers/authentication";

const initialForm = {
  email: "",
  password: "",
};

function SignUp() {
  const [form, setForm] = useState(initialForm);
  const [isNewUser, setIsNewUser] = useState(true); // Estado para determinar el tipo de acción
  const classes = useStyles();

  const handleChange = (e) => {
    const { name, value } = e.target;
    e.target.setCustomValidity("");
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { email, password } = form;

    // Autenticación de formulario
    if (!authenticationUser(e.target)) return;

    // Registro o inicio de sesión
    if (isNewUser) {
      createUserWithEmailAndPassword(auth, email, password)
        .then((authUser) => console.log(authUser))
        .catch((error) => console.log(error));
    } else {
      signInWithEmailAndPassword(auth, email, password)
        .then((authUser) => console.log(authUser))
        .catch((error) => console.log(error));
    }
  };

  return (
    <div className={classes.root}>
      <Typography variant="h3" sx={{ marginBottom: "30px" }}>
        {isNewUser ? "Sign Up" : "Login"}
      </Typography>
      <form className={classes.form} onSubmit={handleSubmit}>
        <NetflixInput
          type="email"
          name="email"
          required
          placeholder="Email"
          value={form.email}
          onChange={handleChange}
        />
        <NetflixInput
          type="password"
          name="password"
          required
          placeholder="Password"
          value={form.password}
          onChange={handleChange}
        />
        <NetflixButton type="submit" style={{ width: "200px" }}>
          {isNewUser ? "Register" : "Login"}
        </NetflixButton>
        <Typography variant="h6">
          {isNewUser ? "Already have an account?" : "Don't have an account?"}{" "}
          <span onClick={() => setIsNewUser(!isNewUser)}> //Problema
            {isNewUser ? "Login" : "Register."}
          </span>
        </Typography>
      </form>
    </div>
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    width: "80%",
    maxWidth: "400px",
    padding: "40px",
    backgroundColor: "#00000099",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  form: {
    "&>div": {
      width: "100%",
      marginBottom: "20px",
    },
    "& h6": {
      fontSize: "11px",
      "& span": {
        fontWeight: "bold",
        cursor: "pointer",
        "&:hover": {
          textDecoration: "underline",
        },
      },
    },
  },
}));

export default SignUp;

He intentado cambiar de etiqueta, me gustaria saber si hay alguna solcucion para esto, mas que mover el evento hacia otra parte o reasignar el evento.

4
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! cual es el evento que es traducido? esto es muy raro.. react no va como react... va transpilado... lo raro es que retenga el nombre del evento, y que google trate de traducir eso...
    – gbianchi
    Commented el 25 sept. a las 20:56
  • Métele esto a ver si cuela: <html translate="no">
    – masterguru
    Commented el 26 sept. a las 6:15
  • Bueno, mejor mírate todas las posibles opciones que tienes en este post a ver si alguna te funciona, y la que te funcione la pones como respuesta tu mismo.
    – masterguru
    Commented el 26 sept. a las 7:12
  • ¿Por que un span con onclick y no un enlace o un botón (lo ideal en este caso)? Un span no es un elemento dinámico y puede que Google reemplace el elemento sin más porque no espera que haya un elemento asociado al mismo.
    – Alvaro Montoro
    Commented el 26 sept. a las 12:06

1 respuesta 1

1

Tenes que cambiar el <span> por un elemento que no se vea afectado por la traducción, como un <button>.

<Typography variant="h6">
  {isNewUser ? "Already have an account?" : "Don't have an account?"}{" "}
  <button onClick={() => setIsNewUser(!isNewUser)} style={{ background: 'none', border: 'none', color: 'blue', textDecoration: 'underline', cursor: 'pointer' }}>
    {isNewUser ? "Login" : "Register."}
  </button>
</Typography>

Podes agregar tabIndex para hacerlo accesible desde el teclado. Esto puede ayudar a que google lo trate diferente:

<span 
  onClick={() => setIsNewUser(!isNewUser)} 
  tabIndex="0" 
  role="button" 
  aria-pressed={isNewUser}
  onKeyDown={(e) => {
    if (e.key === "Enter") setIsNewUser(!isNewUser);
  }}
>
  {isNewUser ? "Login" : "Register."}
</span>

Un ejemplo de la solucion podria ser esta:

<Typography variant="h6">
  {isNewUser ? "Already have an account?" : "Don't have an account?"}{" "}
  <button 
    onClick={() => setIsNewUser(!isNewUser)} 
    style={{ background: 'none', border: 'none', color: 'blue', textDecoration: 'underline', cursor: 'pointer' }}
  >
    {isNewUser ? "Login" : "Register."}
  </button>
</Typography>

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.