Merge pull request #177 from jfernandogt/add-gravatar-support
feat: Add support to use gravatar as a fallback avatar
This commit is contained in:
commit
e845673662
6 changed files with 219 additions and 12 deletions
27
components/Avatar.tsx
Normal file
27
components/Avatar.tsx
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import md5 from '../lib/md5';
|
||||||
|
|
||||||
|
export default function Avatar({ user, className = '', fallback }: {
|
||||||
|
user: any;
|
||||||
|
className?: string;
|
||||||
|
fallback?: JSX.Element;
|
||||||
|
}) {
|
||||||
|
const [gravatarAvailable, setGravatarAvailable] = useState(true);
|
||||||
|
|
||||||
|
if (user.avatar) {
|
||||||
|
return <img src={user.avatar} alt="Avatar" className={className} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (gravatarAvailable) {
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
onError={() => setGravatarAvailable(false)}
|
||||||
|
src={`https://www.gravatar.com/avatar/${md5(user.email)}?d=404&s=160`}
|
||||||
|
alt="Avatar"
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return fallback || null;
|
||||||
|
}
|
176
lib/md5.ts
Normal file
176
lib/md5.ts
Normal file
|
@ -0,0 +1,176 @@
|
||||||
|
function md5cycle(x, k) {
|
||||||
|
var a = x[0],
|
||||||
|
b = x[1],
|
||||||
|
c = x[2],
|
||||||
|
d = x[3];
|
||||||
|
|
||||||
|
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, a, b, x, s, t) {
|
||||||
|
a = add32(add32(a, q), add32(x, t));
|
||||||
|
return add32((a << s) | (a >>> (32 - s)), b);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ff(a, b, c, d, x, s, t) {
|
||||||
|
return cmn((b & c) | (~b & d), a, b, x, s, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function gg(a, b, c, d, x, s, t) {
|
||||||
|
return cmn((b & d) | (c & ~d), a, b, x, s, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hh(a, b, c, d, x, s, t) {
|
||||||
|
return cmn(b ^ c ^ d, a, b, x, s, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ii(a, b, c, d, x, s, t) {
|
||||||
|
return cmn(c ^ (b | ~d), a, b, x, s, t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function md51(s) {
|
||||||
|
let txt = "";
|
||||||
|
var n = s.length,
|
||||||
|
state = [1732584193, -271733879, -1732584194, 271733878],
|
||||||
|
i;
|
||||||
|
for (i = 64; i <= s.length; i += 64) {
|
||||||
|
md5cycle(state, md5blk(s.substring(i - 64, i)));
|
||||||
|
}
|
||||||
|
s = s.substring(i - 64);
|
||||||
|
var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
||||||
|
for (i = 0; i < s.length; i++)
|
||||||
|
tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
|
||||||
|
tail[i >> 2] |= 0x80 << (i % 4 << 3);
|
||||||
|
if (i > 55) {
|
||||||
|
md5cycle(state, tail);
|
||||||
|
for (i = 0; i < 16; i++) tail[i] = 0;
|
||||||
|
}
|
||||||
|
tail[14] = n * 8;
|
||||||
|
md5cycle(state, tail);
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* there needs to be support for Unicode here,
|
||||||
|
* unless we pretend that we can redefine the MD-5
|
||||||
|
* algorithm for multi-byte characters (perhaps
|
||||||
|
* by adding every four 16-bit characters and
|
||||||
|
* shortening the sum to 32 bits). Otherwise
|
||||||
|
* I suggest performing MD-5 as if every character
|
||||||
|
* was two bytes--e.g., 0040 0025 = @%--but then
|
||||||
|
* how will an ordinary MD-5 sum be matched?
|
||||||
|
* There is no way to standardize text to something
|
||||||
|
* like UTF-8 before transformation; speed cost is
|
||||||
|
* utterly prohibitive. The JavaScript standard
|
||||||
|
* itself needs to look at this: it should start
|
||||||
|
* providing access to strings as preformed UTF-8
|
||||||
|
* 8-bit unsigned value arrays.
|
||||||
|
*/
|
||||||
|
function md5blk(s) {
|
||||||
|
/* I figured global was faster. */
|
||||||
|
var md5blks = [],
|
||||||
|
i; /* Andy King said do it this way. */
|
||||||
|
for (i = 0; i < 64; i += 4) {
|
||||||
|
md5blks[i >> 2] =
|
||||||
|
s.charCodeAt(i) +
|
||||||
|
(s.charCodeAt(i + 1) << 8) +
|
||||||
|
(s.charCodeAt(i + 2) << 16) +
|
||||||
|
(s.charCodeAt(i + 3) << 24);
|
||||||
|
}
|
||||||
|
return md5blks;
|
||||||
|
}
|
||||||
|
|
||||||
|
var hex_chr = "0123456789abcdef".split("");
|
||||||
|
|
||||||
|
function rhex(n) {
|
||||||
|
var s = "",
|
||||||
|
j = 0;
|
||||||
|
for (; j < 4; j++)
|
||||||
|
s += hex_chr[(n >> (j * 8 + 4)) & 0x0f] + hex_chr[(n >> (j * 8)) & 0x0f];
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hex(x) {
|
||||||
|
for (var i = 0; i < x.length; i++) x[i] = rhex(x[i]);
|
||||||
|
return x.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function md5(s) {
|
||||||
|
return hex(md51(s));
|
||||||
|
}
|
||||||
|
|
||||||
|
function add32(a, b) {
|
||||||
|
return (a + b) & 0xffffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default md5;
|
|
@ -1,6 +1,7 @@
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import prisma from '../lib/prisma';
|
import prisma from '../lib/prisma';
|
||||||
|
import Avatar from '../components/Avatar';
|
||||||
|
|
||||||
export default function User(props) {
|
export default function User(props) {
|
||||||
const eventTypes = props.eventTypes.map(type =>
|
const eventTypes = props.eventTypes.map(type =>
|
||||||
|
@ -23,7 +24,7 @@ export default function User(props) {
|
||||||
|
|
||||||
<main className="max-w-2xl mx-auto my-24">
|
<main className="max-w-2xl mx-auto my-24">
|
||||||
<div className="mb-8 text-center">
|
<div className="mb-8 text-center">
|
||||||
{props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="mx-auto w-24 h-24 rounded-full mb-4"/>}
|
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
|
||||||
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name || props.user.username}</h1>
|
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name || props.user.username}</h1>
|
||||||
<p className="text-gray-600">{props.user.bio}</p>
|
<p className="text-gray-600">{props.user.bio}</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,6 +52,7 @@ export async function getServerSideProps(context) {
|
||||||
select: {
|
select: {
|
||||||
id: true,
|
id: true,
|
||||||
username: true,
|
username: true,
|
||||||
|
email:true,
|
||||||
name: true,
|
name: true,
|
||||||
bio: true,
|
bio: true,
|
||||||
avatar: true,
|
avatar: true,
|
||||||
|
|
|
@ -11,6 +11,7 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
|
||||||
import isBetween from 'dayjs/plugin/isBetween';
|
import isBetween from 'dayjs/plugin/isBetween';
|
||||||
import utc from 'dayjs/plugin/utc';
|
import utc from 'dayjs/plugin/utc';
|
||||||
import timezone from 'dayjs/plugin/timezone';
|
import timezone from 'dayjs/plugin/timezone';
|
||||||
|
import Avatar from '../../components/Avatar';
|
||||||
dayjs.extend(isSameOrBefore);
|
dayjs.extend(isSameOrBefore);
|
||||||
dayjs.extend(isBetween);
|
dayjs.extend(isBetween);
|
||||||
dayjs.extend(utc);
|
dayjs.extend(utc);
|
||||||
|
@ -188,13 +189,7 @@ export default function Type(props) {
|
||||||
"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
|
"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{props.user.avatar && (
|
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
|
||||||
<img
|
|
||||||
src={props.user.avatar}
|
|
||||||
alt="Avatar"
|
|
||||||
className="w-16 h-16 rounded-full mb-4"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
|
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
|
||||||
<h1 className="text-3xl font-semibold text-gray-800 mb-4">
|
<h1 className="text-3xl font-semibold text-gray-800 mb-4">
|
||||||
{props.eventType.title}
|
{props.eventType.title}
|
||||||
|
@ -357,6 +352,7 @@ export async function getServerSideProps(context) {
|
||||||
id: true,
|
id: true,
|
||||||
username: true,
|
username: true,
|
||||||
name: true,
|
name: true,
|
||||||
|
email: true,
|
||||||
bio: true,
|
bio: true,
|
||||||
avatar: true,
|
avatar: true,
|
||||||
eventTypes: true,
|
eventTypes: true,
|
||||||
|
|
|
@ -9,6 +9,7 @@ import dayjs from 'dayjs';
|
||||||
import 'react-phone-number-input/style.css';
|
import 'react-phone-number-input/style.css';
|
||||||
import PhoneInput from 'react-phone-number-input';
|
import PhoneInput from 'react-phone-number-input';
|
||||||
import { LocationType } from '../../lib/location';
|
import { LocationType } from '../../lib/location';
|
||||||
|
import Avatar from '../../components/Avatar';
|
||||||
|
|
||||||
export default function Book(props) {
|
export default function Book(props) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -78,7 +79,7 @@ export default function Book(props) {
|
||||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||||
<div className="sm:flex px-4 py-5 sm:p-6">
|
<div className="sm:flex px-4 py-5 sm:p-6">
|
||||||
<div className="sm:w-1/2 sm:border-r">
|
<div className="sm:w-1/2 sm:border-r">
|
||||||
{props.user.avatar && <img src={props.user.avatar} alt="Avatar" className="w-16 h-16 rounded-full mb-4"/>}
|
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
|
||||||
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
|
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
|
||||||
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
|
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
|
||||||
<p className="text-gray-500 mb-2">
|
<p className="text-gray-500 mb-2">
|
||||||
|
@ -153,6 +154,7 @@ export async function getServerSideProps(context) {
|
||||||
select: {
|
select: {
|
||||||
username: true,
|
username: true,
|
||||||
name: true,
|
name: true,
|
||||||
|
email:true,
|
||||||
bio: true,
|
bio: true,
|
||||||
avatar: true,
|
avatar: true,
|
||||||
eventTypes: true
|
eventTypes: true
|
||||||
|
|
|
@ -6,6 +6,7 @@ import prisma from '../../lib/prisma';
|
||||||
import Modal from '../../components/Modal';
|
import Modal from '../../components/Modal';
|
||||||
import Shell from '../../components/Shell';
|
import Shell from '../../components/Shell';
|
||||||
import SettingsShell from '../../components/Settings';
|
import SettingsShell from '../../components/Settings';
|
||||||
|
import Avatar from '../../components/Avatar';
|
||||||
import { signIn, useSession, getSession } from 'next-auth/client';
|
import { signIn, useSession, getSession } from 'next-auth/client';
|
||||||
import TimezoneSelect from 'react-timezone-select';
|
import TimezoneSelect from 'react-timezone-select';
|
||||||
|
|
||||||
|
@ -110,7 +111,7 @@ export default function Settings(props) {
|
||||||
<div className="mt-1 lg:hidden">
|
<div className="mt-1 lg:hidden">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
|
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
|
||||||
<img className="rounded-full h-full w-full" src={props.user.avatar} alt="" />
|
<Avatar user={props.user} className="rounded-full h-full w-full" />
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="ml-5 rounded-md shadow-sm">
|
{/* <div className="ml-5 rounded-md shadow-sm">
|
||||||
<div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
|
<div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
|
||||||
|
@ -125,8 +126,11 @@ export default function Settings(props) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden relative rounded-full overflow-hidden lg:block">
|
<div className="hidden relative rounded-full overflow-hidden lg:block">
|
||||||
{props.user.avatar && <img className="relative rounded-full w-40 h-40" src={props.user.avatar} alt="" />}
|
<Avatar
|
||||||
{!props.user.avatar && <div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
|
user={props.user}
|
||||||
|
className="relative rounded-full w-40 h-40"
|
||||||
|
fallback={<div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
|
||||||
|
/>
|
||||||
{/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
|
{/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
|
||||||
<span>Change</span>
|
<span>Change</span>
|
||||||
<span className="sr-only"> user photo</span>
|
<span className="sr-only"> user photo</span>
|
||||||
|
|
Loading…
Reference in a new issue