Remove image from session, add /api/me, update Avatar component (#493)
* Remove image from session, add /api/me, update Avatar component * Fixed Avatar on Desktop * Added emailMd5 to session + load md5 from props on /settings/profile * Explicitly select which fields to expose in /api/me * Abstracted Gravatar, defaults avatar for /api/me, removed session dep from UserDropdown * Delete md5.js :) Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
This commit is contained in:
Alex van Andel
GitHub
parent
3894ee12d1
commit
bc97237858
|
|
@ -1,37 +1,22 @@
|
|||
import { useState } from "react";
|
||||
import md5 from "../lib/md5";
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||
import { defaultAvatarSrc } from "@lib/profile";
|
||||
|
||||
export default function Avatar({
|
||||
user,
|
||||
className = "",
|
||||
fallback,
|
||||
imageSrc = "",
|
||||
}: {
|
||||
user: any;
|
||||
export type AvatarProps = {
|
||||
className?: string;
|
||||
fallback?: JSX.Element;
|
||||
imageSrc?: string;
|
||||
}) {
|
||||
const [gravatarAvailable, setGravatarAvailable] = useState(true);
|
||||
displayName: string;
|
||||
gravatarFallbackMd5?: string;
|
||||
};
|
||||
|
||||
if (imageSrc) {
|
||||
return <img src={imageSrc} alt="Avatar" className={className} />;
|
||||
}
|
||||
|
||||
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)}?s=160&d=identicon&r=PG`}
|
||||
alt="Avatar"
|
||||
className={className}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return fallback || null;
|
||||
export default function Avatar({ imageSrc, displayName, gravatarFallbackMd5, className = "" }: AvatarProps) {
|
||||
return (
|
||||
<AvatarPrimitive.Root>
|
||||
<AvatarPrimitive.Image src={imageSrc} alt={displayName} className={className} />
|
||||
<AvatarPrimitive.Fallback delayMs={600}>
|
||||
{gravatarFallbackMd5 && (
|
||||
<img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={displayName} className={className} />
|
||||
)}
|
||||
</AvatarPrimitive.Fallback>
|
||||
</AvatarPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Link from "next/link";
|
||||
import React, { Fragment, useEffect } from "react";
|
||||
import React, { Fragment, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useSession } from "next-auth/client";
|
||||
import { signOut, useSession } from "next-auth/client";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry";
|
||||
import { SelectorIcon } from "@heroicons/react/outline";
|
||||
|
|
@ -18,6 +18,8 @@ import {
|
|||
import Logo from "./Logo";
|
||||
import classNames from "@lib/classNames";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import Avatar from "@components/Avatar";
|
||||
import { User } from "@prisma/client";
|
||||
|
||||
export default function Shell(props) {
|
||||
const router = useRouter();
|
||||
|
|
@ -112,7 +114,7 @@ export default function Shell(props) {
|
|||
</nav>
|
||||
</div>
|
||||
<div className="flex-shrink-0 flex p-4">
|
||||
<UserDropdown session={session} />
|
||||
<UserDropdown />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,45 +193,52 @@ export default function Shell(props) {
|
|||
) : null;
|
||||
}
|
||||
|
||||
function UserDropdown({ session, small, bottom }: { session: any; small?: boolean; bottom?: boolean }) {
|
||||
function UserDropdown({ small, bottom }: { small?: boolean; bottom?: boolean }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/me")
|
||||
.then((res) => res.json())
|
||||
.then((responseBody) => {
|
||||
setUser(responseBody.user);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Menu as="div" className="w-full relative inline-block text-left">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Menu.Button className="group w-full rounded-md text-sm text-left font-medium text-gray-700 focus:outline-none">
|
||||
<span className="flex w-full justify-between items-center">
|
||||
<span className="flex min-w-0 items-center justify-between space-x-3">
|
||||
<img
|
||||
className={classNames(
|
||||
small ? "w-8 h-8" : "w-10 h-10",
|
||||
"bg-gray-300 rounded-full flex-shrink-0"
|
||||
)}
|
||||
src={
|
||||
session.user.image
|
||||
? session.user.image
|
||||
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
|
||||
encodeURIComponent(session.user.name || "")
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
{!small && (
|
||||
<span className="flex-1 flex flex-col min-w-0">
|
||||
<span className="text-gray-900 text-sm font-medium truncate">{session.user.name}</span>
|
||||
<span className="text-neutral-500 font-normal text-sm truncate">
|
||||
/{session.user.username}
|
||||
{user && (
|
||||
<Menu.Button className="group w-full rounded-md text-sm text-left font-medium text-gray-700 focus:outline-none">
|
||||
<span className="flex w-full justify-between items-center">
|
||||
<span className="flex min-w-0 items-center justify-between space-x-3">
|
||||
<Avatar
|
||||
imageSrc={user?.avatar}
|
||||
displayName={user?.name}
|
||||
className={classNames(
|
||||
small ? "w-8 h-8" : "w-10 h-10",
|
||||
"bg-gray-300 rounded-full flex-shrink-0"
|
||||
)}
|
||||
/>
|
||||
{!small && (
|
||||
<span className="flex-1 flex flex-col min-w-0">
|
||||
<span className="text-gray-900 text-sm font-medium truncate">{user?.name}</span>
|
||||
<span className="text-neutral-500 font-normal text-sm truncate">
|
||||
/{user?.username}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{!small && (
|
||||
<SelectorIcon
|
||||
className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
{!small && (
|
||||
<SelectorIcon
|
||||
className="flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</Menu.Button>
|
||||
</Menu.Button>
|
||||
)}
|
||||
</div>
|
||||
<Transition
|
||||
show={open}
|
||||
|
|
@ -247,7 +256,7 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea
|
|||
"w-64 z-10 absolute mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
|
||||
)}>
|
||||
<div className="py-1">
|
||||
<a href={"/" + session.user.username} className="flex px-4 py-2 text-sm text-neutral-500">
|
||||
<a href={"/" + user?.username} className="flex px-4 py-2 text-sm text-neutral-500">
|
||||
View public page <ExternalLinkIcon className="ml-1 mt-1 w-3 h-3 text-neutral-400" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -311,22 +320,21 @@ function UserDropdown({ session, small, bottom }: { session: any; small?: boolea
|
|||
<div className="py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<Link href="/auth/logout">
|
||||
<a
|
||||
<a
|
||||
onClick={() => signOut({ callbackUrl: "/auth/logout" })}
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"flex px-4 py-2 text-sm font-medium"
|
||||
)}>
|
||||
<LogoutIcon
|
||||
className={classNames(
|
||||
active ? "bg-gray-100 text-gray-900" : "text-gray-700",
|
||||
"flex px-4 py-2 text-sm font-medium"
|
||||
)}>
|
||||
<LogoutIcon
|
||||
className={classNames(
|
||||
"text-neutral-400 group-hover:text-neutral-500",
|
||||
"mr-2 flex-shrink-0 h-5 w-5"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Sign out
|
||||
</a>
|
||||
</Link>
|
||||
"text-neutral-400 group-hover:text-neutral-500",
|
||||
"mr-2 flex-shrink-0 h-5 w-5"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Sign out
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
|
|
|
|||
173
lib/md5.js
173
lib/md5.js
|
|
@ -1,173 +0,0 @@
|
|||
function md5cycle(x, k) {
|
||||
let 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 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);
|
||||
const 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. */
|
||||
let 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;
|
||||
}
|
||||
|
||||
const hex_chr = "0123456789abcdef".split("");
|
||||
|
||||
function rhex(n) {
|
||||
let 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 (let 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;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import crypto from "crypto";
|
||||
|
||||
export const defaultAvatarSrc = function ({ email, md5 }: { md5?: string; email?: string }) {
|
||||
if (!email && !md5) return "";
|
||||
|
||||
if (email && !md5) {
|
||||
md5 = crypto.createHash("md5").update(email).digest("hex");
|
||||
}
|
||||
|
||||
return `https://www.gravatar.com/avatar/${md5}?s=160&d=identicon&r=PG`;
|
||||
};
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"@heroicons/react": "^1.0.4",
|
||||
"@jitsu/sdk-js": "^2.2.4",
|
||||
"@prisma/client": "^2.29.1",
|
||||
"@radix-ui/react-avatar": "^0.0.15",
|
||||
"@radix-ui/react-collapsible": "^0.0.17",
|
||||
"@radix-ui/react-dialog": "^0.0.20",
|
||||
"@radix-ui/react-slider": "^0.0.17",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { GetServerSideProps } from "next";
|
|||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import prisma, { whereAndSelect } from "@lib/prisma";
|
||||
import Avatar from "../components/Avatar";
|
||||
import Avatar from "@components/Avatar";
|
||||
import Theme from "@components/Theme";
|
||||
import { ClockIcon, InformationCircleIcon, UserIcon } from "@heroicons/react/solid";
|
||||
import React from "react";
|
||||
|
|
@ -105,7 +105,11 @@ export default function User(props): User {
|
|||
<div className="bg-neutral-50 dark:bg-black h-screen">
|
||||
<main className="max-w-3xl mx-auto py-24 px-4">
|
||||
<div className="mb-8 text-center">
|
||||
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
|
||||
<Avatar
|
||||
imageSrc={props.user.avatar}
|
||||
displayName={props.user.name}
|
||||
className="mx-auto w-24 h-24 rounded-full mb-4"
|
||||
/>
|
||||
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-1">
|
||||
{props.user.name || props.user.username}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
|
|||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import Avatar from "../../components/Avatar";
|
||||
import Avatar from "@components/Avatar";
|
||||
import AvailableTimes from "../../components/booking/AvailableTimes";
|
||||
import DatePicker from "../../components/booking/DatePicker";
|
||||
import TimeOptions from "../../components/booking/TimeOptions";
|
||||
|
|
@ -140,7 +140,11 @@ export default function Type(props: InferGetServerSidePropsType<typeof getServer
|
|||
{/* mobile: details */}
|
||||
<div className="block p-4 sm:p-8 md:hidden">
|
||||
<div className="flex items-center">
|
||||
<Avatar user={props.user} className="inline-block rounded-full h-9 w-9" />
|
||||
<Avatar
|
||||
imageSrc={props.user.avatar}
|
||||
displayName={props.user.name}
|
||||
className="inline-block rounded-full h-9 w-9"
|
||||
/>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium text-black dark:text-gray-300">{props.user.name}</p>
|
||||
<div className="flex gap-2 text-xs font-medium text-gray-600">
|
||||
|
|
@ -161,7 +165,11 @@ export default function Type(props: InferGetServerSidePropsType<typeof getServer
|
|||
"hidden md:block pr-8 sm:border-r sm:dark:border-gray-800 " +
|
||||
(selectedDate ? "sm:w-1/3" : "sm:w-1/2")
|
||||
}>
|
||||
<Avatar user={props.user} className="w-16 h-16 mb-4 rounded-full" />
|
||||
<Avatar
|
||||
imageSrc={props.user.avatar}
|
||||
displayName={props.user.name}
|
||||
className="w-16 h-16 mb-4 rounded-full"
|
||||
/>
|
||||
<h2 className="font-medium text-gray-500 dark:text-gray-300">{props.user.name}</h2>
|
||||
<h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
|
||||
{props.eventType.title}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import timezone from "dayjs/plugin/timezone";
|
|||
import "react-phone-number-input/style.css";
|
||||
import PhoneInput from "react-phone-number-input";
|
||||
import { LocationType } from "../../lib/location";
|
||||
import Avatar from "../../components/Avatar";
|
||||
import Avatar from "@components/Avatar";
|
||||
import Button from "../../components/ui/Button";
|
||||
import Theme from "@components/Theme";
|
||||
import { ReactMultiEmail } from "react-multi-email";
|
||||
|
|
@ -163,7 +163,11 @@ export default function Book(props: any): JSX.Element {
|
|||
<div className="dark:bg-neutral-900 bg-white overflow-hidden border border-gray-200 dark:border-0 sm:rounded-sm">
|
||||
<div className="sm:flex px-4 py-5 sm:p-4">
|
||||
<div className="sm:w-1/2 sm:border-r sm:dark:border-black">
|
||||
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
|
||||
<Avatar
|
||||
displayName={props.user.name}
|
||||
imageSrc={props.user.avatar}
|
||||
className="w-16 h-16 rounded-full mb-4"
|
||||
/>
|
||||
<h2 className="font-medium dark:text-gray-300 text-gray-500">{props.user.name}</h2>
|
||||
<h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
|
||||
{props.eventType.title}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default NextAuth({
|
|||
password: { label: "Password", type: "password", placeholder: "Your super secure password" },
|
||||
},
|
||||
async authorize(credentials) {
|
||||
const user = await prisma.user.findFirst({
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
email: credentials.email,
|
||||
},
|
||||
|
|
@ -44,15 +44,13 @@ export default NextAuth({
|
|||
username: user.username,
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
image: user.avatar,
|
||||
};
|
||||
},
|
||||
}),
|
||||
],
|
||||
callbacks: {
|
||||
async jwt(token, user) {
|
||||
// Add username to the token right after signin
|
||||
if (user?.username) {
|
||||
if (user) {
|
||||
token.id = user.id;
|
||||
token.username = user.username;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
import prisma from "@lib/prisma";
|
||||
import { getSession } from "@lib/auth";
|
||||
import { defaultAvatarSrc } from "@lib/profile";
|
||||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const session = await getSession({ req: req });
|
||||
if (!session) {
|
||||
res.status(401).json({ message: "Not authenticated" });
|
||||
return;
|
||||
}
|
||||
|
||||
const user: User = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
email: true,
|
||||
bio: true,
|
||||
timeZone: true,
|
||||
weekStart: true,
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
bufferTime: true,
|
||||
theme: true,
|
||||
createdDate: true,
|
||||
hideBranding: true,
|
||||
avatar: true,
|
||||
},
|
||||
});
|
||||
|
||||
user.avatar = user.avatar || defaultAvatarSrc({ email: user.email });
|
||||
|
||||
res.status(200).json({
|
||||
user,
|
||||
});
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { CheckIcon } from "@heroicons/react/outline";
|
||||
import { getSession, signOut } from "next-auth/client";
|
||||
|
||||
export default function Logout() {
|
||||
return (
|
||||
|
|
@ -44,14 +43,3 @@ export default function Logout() {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Logout.getInitialProps = async (context) => {
|
||||
const { req } = context;
|
||||
const session = await getSession({ req });
|
||||
|
||||
if (session) {
|
||||
signOut({ redirect: false });
|
||||
}
|
||||
|
||||
return { session: undefined };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import { GetServerSideProps } from "next";
|
||||
import Head from "next/head";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import prisma, { whereAndSelect } from "@lib/prisma";
|
||||
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 Avatar from "@components/Avatar";
|
||||
import { getSession } from "next-auth/client";
|
||||
import Select from "react-select";
|
||||
import TimezoneSelect from "react-timezone-select";
|
||||
import { UsernameInput } from "../../components/ui/UsernameInput";
|
||||
import ErrorAlert from "../../components/ui/alerts/Error";
|
||||
import ImageUploader from "../../components/ImageUploader";
|
||||
import crypto from "crypto";
|
||||
|
||||
const themeOptions = [
|
||||
{ value: "light", label: "Light" },
|
||||
|
|
@ -28,7 +29,7 @@ export default function Settings(props) {
|
|||
const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
|
||||
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
|
||||
const [imageSrc, setImageSrc] = useState<string>("");
|
||||
const [imageSrc, setImageSrc] = useState<string>(props.user.avatar);
|
||||
|
||||
const [hasErrors, setHasErrors] = useState(false);
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
|
@ -156,9 +157,9 @@ export default function Settings(props) {
|
|||
<div>
|
||||
<div className="mt-1 flex">
|
||||
<Avatar
|
||||
user={props.user}
|
||||
displayName={props.user.name}
|
||||
className="relative rounded-full w-10 h-10"
|
||||
fallback={<div className="relative bg-neutral-900 rounded-full w-10 h-10"></div>}
|
||||
gravatarFallbackMd5={props.user.emailMd5}
|
||||
imageSrc={imageSrc}
|
||||
/>
|
||||
<input
|
||||
|
|
@ -168,14 +169,14 @@ export default function Settings(props) {
|
|||
id="avatar"
|
||||
placeholder="URL"
|
||||
className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
|
||||
defaultValue={props.user.avatar}
|
||||
defaultValue={imageSrc}
|
||||
/>
|
||||
<ImageUploader
|
||||
target="avatar"
|
||||
id="avatar-upload"
|
||||
buttonMsg="Change avatar"
|
||||
handleAvatarChange={handleAvatarChange}
|
||||
imageRef={imageSrc ? imageSrc : props.user.avatar}
|
||||
imageRef={imageSrc}
|
||||
/>
|
||||
</div>
|
||||
<hr className="mt-6" />
|
||||
|
|
@ -331,15 +332,30 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
|
|||
return { redirect: { permanent: false, destination: "/auth/login" } };
|
||||
}
|
||||
|
||||
const user = await whereAndSelect(
|
||||
prisma.user.findFirst,
|
||||
{
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
["id", "username", "name", "email", "bio", "avatar", "timeZone", "weekStart", "hideBranding", "theme"]
|
||||
);
|
||||
select: {
|
||||
id: true,
|
||||
username: true,
|
||||
name: true,
|
||||
email: true,
|
||||
bio: true,
|
||||
avatar: true,
|
||||
timeZone: true,
|
||||
weekStart: true,
|
||||
hideBranding: true,
|
||||
theme: true,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
props: { user }, // will be passed to the page component as props
|
||||
props: {
|
||||
user: {
|
||||
...user,
|
||||
emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -780,6 +780,18 @@
|
|||
"@radix-ui/react-polymorphic" "0.0.13"
|
||||
"@radix-ui/react-primitive" "0.0.15"
|
||||
|
||||
"@radix-ui/react-avatar@^0.0.15":
|
||||
version "0.0.15"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-0.0.15.tgz#5cb9280bde8cc1bca27a816c4a0b631222c9308b"
|
||||
integrity sha512-mZHHCMU7CODOpisqiimrvVCUtcFcQLtuaqQUBwR9dYXoMxjBN1XtQXUGdTvFpPFXd11C9b6i6Gjfvti6yD8Jcg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-context" "0.0.5"
|
||||
"@radix-ui/react-polymorphic" "0.0.13"
|
||||
"@radix-ui/react-primitive" "0.0.15"
|
||||
"@radix-ui/react-use-callback-ref" "0.0.5"
|
||||
"@radix-ui/react-use-layout-effect" "0.0.5"
|
||||
|
||||
"@radix-ui/react-collapsible@^0.0.17":
|
||||
version "0.0.17"
|
||||
resolved "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-0.0.17.tgz#d778ec1d5b7b4543fd4db1b3e4be96c74568d441"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user