Fix user selection

frontend/src/components/users/UserEditForm.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import type {UserDto} from "../../api/dtos/UserDto";
 import Button from "../basics/Button";
 import {ButtonType} from "../basics/BasicButtonDefinitions";
@@ -33,6 +33,21 @@ export default function UserEditForm({
     const [confirmPassword, setConfirmPassword] = useState("");
     const [passwordError, setPasswordError] = useState("");
 
+    /**
+     * React to changes in selected user.
+     *
+     * When a new user is selected, the edit user must be updated and password fields as well as error messege
+     * must be reset.
+     */
+    useEffect(() => {
+        setEditedUser({...user});
+        setPassword("");
+        setConfirmPassword("");
+        setPasswordError("");
+    }, [user]);
+    /**
+     * Calls on save after validating passwords for new user.
+     */
     const handleSave = async () => {
         if (!editedUser.id) {
             // New user - validate passwords
@@ -52,7 +67,9 @@ export default function UserEditForm({
         }
     };
 
-    // @todo API string
+    /**
+     * All available roles
+     */
     const roleOptions = UserRoleHelper.getRoleOptions();
 
     return (

frontend/src/components/users/UserList.tsx

@@ -11,6 +11,7 @@ type UserListProps = {
  * UserList - Displays a list of users with selection
  */
 export default function UserList({users, selectedUser, onSelectUser}: UserListProps) {
+
     const formatUserName = (user: UserDto) => {
         const parts = [];
         if (user.lastName) parts.push(user.lastName);
@@ -29,7 +30,10 @@ export default function UserList({users, selectedUser, onSelectUser}: UserListPr
                             "px-4 py-3 cursor-pointer hover:bg-gray-200 transition-colors border-b border-gray-300",
                             selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200"
                         )}
-                        onClick={() => onSelectUser(user)}
+                        onClick={() => {
+                            console.log("selecting user", user.userName);
+                            onSelectUser(user)
+                        }}
                     >
                         <div className={clsx(
                             "text-base",

frontend/src/components/users/UserManagementPage.tsx

@@ -39,7 +39,6 @@ export default function UserManagementPage() {
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
-    //@todo API enum
     const isAdmin = currentUser?.role === UserRole.ADMIN;
 
     // Load current user and user list (if admin)
@@ -47,6 +46,12 @@ export default function UserManagementPage() {
         loadData();
     }, []);
 
+    /**
+     * Load data for user management page
+     *
+     * An admin can see all users while a normal user can only see his own user data.
+     * Initially, the current user is selected.
+     */
     const loadData = async () => {
         try {
             const me = await fetchCurrentUser();
@@ -133,7 +138,7 @@ export default function UserManagementPage() {
         setIsPasswordModalOpen(true);
     };
 
-    /** Handles creating a new user (admin only) */
+    /** Add new empty user */
     const handleAddUser = () => {
         setSelectedUser({
             userName: "",
@@ -158,6 +163,7 @@ export default function UserManagementPage() {
                                 buttonType={ButtonType.PrimaryButton}
                             />
                         )}
+                        {/* Leave user management and return to recipe list. @todo handle unsaved changes?*/}
                         <ButtonLink icon={X} to={getRecipeListUrl()}/>
                     </ButtonGroupLayout>
                 </StickyHeader>