improve profile view

Author: mms-gianni

client/src/components/profile/index.vue

@@ -3,14 +3,45 @@
     <v-row>
       <v-col cols="12" md="6" lg="4">
         <v-card class="pa-4">
-          <v-avatar size="80" class="mb-4">
-            <v-img :src="user.image || defaultAvatar" alt="User avatar" />
-          </v-avatar>
+          <div style="position: relative; display: inline-block;">
+            <v-avatar size="150" class="mb-4">
+              <v-img :src="user.image || defaultAvatar" alt="User avatar" />
+            </v-avatar>
+            <v-btn
+              icon
+              size="x-small"
+              color="secondary"
+              style="position: absolute; bottom: 8px; right: 8px; z-index: 2;"
+              @click="editAvatarDialog = true"
+            >
+              <v-icon>mdi-pencil</v-icon>
+            </v-btn>
+          </div>
           <h2 class="mb-1">{{ user.firstName }} {{ user.lastName }}</h2>
-          <div class="text--secondary mb-2">@{{ user.username }}</div>
+          <div class="text-h5 font-weight-bold mb-2">{{ user.username }}</div>
           <div class="mb-2">{{ user.email }}</div>
-          <v-chip v-if="user.role" color="primary" class="mb-2">{{ user.role.name }}</v-chip>
           <div class="text--secondary">Last login: <span v-if="user.lastLogin">{{ new Date(user.lastLogin).toLocaleString() }}</span><span v-else>-</span></div>
+          <v-dialog v-model="editAvatarDialog" max-width="400px">
+            <v-card>
+              <v-card-title>Edit Avatar</v-card-title>
+              <v-card-text>
+                <v-alert type="warning" density="compact" class="mb-2">
+                  The image must not exceed 100KB.
+                </v-alert>
+                <v-file-input
+                  v-model="avatarFile"
+                  label="Upload new avatar"
+                  accept="image/*"
+                  prepend-icon="mdi-image"
+                ></v-file-input>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="editAvatarDialog = false">Cancel</v-btn>
+                <v-btn color="primary" @click="saveAvatar">Save</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
         </v-card>
       </v-col>
       <v-col cols="12" md="6" lg="8">
@@ -35,14 +66,22 @@
             </v-list-item>
             <v-list-item>
               <v-list-item-title>Role</v-list-item-title>
-              <v-list-item-subtitle>{{ user.role ? user.role.name : '-' }}</v-list-item-subtitle>
+                
+                <v-chip
+                  class="ma-2"
+                  color="primary"
+                  label
+                  v-if="user.role"
+                >
+                  <v-icon icon="mdi-account-circle-outline" start></v-icon>
+                  {{ user.role.name}}
+                </v-chip>
+                <span v-else>-</span>
             </v-list-item>
             <v-list-item>
               <v-list-item-title>Groups</v-list-item-title>
-              <v-list-item-subtitle>
-                <v-chip v-for="group in user.userGroups" :key="group.id" class="ma-1" color="secondary">{{ group.name }}</v-chip>
+                <v-chip v-for="group in user.userGroups" :key="group.id" class="ma-1" color="grey">{{ group.name }}</v-chip>
                 <span v-if="!user.userGroups || user.userGroups.length === 0">-</span>
-              </v-list-item-subtitle>
             </v-list-item>
             <v-list-item>
               <v-list-item-title>Provider</v-list-item-title>
@@ -113,6 +152,8 @@ export default defineComponent({
     })
     const defaultAvatar = '/avatar.svg'
     const tokens = ref<any[]>([])
