Add edit profile form

src/renderer/features/titlebar/components/app-menu.tsx

@@ -1,5 +1,5 @@
 import { Group } from '@mantine/core';
-import { openModal } from '@mantine/modals';
+import { closeAllModals, openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   RiLock2Line,
@@ -14,11 +14,13 @@ import {
 } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { queryKeys } from '@/renderer/api/query-keys';
+import { UserDetailResponse } from '@/renderer/api/users.api';
 import { Button, DropdownMenu, Text } from '@/renderer/components';
 import { ServerList, useServerList } from '@/renderer/features/servers';
 import { Settings } from '@/renderer/features/settings';
 import { usePermissions } from '@/renderer/features/shared';
 import { UserList } from '@/renderer/features/users';
+import { EditUserForm } from '@/renderer/features/users/components/edit-user-form';
 import { useAuthStore } from '@/renderer/store';
 
 export const AppMenu = () => {
@@ -30,6 +32,10 @@ export const AppMenu = () => {
   const serverCredentials = useAuthStore((state) => state.serverCredentials);
   const permissions = usePermissions();
   const { data: servers } = useServerList();
+  const userId = useAuthStore((state) => state.permissions.id);
+  const user = queryClient.getQueryData<UserDetailResponse>(
+    queryKeys.users.detail(userId)
+  );
 
   const serverList =
     servers?.data?.map((s) => ({
@@ -54,6 +60,23 @@ export const AppMenu = () => {
     });
   };
 
+  const handleEditProfileModal = () => {
+    openModal({
+      centered: true,
+      children: (
+        <EditUserForm
+          repeatPassword
+          user={user?.data}
+          onCancel={closeAllModals}
+        />
+      ),
+      exitTransitionDuration: 300,
+      overflow: 'inside',
+      title: 'Edit Profile',
+      transition: 'slide-down',
+    });
+  };
+
   const handleManageUsersModal = () => {
     openModal({
       centered: true,
@@ -130,7 +153,10 @@ export const AppMenu = () => {
           Settings
         </DropdownMenu.Item>
         <DropdownMenu.Divider />
-        <DropdownMenu.Item rightSection={<RiProfileLine />}>
+        <DropdownMenu.Item
+          rightSection={<RiProfileLine />}
+          onClick={handleEditProfileModal}
+        >
           Edit profile
         </DropdownMenu.Item>
         {permissions.isAdmin && (

src/renderer/features/users/components/edit-user-form.tsx

@@ -13,12 +13,17 @@ import { usePermissions } from '@/renderer/features/shared';
 import { useUpdateUser } from '@/renderer/features/users/mutations/update-user';
 import { randomString } from '@/renderer/utils';
 
-interface AddUserFormProps {
+interface EditUserFormProps {
   onCancel: () => void;
+  repeatPassword?: boolean;
   user?: User;
 }
 
-export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
+export const EditUserForm = ({
+  user,
+  onCancel,
+  repeatPassword,
+}: EditUserFormProps) => {
   const permissions = usePermissions();
   const focusTrapRef = useFocusTrap(true);
   const clipboard = useClipboard({ timeout: 1000 });
@@ -28,6 +33,7 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
       displayName: user?.displayName || '',
       isAdmin: user?.isAdmin || false,
       password: '',
+      repeatPassword: '',
       username: user?.username || '',
     },
   });
@@ -39,6 +45,11 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
     toast.info({ message: 'Password copied to clipboard' });
   };
 
+  const isSubmitValid = () => {
+    if (!repeatPassword) return true;
+    return form.values.password === form.values.repeatPassword;
+  };
+
   const updateUserMutation = useUpdateUser();
 
   const handleUpdateUser = form.onSubmit((values) => {
@@ -48,6 +59,7 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
       ...values,
       displayName: values.displayName || undefined,
       password: values.password || undefined,
+      repeatPassword: values.repeatPassword || undefined,
     };
 
     updateUserMutation.mutate(
@@ -82,6 +94,13 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
           {...form.getInputProps('displayName')}
         />
         <PasswordInput label="Password" {...form.getInputProps('password')} />
+        {repeatPassword && (
+          <PasswordInput
+            label="Repeat password"
+            {...form.getInputProps('repeatPassword')}
+          />
+        )}
+
         <Group position="apart">
           {permissions.isAdmin && !user?.isSuperAdmin ? (
             <Group>
@@ -93,14 +112,16 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
           ) : (
             <Group />
           )}
-          <Button
+          {!repeatPassword && (
-            compact
+            <Button
-            sx={{ height: '1.5rem' }}
+              compact
-            variant="subtle"
+              sx={{ height: '1.5rem' }}
-            onClick={handleGeneratePassword}
+              variant="subtle"
-          >
+              onClick={handleGeneratePassword}
-            Generate password
+            >
-          </Button>
+              Generate password
+            </Button>
+          )}
         </Group>
 
         <Group mt={10} position="right">
@@ -108,6 +129,7 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
             Cancel
           </Button>
           <Button
+            disabled={!isSubmitValid()}
             loading={updateUserMutation.isLoading}
             type="submit"
             variant="filled"
@@ -121,5 +143,6 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
 };
 
 EditUserForm.defaultProps = {
+  repeatPassword: false,
   user: undefined,
 };

src/renderer/features/users/mutations/update-user.ts

@@ -36,8 +36,11 @@ export const useUpdateUser = () => {
 
       return { previous };
     },
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries(queryKeys.users.list());
+      queryClient.invalidateQueries(
+        queryKeys.users.detail(variables.query.userId)
+      );
     },
   });