75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Form from "next/form";
|
|
import { handleLogin } from "./action";
|
|
|
|
export default function FormComponent() {
|
|
return (
|
|
<Form action={handleLogin}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "1rem",
|
|
fontSize: 14,
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
Username:
|
|
<input
|
|
type="text"
|
|
style={{
|
|
height: "2rem",
|
|
backgroundColor: "#333",
|
|
borderStyle: "none",
|
|
color: "#eee",
|
|
fontSize: 16,
|
|
padding: "0.5rem 1rem",
|
|
}}
|
|
name="username"
|
|
required
|
|
/>
|
|
</div>
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
Password:
|
|
<input
|
|
type="password"
|
|
style={{
|
|
height: "2rem",
|
|
backgroundColor: "#333",
|
|
borderStyle: "none",
|
|
color: "#eee",
|
|
fontSize: 16,
|
|
padding: "0.5rem 1rem",
|
|
}}
|
|
name="password"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<button
|
|
style={{
|
|
backgroundColor: "#333",
|
|
borderStyle: "none",
|
|
color: "#eee",
|
|
fontSize: "1rem",
|
|
padding: "0.5rem 1rem",
|
|
transition: "background-color 0.3s linear",
|
|
cursor: "pointer",
|
|
}}
|
|
onMouseOver={(e) => {
|
|
e.currentTarget.style.backgroundColor = "#444";
|
|
}}
|
|
onMouseOut={(e) => {
|
|
e.currentTarget.style.backgroundColor = "#333";
|
|
}}
|
|
type="submit"
|
|
>
|
|
Login
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Form>
|
|
);
|
|
}
|