From e30c28a66f051ea30d1682f11e0feea8963ae5b2 Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Sun, 26 Jan 2025 22:34:49 +0100
Subject: [PATCH] added Login page

---
 .../app/(auth)/login/_components/Login.tsx    | 44 +++++++++++++++++++
 apps/hub/app/(auth)/login/page.tsx            |  7 ++-
 apps/hub/package.json                         |  5 ++-
 package-lock.json                             | 36 ++++++++++++++-
 4 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 apps/hub/app/(auth)/login/_components/Login.tsx

diff --git a/apps/hub/app/(auth)/login/_components/Login.tsx b/apps/hub/app/(auth)/login/_components/Login.tsx
new file mode 100644
index 00000000..204e18df
--- /dev/null
+++ b/apps/hub/app/(auth)/login/_components/Login.tsx
@@ -0,0 +1,44 @@
+'use client';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { signIn } from 'next-auth/react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export const Login = () => {
+  const schema = z.object({
+    email: z.string().email(),
+    password: z.string().min(6),
+  });
+
+  const form = useForm({
+    resolver: zodResolver(schema),
+  });
+  console.log(form.formState.errors);
+  return (
+    <form
+      className="flex flex-col space-y-4 "
+      onSubmit={form.handleSubmit(async () => {
+        const data = await signIn('credentials', {
+          redirect: false,
+          email: form.getValues('email'),
+          password: form.getValues('password'),
+        });
+        console.log(data);
+      })}
+    >
+      <input
+        {...form.register('email')}
+        placeholder="Email"
+        className="border border-gray-300 rounded-md p-2"
+      />
+      <input
+        {...form.register('password')}
+        placeholder="Password"
+        className="border border-gray-300 rounded-md p-2"
+      />
+      <button type="submit" className="bg-blue-500 text-white rounded-md p-2">
+        Login
+      </button>
+    </form>
+  );
+};
diff --git a/apps/hub/app/(auth)/login/page.tsx b/apps/hub/app/(auth)/login/page.tsx
index 87d591bb..bc0a3ddc 100644
--- a/apps/hub/app/(auth)/login/page.tsx
+++ b/apps/hub/app/(auth)/login/page.tsx
@@ -1,13 +1,12 @@
 import { Provider } from 'next-auth/providers/index';
 import { getProviders } from 'next-auth/react';
+import { Login } from './_components/Login';
 
 export default async () => {
-  const providers = await getProviders();
-  console.log(providers);
-
   return (
-    <div>
+    <div className="mx-auto max-w-sm ">
       <h1 className="text-5xl">Login</h1>
+      <Login />
     </div>
   );
 };
diff --git a/apps/hub/package.json b/apps/hub/package.json
index 8db519b3..77d7c5c6 100644
--- a/apps/hub/package.json
+++ b/apps/hub/package.json
@@ -9,13 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@repo/ui": "*",
     "bcryptjs": "^2.4.3",
     "next": "15.1.4",
     "next-auth": "^4.24.11",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/package-lock.json b/package-lock.json
index 85f51956..de5edcc9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,13 +38,16 @@
     "apps/hub": {
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.10.0",
         "@next-auth/prisma-adapter": "^1.0.7",
         "@repo/ui": "*",
         "bcryptjs": "^2.4.3",
         "next": "15.1.4",
         "next-auth": "^4.24.11",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.54.2",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -326,6 +329,14 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -6567,6 +6578,21 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8379,6 +8405,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "packages/database": {
       "name": "@repo/db",
       "version": "0.0.0",