32 lines
1.5 KiB
TypeScript
32 lines
1.5 KiB
TypeScript
'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>
|
|
)
|
|
} |