Refactor Register component to use InputField component

frontend/src/Components/Register.tsx

@@ -4,6 +4,32 @@ import { api } from "../API/API";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
 
+function InputField(props: {
+  label: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}): JSX.Element {
+  return (
+    <div className="mb-4">
+      <label
+        className="block text-gray-700 text-sm font-sans font-bold mb-2"
+        htmlFor={props.label}
+      >
+        {props.label}
+      </label>
+      <input
+        className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id={props.label}
+        type={props.type}
+        placeholder={props.label}
+        value={props.value}
+        onChange={props.onChange}
+      />
+    </div>
+  );
+}
+
 export default function Register(): JSX.Element {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -31,42 +57,22 @@ export default function Register(): JSX.Element {
           <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
             Register New User
           </h3>
-          <div className="mb-4">
+          <InputField
-            <label
+            label="Username"
-              className="block text-gray-700 text-sm font-sans font-bold mb-2"
-              htmlFor="username"
-            >
-              Username
-            </label>
-            <input
-              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="username"
             type="text"
-              placeholder="Username"
             value={username}
             onChange={(e) => {
               setUsername(e.target.value);
             }}
           />
-          </div>
+          <InputField
-          <div className="mb-6">
+            label="Password"
-            <label
-              className="block text-gray-700 text-sm font-sans font-bold mb-2"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <input
-              className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              id="password"
             type="password"
-              placeholder="Choose password"
             value={password}
             onChange={(e) => {
               setPassword(e.target.value);
             }}
           />
-          </div>
           <div className="flex items-center justify-between">
             <Button
               text="Register"