certain/web/src/pages/ChangePassword.jsx

import { useEffect, useState } from "react";
import { Navigate, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useAuth } from "../auth";
import { api, ApiError } from "../api";
import { useToast } from "../toast";
import BrandMark from "../components/BrandMark";
import Icon from "../components/Icon";
import PasswordInput from "../components/PasswordInput";
import PasswordRules from "../components/PasswordRules";
import { DEFAULT_POLICY, meetsPolicy } from "../passwordPolicy";

export default function ChangePassword() {
  const { user, aktualisieren } = useAuth();
  const { t } = useTranslation();
  const toast = useToast();
  const navigate = useNavigate();
  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [repeat, setRepeat] = useState("");
  const [policy, setPolicy] = useState(DEFAULT_POLICY);
  const [fehler, setFehler] = useState(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    // Fällt der Abruf aus, bleibt die Vorgabe stehen – verbindlich prüft
    // ohnehin der Server, hier geht es nur um die Anzeige.
    api.getPolicy().then(setPolicy).catch(() => {});
  }, []);

  if (!user) return <Navigate to="/login" replace />;
  const forced = user.must_change_password;
  const wegenRichtlinie = user.must_change_password_reason === "policy";
  const regelnErfuellt = meetsPolicy(policy, next, t);
  const bereit = regelnErfuellt && next === repeat && current.length > 0;

  async function onSubmit(e) {
    e.preventDefault();
    setFehler(null);
    if (next !== repeat) {
      setFehler(t("changepw.mismatch"));
      return;
    }
    setBusy(true);
    try {
      const updated = await api.changePassword(current, next);
      aktualisieren(updated);
      toast(t("changepw.saved"));
      navigate("/");
    } catch (err) {
      setFehler(err instanceof ApiError ? err.message : t("server.unreachable"));
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="auth-screen">
      <form className="card auth-card" onSubmit={onSubmit}>
        <BrandMark size={40} />
        <h1 style={{ textAlign: "center", marginTop: 0 }}>{t("changepw.title")}</h1>
        {forced && (
          <div className="alert" style={{ marginBottom: "var(--sp-3)" }}>
            <Icon name="key" size={16} />
            <span>{wegenRichtlinie ? t("changepw.policyHint") : t("changepw.forcedHint")}</span>
          </div>
        )}
        {fehler && (
          <div className="alert error" style={{ marginBottom: "var(--sp-3)" }}>
            <Icon name="alert" size={16} />
            <span>{fehler}</span>
          </div>
        )}

        <label className="field">
          <span>{t("changepw.current")}</span>
          <PasswordInput value={current} onChange={setCurrent}
                         autoComplete="current-password" required />
        </label>
        <label className="field">
          <span>{t("changepw.new")}</span>
          <PasswordInput value={next} onChange={setNext}
                         autoComplete="new-password" required />
        </label>
        <PasswordRules policy={policy} value={next} />
        <label className="field" style={{ marginTop: "var(--sp-3)" }}>
          <span>{t("changepw.repeat")}</span>
          <PasswordInput value={repeat} onChange={setRepeat}
                         autoComplete="new-password" required />
        </label>
        {repeat && next !== repeat && (
          <span className="hint-danger">
            <Icon name="alert" size={12} />
            {t("changepw.mismatch")}
          </span>
        )}

        <button className="btn primary" type="submit" disabled={busy || !bereit}
                style={{ width: "100%", marginTop: "var(--sp-3)" }}>
          {busy ? t("common.loading") : t("changepw.submit")}
        </button>
      </form>
    </div>
  );
}