feat: user profile customization: username, password, and avatar (#315)

frontend/src/app/[locale]/projects/[projectId]/members/CandidatesTable.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useCallback } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
-import Avatar from 'boring-avatars';
 import { UserType } from '@/types/user';
 import { MembersMessages } from '@/types/member';
+import UserAvatar from '@/components/UserAvatar';
 
 type Props = {
   candidates: UserType[];
@@ -24,14 +24,7 @@ export default function MembersTable({ candidates, onAddPress, messages }: Props
 
       switch (columnKey) {
         case 'avatar':
-          return (
-            <Avatar
-              size={16}
-              name={candidate.username}
-              variant="beam"
-              colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-            />
-          );
+          return <UserAvatar size={24} username={candidate.username} avatarPath={candidate.avatarPath} />;
         case 'email':
           return cellValue;
         case 'username':

frontend/src/app/[locale]/projects/[projectId]/members/MembersTable.tsx

@@ -14,10 +14,11 @@ import {
   DropdownItem,
 } from '@heroui/react';
 import { ChevronDown } from 'lucide-react';
-import Avatar from 'boring-avatars';
 import { MemberType, UserType } from '@/types/user';
 import { memberRoles } from '@/config/selection';
 import { MembersMessages } from '@/types/member';
+import Config from '@/config/config';
+import UserAvatar from '@/components/UserAvatar';
 
 type Props = {
   members: MemberType[];
@@ -56,14 +57,7 @@ export default function MembersTable({ members, isDisabled, onChangeRole, onDele
 
     switch (columnKey) {
       case 'avatar':
-        return (
-          <Avatar
-            size={24}
-            name={member.User.username}
-            variant="beam"
-            colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-          />
-        );
+        return <UserAvatar size={24} username={member.User.username} avatarPath={member.User.avatarPath} />;
       case 'email':
         return member.User.email;
       case 'username':

frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { useState, useEffect, useContext } from 'react';
 import { Button, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@heroui/react';
-import Avatar from 'boring-avatars';
 import { Pencil, Trash } from 'lucide-react';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
@@ -13,6 +12,7 @@ import ProjectDialog from '@/components/ProjectDialog';
 import { UserType } from '@/types/user';
 import { findUser } from '@/utils/usersControl';
 import { logError } from '@/utils/errorHandler';
+import UserAvatar from '@/components/UserAvatar';
 
 type Props = {
   projectId: string;
@@ -130,12 +130,7 @@ export default function SettingsPage({ projectId, messages, projectDialogMessage
               <TableCell>{messages.projectOwner}</TableCell>
               <TableCell>
                 <div className="flex gap-2 items-center">
-                  <Avatar
-                    size={24}
-                    name={owner.username}
-                    variant="beam"
-                    colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
-                  />
+                  <UserAvatar size={24} username={owner.username} avatarPath={owner.avatarPath} />
                   <p className="">{owner.username}</p>
                 </div>
               </TableCell>