implemented login

app/lib/billActions.ts

@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 import clientPromise from './mongodb';
-import { BillAttachment, Bill, BillingLocation } from './db-types';
+import { BillAttachment, BillingLocation } from './db-types';
 import { ObjectId } from 'mongodb';
 
 export type State = {

app/lib/global.d.ts

@@ -1,8 +1,8 @@
 import { MongoClient } from "mongodb";
 
-declare global {
-  namespace globalThis {
-    /** global Mongo Client used in development */
-    var _mongoClientPromise: Promise<MongoClient>
-  }
-}
+// declare global {
+//   namespace globalThis {
+//     /** global Mongo Client used in development */
+//     var _mongoClientPromise: Promise<MongoClient>
+//   }
+// }

app/lib/loginActions.ts

@@ -0,0 +1,21 @@
+import { signIn } from '@/auth';
+import { AuthError } from 'next-auth';
+
+export async function authenticate(
+    prevState: string | undefined,
+    formData: FormData,
+  ) {
+    try {
+      await signIn('credentials', formData);
+    } catch (error) {
+      if (error instanceof AuthError) {
+        switch (error.type) {
+          case 'CredentialsSignin':
+            return 'Invalid credentials.';
+          default:
+            return 'Something went wrong.';
+        }
+      }
+      throw error;
+    }
+  }

app/lib/sql-shim.ts

@@ -1,25 +0,0 @@
-import { Client, QueryResult, QueryResultRow } from 'pg';
-
-const client = new Client({
-    // connectionString: process.env.DATABASE_URL,
-    host: process.env.POSTGRES_HOST,
-    user: process.env.POSTGRES_USER,
-    password: process.env.POSTGRES_PASSWORD,
-    database: process.env.POSTGRES_DB
-  });
-
-client.connect();
-
-/** an adapter function which simulates @vercel/postgres `sql` function */ 
-export function sql<T extends QueryResultRow>(strings: TemplateStringsArray, ...values: any[]): Promise<QueryResult<T>> {
-    // string values need to be wrapped in single quotes
-    const fixedValues = values.map((value) => {
-      if (typeof value === 'string') {
-        return `'${value}'`;
-      }
-      return value;
-    });
-  
-    const query = String.raw(strings, ...fixedValues);
-    return client.query<T>(query);
-  }

app/lib/types/User.ts

@@ -0,0 +1,6 @@
+export type User = {
+    id: string;
+    name: string;
+    email: string;
+    password: string;
+  };

app/login/page.tsx

@@ -0,0 +1,11 @@
+import LoginForm from '@/app/ui/LoginForm';
+ 
+export default function LoginPage() {
+  return (
+    <main className="flex items-center justify-center md:h-screen">
+      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
+        <LoginForm />
+      </div>
+    </main>
+  );
+}

app/ui/LoginForm.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { lusitana } from '@/app/ui/fonts';
+import {
+  AtSymbolIcon,
+  KeyIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/24/outline';
+import { ArrowRightIcon } from '@heroicons/react/20/solid';
+import { Button } from './button';
+import { useFormState } from 'react-dom';
+import { authenticate } from '@/app/lib/loginActions';
+
+export default function LoginForm() {
+
+  const [errorMessage, dispatch] = useFormState(authenticate, undefined);
+
+  return (
+    <form className="space-y-3" action={dispatch}>
+      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
+        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
+          Please log in to continue.
+        </h1>
+        <div className="w-full">
+          <div>
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="email"
+            >
+              Email
+            </label>
+            <div className="relative">
+              <input
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="email"
+                type="email"
+                name="email"
+                placeholder="Enter your email address"
+                required
+              />
+              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="password"
+            >
+              Password
+            </label>
+            <div className="relative">
+              <input
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="password"
+                type="password"
+                name="password"
+                placeholder="Enter password"
+                required
+                minLength={6}
+              />
+              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+        </div>
+        <LoginButton />
+        <div className="flex h-8 items-end space-x-1">
+        <div
+          className="flex h-8 items-end space-x-1"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {errorMessage && (
+            <>
+              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
+              <p className="text-sm text-red-500">{errorMessage}</p>
+            </>
+          )}
+        </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function LoginButton() {
+  return (
+    <Button className="mt-4 w-full">
+      Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
+    </Button>
+  );
+}