Check for authentication in react login-CodePudding

I'm trying to set up a hard coded authentication in react when a user logs in through a form. With the code I have right now, it always returns the "else" statement, even if it meets the requirements for the "if".

I'm trying to pass in both the handleSubmit function and the authenticate function in the onClick for the submit button. The other issue I'm running into is that when I pass in both functions, it doesn't reset state on the username and password fields on the form.

import React, { useState } from "react";
import "./Login.css";

function Login() {
  const [name, setName] = useState("");
  const [uname, setUname] = useState("");
  const [pword, setPword] = useState("");

  const Employee = {
    id: 12345,
    password: "abcde",
  };

  function handleInput(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    setUname("");
    setPword("");
  }

  function authenticate() {
    if (uname === Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
  }

  return (
    <div className="login-card">
      Hello {name}
      <div className="username" onChange={handleInput}>
        <input
          type="input"
          className="username-input"
          placeholder="Employee ID"
          onChange={(e) => setUname(e.target.value)}
          value={uname}
          autoComplete="off"
        />
      </div>
      <div className="password">
        <input
          className="password-input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPword(e.target.value)}
          value={pword}
          autoComplete="off"
        />
      </div>
      <button
        className="submit-btn"
        type="submit"
        onClick={(handleSubmit, authenticate)}
      >
        Login
      </button>
    </div>
  );
}

export default Login;

EDIT: A combination of all three answers worked. Had to wrap the div in a form, call the authenticate function inside of handleSubmit, and use "==" instead of "===" on checking for the Employee.id:

import React, { useState } from "react";
import "./Login.css";

function Login() {
  const [name, setName] = useState("");
  const [uname, setUname] = useState("");
  const [pword, setPword] = useState("");

  const Employee = {
    id: 12345,
    password: "abcde",
  };

  function handleInput(e) {
    setName(e.target.value);
  }

  function authenticate() {
    if (uname == Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
  }

  function handleSubmit(e) {
    authenticate();
    e.preventDefault();
    setUname("");
    setPword("");
  }

  return (
    <div className="login-card">
      Hello {name}
      <form onSubmit={handleSubmit}>
        <div className="username" onChange={handleInput}>
          <input
            type="input"
            className="username-input"
            placeholder="Employee ID"
            onChange={(e) => setUname(e.target.value)}
            value={uname}
            autoComplete="off"
          />
        </div>
        <div className="password">
          <input
            className="password-input"
            type="password"
            placeholder="Password"
            onChange={(e) => setPword(e.target.value)}
            value={pword}
            autoComplete="off"
          />
        </div>
        <button className="submit-btn" type="submit" onClick={handleSubmit}>
          Login
        </button>
      </form>
    </div>
  );
}

export default Login;

CodePudding user response：

import React, { useState } from "react";

function Login() {
  const [name, setName] = useState("");
  const [uname, setUname] = useState("");
  const [pword, setPword] = useState("");

  const Employee = {
    id: "12345", //string
    password: "abcde"
  };

  function handleInput(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    setUname("");
    setPword("");
  }

  function authenticate(e) {
    if (uname === Employee.id && pword === Employee.password) {
      console.log("Success! Logged in.");
    } else {
      console.log("Invalid Employee ID and/or password");
    }
    handleSubmit(e);
  }
  console.log(uname, pword);
  return (
    <div className="login-card">
      Hello {name}
      <div className="username" onChange={handleInput}>
        <input
          type="input"
          className="username-input"
          placeholder="Employee ID"
          onChange={(e) => setUname(e.target.value)}
          value={uname}
          autoComplete="off"
        />
      </div>
      <div className="password">
        <input
          className="password-input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPword(e.target.value)}
          value={pword}
          autoComplete="off"
        />
      </div>
      <button className="submit-btn" type="submit" onClick={authenticate}>
        Login
      </button>
    </div>
  );
}

export default Login;

You are trying to compare id which is number but e.target.value always return string.So === does strict checking with value as well as its type and it fails since "12345" === 12345 will be false.

CodePudding user response：

you need to place those divs inside a form tag then you can assign "onSubmit" to the form and also you can do all in one function you don't need two try this and tell me if its works:

function handleSubmit = (e) => {
 e.preventDefault();
 if(uname === Employee.id && pword === employee.password){
    console.log("logged in")
    setname(uname);
    setUname("")
    setPword("")
 } else if(!uname && !pword){
    console.log("please fill the fields")
 } 
 else {
   console.log("invalid login");
   setUname("")
   setPword("")
 }
}

<div className="login-card">
      Hello {name}
      <form onSubmit={handleSubmit}>
      <div className="username">
        <input
          type="input"
          className="username-input"
          placeholder="Employee ID"
          onChange={(e) => setUname(e.target.value)}
          value={uname}
          autoComplete="off"
        />
      </div>
      <div className="password">
        <input
          className="password-input"
          type="password"
          placeholder="Password"
          onChange={(e) => setPword(e.target.value)}
          value={pword}
        />
      </div>
      <button type="submit">submit</button>
      </form>
    </div>
 </div>