yes

2024-07-06 23:23:01 +02:00
parent 169ba29253
commit c9e7717130
39 changed files with 395 additions and 326 deletions
@@ -0,0 +1,32 @@
+'use client'
+
+import { serverAttemptAuthenticateUser } from "@/app/lib/actions/actions";
+import { useFormState, useFormStatus } from "react-dom";
+
+
+export default function CLoginForm(){
+    const [loginResult, dispatch] = useFormState(serverAttemptAuthenticateUser, undefined);
+
+    return (
+    <form className="bg-background-400 border-4 border-primary-500 drop-shadow-md w-fit p-3 rounded-lg flex flex-col gap-1" action={dispatch}>
+        <label htmlFor="input_username">Username</label>
+        <input type="text" name="input_username" id="input_username" className="bg-secondary border-2 border-primary rounded-lg drop-shadow-md" />
+        <label htmlFor="input_password">Password</label>
+        <input type="password" name="input_password" id="input_password" className="bg-secondary outline-primary border-2 border-primary rounded-lg drop-shadow-md shadow-inner shadow-primary" />
+        <LoginButton></LoginButton>
+        <div>{loginResult?.errorMessage && <p>{loginResult?.errorMessage}</p>}</div>
+        <div className="flex flex-col w-[400px] break-words ">
+            <p>{""+loginResult?.cookie}</p>
+        </div>
+    </form>);
+}
+
+function LoginButton() {
+    const { pending } = useFormStatus()
+   
+    return (
+      <button aria-disabled={pending} className="mr-auto bg-secondary-200 outline outline-2 border-5 p-3 mt-3 rounded-lg outline-secondary-500  shadow-primary" type="submit">
+        {!pending ? 'Sign In' : 'Pending Sign In...'}
+      </button>
+    )
+  }