From a9bcb6761bcdf5874c8c471ac333fb95619f78b1 Mon Sep 17 00:00:00 2001
From: Advik Arora <aroraadvik@gmail.com>
Date: Sat, 2 Mar 2024 15:26:33 -0500
Subject: [PATCH] created email input

---
 compass/app/auth/forgot_password/page.tsx |  4 ++--
 compass/components/auth/EmailInput.tsx    | 17 +++++++++++++++++
 compass/utils/classes/InputProps.ts       |  9 +++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 compass/components/auth/EmailInput.tsx
 create mode 100644 compass/utils/classes/InputProps.ts

diff --git a/compass/app/auth/forgot_password/page.tsx b/compass/app/auth/forgot_password/page.tsx
index e12f6b2..b2e7c9c 100644
--- a/compass/app/auth/forgot_password/page.tsx
+++ b/compass/app/auth/forgot_password/page.tsx
@@ -1,5 +1,5 @@
 "use client"
-import Button from '@/components/Button49';
+import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
@@ -44,7 +44,7 @@ export default function Page()  {
                         iconKey={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
-                            setEmailError(''); // Reset the error when the user types
+                            
                         }}/>
                         {emailError && (
                         <p className={`mt-2 ${emailError.includes('exists in the database') ? 'text-green-500' : 'text-red-500'}`}>
diff --git a/compass/components/auth/EmailInput.tsx b/compass/components/auth/EmailInput.tsx
new file mode 100644
index 0000000..cb3a829
--- /dev/null
+++ b/compass/components/auth/EmailInput.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import Input from '@/components/Input'
+import { InputProps } from '@/utils/classes/InputProps';
+
+const EmailInput: React.FunctionComponent<InputProps> = ({ type, title, placeholder, ...rest }) => {
+
+  return (
+    <Input
+      type='email'
+      title="Enter your email address"
+      placeholder="janedoe@gmail.com"
+      iconKey={'EmailInputIcon'}
+    />
+  );
+};
+
+export default EmailInput;
diff --git a/compass/utils/classes/InputProps.ts b/compass/utils/classes/InputProps.ts
new file mode 100644
index 0000000..2354d62
--- /dev/null
+++ b/compass/utils/classes/InputProps.ts
@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+import { Icons } from "../constants";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    iconKey?: keyof typeof Icons; // Use keyof typeof to ensure the key exists in Icons
+    title?: string; // Assuming title is always a string
+    type?: string;
+    placeholder?: string;
+  };
\ No newline at end of file