[SOLVED] How to know if the input is Email or username – Stack Overflow

Issue

This Content is from Stack Overflow. Question asked by sultan.h

I’m trying to let the user sign in using email OR username, I already implemented the backend and it’s working fine using Postman, but I didn’t know how to implement it in the frontend,

Login.jsx:

export default function Login() {
  
  const [credentials, setCredentials] = useState({
      email: undefined,
      username: undefined,
      password: undefined,
    });
  
    const [loginErr, setMsg] = useState({
      fail: false,
      msg: "",

    });
  
    const { user, isFetching, dispatch } = useContext(Context);
  
    const handleChange = (e) => {
      setCredentials((prev) => ({ ...prev, [e.target.id]: e.target.value }));
    };
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      dispatch({ type: "LOGIN_START" });
      try {
        const res = await axios.post("/login", credentials);
        dispatch({ type: "LOGIN_SUCCESS", payload: res.data });
      } catch (err) {
        setMsg({ fail: true, msg: err.response.data.message });
        dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
      }
    };


    return (

      <div className="login">
  
        {/* LOGIN FORM */}
        <form onSubmit={handleSubmit}>
          <Stack>
            
            <Typography>
            Login to
            </Typography>
  
              {/* Username or Email Address */}
              <Typography variant="h9"
                gutterBottom
                component="div"
                style={{ fontWeight: "bold",
                textAlign: "left"}}
                mt={1}>
            Username or Email Address
            </Typography>
  
          <div class="relative w-full">
              <div class="flex absolute
                      inset-y-0 left-0 items-center pl-3
                      pointer-events-none">
                  <PersonIcon class="w-5 h-5" />
              </div>
                <input type="text"
                className="loginInput"
                style={{ border: loginErr.fail ? '1px solid red' : '' }}
                // ref={userRef}
                name="email"
                id="email"
                onChange={handleChange}/>
          </div>
  
          <button
            className="loginButton"
            type="submit"
            disabled={isFetching}>
  
            {isFetching ? (
                  <CircularProgress size={15}/>
              ) : (
              <Typography
              variant="subtitle2"
              color="white">
                Login
              </Typography>)}
          </button>
  
          </Stack>
        </form>
  
        {/* LOGIN FORM ENDS */}
  
        </div>
    );  
    
  }

My question is how to let the INPUT knows if the user is typing a username or an email and then act accordingly, or is there any easy way to get this done?



Solution

I don’t think the input can differentiate that by itself.

For the username/email input set a separate onChange function through which you can check if the input is either a valid email or username.

You can do that for example, by first checking your backend if the username exists and for the email with a RegEx for checking if it’s a valid email.


This Question was asked in StackOverflow by sultan.h and Answered by Pipera It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?