Add error messages to login page

Modifies the Button component, may break some things. I hope not.

compass/app/page.tsx

@@ -1,17 +1,52 @@
 // pages/index.tsx
+"use client";
 
 import Button from '@/components/Button';
 import Input from '@/components/Input'
 import InlineLink from '@/components/InlineLink';
 import Paper from '@/components/auth/Paper';
-import { Metadata } from 'next'
+// import { Metadata } from 'next'
 import Image from 'next/image';
+import {ChangeEvent, useState} from "react";
 
-export const metadata: Metadata = {
-  title: 'Login',
-}
+// export const metadata: Metadata = {
+//   title: 'Login',
+// }
 
 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);
+        console.log("email " + email);
+    }
+
+    const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setPassword(event.currentTarget.value);
+        console.log("password " + password)
+    }
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        // Priority: Incorrect combo > Missing email > Missing password
+
+        if (password.trim().length === 0) {
+            setError("Please enter your password.")
+        }
+        // This shouldn't happen, <input type="email"> already provides validation, but just in case.
+        if (email.trim().length === 0) {
+            setError("Please enter your email.")
+        }
+        // Placeholder for incorrect email + password combo.
+        if (email === "incorrect@gmail.com" && password) {
+            setError("Incorrect password.")
+        }
+    }
+
+
+
     return (
         <>
             <Paper>
@@ -24,18 +59,21 @@ 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'} />
+                        <Input type='email' title="Email" placeholder="janedoe@gmail.com" iconKey={'EmailInputIcon'} onChange={handleEmailChange} />
                     </div>
                     <div className="mb-6">
-                        <Input type='password' title="Password"  />
+                        <Input type='password' title="Password" onChange={handlePasswordChange} />
                     </div>
                     <div className="flex flex-col items-left space-y-4">
                         <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;
 };
 
 const Button: FunctionComponent<ButtonProps> = ({ children, onClick }) => {