@memberjunction/ng-user-avatar 4.0.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.
- package/README.md +104 -0
- package/package.json +4 -4
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": "4.
|
|
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",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"rxjs": "^7.8.2"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@memberjunction/core": "4.
|
|
34
|
-
"@memberjunction/core-entities": "4.
|
|
35
|
-
"@memberjunction/global": "4.
|
|
33
|
+
"@memberjunction/core": "4.1.0",
|
|
34
|
+
"@memberjunction/core-entities": "4.1.0",
|
|
35
|
+
"@memberjunction/global": "4.1.0",
|
|
36
36
|
"tslib": "^2.8.1"
|
|
37
37
|
},
|
|
38
38
|
"sideEffects": false,
|