From 6d5c25be5cd14a362b4a2e48a37e2e6cc74e6308 Mon Sep 17 00:00:00 2001
From: Davenludd <david.ludde01@gmail.com>
Date: Sat, 16 Mar 2024 15:14:03 +0100
Subject: [PATCH] Refactor Register component to use InputField component

---
 frontend/src/Components/Register.tsx | 52 +++++++++-------------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/frontend/src/Components/Register.tsx b/frontend/src/Components/Register.tsx
index 9b435f1..b0527da 100644
--- a/frontend/src/Components/Register.tsx
+++ b/frontend/src/Components/Register.tsx
@@ -58,42 +58,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">
-            <label
-              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>
-          <div className="mb-6">
-            <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>
+          <InputField
+            label="Username"
+            type="text"
+            value={username}
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+          />
+          <InputField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+          />
           <div className="flex items-center justify-between">
             <Button
               text="Register"