Add: handle enter press

web/src/component/Login.js

@@ -5,26 +5,8 @@ function Login(props) {
   let navigate = useNavigate();
   let [username, setUsername] = useState("");
   let [password, setPassword] = useState("");
-  return (
-    <div className="page">
-      <h2>Login</h2>
-      <label htmlFor="username">Username</label>
-      <input
-        type="text"
-        id="username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <label htmlFor="password">Password</label>
-      <input
-        type="password"
-        id="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <span>
-        <button
-          onClick={() => {
+
+  function login() {
     if (!username || !password) {
       alert("Please enter username and password");
       return;
@@ -48,15 +30,40 @@ function Login(props) {
         props.setUser(data.user);
         navigate("/");
       });
+  }
+
+  return (
+    <div className="page">
+      <h2>Login</h2>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            login();
+          }
         }}
-        >
-          Login
-        </button>
+      />
+      <span>
+        <button onClick={login}>Login</button>
         <button
           onClick={() => {
             navigate("/manage/register");
           }}
-    >Register</button>
+        >
+          Register
+        </button>
       </span>
     </div>
   );

web/src/component/Register.js

@@ -1,44 +1,14 @@
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 
-function Register(props) {
+function Register() {
   let navigate = useNavigate();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [password2, setPassword2] = useState("");
   const [role, setRole] = useState("");
-  return (
-    <div>
-      <h2>Register</h2>
-      <label htmlFor="username">Username</label>
-      <input
-        type="text"
-        id="username"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <label htmlFor="password">Password</label>
-      <input
-        type="password"
-        id="password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-      <label htmlFor="password2">Confirm Password</label>
-      <input
-        type="password"
-        id="password2"
-        value={password2}
-        onChange={(e) => setPassword2(e.target.value)}
-      />
-      <label htmlFor="role">Role</label>
-      <select value={role} onChange={(e) => setRole(e.target.value)}>
-        <option value="">Select a role</option>
-        <option value="2">User</option>
-        <option value="1">Admin</option>
-      </select>
-      <button
-        onClick={() => {
+
+  function register() {
     if (!username || !password || !password2 || !role) {
       alert("Please fill out all fields");
     } else if (password !== password2) {
@@ -64,10 +34,45 @@ function Register(props) {
           }
         });
     }
+  }
+
+  return (
+    <div className="page">
+      <h2>Register</h2>
+      <label htmlFor="username">Username</label>
+      <input
+        type="text"
+        id="username"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+      />
+      <label htmlFor="password">Password</label>
+      <input
+        type="password"
+        id="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <label htmlFor="password2">Confirm Password</label>
+      <input
+        type="password"
+        id="password2"
+        value={password2}
+        onChange={(e) => setPassword2(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            register();
+          }
         }}
-      >
-        Register
-      </button>
+      />
+      <label htmlFor="role">Role</label>
+      <select value={role} onChange={(e) => setRole(e.target.value)}>
+        <option value="">Select a role</option>
+        <option value="2">User</option>
+        <option value="1">Admin</option>
+      </select>
+      <button onClick={register}>Register</button>
     </div>
   );
 }