varminer-app-header 2.1.4 → 2.1.6

package/dist/index.js

@@ -340,6 +340,209 @@ const getAllDataFromStorage = () => {
         };
     }
 };
+/**
+ * Get profile picture URL from object store API using tenant_id and user_id from JWT token
+ * @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
+ * @returns Profile picture URL or null if tenant_id or user_id is not available
+ */
+const getProfilePictureUrl = (baseUrl = "http://objectstore.impact0mics.local:9012") => {
+    try {
+        const allData = getAllDataFromStorage();
+        // Get tenant_id and user_id from decoded token
+        let tenantId = null;
+        let userId = null;
+        if (allData.decodedToken) {
+            tenantId = allData.decodedToken.tenant_id || allData.decodedToken.tenant || null;
+            userId = allData.decodedToken.user_id || null;
+        }
+        // If not found in decoded token, try auth data
+        if ((!tenantId || !userId) && allData.auth) {
+            tenantId = tenantId || allData.auth.tenant_id || allData.auth.tenant || null;
+            userId = userId || allData.auth.user_id || null;
+        }
+        // Construct URL if we have both tenant_id and user_id
+        if (tenantId && userId) {
+            // Remove trailing slash from baseUrl if present
+            const cleanBaseUrl = baseUrl.replace(/\/$/, '');
+            return `${cleanBaseUrl}/v1/objectStore/profilePicture/path/${tenantId}/${userId}`;
+        }
+        return null;
+    }
+    catch (err) {
+        console.error("Error getting profile picture URL:", err);
+        return null;
+    }
+};
+/**
+ * Generate AWS S3 presigned URL for accessing S3 object
+ * @param s3Url - Full S3 URL (e.g., https://bucket.s3.region.amazonaws.com/key)
+ * @param accessKeyId - AWS Access Key ID
+ * @param secretAccessKey - AWS Secret Access Key
+ * @param region - AWS Region (default: ap-south-2)
+ * @param expiresIn - Expiration time in seconds (default: 3600 = 1 hour)
+ * @returns Presigned URL string
+ */
+const generateS3PresignedUrl = async (s3Url, accessKeyId, secretAccessKey, region = "ap-south-2", expiresIn = 3600) => {
+    try {
+        // Parse S3 URL to extract bucket, region, and key
+        // Format: https://bucket.s3.region.amazonaws.com/key or https://bucket.s3-region.amazonaws.com/key
+        const url = new URL(s3Url);
+        const hostnameParts = url.hostname.split('.');
+        let bucket = hostnameParts[0];
+        let extractedRegion = region;
+        // Try to extract region from hostname (format: bucket.s3.region.amazonaws.com)
+        if (hostnameParts.length >= 3 && hostnameParts[1] === 's3') {
+            extractedRegion = hostnameParts[2] || region;
+        }
+        else if (hostnameParts.length >= 2 && hostnameParts[1].startsWith('s3-')) {
+            // Format: bucket.s3-region.amazonaws.com
+            extractedRegion = hostnameParts[1].substring(3) || region;
+        }
+        const key = url.pathname.substring(1); // Remove leading slash
+        // AWS credentials
+        const awsAccessKeyId = accessKeyId;
+        const awsSecretAccessKey = secretAccessKey;
+        const awsRegion = extractedRegion;
+        // Current timestamp
+        const now = new Date();
+        const dateStamp = now.toISOString().slice(0, 10).replace(/-/g, '');
+        const amzDate = dateStamp + 'T' + now.toISOString().slice(11, 19).replace(/[:-]/g, '') + 'Z';
+        // Step 1: Create canonical request
+        const canonicalUri = '/' + encodeURIComponent(key).replace(/%2F/g, '/');
+        const canonicalQuerystring = `X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=${encodeURIComponent(awsAccessKeyId + '/' + dateStamp + '/' + awsRegion + '/s3/aws4_request')}&X-Amz-Date=${amzDate}&X-Amz-Expires=${expiresIn}&X-Amz-SignedHeaders=host`;
+        const canonicalHeaders = `host:${bucket}.s3.${awsRegion}.amazonaws.com\n`;
+        const signedHeaders = 'host';
+        const payloadHash = 'UNSIGNED-PAYLOAD';
+        const canonicalRequest = `GET\n${canonicalUri}\n${canonicalQuerystring}\n${canonicalHeaders}\n${signedHeaders}\n${payloadHash}`;
+        // Step 2: Create string to sign
+        const algorithm = 'AWS4-HMAC-SHA256';
+        const credentialScope = `${dateStamp}/${awsRegion}/s3/aws4_request`;
+        const stringToSign = `${algorithm}\n${amzDate}\n${credentialScope}\n${await sha256(canonicalRequest)}`;
+        // Step 3: Calculate signature
+        const kDate = await hmacSha256('AWS4' + awsSecretAccessKey, dateStamp);
+        const kRegion = await hmacSha256(kDate, awsRegion);
+        const kService = await hmacSha256(kRegion, 's3');
+        const kSigning = await hmacSha256(kService, 'aws4_request');
+        const signature = await hmacSha256(kSigning, stringToSign);
+        // Convert signature to hex
+        const signatureHex = arrayBufferToHex(signature);
+        // Step 4: Construct presigned URL
+        const presignedUrl = `https://${bucket}.s3.${awsRegion}.amazonaws.com${canonicalUri}?${canonicalQuerystring}&X-Amz-Signature=${signatureHex}`;
+        return presignedUrl;
+    }
+    catch (err) {
+        console.error("Error generating S3 presigned URL:", err);
+        throw err;
+    }
+};
+// Helper function for SHA-256 hashing
+const sha256 = async (message) => {
+    const msgBuffer = new TextEncoder().encode(message);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+    return Array.from(new Uint8Array(hashBuffer))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('');
+};
+// Helper function for HMAC-SHA256
+const hmacSha256 = async (key, message) => {
+    const encoder = new TextEncoder();
+    let keyBuffer;
+    if (typeof key === 'string') {
+        keyBuffer = encoder.encode(key);
+    }
+    else {
+        keyBuffer = new Uint8Array(key);
+    }
+    const messageBuffer = encoder.encode(message);
+    const cryptoKey = await crypto.subtle.importKey('raw', keyBuffer, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+    return await crypto.subtle.sign('HMAC', cryptoKey, messageBuffer);
+};
+// Helper function to convert ArrayBuffer to hex string
+const arrayBufferToHex = (buffer) => {
+    return Array.from(new Uint8Array(buffer))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('');
+};
+/**
+ * Fetch profile picture from API with headers, get S3 URL, generate presigned URL, and return as blob URL
+ * This function:
+ * 1. Fetches the profile picture path from the API
+ * 2. Extracts the S3 filePath from the JSON response
+ * 3. Generates a presigned URL for the S3 object
+ * 4. Fetches the image using the presigned URL
+ * 5. Converts it to a blob URL that can be used in img src
+ * @param baseUrl - Base URL for the object store API (default: http://objectstore.impact0mics.local:9012)
+ * @param messageId - Optional message ID for X-Message-Id header (default: generated UUID)
+ * @param correlationId - Optional correlation ID for X-Correlation-Id header (default: generated UUID)
+ * @param awsConfig - AWS configuration (accessKeyId, secretAccessKey, region, bucket)
+ * @returns Promise that resolves to blob URL string or null if fetch fails
+ */
+const fetchProfilePictureAsBlobUrl = async (baseUrl = "http://objectstore.impact0mics.local:9012", messageId, correlationId, awsConfig) => {
+    try {
+        const profilePictureUrl = getProfilePictureUrl(baseUrl);
+        if (!profilePictureUrl) {
+            return null;
+        }
+        // AWS credentials (default values provided by user)
+        const defaultAwsConfig = {
+            accessKeyId: "AKIAVRUVTJGLBCYZEI5L",
+            secretAccessKey: "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",
+            region: "ap-south-2",
+            bucket: "development-varminer-test"
+        };
+        const finalAwsConfig = awsConfig || defaultAwsConfig;
+        // Generate message ID and correlation ID if not provided
+        const msgId = messageId || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const corrId = correlationId || `corr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // Step 1: Fetch the profile picture path from API (returns JSON with filePath)
+        const apiResponse = await fetch(profilePictureUrl, {
+            method: 'GET',
+            headers: {
+                'X-Message-Id': msgId,
+                'X-Correlation-Id': corrId,
+            },
+        });
+        // Check if the API response is successful
+        if (!apiResponse.ok) {
+            console.warn(`Failed to fetch profile picture path: ${apiResponse.status} ${apiResponse.statusText}`);
+            return null;
+        }
+        // Parse JSON response
+        const apiData = await apiResponse.json();
+        // Extract filePath from response
+        const s3Url = apiData?.filePath;
+        if (!s3Url || typeof s3Url !== 'string') {
+            console.warn('Profile picture API response does not contain valid filePath');
+            return null;
+        }
+        // Step 2: Generate presigned URL for S3 object
+        const presignedUrl = await generateS3PresignedUrl(s3Url, finalAwsConfig.accessKeyId, finalAwsConfig.secretAccessKey, finalAwsConfig.region);
+        // Step 3: Fetch the image using presigned URL
+        const imageResponse = await fetch(presignedUrl, {
+            method: 'GET',
+        });
+        // Check if the image response is successful
+        if (!imageResponse.ok) {
+            console.warn(`Failed to fetch profile picture image: ${imageResponse.status} ${imageResponse.statusText}`);
+            return null;
+        }
+        // Check if the response is an image
+        const contentType = imageResponse.headers.get('content-type');
+        if (!contentType || !contentType.startsWith('image/')) {
+            console.warn(`Profile picture response is not an image: ${contentType}`);
+            return null;
+        }
+        // Step 4: Convert response to blob
+        const blob = await imageResponse.blob();
+        // Step 5: Create blob URL
+        const blobUrl = URL.createObjectURL(blob);
+        return blobUrl;
+    }
+    catch (err) {
+        console.error("Error fetching profile picture:", err);
+        return null;
+    }
+};
 
 const translations = {
     en: {
@@ -547,6 +750,34 @@ const AppHeader = ({ language: languageProp }) => {
     const [messageCount, setMessageCount] = React.useState(() => {
         return getMessageCountFromStorage() ?? undefined;
     });
+    // State for profile picture blob URL
+    const [profilePictureBlobUrl, setProfilePictureBlobUrl] = React.useState(null);
+    // Fetch profile picture from API when component mounts or user data changes
+    React.useEffect(() => {
+        const fetchProfilePicture = async () => {
+            // Try to fetch profile picture from API
+            const blobUrl = await fetchProfilePictureAsBlobUrl();
+            if (blobUrl) {
+                // Clean up previous blob URL if it exists
+                setProfilePictureBlobUrl((prevUrl) => {
+                    if (prevUrl) {
+                        URL.revokeObjectURL(prevUrl);
+                    }
+                    return blobUrl;
+                });
+            }
+        };
+        fetchProfilePicture();
+        // Cleanup function to revoke blob URL when component unmounts or effect re-runs
+        return () => {
+            setProfilePictureBlobUrl((prevUrl) => {
+                if (prevUrl) {
+                    URL.revokeObjectURL(prevUrl);
+                }
+                return null;
+            });
+        };
+    }, []); // Only run once on mount - fetch when component loads
     React.useEffect(() => {
         const allData = getAllDataFromStorage();
         // Try to get user data from various sources
@@ -609,11 +840,12 @@ const AppHeader = ({ language: languageProp }) => {
                 userInitials = userInitials || profileData.initials || undefined;
             }
         }
+        // Use fetched blob URL if available, otherwise fall back to other sources
         setUser({
             name: userName || "",
             email: userEmail || "",
             role: userRole || "",
-            avatar: userAvatar,
+            avatar: profilePictureBlobUrl || userAvatar,
             initials: userInitials,
         });
         // Update online status
@@ -638,7 +870,7 @@ const AppHeader = ({ language: languageProp }) => {
             setCurrentLanguage(languageProp);
             setI18nLocaleToStorage(languageProp);
         }
-    }, [languageProp]);
+    }, [languageProp, profilePictureBlobUrl]); // Also update when profile picture is fetched
     const finalRoutes = DEFAULT_ROUTES;
     // Get online status from localStorage dynamically
     const [isOnlineStatus, setIsOnlineStatus] = React.useState(() => {