@memberjunction/ng-user-avatar 3.4.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +104 -0
  2. package/package.json +10 -10
package/README.md ADDED
@@ -0,0 +1,104 @@
1
+ # @memberjunction/ng-user-avatar
2
+
3
+ Angular service for managing user avatar synchronization from authentication providers and avatar display operations in MemberJunction applications.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @memberjunction/ng-user-avatar
9
+ ```
10
+
11
+ ## Overview
12
+
13
+ The User Avatar service provides a simple API for syncing user profile images from authentication providers (Microsoft Graph, Google, Auth0, etc.) into MemberJunction's `UserEntity`. It fetches the image, converts it to a Base64 data URI, and saves it to the user record. The service is auth-provider-agnostic -- callers supply the image URL and any required auth headers.
14
+
15
+ ```mermaid
16
+ flowchart LR
17
+ subgraph Providers["Auth Providers"]
18
+ A["Microsoft Graph"]
19
+ B["Google"]
20
+ C["Auth0"]
21
+ end
22
+ subgraph Service["UserAvatarService"]
23
+ D["syncFromImageUrl()"]
24
+ D --> E["Fetch Image Blob"]
25
+ E --> F["Convert to Base64"]
26
+ F --> G["Save to UserEntity"]
27
+ end
28
+ subgraph Display["Display Helpers"]
29
+ H["getAvatarDisplayUrl()"]
30
+ I["getAvatarIconClass()"]
31
+ end
32
+
33
+ Providers --> D
34
+ Service --> Display
35
+
36
+ style Providers fill:#2d6a9f,stroke:#1a4971,color:#fff
37
+ style Service fill:#7c5295,stroke:#563a6b,color:#fff
38
+ style Display fill:#2d8659,stroke:#1a5c3a,color:#fff
39
+ ```
40
+
41
+ ## Usage
42
+
43
+ ### Service Injection
44
+
45
+ The service is provided at root level and can be injected anywhere:
46
+
47
+ ```typescript
48
+ import { UserAvatarService } from '@memberjunction/ng-user-avatar';
49
+
50
+ @Component({ /* ... */ })
51
+ export class ProfileComponent {
52
+ constructor(private avatarService: UserAvatarService) {}
53
+
54
+ async syncAvatar(user: UserEntity, imageUrl: string) {
55
+ const success = await this.avatarService.syncFromImageUrl(
56
+ user,
57
+ imageUrl,
58
+ { 'Authorization': 'Bearer ' + accessToken } // optional auth headers
59
+ );
60
+
61
+ if (success) {
62
+ console.log('Avatar synced successfully');
63
+ }
64
+ }
65
+ }
66
+ ```
67
+
68
+ ### Getting Display URL
69
+
70
+ ```typescript
71
+ // Returns the stored Base64 data URI or a default placeholder
72
+ const displayUrl = this.avatarService.getAvatarDisplayUrl(user);
73
+
74
+ // Get the icon class for fallback display
75
+ const iconClass = this.avatarService.getAvatarIconClass(user);
76
+ ```
77
+
78
+ ## API Reference
79
+
80
+ ### UserAvatarService
81
+
82
+ | Method | Returns | Description |
83
+ |--------|---------|-------------|
84
+ | `syncFromImageUrl(user, imageUrl, authHeaders?)` | `Promise<boolean>` | Fetch image from URL, convert to Base64, save to user entity |
85
+ | `fileToBase64(file)` | `Promise<string>` | Convert a File to Base64 data URI |
86
+ | `isValidUrl(url)` | `boolean` | Check if a string is a valid URL |
87
+ | `isValidBase64DataUri(uri)` | `boolean` | Check if a string is a valid Base64 data URI |
88
+ | `getAvatarDisplayUrl(user)` | `string` | Get avatar URL for display (Base64 or placeholder) |
89
+ | `getAvatarIconClass(user)` | `string` | Get fallback icon class for avatar display |
90
+
91
+ ## How It Works
92
+
93
+ 1. Caller provides a `UserEntity`, image URL, and optional auth headers
94
+ 2. Service fetches the image as a Blob via Angular's `HttpClient`
95
+ 3. Blob is converted to a Base64 data URI using `FileReader`
96
+ 4. User entity's `UserImageURL` is set to the data URI
97
+ 5. User entity's `UserImageIconClass` is cleared (image takes priority)
98
+ 6. Entity is saved to the database
99
+
100
+ ## Dependencies
101
+
102
+ - [@memberjunction/core](../../MJCore/README.md) -- Core framework
103
+ - [@memberjunction/core-entities](../../MJCoreEntities/README.md) -- UserEntity
104
+ - `@angular/common/http` -- HttpClient for image fetching
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-user-avatar",
3
- "version": "3.4.0",
3
+ "version": "4.1.0",
4
4
  "description": "MemberJunction: Angular User Avatar Service - Manages user avatar synchronization from auth providers and avatar operations",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",
@@ -21,19 +21,19 @@
21
21
  "author": "",
22
22
  "license": "ISC",
23
23
  "devDependencies": {
24
- "@angular/compiler": "18.2.14",
25
- "@angular/compiler-cli": "18.2.14"
24
+ "@angular/compiler": "21.1.3",
25
+ "@angular/compiler-cli": "21.1.3"
26
26
  },
27
27
  "peerDependencies": {
28
- "@angular/common": "18.2.14",
29
- "@angular/core": "18.2.14",
30
- "rxjs": "^7.5.0"
28
+ "@angular/common": "21.1.3",
29
+ "@angular/core": "21.1.3",
30
+ "rxjs": "^7.8.2"
31
31
  },
32
32
  "dependencies": {
33
- "@memberjunction/core": "3.4.0",
34
- "@memberjunction/core-entities": "3.4.0",
35
- "@memberjunction/global": "3.4.0",
36
- "tslib": "^2.3.0"
33
+ "@memberjunction/core": "4.1.0",
34
+ "@memberjunction/core-entities": "4.1.0",
35
+ "@memberjunction/global": "4.1.0",
36
+ "tslib": "^2.8.1"
37
37
  },
38
38
  "sideEffects": false,
39
39
  "repository": {