Merge branch 'admin-team-GEN-67-auth-app' into nick-GEN-67-refactor

compass/app/auth/forgot_password/page.tsx

@@ -44,7 +44,6 @@ export default function Page()  {
                         icon={'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'}`}>

compass/app/auth/newPassword/page.tsx

@@ -1,8 +1,11 @@
 // pages/index.tsx
 "use client";
 import { useState, useEffect } from 'react'; 
-import Button from '@/components/Button1';
+
 import Input from '@/components/Input';
+
+import Button from '@/components/Button';
+
 import Paper from '@/components/auth/Paper';
 
 

compass/app/page.tsx

@@ -1,8 +1,7 @@
 // pages/index.tsx
 "use client";
 
-// import Button from '@/components/Button49';
-import Button from '@/components/Button1';
+import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';

compass/components/Button1.tsx

@@ -1,24 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-
-type ButtonProps = {
-    children: ReactNode;
-    onClick?: () => void; // make the onClick handler optional
-    type?: "button" | "submit" | "reset"; // specify possible values for type
-    disabled?: boolean;
-};
-
-const Button: FunctionComponent<ButtonProps> = ({ children, type, disabled, onClick }) => {
-    const buttonClassName = `inline-block rounded border ${disabled ? 'bg-gray-400 text-gray-600 cursor-not-allowed' : 'border-purple-600 bg-purple-600 text-white hover:bg-transparent hover:text-purple-600 focus:outline-none focus:ring active:text-purple-500'} px-12 py-3 text-sm font-semibold`;
-    return (
-        <button
-            className={buttonClassName}
-            onClick={onClick}
-            type={type}
-            disabled={disabled}
-        >
-            {children}
-        </button>
-    );
-};
-
-export default Button;

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;

compass/tsconfig.json

@@ -8,7 +8,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

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;
+  };