craftvia/src/components/force-password-change-form.tsx

"use client";

import { useActionState } from "react";
import { changeOwnPassword, type ChangePwState } from "@/server/actions/account";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const initial: ChangePwState = { status: "idle" };

export function ForcePasswordChangeForm({ policyHint }: { policyHint: string }) {
  const [state, action, pending] = useActionState(changeOwnPassword, initial);
  return (
    <form action={action} className="space-y-4">
      <div>
        <Label htmlFor="password">Neues Passwort</Label>
        <Input id="password" name="password" type="password" required autoComplete="new-password" className="mt-1" />
        <p className="mt-1 text-[11px] text-muted-foreground">Anforderungen: {policyHint}</p>
      </div>
      <div>
        <Label htmlFor="confirm">Neues Passwort wiederholen</Label>
        <Input id="confirm" name="confirm" type="password" required autoComplete="new-password" className="mt-1" />
      </div>
      {state.status === "error" && (
        <p role="alert" className="rounded-lg bg-[rgba(255,107,107,0.16)] px-3 py-2 text-sm text-[var(--risk)]">{state.message}</p>
      )}
      <Button type="submit" disabled={pending} className="w-full">{pending ? "Speichere…" : "Passwort setzen & fortfahren"}</Button>
    </form>
  );
}