added textinput component and styled login and signup pages

app/(auth)/login/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import TextInput from '@/components/TextInput';
 import { AuthProvider, useAuth } from '../../utils/AuthProvider';
 
 export default function LoginLayout() {
@@ -15,6 +16,7 @@ function Login() {
   const { signIn } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleSignIn = async () => {
     try {
@@ -27,26 +29,40 @@ function Login() {
   };
 
   return (
-    <>
-      <input
-        name="email"
-        onChange={e => setEmail(e.target.value)}
+    <div
+      style={{
+        backgroundColor: '#f5f5f5',
+        minHeight: '100vh',
+        padding: '20px',
+      }}
+    >
+      <header>
+        <h1 style={{ color: 'darkgreen' }}>Log In</h1>
+      </header>
+      <TextInput
+        id="email-input"
+        type="email"
+        label="Email"
+        onChange={setEmail}
         value={email}
         placeholder="Email"
       />
       {/* Email input*/}
-      <input
+      <TextInput
+        id="password-input"
         type="password"
-        name="password"
-        onChange={e => setPassword(e.target.value)}
+        label="Password"
+        onChange={setPassword}
         value={password}
         placeholder="Password"
+        isVisible={showPassword}
+        toggleVisibility={() => setShowPassword(!showPassword)}
       />
       {/* Password input*/}
       <button type="button" onClick={handleSignIn}>
         Sign in
       </button>{' '}
       {/* Sign in button */}
-    </>
+    </div>
   );
 }

app/(auth)/signup/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import PasswordComplexity from '@/app/utils/PasswordComplexity';
-import PasswordInput from '@/app/utils/PasswordInput';
+import TextInput from '@/components/TextInput';
 import { AuthProvider, useAuth } from '../../utils/AuthProvider';
 
 export default function SignUpLayout() {
@@ -27,18 +27,14 @@ function SignUp() {
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
   // Handles input to password
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newPassword = e.target.value;
+  const handlePasswordChange = (newPassword: string) => {
     setPassword(newPassword);
     validatePasswords(newPassword, confirmPassword);
     validatePasswordComplexity(newPassword);
   };
 
   // Handles input to confirm password
-  const handleConfirmPasswordChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const newConfirmPassword = e.target.value;
+  const handleConfirmPasswordChange = (newConfirmPassword: string) => {
     setConfirmPassword(newConfirmPassword);
     validatePasswords(password, newConfirmPassword);
   };
@@ -80,30 +76,45 @@ function SignUp() {
   };
 
   return (
-    <>
-      <input
-        name="email"
-        onChange={e => setEmail(e.target.value)}
+    <div
+      style={{
+        backgroundColor: '#f5f5f5',
+        minHeight: '100vh',
+        padding: '20px',
+      }}
+    >
+      <header>
+        <h1 style={{ color: 'darkgreen' }}>Sign Up</h1>
+      </header>
+      <TextInput
+        id="email-input"
+        label="Email"
+        type="email"
+        onChange={setEmail}
         value={email}
         placeholder="Email"
       />
       {/* Email input*/}
-      <PasswordInput
-        value={password}
+      <TextInput
+        id="password-input"
+        type="password"
+        value={password || ''}
         onChange={handlePasswordChange}
         placeholder="Password"
         isVisible={showPassword}
         toggleVisibility={() => setShowPassword(!showPassword)}
-        name="password"
+        label="Password"
       />
       {/* Password input with toggle visibility */}
-      <PasswordInput
-        value={confirmPassword}
+      <TextInput
+        id="confirm-password-input"
+        type="password"
+        value={confirmPassword || ''}
         onChange={handleConfirmPasswordChange}
         placeholder="Confirm Password"
         isVisible={showConfirmPassword}
         toggleVisibility={() => setShowConfirmPassword(!showConfirmPassword)}
-        name="confirmPassword"
+        label="Confirm Password"
       />
       {/* Confirm password input with toggle visibility */}
       <button
@@ -126,6 +137,6 @@ function SignUp() {
         <p style={{ color: 'red' }}>{passwordComplexityError}</p>
       )}
       {/* Password complexity error message */}
-    </>
+    </div>
   );
 }

components/TextInput/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { InputWrapper, StyledInput, StyledLabel } from './styles';
+
+interface TextInputProps {
+  label: string;
+  id: string;
+  type: string;
+  value: string;
+  placeholder: string;
+  onChange: (s: string) => void;
+  isVisible?: boolean;
+  toggleVisibility?: () => void;
+}
+
+const TextInput: React.FC<TextInputProps> = ({
+  label,
+  id,
+  type,
+  placeholder,
+  onChange,
+  isVisible,
+  value,
+  toggleVisibility,
+}) => {
+  const inputType = type === 'password' && isVisible ? 'text' : type;
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <div>
+      <InputWrapper>
+        {label && <StyledLabel htmlFor={id}>{label}</StyledLabel>}
+        <StyledInput
+          id={id}
+          type={inputType}
+          placeholder={placeholder}
+          value={value}
+          onChange={handleChange}
+        />
+      </InputWrapper>
+      {type === 'password' && toggleVisibility && (
+        <button
+          type="button"
+          onClick={toggleVisibility}
+          style={{
+            marginBottom: '10px',
+          }}
+        >
+          {isVisible ? 'Hide' : 'Show'}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default TextInput;

components/TextInput/styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+`;
+
+export const StyledLabel = styled.label`
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: darkgreen;
+`;
+
+export const StyledInput = styled.input`
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+
+  &:focus {
+    border-color: green;
+    outline: none;
+  }
+`;