feat : signature is turned to base64 inorder to

Backend/routes/auth.js

@@ -125,24 +125,19 @@ router.get('/me', protect, async (req, res) => {
 // @route   POST /api/auth/signature
 // @desc    Upload digital signature image
 // @access  Private
-router.post('/signature', protect, upload.single('signature'), async (req, res) => {
+router.post('/signature', protect, async (req, res) => {
   try {
     const user = await User.findById(req.user._id);
     if (!user) return res.status(404).json({ message: 'User not found' });
 
-    if (!req.file) {
-      return res.status(400).json({ message: 'Please upload an image file' });
+    const { signature } = req.body;
+    if (!signature) {
+      return res.status(400).json({ message: 'Please provide a base64 signature' });
     }
 
-    if (user.signature) {
-      const oldPath = path.join(__dirname, '..', 'uploads', path.basename(user.signature));
-      if (fs.existsSync(oldPath)) fs.unlinkSync(oldPath);
-    }
-
-    const newSignaturePath = `/uploads/${req.file.filename}`;
-    await User.updateOne({ _id: user._id }, { signature: newSignaturePath });
+    await User.updateOne({ _id: user._id }, { signature });
 
-    res.json({ message: 'Signature uploaded successfully', signature: newSignaturePath });
+    res.json({ message: 'Signature saved successfully', signature });
   } catch (error) {
     res.status(500).json({ message: 'Server error', error: error.message });
   }

Frontend/src/app/pages/Interviewer/group-interview/group-interview.html

@@ -544,7 +544,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (ev.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/Interviewer/individual-interview/individual-interview.html

@@ -383,7 +383,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (getEvaluationByRole(roleObj.id)?.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/ProjectManager/group-interview/group-interview.html

@@ -544,7 +544,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (ev.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/ProjectManager/individual-interview/individual-interview.html

@@ -388,7 +388,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (getEvaluationByRole(roleObj.id)?.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/admin/group-interview/group-interview.html

@@ -806,7 +806,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (ev.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/admin/individual-interview/individual-interview.html

@@ -515,7 +515,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (getEvaluationByRole(roleObj.id)?.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/admin/user-history/user-history.ts

@@ -218,7 +218,7 @@ export class UserHistoryComponent implements OnInit {
 
     const getSigHtml = (evalObj: any, fallbackName: string) => {
       if (evalObj && evalObj.evaluatorId && evalObj.evaluatorId.signature) {
-        return `<img src="http://localhost:5000${evalObj.evaluatorId.signature}" alt="Signature"/>`;
+        return `<img src="${evalObj.evaluatorId.signature}" alt="Signature"/>`;
       }
       return fallbackName || '';
     };

Frontend/src/app/pages/hr/group-interview/group-interview.html

@@ -807,7 +807,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (ev.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="ev.evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/hr/individual-interview/individual-interview.html

@@ -515,7 +515,7 @@
         <div class="print-signature" style="display: flex; align-items: flex-end;">
           <strong>Evaluator's Signature:</strong>
           @if (getEvaluationByRole(roleObj.id)?.evaluatorId?.signature) {
-            <img [src]="'http://localhost:5000' + getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
+            <img [src]="getEvaluationByRole(roleObj.id).evaluatorId.signature" style="max-height: 40px; margin-left: 10px;">
           } @else {
             <span style="border-bottom: 1px solid #000; display: inline-block; width: 150px; margin-left: 10px;"></span>
           }

Frontend/src/app/pages/hr/user-history/user-history.ts

@@ -218,7 +218,7 @@ export class HRUserHistoryComponent implements OnInit {
 
     const getSigHtml = (evalObj: any, fallbackName: string) => {
       if (evalObj && evalObj.evaluatorId && evalObj.evaluatorId.signature) {
-        return `<img src="http://localhost:5000${evalObj.evaluatorId.signature}" style="max-height:35px; width:auto; object-fit:contain; vertical-align:bottom; display:block; margin:auto;" alt="${fallbackName}'s Signature"/>`;
+        return `<img src="${evalObj.evaluatorId.signature}" style="max-height:35px; width:auto; object-fit:contain; vertical-align:bottom; display:block; margin:auto;" alt="${fallbackName}'s Signature"/>`;
       }
       return fallbackName || '';
     };

Frontend/src/app/pages/staff/profile/profile.ts

@@ -85,23 +85,29 @@ export class StaffProfileComponent implements OnInit {
     const file = event.target.files[0];
     if (!file) return;
 
-    this.isUploadingSignature.set(true);
-    const formData = new FormData();
-    formData.append('signature', file);
-
-    this.authService.uploadSignature(formData).subscribe({
-      next: (res) => {
-        this.isUploadingSignature.set(false);
-        if (res.signature) {
-          // Update user signal
-          this.user.update(u => ({ ...u, signature: res.signature }));
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64String = reader.result as string;
+      this.isUploadingSignature.set(true);
+      
+      this.authService.uploadSignature({ signature: base64String }).subscribe({
+        next: (res) => {
+          this.isUploadingSignature.set(false);
+          if (res.signature) {
+            // Update user signal
+            this.user.update(u => ({ ...u, signature: res.signature }));
+          }
+        },
+        error: (err) => {
+          this.isUploadingSignature.set(false);
+          alert(err.error?.message || 'Error uploading signature');
         }
-      },
-      error: (err) => {
-        this.isUploadingSignature.set(false);
-        alert(err.error?.message || 'Error uploading signature');
-      }
-    });
+      });
+    };
+    reader.onerror = () => {
+      alert('Failed to read file');
+    };
+    reader.readAsDataURL(file);
   }
 
   deleteSignature(): void {
@@ -116,6 +122,7 @@ export class StaffProfileComponent implements OnInit {
   getSignatureUrl(): string {
     const signature = this.user()?.signature;
     if (!signature) return '';
-    return `http://localhost:5000${signature}`;
+    // Since signature is a base64 data URI, we just return it directly
+    return signature;
   }
 }

Frontend/src/app/services/auth.service.ts

@@ -56,8 +56,8 @@ export class AuthService {
     return this.http.get(`${this.apiUrl}/me`);
   }
 
-  uploadSignature(formData: FormData): Observable<any> {
-    return this.http.post(`${this.apiUrl}/signature`, formData);
+  uploadSignature(payload: { signature: string }): Observable<any> {
+    return this.http.post(`${this.apiUrl}/signature`, payload);
   }
 
   updateProfile(formData: FormData): Observable<any> {