Upload New File

bloglist_frontend/src/components/LoginForm.js

+import ErrorNotification from './ErrorNotification'
+import PropTypes from 'prop-types'
+
+const LoginForm = ({
+    handleLogin,
+    handleUsernameChange,
+    handlePasswordChange,
+    username,
+    password,
+    errorMessage,
+}) => {
+
+  LoginForm.propTypes = {
+    handleLogin: PropTypes.func.isRequired,
+    handleUsernameChange: PropTypes.func.isRequired,
+    handlePasswordChange: PropTypes.func.isRequired,
+    username: PropTypes.string.isRequired,
+    password: PropTypes.string.isRequired,
+  }
+
+  return (
+      <div>
+        <h2>log in to application</h2>
+        <ErrorNotification message={errorMessage} />
+        <form onSubmit={handleLogin}>
+          <div>
+            username
+            <input
+              type="text"
+              value={username}
+              onChange={handleUsernameChange}
+            />
+          </div>
+          <div>
+            password
+            <input
+              type="password"
+              value={password}
+              onChange={handlePasswordChange}
+            />
+          </div>
+            <button type="submit">login</button>
+          </form>      
+      </div>
+    )
+}
+export default LoginForm
\ No newline at end of file