+    const editAvatarDialog = ref(false)
+    const avatarFile = ref<File | null>(null)
 
     const loadProfile = async () => {
       try {
@@ -141,6 +182,21 @@ export default defineComponent({
       }
     }
 
+    const saveAvatar = async () => {
+      if (!avatarFile.value) return
+      const formData = new FormData()
+      formData.append('avatar', avatarFile.value)
+      try {
+        await axios.post('/api/users/profile/avatar', formData, {
+          headers: { 'Content-Type': 'multipart/form-data' },
+        })
+        editAvatarDialog.value = false
+        await loadProfile()
+      } catch (e) {
+        // error handling
+      }
+    }
+
     onMounted(() => {
       loadProfile()
       loadTokens()
@@ -151,6 +207,9 @@ export default defineComponent({
       defaultAvatar,
       tokens,
       deleteToken,
+      editAvatarDialog,
+      avatarFile,
+      saveAvatar,
     }
   },
 })

server/src/users/users.controller.ts

@@ -10,6 +10,8 @@ import {
   Put,
   Request,
   UseGuards,
+  UploadedFile,
+  UseInterceptors,
 
 } from '@nestjs/common';
 import {
@@ -22,6 +24,8 @@ import { JwtAuthGuard } from '../auth/strategies/jwt.guard';
 import { OKDTO } from '../common/dto/ok.dto';
 import { User, UsersService } from './users.service';
 import { GetAllUsersDTO } from './dto/users.dto';
+import { FileInterceptor } from '@nestjs/platform-express';
+import { Express } from 'express';
 
 @Controller({ path: 'api/users', version: '1' })
 export class UsersController {
@@ -245,4 +249,33 @@ export class UsersController {
     const user = req.user;
     return this.usersService.findById(user.userId);
   }
+
+  @Post('/profile/avatar')
+  @UseGuards(JwtAuthGuard)
+  @UseInterceptors(FileInterceptor('avatar'))
+  @ApiBearerAuth('bearerAuth')
+  @ApiForbiddenResponse({
+    description: 'Error: Unauthorized',
+    type: OKDTO,
+    isArray: false,
+  })
+  @ApiOkResponse({
+    description: 'Update current User avatar',
+    type: GetAllUsersDTO,
+    isArray: false,
+  })
+  @ApiOperation({ summary: 'Update current User avatar' })
+  async updateProfileAvatar(
+    @Request() req: any,
+    @UploadedFile() file: any,
+  ) {
+    const user = req.user;
+    if (!file) {
+      throw new HttpException('No avatar file uploaded', HttpStatus.BAD_REQUEST);
+    }
+    if (file.size > 102400) { // 100KB
+      throw new HttpException('Avatar image too large (max 100KB)', HttpStatus.BAD_REQUEST);
+    }
+    return this.usersService.updateAvatar(user.userId, file);
+  }
 }

server/src/users/users.service.ts

@@ -20,8 +20,42 @@ export class UsersService {
     return this.prisma.user.findUnique({ where: { username } });
   }
 
-  async findById(userId: string): Promise<PrismaUser | null> {
-    return this.prisma.user.findUnique({ where: { id: userId } });
+  async findById(userId: string): Promise<PartialPrismaUser | null> {
+    return this.prisma.user.findUnique({
+      where: {
+        id: userId
+      },
+      select: {
+        id: true,
+        username: true,
+        email: true,
+        firstName: true,
+        lastName: true,
+        createdAt: true,
+        updatedAt: true,
+        isActive: true,
+        lastLogin: true,
+        lastIp: true,
+        provider: true,
+        providerId: true,
+        providerData: true,
+        image: true,
+        role: {
+          select: {
+            id: true,
+            name: true,
+            description: true
+          }
+        },
+        userGroups: {
+          select: {
+            id: true,
+            name: true,
+            description: true
+          }
+        },
+      } 
+    });
   }
 
   async findAll(): Promise<User[]> {
@@ -191,6 +225,21 @@ export class UsersService {
       }
     });
   }
+  /*
+  async generatePasswordHash(password: string): Promise<string> {
+    const salt = crypto.randomBytes(16).toString('hex');
+    const hash = crypto.pbkdf2Sync(password, salt, 1000, 64, 'sha512').toString('hex');
+    return `${salt}:${hash}`;
+  }
+  async verifyPassword(password: string, hash: string): Promise<boolean> {
+    const [salt, key] = hash.split(':');
+    const hashVerify = crypto.pbkdf2Sync(password, salt, 1000, 64, 'sha512').toString('hex');
+    return key === hashVerify;
+  }
+  async getUserByEmail(email: string): Promise<PrismaUser | null> {
+    return this.prisma.user.findUnique({ where: { email } });
+  }
+    */
 
   async findAllRoles(): Promise<any[]> {
     return this.prisma.role.findMany({
@@ -204,4 +253,23 @@ export class UsersService {
     });
   }
 
+  async updateAvatar(userId: string, avatarFile: any): Promise<PrismaUser | undefined> {
+    if (!avatarFile || !avatarFile.buffer) {
+      this.logger.warn('No avatar file buffer provided.');
+      return undefined;
+    }
+    // Store as base64 string in DB (for demo; in production, store in object storage or filesystem)
+    const base64Image = `data:${avatarFile.mimetype};base64,${avatarFile.buffer.toString('base64')}`;
+    try {
+      return await this.prisma.user.update({
+        where: { id: userId },
+        data: { image: base64Image },
+      });
+    } catch (error) {
+      this.logger.warn(`User with ID ${userId} not found for avatar update.`);
+      this.logger.debug(error);
+      return undefined;
+    }
+  }
+
 }