From 65ebdd7dde44ff7d26df2a048303d7713518c837 Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 15 Jun 2023 10:10:33 +0100
Subject: [PATCH] Extracted the Input into its own component

---
 src/components/Low/Input.tsx | 61 +++++++++++++++++++++++++++++++
 src/components/Navbar.tsx    |  2 +-
 src/pages/login.tsx          | 31 ++--------------
 src/pages/register.tsx       | 71 ++++++------------------------------
 4 files changed, 76 insertions(+), 89 deletions(-)
 create mode 100644 src/components/Low/Input.tsx

diff --git a/src/components/Low/Input.tsx b/src/components/Low/Input.tsx
new file mode 100644
index 00000000..3ea53ddf
--- /dev/null
+++ b/src/components/Low/Input.tsx
@@ -0,0 +1,61 @@
+import {useState} from "react";
+
+interface Props {
+	type: "email" | "text" | "password";
+	required?: boolean;
+	label?: string;
+	placeholder?: string;
+	name: string;
+	onChange: (value: string) => void;
+}
+
+export default function Input({type, label, placeholder, name, required = false, onChange}: Props) {
+	const [showPassword, setShowPassword] = useState(false);
+
+	if (type === "password") {
+		return (
+			<div className="relative flex flex-col gap-3 w-full">
+				{label && (
+					<label className="font-normal text-base text-mti-gray-dim">
+						{label}
+						{required ? " *" : ""}
+					</label>
+				)}
+				<div className="w-full h-fit relative">
+					<input
+						type={showPassword ? "text" : "password"}
+						name={name}
+						onChange={(e) => onChange(e.target.value)}
+						placeholder={placeholder}
+						className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+					/>
+					<p
+						role="button"
+						onClick={() => setShowPassword((prev) => !prev)}
+						className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
+						{showPassword ? "Hide" : "Show"}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col gap-3 w-full">
+			{label && (
+				<label className="font-normal text-base text-mti-gray-dim">
+					{label}
+					{required ? " *" : ""}
+				</label>
+			)}
+			<input
+				type={type}
+				name={name}
+				onChange={(e) => onChange(e.target.value)}
+				placeholder={placeholder}
+				className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+				required={required}
+			/>
+		</div>
+	);
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 2b7d76a6..09d5aa8a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -11,7 +11,7 @@ export default function Navbar({user}: Props) {
 		<header className="w-full bg-transparent py-4 gap-2 flex items-center">
 			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
 			<div className="flex justify-between w-5/6 mr-8">
-				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 shadow-lg shadow-neutral-200 outline-none" />
+				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
 				<div className="flex gap-3 items-center justify-end">
 					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
 					<span className="text-right">{user.name}</span>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index e93569fd..65410776 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -9,6 +9,7 @@ import {Divider} from "primereact/divider";
 import Button from "@/components/Low/Button";
 import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
+import Input from "@/components/Low/Input";
 
 export default function Login() {
 	const [email, setEmail] = useState("");
@@ -62,34 +63,8 @@ export default function Login() {
 					</div>
 					<Divider className="max-w-md" />
 					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={login}>
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Email address</label>
-							<input
-								type="email"
-								name="email"
-								onChange={(e) => setEmail(e.target.value)}
-								placeholder="Enter email address"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
-						</div>
-						<div className="relative flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Password</label>
-							<div className="w-full h-fit relative">
-								<input
-									type={showPassword ? "text" : "password"}
-									name="password"
-									onChange={(e) => setPassword(e.target.value)}
-									placeholder="Password"
-									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-								/>
-								<p
-									role="button"
-									onClick={() => setShowPassword((prev) => !prev)}
-									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
-									{showPassword ? "Hide" : "Show"}
-								</p>
-							</div>
-						</div>
+						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" />
+						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Password" />
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Login"}
 							{isLoading && (
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index bbd3233e..f7e86b15 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -6,6 +6,7 @@ import useUser from "@/hooks/useUser";
 import Button from "@/components/Low/Button";
 import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
+import Input from "@/components/Low/Input";
 
 export default function Register() {
 	const [name, setName] = useState("");
@@ -38,66 +39,16 @@ export default function Register() {
 				<section className="h-full w-full flex flex-col items-center justify-center gap-12">
 					<h1 className="font-bold text-4xl">Create new account</h1>
 					<form className="flex flex-col items-center gap-6 w-1/2">
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Name *</label>
-							<input
-								required
-								type="text"
-								name="name"
-								onChange={(e) => setName(e.target.value)}
-								placeholder="Enter your name"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
-						</div>
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Email address *</label>
-							<input
-								required
-								type="email"
-								name="email"
-								onChange={(e) => setEmail(e.target.value)}
-								placeholder="Enter email address"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
-						</div>
-						<div className="relative flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Password</label>
-							<div className="w-full h-fit relative">
-								<input
-									required
-									type={showPassword ? "text" : "password"}
-									name="password"
-									onChange={(e) => setPassword(e.target.value)}
-									placeholder="Password"
-									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-								/>
-								<p
-									role="button"
-									onClick={() => setShowPassword((prev) => !prev)}
-									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
-									{showPassword ? "Hide" : "Show"}
-								</p>
-							</div>
-						</div>
-						<div className="relative flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label>
-							<div className="w-full h-fit relative">
-								<input
-									required
-									type={showConfirmPassword ? "text" : "password"}
-									name="confirmPassword"
-									onChange={(e) => setConfirmPassword(e.target.value)}
-									placeholder="Confirm your password"
-									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-								/>
-								<p
-									role="button"
-									onClick={() => setShowConfirmPassword((prev) => !prev)}
-									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
-									{showConfirmPassword ? "Hide" : "Show"}
-								</p>
-							</div>
-						</div>
+						<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
+						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
+						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />
+						<Input
+							type="password"
+							name="confirmPassword"
+							onChange={(e) => setConfirmPassword(e)}
+							placeholder="Confirm your password"
+							required
+						/>
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Create account"}
 							{isLoading && (