From 2a495b89fa98dde9c6b684f62d65b1376fb53182 Mon Sep 17 00:00:00 2001
From: Andy Chan <andy12bz@unc.edu>
Date: Sat, 2 Mar 2024 14:36:02 -0500
Subject: [PATCH] Add a PasswordInput, show/hide password

Co-Authored-By: Erica Birdsong <97683338+ermaria@users.noreply.github.com>
---
 compass/app/page.tsx                      |  5 ++-
 compass/components/auth/PasswordInput.tsx | 48 +++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 compass/components/auth/PasswordInput.tsx

diff --git a/compass/app/page.tsx b/compass/app/page.tsx
index 3ab3991..9ba509d 100644
--- a/compass/app/page.tsx
+++ b/compass/app/page.tsx
@@ -12,6 +12,7 @@ import {ChangeEvent, useState} from "react";
 // export const metadata: Metadata = {
 //   title: 'Login',
 // }
+import PasswordInput from '@/components/auth/PasswordInput';
 
 export default function Page()  {
     const [email, setEmail] = useState("");
@@ -59,10 +60,10 @@ export default function Page()  {
                     />
                     <h1 className='font-bold text-xl text-purple-800'>Login</h1>
                     <div className="mb-4">
-                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password" onChange={handlePasswordChange} />
+                        <PasswordInput title="Password" onChange={handlePasswordChange} required />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <InlineLink href="/forgot_password">
diff --git a/compass/components/auth/PasswordInput.tsx b/compass/components/auth/PasswordInput.tsx
new file mode 100644
index 0000000..f196ec4
--- /dev/null
+++ b/compass/components/auth/PasswordInput.tsx
@@ -0,0 +1,48 @@
+'use client'
+import { Icons } from '@/utils/constants';
+import React, { FunctionComponent, InputHTMLAttributes, ReactElement, ReactNode, useState} from 'react';
+
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  title?: string; // Assuming title is always a string
+  type?: string;
+  placeholder?: string;
+};
+
+const PasswordInput: FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+
+  const [visible, setVisible] = useState (false);
+  const PasswordIcon = visible ?  Icons['HidePasswordIcon'] : Icons['UnhidePasswordIcon'];
+
+  return (
+    <div className="mb-4">
+      {title && (
+        <div className="mb-1">
+          <label htmlFor={title} className="text-sm font-semibold text-gray-700">
+            {title}
+          </label>
+        </div>
+      )}
+      <div className="flex items-center border border-gray-300 rounded-md shadow-sm overflow-hidden">
+
+        <input
+          {...rest}
+          type={visible ? "text" : "password"}
+          id={title}
+          placeholder={placeholder}
+          className="w-full border-none p-3 text-sm focus:ring-0"
+          style={{ boxShadow: 'none' }} // This ensures that the input doesn't have an inner shadow
+        />
+
+        {PasswordIcon && (
+          <span className="inline-flex items-center px-3 border-r border-gray-300 text-gray-500">
+            <PasswordIcon className="h-5 w-5" onClick={() => setVisible(!visible)}/>
+          </span>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default PasswordInput;