0

en mi backend no se estan creando duplicados pero en la parte del front en la ruta /signup si estoy pudiendo registrarme muchas veces con un usuario que ya existe, como puedo limitar esto y tal vez lanzar un mensaje que diga que ese email ya fue usado.

import React, { useState } from 'react';
import { API } from '../config';
import { Link } from 'react-router-dom';

const Signup = () => {
    const [values, setValues] = useState({
        name: "",
        email: "",
        password: "",
        error: "",
        success: false
    });
    const { name, email, password, error, success } = values;

    const handleChange = name => event => {
        setValues({ ...values, error: false, [name]: event.target.value });
    }

    const signup = user => {
        return fetch(`${API}/signup`, {
            method: "POST",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify(user)
        })
        .then(response => {
            return response.json();
        })
        .catch(error => {
            console.log(error);
        });
    }

    const clickSubmit = event => {
        event.preventDefault();
        setValues({ ...values, error: false });

        signup({ name, email, password })
        .then(data => {
            if(data.error) {
                setValues({ ...values, error: data.error, success: false });
            } else {
                setValues({ ...values, name: "", email: "", password: "", error: "", success: true });
            }
        });
    }

    const showError = () => {
        return (
            <div className="alert alert-danger" style={{ display: error ? "" : "none" }}>
            { error }
            </div>
        );
    }

    const showSuccess = () => {
        return (
            <div className="alert alert-info" style={{ display: success ? "" : "none" }}>
            A new account was created, please <Link to="/signin">signin</Link>.
            </div>
        );
    }

    return (  
        <div className="register-background">
        <div className="container">
            { showSuccess() }
            { showError() }
        <div className="box-header text-center">
            <p>Signup</p>
        </div>
        <form className="card">
            <div className="card-body">
                <div className="form-group">
                    <input onChange={handleChange("name")} type="text" 
                    className="form-control" 
                    placeholder="Enter your name." 
                    value={name} />
                </div>
                <div className="form-group">
                    <input onChange={handleChange("email")} type="email" 
                    className="form-control" 
                    placeholder="Enter your email."
                    value={email} />
                </div>
                <div className="form-group">
                    <input onChange={handleChange("password")} type="password" 
                    className="form-control" 
                    placeholder="enter your password."
                    value={password} />
                </div>
                <button onClick={clickSubmit} className="btn btn-block btn-primary">Submit</button>
            </div>
        </form>
        </div>
        </div>
    );
}
 
export default Signup;

8
  • ¿Con qué lenguaje haces el servicio? PHP?
    – DaxTter77
    Commented el 5 sept. 2019 a las 13:41
  • con Node, Express pero no me crea duplicados porque mi modelo tiene la propiedad unique en email, pero me estoy pudiendo registrar varias veces. Commented el 5 sept. 2019 a las 13:46
  • Vale, te dejo como un ejemplo de lo que puedes hacer y tú lo acomodas, ya que el lenguaje no lo he manejado
    – DaxTter77
    Commented el 5 sept. 2019 a las 13:47
  • dale gracias voy a mirar el ejemplo :) Commented el 5 sept. 2019 a las 13:49
  • y el ejemplo? @DaxTter77 Commented el 5 sept. 2019 a las 13:54

1 respuesta 1

0

Puedes hacer una consulta antes de mandar los datos a registrar del usuario, por ejemplo, llenas el formulario, le da a enviar, y el sistema en vez de mandarlo directamente a registrar hace una consulta primero y sí no hay registros de esa misma persona, entonces sí manda a registrar, por ejemplo, puedes hacer la consulta así

sql = "SELECT * FROM tabla WHERE email = $email";

Haces que sí la consulta retorna vacía, la variable donde guardes el resultado tome un valor null, de lo contrario que tome la consulta, y retornas el valor y en react lo recibes y haces algo así

fetch(`${API}/select_users`, {
            method: "POST",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            }
        })
        .then(response => {
            return response.json();
        })
        .then((respuesta){
           if(respuesta != null){
              console.log("no existe el usuario");
           }else{console.log("Ya existe el usuario")}
        })
        .catch(error => {
            console.log(error);
        });

Espero que te sirva y lo puedas entender, ya que hace rato no tocaba react

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.