Merge pull request #9 from cssgunc/andy-admin-GEN-49-login

Login page implementation

compass/app/auth/forgot_password/page.tsx

@@ -1,9 +1,9 @@
 "use client"
-import Button from '@/components/Button';
+import Button from '@/components/Button49';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
-import { useState, useEffect } from 'react'; 
+import { useState, useEffect } from 'react';
 
 function isValidEmail(email: string) {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -29,7 +29,7 @@ export default function Page()  {
         setEmailError(error);
         setIsButtonDisabled(error !== null && !error.includes('exists in the database'));
     }, [confirmEmail]);
-    
+
     return (
         <>
             <Paper>
@@ -37,11 +37,11 @@ export default function Page()  {
                 className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
                     <h1 className="text-2xl font-bold text-purple-700 sm:text-3xl">Forgot password</h1>
                     <div className="mb-4">
-                        <Input type='email' 
-                        title="Enter your email address" 
-                        placeholder="janedoe@gmail.com" 
+                        <Input type='email'
+                        title="Enter your email address"
+                        placeholder="janedoe@gmail.com"
                         value={confirmEmail}
-                        iconKey={'EmailInputIcon'} 
+                        iconKey={'EmailInputIcon'}
                         onChange={(e) => {
                             setconfirmEmail(e.target.value);
                             setEmailError(''); // Reset the error when the user types

compass/app/page.tsx

@@ -1,33 +1,74 @@
 // pages/index.tsx
+"use client";
 
+import Button from '@/components/Button49';
 import Button from '@/components/Button1';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
-import { Metadata } from 'next'
- 
-export const metadata: Metadata = {
-  title: 'Login',
-}
+import Image from 'next/image';
+import {ChangeEvent, useState} from "react";
+import PasswordInput from '@/components/auth/PasswordInput';
 
 export default function Page()  {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState("");
+
+    const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setEmail(event.currentTarget.value);
+    }
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.currentTarget.value);
+    }
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        // Priority: Incorrect combo > Missing email > Missing password
+
+        if (password.trim().length === 0) {
+            setError("Please enter your password.")
+            event.preventDefault();
+        }
+        // This shouldn't happen, <input type="email"> already provides validation, but just in case.
+        if (email.trim().length === 0) {
+            setError("Please enter your email.")
+            event.preventDefault();
+        }
+        // Placeholder for incorrect email + password combo.
+        if (email === "incorrect@gmail.com" && password) {
+            setError("Incorrect password.")
+            event.preventDefault();
+        }
+    }
+
     return (
         <>
             <Paper>
-                <form className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white">
+                <form className="mb-0 m-auto mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white max-w-xl">
+                    <Image
+                        src="/logo.png"
+                        alt='Compass Center logo.'
+                        width={100}
+                        height={91}
+                    />
+                    <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'} />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} required/>
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password"  />
+                        <PasswordInput title="Password" onChange={handlePasswordChange} required />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
-                        <InlineLink>
+                        <InlineLink href="/forgot_password">
                             Forgot password?
                         </InlineLink>
-                        <Button>
+                        <Button onClick={handleClick}>
                             Login
                         </Button>
+                        <div className="text-center text-red-600" hidden={!error}>
+                            <p>{error}</p>
+                        </div>
 
                     </div>
                 </form>

compass/components/Button.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent, ReactNode } from 'react';
 
 type ButtonProps = {
     children: ReactNode;
-    onClick?: () => void; // make the onClick handler optional
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     type?: "button" | "submit" | "reset"; // specify possible values for type
     disabled?: boolean;
 };

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;

compass/package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.1",
-        "next": "^13.5.6",
+        "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18"
       },

compass/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
-    "next": "^13.5.6",
+    "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"
   },

compass/tsconfig.json

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