From ac33d2f37c62d27b6679555885200f6f7bbd19aa Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Mon, 30 Jul 2018 23:52:04 -0400 Subject: [PATCH] add support for gravatars --- jslib | 2 +- src/app/components/avatar.component.ts | 61 +++++++++++-------- src/app/layouts/navbar.component.html | 2 +- src/app/layouts/navbar.component.ts | 4 +- .../organization-layout.component.html | 2 +- .../manage/entity-users.component.html | 2 +- .../manage/people.component.html | 2 +- .../settings/account.component.html | 2 +- src/app/services/services.module.ts | 2 + src/app/settings/options.component.html | 12 ++++ src/app/settings/options.component.ts | 4 ++ src/app/settings/organizations.component.html | 2 +- src/app/settings/profile.component.html | 2 +- src/locales/en/messages.json | 7 +++ 14 files changed, 73 insertions(+), 33 deletions(-) diff --git a/jslib b/jslib index 13769a7fcb..2045e7047a 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit 13769a7fcba0d6ba67519b78e590019573776993 +Subproject commit 2045e7047a66599b2c8a92b88cd0d1b8bfc5186f diff --git a/src/app/components/avatar.component.ts b/src/app/components/avatar.component.ts index 91105b17da..429723bdcc 100644 --- a/src/app/components/avatar.component.ts +++ b/src/app/components/avatar.component.ts @@ -6,6 +6,11 @@ import { } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; +import { CryptoFunctionService } from 'jslib/abstractions/cryptoFunction.service'; +import { StateService } from 'jslib/abstractions/state.service'; + +import { Utils } from 'jslib/misc/utils'; + @Component({ selector: 'app-avatar', template: '('useGravatars'); + if (useGravatars && this.email != null) { + const hashBytes = await this.cryptoFunctionService.hash(this.email.toLowerCase().trim(), 'md5'); + const hash = Utils.fromBufferToHex(hashBytes).toLowerCase(); + this.src = 'https://www.gravatar.com/avatar/' + hash + '?s=' + this.size + '&r=pg&d=retro'; + } else { + let chars: string = null; + const upperData = this.data.toUpperCase(); - if (this.charCount > 1) { - chars = this.getFirstLetters(upperData, this.charCount); - } - if (chars == null) { - chars = upperData.substr(0, this.charCount); - } + if (this.charCount > 1) { + chars = this.getFirstLetters(upperData, this.charCount); + } + if (chars == null) { + chars = upperData.substr(0, this.charCount); + } - const charObj = this.getCharText(chars); - const color = this.stringToColor(upperData); - const svg = this.getSvg(this.width, this.height, color); - svg.appendChild(charObj); - const html = window.document.createElement('div').appendChild(svg).outerHTML; - const svgHtml = window.btoa(unescape(encodeURIComponent(html))); - this.src = 'data:image/svg+xml;base64,' + svgHtml; + const charObj = this.getCharText(chars); + const color = this.stringToColor(upperData); + const svg = this.getSvg(this.size, color); + svg.appendChild(charObj); + const html = window.document.createElement('div').appendChild(svg).outerHTML; + const svgHtml = window.btoa(unescape(encodeURIComponent(html))); + this.src = 'data:image/svg+xml;base64,' + svgHtml; + } } private stringToColor(str: string): string { @@ -85,15 +98,15 @@ export class AvatarComponent implements OnChanges, OnInit { return null; } - private getSvg(width: number, height: number, color: string): HTMLElement { + private getSvg(size: number, color: string): HTMLElement { const svgTag = window.document.createElement('svg'); svgTag.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); svgTag.setAttribute('pointer-events', 'none'); - svgTag.setAttribute('width', width.toString()); - svgTag.setAttribute('height', height.toString()); + svgTag.setAttribute('width', size.toString()); + svgTag.setAttribute('height', size.toString()); svgTag.style.backgroundColor = color; - svgTag.style.width = width + 'px'; - svgTag.style.height = height + 'px'; + svgTag.style.width = size + 'px'; + svgTag.style.height = size + 'px'; return svgTag; } diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html index db48880737..cca0dfefda 100644 --- a/src/app/layouts/navbar.component.html +++ b/src/app/layouts/navbar.component.html @@ -23,7 +23,7 @@
- +
{{'loggedInAs' | i18n}} {{name}} diff --git a/src/app/layouts/navbar.component.ts b/src/app/layouts/navbar.component.ts index 19d3cda3e9..bafb1e15e0 100644 --- a/src/app/layouts/navbar.component.ts +++ b/src/app/layouts/navbar.component.ts @@ -14,6 +14,7 @@ import { TokenService } from 'jslib/abstractions/token.service'; export class NavbarComponent implements OnInit { selfHosted = false; name: string; + email: string; constructor(private messagingService: MessagingService, private platformUtilsService: PlatformUtilsService, private tokenService: TokenService) { @@ -22,8 +23,9 @@ export class NavbarComponent implements OnInit { async ngOnInit() { this.name = await this.tokenService.getName(); + this.email = await this.tokenService.getEmail(); if (this.name == null || this.name.trim() === '') { - this.name = await this.tokenService.getEmail(); + this.name = this.email; } } diff --git a/src/app/layouts/organization-layout.component.html b/src/app/layouts/organization-layout.component.html index 52dca14351..c462f21988 100644 --- a/src/app/layouts/organization-layout.component.html +++ b/src/app/layouts/organization-layout.component.html @@ -2,7 +2,7 @@
- +
{{organization.name}} {{'organization' | i18n}} diff --git a/src/app/organizations/manage/entity-users.component.html b/src/app/organizations/manage/entity-users.component.html index f9e7c7b1c4..10a931312b 100644 --- a/src/app/organizations/manage/entity-users.component.html +++ b/src/app/organizations/manage/entity-users.component.html @@ -21,7 +21,7 @@ - + {{u.email}} diff --git a/src/app/organizations/manage/people.component.html b/src/app/organizations/manage/people.component.html index d01112336a..3032bf0511 100644 --- a/src/app/organizations/manage/people.component.html +++ b/src/app/organizations/manage/people.component.html @@ -33,7 +33,7 @@ - + {{u.email}} diff --git a/src/app/organizations/settings/account.component.html b/src/app/organizations/settings/account.component.html index d0baec6255..0dee62cea7 100644 --- a/src/app/organizations/settings/account.component.html +++ b/src/app/organizations/settings/account.component.html @@ -21,7 +21,7 @@
- +
{{'disableIconsDesc' | i18n}}
+
+
+ + + + + +
+ {{'useGravatarsDesc' | i18n}} +
diff --git a/src/app/settings/options.component.ts b/src/app/settings/options.component.ts index 7b7e26e4a6..c3553084e2 100644 --- a/src/app/settings/options.component.ts +++ b/src/app/settings/options.component.ts @@ -23,6 +23,7 @@ import { Utils } from 'jslib/misc/utils'; export class OptionsComponent implements OnInit { lockOption: number = null; disableIcons: boolean; + useGravatars: boolean; locale: string; lockOptions: any[]; localeOptions: any[]; @@ -58,6 +59,7 @@ export class OptionsComponent implements OnInit { async ngOnInit() { this.lockOption = await this.storageService.get(ConstantsService.lockOptionKey); this.disableIcons = await this.storageService.get(ConstantsService.disableFaviconKey); + this.useGravatars = await this.storageService.get('useGravatars'); this.locale = this.startingLocale = await this.storageService.get(ConstantsService.localeKey); } @@ -65,6 +67,8 @@ export class OptionsComponent implements OnInit { await this.lockService.setLockOption(this.lockOption != null ? this.lockOption : null); await this.storageService.save(ConstantsService.disableFaviconKey, this.disableIcons); await this.stateService.save(ConstantsService.disableFaviconKey, this.disableIcons); + await this.storageService.save('useGravatars', this.useGravatars); + await this.stateService.save('useGravatars', this.useGravatars); await this.storageService.save(ConstantsService.localeKey, this.locale); this.analytics.eventTrack.next({ action: 'Saved Options' }); if (this.locale !== this.startingLocale) { diff --git a/src/app/settings/organizations.component.html b/src/app/settings/organizations.component.html index 7bf4d816b2..53918cb3dd 100644 --- a/src/app/settings/organizations.component.html +++ b/src/app/settings/organizations.component.html @@ -43,7 +43,7 @@ - + {{o.name}} diff --git a/src/app/settings/profile.component.html b/src/app/settings/profile.component.html index 247df11771..9093fd18b0 100644 --- a/src/app/settings/profile.component.html +++ b/src/app/settings/profile.component.html @@ -18,7 +18,7 @@
- +