From 94c1f735435a91c921a18870a30809ef9d151eae Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 10 Sep 2024 18:45:16 +0100
Subject: [PATCH] Adding missing button

---
 .../components/signin/CredentialsButton.tsx   | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/app/components/signin/CredentialsButton.tsx

diff --git a/src/app/components/signin/CredentialsButton.tsx b/src/app/components/signin/CredentialsButton.tsx
new file mode 100644
index 00000000..0104c682
--- /dev/null
+++ b/src/app/components/signin/CredentialsButton.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { useState, useEffect, SetStateAction } from "react";
+import { Input } from "@/app/shadcn_components/ui/input";
+import { Button } from "@/app/shadcn_components/ui/button";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+
+export default function EmailSignInButton({
+  error: initialError,
+}: {
+  error: string | undefined;
+}) {
+  const [email, setEmail] = useState("");
+  const [error, setError] = useState(initialError);
+
+  const handleSubmit = async (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    const res = await signIn("credentials", {
+      email,
+    });
+
+    if (res?.error) {
+      setError("You are not a valid user.");
+    } else {
+      console.log("Login successful");
+    }
+  };
+
+  const handleEmailChange = (e: {
+    target: { value: SetStateAction<string> };
+  }) => {
+    setEmail(e.target.value);
+    if (error) {
+      setError(undefined); // Clear the error when the user starts typing
+    }
+  };
+
+  // Sync initial error state with server-side error prop
+  useEffect(() => {
+    setError(initialError);
+  }, [initialError]);
+
+  return (
+    <form onSubmit={handleSubmit} className="w-full">
+      {/* Wrapper to control width and layout */}
+      <div className="flex items-center w-full space-x-1">
+        {/* Email input field using shadcn input */}
+        <Input
+          type="email"
+          value={email}
+          onChange={handleEmailChange}
+          placeholder="Enter your email"
+          required
+          className="flex-1 h-10 rounded-lg border-gray-300" // Full width input
+        />
+        <Button
+          type="submit"
+          className="h-10 w-10 bg-brandblue text-white hover:bg-hoverblue rounded-lg flex items-center justify-center" // Fixed size button
+        >
+          <ChevronRightIcon className="h-5 w-5" />
+        </Button>
+      </div>
+
+      {/* Reserve space for the error message */}
+      <div className="min-h-[3rem] text-center">
+        {error && <p className="text-red-500">You are not a valid user.</p>}
+      </div>
+    </form>
+  );
+}