Merge pull request #177 from jfernandogt/add-gravatar-support

feat: Add support to use gravatar as a fallback avatar

components/Avatar.tsx

@@ -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;
+}

lib/md5.ts

@@ -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;

pages/[user].tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import prisma from '../lib/prisma';
+import Avatar from '../components/Avatar';
 
 export default function User(props) {
     const eventTypes = props.eventTypes.map(type =>
@@ -23,7 +24,7 @@ export default function User(props) {
 
             <main className="max-w-2xl mx-auto my-24">
                 <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>
                     <p className="text-gray-600">{props.user.bio}</p>
                 </div>
@@ -51,6 +52,7 @@ export async function getServerSideProps(context) {
         select: {
             id: true,
             username: true,
+            email:true,
             name: true,
             bio: true,
             avatar: true,

pages/[user]/[type].tsx

@@ -11,6 +11,7 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import isBetween from 'dayjs/plugin/isBetween';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import Avatar from '../../components/Avatar';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isBetween);
 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")
                 }
               >
-                {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>
                 <h1 className="text-3xl font-semibold text-gray-800 mb-4">
                   {props.eventType.title}
@@ -357,6 +352,7 @@ export async function getServerSideProps(context) {
             id: true,
             username: true,
             name: true,
+            email: true,
             bio: true,
             avatar: true,
             eventTypes: true,

pages/[user]/book.tsx

@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
 import 'react-phone-number-input/style.css';
 import PhoneInput from 'react-phone-number-input';
 import { LocationType } from '../../lib/location';
+import Avatar from '../../components/Avatar';
 
 export default function Book(props) {
     const router = useRouter();
@@ -78,7 +79,7 @@ export default function Book(props) {
                 <div className="bg-white overflow-hidden shadow rounded-lg">
                     <div className="sm:flex px-4 py-5 sm:p-6">
                         <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>
                             <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
                             <p className="text-gray-500 mb-2">
@@ -153,6 +154,7 @@ export async function getServerSideProps(context) {
         select: {
             username: true,
             name: true,
+            email:true,
             bio: true,
             avatar: true,
             eventTypes: true

pages/settings/profile.tsx

@@ -6,6 +6,7 @@ import prisma from '../../lib/prisma';
 import Modal from '../../components/Modal';
 import Shell from '../../components/Shell';
 import SettingsShell from '../../components/Settings';
+import Avatar from '../../components/Avatar';
 import { signIn, useSession, getSession } from 'next-auth/client';
 import TimezoneSelect from 'react-timezone-select';
 
@@ -110,7 +111,7 @@ export default function Settings(props) {
                                 <div className="mt-1 lg:hidden">
                                     <div className="flex items-center">
                                         <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 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">
@@ -125,8 +126,11 @@ export default function Settings(props) {
                                 </div>
 
                                 <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">
                                         <span>Change</span>
                                         <span className="sr-only"> user photo</span>