Use Boring Avatar to show user avatar

Author: kimatata

.vscode/settings.json

@@ -3,5 +3,5 @@
   "editor.formatOnSave": true,
   "prettier.useEditorConfig": false,
   "prettier.useTabs": false,
-  "prettier.configPath": ".prettierrc"
+  "prettier.configPath": "./.prettierrc"
 }

backend/routes/auth/signup.js

@@ -11,7 +11,7 @@ module.exports = function (sequelize) {
 
   router.post('/signup', async (req, res) => {
     try {
-      const { email, password, username, avatarPath } = req.body;
+      const { email, password, username } = req.body;
       const hashedPassword = await bcrypt.hash(password, 10);
 
       const userCount = await User.count();
@@ -25,7 +25,6 @@ module.exports = function (sequelize) {
         password: hashedPassword,
         username: username,
         role: initialRole,
-        avatarPath: avatarPath,
       });
 
       const accessToken = jwt.sign({ userId: user.id }, 'your-secret-key', {

frontend/config/selection.ts

@@ -55,20 +55,4 @@ const testRunCaseStatus = [
   { uid: 'skipped', color: 'primary', chartColor: '#805aab' },
 ];
 
-const avatars = [
-  '/avatar/bear.png',
-  '/avatar/cat.png',
-  '/avatar/cow.png',
-  '/avatar/dog.png',
-  '/avatar/giraffe.png',
-  '/avatar/koala.png',
-  '/avatar/lion.png',
-  '/avatar/owl.png',
-  '/avatar/panda.png',
-  '/avatar/penguin.png',
-  '/avatar/rhinoceros.png',
-  '/avatar/shark.png',
-  '/avatar/sloth.png',
-];
-
-export { roles, priorities, testTypes, automationStatus, templates, testRunStatus, testRunCaseStatus, avatars };
+export { roles, priorities, testTypes, automationStatus, templates, testRunStatus, testRunCaseStatus };

frontend/package-lock.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "18.2.7",
     "apexcharts": "^3.49.0",
     "autoprefixer": "10.4.16",
+    "boring-avatars": "^1.10.2",
     "clsx": "^2.0.0",
     "dayjs": "^1.11.10",
     "eslint": "8.48.0",

frontend/package.json

@@ -1,7 +1,8 @@
 'use client';
 import { useContext } from 'react';
-import { Avatar, Card, CardHeader, CardBody, Divider } from '@nextui-org/react';
+import { Card, CardHeader, CardBody, Divider } from '@nextui-org/react';
 import { TokenContext } from '../TokenProvider';
+import Avatar from 'boring-avatars';
 
 type AccountPageMessages = {
   yourProjects: string;
@@ -20,7 +21,12 @@ export default function AccountPage({ messages, locale }: Props) {
       {context.token && context.token.user && (
         <Card className="w-[600px] mt-16 mx-3">
           <CardHeader className="flex gap-6">
-            <Avatar isBordered radius="full" className="w-16 h-16 text-large" src={context.token.user.avatarPath} />
+            <Avatar
+              size={48}
+              name={context.token.user.username}
+              variant="beam"
+              colors={['#0A0310', '#49007E', '#FF005B', '#FF7D10', '#FFB238']}
+            />
             <div className="flex flex-col">
               <p className="text-2xl font-bold">{context.token.user.username}</p>
               <p className="text-lg text-default-500">{context.token.user.email}</p>

frontend/public/avatar/bear.png

@@ -57,8 +57,6 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
       }
     }
 
-    const initialavatarPath = getRandomAvatarPath();
-    user.avatarPath = initialavatarPath;
     await submit();
   };