Add: handle enter press

web/src/component/Login.js

@@ -5,6 +5,33 @@ function Login(props) {
   let navigate = useNavigate();
   let [username, setUsername] = useState("");
   let [password, setPassword] = useState("");
+
+  function login() {
+    if (!username || !password) {
+      alert("Please enter username and password");
+      return;
+    }
+    fetch("/api/v1/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+          return;
+        }
+        props.setUser(data.user);
+        navigate("/");
+      });
+  }
+
   return (
     <div className="page">
       <h2>Login</h2>
@@ -21,42 +48,22 @@ function Login(props) {
         id="password"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            login();
+          }
+        }}
       />
       <span>
+        <button onClick={login}>Login</button>
         <button
           onClick={() => {
-            if (!username || !password) {
-              alert("Please enter username and password");
-              return;
-            }
-            fetch("/api/v1/login", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                username,
-                password,
-              }),
-            })
-              .then((res) => res.json())
-              .then((data) => {
-                if (data.error) {
-                  alert(data.error);
-                  return;
-                }
-                props.setUser(data.user);
-                navigate("/");
-              });
+            navigate("/manage/register");
           }}
         >
-          Login
+          Register
         </button>
-        <button
-    onClick={() => {
-      navigate("/manage/register");
-    }}
-    >Register</button>
       </span>
     </div>
   );

web/src/component/Register.js

@@ -1,14 +1,43 @@
 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("");
+
+  function register() {
+    if (!username || !password || !password2 || !role) {
+      alert("Please fill out all fields");
+    } else if (password !== password2) {
+      alert("Passwords do not match");
+    } else {
+      fetch("/api/v1/register", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username: username,
+          password: password,
+          role: parseInt(role),
+        }),
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          if (data.error) {
+            alert(data.error);
+          } else {
+            navigate("/manage/login");
+          }
+        });
+    }
+  }
+
   return (
-    <div>
+    <div className="page">
       <h2>Register</h2>
       <label htmlFor="username">Username</label>
       <input
@@ -30,6 +59,12 @@ function Register(props) {
         id="password2"
         value={password2}
         onChange={(e) => setPassword2(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            register();
+          }
+        }}
       />
       <label htmlFor="role">Role</label>
       <select value={role} onChange={(e) => setRole(e.target.value)}>
@@ -37,37 +72,7 @@ function Register(props) {
         <option value="2">User</option>
         <option value="1">Admin</option>
       </select>
-      <button
-        onClick={() => {
-          if (!username || !password || !password2 || !role) {
-            alert("Please fill out all fields");
-          } else if (password !== password2) {
-            alert("Passwords do not match");
-          } else {
-            fetch("/api/v1/register", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                username: username,
-                password: password,
-                role: parseInt(role),
-              }),
-            })
-              .then((res) => res.json())
-              .then((data) => {
-                if (data.error) {
-                  alert(data.error);
-                } else {
-                  navigate("/manage/login");
-                }
-              });
-          }
-        }}
-      >
-        Register
-      </button>
+      <button onClick={register}>Register</button>
     </div>
   );
 }