ultisuite-client/lib/contact-avatar.ts
R3D347HR4Y 07d57f13a8
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
Add Contact Avatar Features and Improve UI Components
- Introduced new ContactAvatar and ContactAvatarPicker components for enhanced avatar management in contact views.
- Updated ContactDetailView and ContactFormView to utilize the new avatar components, improving user experience when adding or editing contacts.
- Enhanced ContactHoverCard and ContactRow components to display avatars, providing a more visually appealing interface.
- Added loading and error states in ContactsListView for better user feedback during data fetching.
- Implemented a new ContactsLoadState component to handle loading and error scenarios in the contacts list.
- Updated package.json to include @formkit/auto-animate for improved UI animations.
2026-06-06 20:26:51 +02:00

231 lines
7.9 KiB
TypeScript

/** MD5 hex digest (Gravatar). Sync, no deps. */
function md5Hex(input: string): string {
const utf8 = unescape(encodeURIComponent(input))
function md5cycle(x: number[], k: number[]) {
let [a, b, c, d] = x
a = ff(a, b, c, d, k[0], 7, -680876936)
d = ff(d, a, b, c, k[1], 12, -389564586)
c = ff(c, d, a, b, k[2], 17, 606105819)
b = ff(b, c, d, a, k[3], 22, -1044525330)
a = ff(a, b, c, d, k[4], 7, -176418897)
d = ff(d, a, b, c, k[5], 12, 1200080426)
c = ff(c, d, a, b, k[6], 17, -1473231341)
b = ff(b, c, d, a, k[7], 22, -45705983)
a = ff(a, b, c, d, k[8], 7, 1770035416)
d = ff(d, a, b, c, k[9], 12, -1958414417)
c = ff(c, d, a, b, k[10], 17, -42063)
b = ff(b, c, d, a, k[11], 22, -1990404162)
a = ff(a, b, c, d, k[12], 7, 1804603682)
d = ff(d, a, b, c, k[13], 12, -40341101)
c = ff(c, d, a, b, k[14], 17, -1502002290)
b = ff(b, c, d, a, k[15], 22, 1236535329)
a = gg(a, b, c, d, k[1], 5, -165796510)
d = gg(d, a, b, c, k[6], 9, -1069501632)
c = gg(c, d, a, b, k[11], 14, 643717713)
b = gg(b, c, d, a, k[0], 20, -373897302)
a = gg(a, b, c, d, k[5], 5, -701558691)
d = gg(d, a, b, c, k[10], 9, 38016083)
c = gg(c, d, a, b, k[15], 14, -660478335)
b = gg(b, c, d, a, k[4], 20, -405537848)
a = gg(a, b, c, d, k[9], 5, 568446438)
d = gg(d, a, b, c, k[14], 9, -1019803690)
c = gg(c, d, a, b, k[3], 14, -187363961)
b = gg(b, c, d, a, k[8], 20, 1163531501)
a = gg(a, b, c, d, k[13], 5, -1444681467)
d = gg(d, a, b, c, k[2], 9, -51403784)
c = gg(c, d, a, b, k[7], 14, 1735328473)
b = gg(b, c, d, a, k[12], 20, -1926607734)
a = hh(a, b, c, d, k[5], 4, -378558)
d = hh(d, a, b, c, k[8], 11, -2022574463)
c = hh(c, d, a, b, k[11], 16, 1839030562)
b = hh(b, c, d, a, k[14], 23, -35309556)
a = hh(a, b, c, d, k[1], 4, -1530992060)
d = hh(d, a, b, c, k[4], 11, 1272893353)
c = hh(c, d, a, b, k[7], 16, -155497632)
b = hh(b, c, d, a, k[10], 23, -1094730640)
a = hh(a, b, c, d, k[13], 4, 681279174)
d = hh(d, a, b, c, k[0], 11, -358537222)
c = hh(c, d, a, b, k[3], 16, -722521979)
b = hh(b, c, d, a, k[6], 23, 76029189)
a = hh(a, b, c, d, k[9], 4, -640364487)
d = hh(d, a, b, c, k[12], 11, -421815835)
c = hh(c, d, a, b, k[15], 16, 530742520)
b = hh(b, c, d, a, k[2], 23, -995338651)
a = ii(a, b, c, d, k[0], 6, -198630844)
d = ii(d, a, b, c, k[7], 10, 1126891415)
c = ii(c, d, a, b, k[14], 15, -1416354905)
b = ii(b, c, d, a, k[5], 21, -57434055)
a = ii(a, b, c, d, k[12], 6, 1700485571)
d = ii(d, a, b, c, k[3], 10, -1894986606)
c = ii(c, d, a, b, k[10], 15, -1051523)
b = ii(b, c, d, a, k[1], 21, -2054922799)
a = ii(a, b, c, d, k[8], 6, 1873313359)
d = ii(d, a, b, c, k[15], 10, -30611744)
c = ii(c, d, a, b, k[6], 15, -1560198380)
b = ii(b, c, d, a, k[13], 21, 1309151649)
a = ii(a, b, c, d, k[4], 6, -145523070)
d = ii(d, a, b, c, k[11], 10, -1120210379)
c = ii(c, d, a, b, k[2], 15, 718787259)
b = ii(b, c, d, a, k[9], 21, -343485551)
x[0] = add32(a, x[0])
x[1] = add32(b, x[1])
x[2] = add32(c, x[2])
x[3] = add32(d, x[3])
}
function cmn(q: number, a: number, b: number, x: number, s: number, t: number) {
a = add32(add32(a, q), add32(x, t))
return add32((a << s) | (a >>> (32 - s)), b)
}
function ff(a: number, b: number, c: number, d: number, x: number, s: number, t: number) {
return cmn((b & c) | (~b & d), a, b, x, s, t)
}
function gg(a: number, b: number, c: number, d: number, x: number, s: number, t: number) {
return cmn((b & d) | (c & ~d), a, b, x, s, t)
}
function hh(a: number, b: number, c: number, d: number, x: number, s: number, t: number) {
return cmn(b ^ c ^ d, a, b, x, s, t)
}
function ii(a: number, b: number, c: number, d: number, x: number, s: number, t: number) {
return cmn(c ^ (b | ~d), a, b, x, s, t)
}
function add32(a: number, b: number) {
return (a + b) & 0xffffffff
}
const n = utf8.length
const state = [1732584193, -271733879, -1732584194, 271733878]
let i = 0
for (; i + 64 <= n; i += 64) {
const block: number[] = []
for (let j = 0; j < 64; j += 4) {
block[j >> 2] =
utf8.charCodeAt(i + j) |
(utf8.charCodeAt(i + j + 1) << 8) |
(utf8.charCodeAt(i + j + 2) << 16) |
(utf8.charCodeAt(i + j + 3) << 24)
}
md5cycle(state, block)
}
const tail = new Array<number>(16).fill(0)
for (let j = i; j < n; j++) {
tail[(j - i) >> 2] |= utf8.charCodeAt(j) << ((j - i) % 4) * 8
}
tail[(n - i) >> 2] |= 0x80 << ((n - i) % 4) * 8
if ((n - i) > 55) {
md5cycle(state, tail)
tail.fill(0)
}
tail[14] = n * 8
md5cycle(state, tail)
return state
.map((v) => {
let s = ''
for (let j = 0; j < 4; j++) {
s += ((v >> (j * 8)) & 0xff).toString(16).padStart(2, '0')
}
return s
})
.join('')
}
export function gravatarUrl(email: string, size = 80): string | undefined {
const normalized = email.trim().toLowerCase()
if (!normalized || !normalized.includes('@')) return undefined
const hash = md5Hex(normalized)
return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=404`
}
export function isGravatarUrl(url: string | undefined): boolean {
return !!url && /gravatar\.com\/avatar\//i.test(url)
}
export function primaryContactEmail(contact: {
emails?: { value: string }[]
}): string | undefined {
const email = contact.emails?.find((e) => e.value?.trim())?.value?.trim()
return email || undefined
}
/** Parse a vCard PHOTO property into a displayable URL / data URI. */
export function parseVCardPhoto(rawKey: string, value: string): string | undefined {
if (!rawKey.toUpperCase().startsWith('PHOTO') || !value.trim()) return undefined
const params = rawKey.split(';').slice(1).join(';').toUpperCase()
const trimmed = value.trim()
if (params.includes('VALUE=URI') || /^https?:\/\//i.test(trimmed)) {
return trimmed.replace(/^uri:/i, '')
}
if (trimmed.startsWith('data:')) return trimmed
let mime = 'image/jpeg'
const typeMatch = params.match(/(?:TYPE|MEDIATYPE)=([^;,]+)/)
if (typeMatch) {
const t = typeMatch[1].toLowerCase()
if (t === 'png') mime = 'image/png'
else if (t === 'gif') mime = 'image/gif'
else if (t === 'webp') mime = 'image/webp'
else if (t.includes('/')) mime = t
}
return `data:${mime};base64,${trimmed.replace(/\s/g, '')}`
}
/** Build a vCard PHOTO line from avatarUrl (skip Gravatar — computed at display time). */
export function avatarUrlToVCardPhotoLine(
avatarUrl: string | undefined,
escapeValue: (v: string) => string,
): string | null {
const url = avatarUrl?.trim()
if (!url || isGravatarUrl(url)) return null
if (url.startsWith('data:')) {
const match = url.match(/^data:([^;]+);base64,([\s\S]+)$/)
if (!match) return null
const mime = match[1].toLowerCase()
const b64 = match[2].replace(/\s/g, '')
const type = mime.includes('png') ? 'PNG' : mime.includes('gif') ? 'GIF' : 'JPEG'
return `PHOTO;ENCODING=b;TYPE=${type}:${b64}`
}
if (/^https?:\/\//i.test(url)) {
return `PHOTO;VALUE=uri:${escapeValue(url)}`
}
return null
}
const MAX_AVATAR_BYTES = 512 * 1024
const ACCEPTED_IMAGE_TYPES = new Set([
'image/jpeg',
'image/png',
'image/gif',
'image/webp',
])
export async function readAvatarFromFile(file: File): Promise<string> {
if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {
throw new Error('Format non pris en charge. Utilisez JPEG, PNG, GIF ou WebP.')
}
if (file.size > MAX_AVATAR_BYTES) {
throw new Error('Image trop volumineuse (max 512 Ko).')
}
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => {
if (typeof reader.result === 'string') resolve(reader.result)
else reject(new Error('Impossible de lire l\'image.'))
}
reader.onerror = () => reject(new Error('Impossible de lire l\'image.'))
reader.readAsDataURL(file)
})
}