RHL-044 feat(profile): show success alert after forced password change

components/profile/ChangePasswordCard.jsx

@@ -33,8 +33,8 @@ function isNonEmptyString(value) {
 	return typeof value === "string" && value.trim().length > 0;
 }
 
-export default function ChangePasswordCard() {
-	const { status, user } = useAuth();
+export default function ChangePasswordCard({ onPasswordChangeSuccess }) {
+	const { status, user, retry } = useAuth();
 	const isAuthenticated = status === "authenticated" && user;
 
 	const [currentPassword, setCurrentPassword] = React.useState("");
@@ -141,6 +141,14 @@ export default function ChangePasswordCard() {
 				title: "Passwort geändert",
 				description: "Ihr Passwort wurde erfolgreich aktualisiert.",
 			});
+
+			if (typeof onPasswordChangeSuccess === "function") {
+				onPasswordChangeSuccess();
+			}
+
+			if (typeof retry === "function") {
+				retry();
+			}
 		} catch (err) {
 			if (err instanceof ApiClientError) {
 				if (err.code === "AUTH_UNAUTHENTICATED") {

components/profile/ProfilePage.jsx

@@ -5,6 +5,7 @@ import { useAuth } from "@/components/auth/authContext";
 
 import ChangePasswordCard from "@/components/profile/ChangePasswordCard";
 
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import {
 	Card,
 	CardHeader,
@@ -23,6 +24,7 @@ function formatRole(role) {
 
 export default function ProfilePage() {
 	const { status, user } = useAuth();
+	const [passwordChangedSuccess, setPasswordChangedSuccess] = React.useState(false);
 
 	const isAuthenticated = status === "authenticated" && user;
 
@@ -30,6 +32,13 @@ export default function ProfilePage() {
 	const branchLabel = isAuthenticated ? user.branchId || "—" : "—";
 	const emailLabel = isAuthenticated ? user.email || "—" : "—";
 	const userIdLabel = isAuthenticated ? user.userId || "—" : "—";
+	const mustChangePassword = isAuthenticated && user.mustChangePassword === true;
+
+	React.useEffect(() => {
+		if (mustChangePassword) {
+			setPasswordChangedSuccess(false);
+		}
+	}, [mustChangePassword]);
 
 	return (
 		<div className="space-y-4">
@@ -40,6 +49,25 @@ export default function ProfilePage() {
 				</p>
 			</div>
 
+			{mustChangePassword ? (
+				<Alert variant="destructive">
+					<AlertTitle>Passwortänderung erforderlich</AlertTitle>
+					<AlertDescription>
+						Sie müssen Ihr Passwort ändern, bevor Sie fortfahren können.
+					</AlertDescription>
+				</Alert>
+			) : null}
+
+			{!mustChangePassword && passwordChangedSuccess ? (
+				<Alert className="border-emerald-500/40 bg-emerald-50 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-950/40 dark:text-emerald-100">
+					<AlertTitle>Passwort erfolgreich geändert</AlertTitle>
+					<AlertDescription className="text-emerald-800 dark:text-emerald-200">
+						Ihr Passwort wurde erfolgreich aktualisiert. Sie können jetzt normal
+						weiterarbeiten.
+					</AlertDescription>
+				</Alert>
+			) : null}
+
 			<Card>
 				<CardHeader>
 					<CardTitle>Konto</CardTitle>
@@ -74,7 +102,9 @@ export default function ProfilePage() {
 				</CardContent>
 			</Card>
 
-			<ChangePasswordCard />
+			<ChangePasswordCard
+				onPasswordChangeSuccess={() => setPasswordChangedSuccess(true)}
+			/>
 
 			{!isAuthenticated ? (
 				<p className="text-xs text-muted-foreground">