Breaking News: Grepper is joining You.com. Read the official announcement!

login_page-jwt-auth-using-react-and-flask

Green Team answered on February 27, 2022 Popularity 3/10 Helpfulness 1/10

answer login_page-jwt-auth-using-react-and-flask

login_page-jwt-auth-using-react-and-flask

Comment

function Login() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const onSubmitClick = (e)=>{
    e.preventDefault()
    console.log("You pressed login")
    let opts = {
      'username': username,
      'password': password
    }
    console.log(opts)
    fetch('/api/login', {
      method: 'post',
      body: JSON.stringify(opts)
    }).then(r => r.json())
      .then(token => {
        if (token.access_token){
          console.log(token)          
        }
        else {
          console.log("Please type in correct username/password")
        }
      })
  }

  const handleUsernameChange = (e) => {
    setUsername(e.target.value)
  }

  const handlePasswordChange = (e) => {
    setPassword(e.target.value)
  }

  return (
    <div>
      <h2>Login</h2>
      <form action="#">
        <div>
          <input type="text" 
            placeholder="Username" 
            onChange={handleUsernameChange}
            value={username} 
          />
        </div>
        <div>
          <input
            type="password"
            placeholder="Password"
            onChange={handlePasswordChange}
            value={password}
          />
        </div>
        <button onClick={onSubmitClick} type="submit">
          Login Now
        </button>
      </form>
    </div>
  )
}

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: yasoob.me

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 27 2022

Green Team

0 Answers Avg Quality 2/10

login_page-jwt-auth-using-react-and-flask

Contents

More Related Answers

login_page-jwt-auth-using-react-and-flask

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.