Title

        // action.js
        "use server";
        export async function loginAction(prevData, formData) {
          const data = {
            id_user: formData.get("id_user"),
            password: formData.get("password"),
          };
          const req = await fetch("https://demo4.zakialawi.my.id/api/auth/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
          });
          const res = await req.json();
          if (req.ok) {
            return res;
          } else {
            return {
              ...res,
              data: {
                id_user: data.id_user,
              },
            };
          }
        }

        // page.jsx
        "use client";
        import { loginAction } from "../action";
        import { useActionState } from "react";

          const initialState = {
            data: {
              id_user: "",
              password: "",
            },
            message: "",
            success: null,
          };

          export default function LoginPage() {
          const [state, formAction, pending] = useActionState(loginAction, initialState);

          ** can add useEffect here for showing message or something with state depends **

          <form action={formAction}>
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="id_user">Email/Username</Label>
                <Input
                  id="id_user"
                  type="text"
                  name="id_user"
                  defaultValue={state?.data?.id_user}
                  placeholder="you@example.com"
                  disabled={pending}
                  required
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="password">Password</Label>
                <Input id="password" type="password" name="password" disabled={pending} required />
              </div>
            </div>
            <Button type="submit" className="w-full mt-4" disabled={pending}>
              Sign In
            </Button>
          </form>