Avatar from user

This commit is contained in:
Timur Ercan
2023-01-19 14:13:21 +01:00
parent c9bfa33dce
commit 45ed02387e
3 changed files with 61 additions and 38 deletions

View File

@ -1,4 +1,4 @@
import { Fragment } from "react";
import { Fragment, useEffect } from "react";
import { Disclosure, Menu, Transition } from "@headlessui/react";
import Link from "next/link";
import { useRouter } from "next/router";
@ -18,12 +18,13 @@ import {
} from "@heroicons/react/24/outline";
import Logo from "./logo";
const user = {
name: "Timur Ercan",
email: "timur@documenso.com",
imageUrl:
"https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg",
let user: {
id?: number | undefined;
name?: string | null;
email?: string | null;
image?: string | null;
};
const navigation = [
{
name: "Dashboard",
@ -77,7 +78,11 @@ function classNames(...classes: any) {
}
export default function TopNavigation() {
// const session = useSession();
const session = useSession();
useEffect(() => {
user = { ...session.data?.user };
});
const router = useRouter();
navigation.forEach((element) => {
@ -119,16 +124,20 @@ export default function TopNavigation() {
</div>
<div className="hidden sm:ml-6 sm:flex sm:items-center">
<span className="text-sm">
<p className="font-bold">{user.name}</p>
<p>{user.email}</p>
<p className="font-bold">{user?.name || ""}</p>
<p>{user?.email}</p>
</span>
<Menu as="div" className="relative ml-3">
<div>
<Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2">
<span className="sr-only">Open user menu</span>
<div
key={user?.email}
dangerouslySetInnerHTML={{
__html: avatarFromInitials("Timur Ercan", 40),
__html: avatarFromInitials(
user?.name || "" || "",
40
),
}}
/>
</Menu.Button>
@ -184,52 +193,50 @@ export default function TopNavigation() {
<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 pt-2 pb-3">
{navigation.map((item) => (
<Disclosure.Button
<Link
key={item.name}
as="a"
href={item.href}
as="a"
className={classNames(
item.current
? "bg-indigo-50 border-indigo-500 text-indigo-700"
? "bg-teal-50 border-teal-500 text-teal-700"
: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800",
"block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
)}
aria-current={item.current ? "page" : undefined}
>
{item.name}
</Disclosure.Button>
</Link>
))}
</div>
<div className="border-t border-gray-200 pt-4 pb-3">
<div className="flex items-center px-4">
<div className="flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
src={user.imageUrl}
alt=""
<div
key={user?.email}
dangerouslySetInnerHTML={{
__html: avatarFromInitials(user?.name || "" || "", 40),
}}
/>
</div>
<div className="ml-3">
<div className="text-base font-medium text-gray-800">
{user.name}
{user?.name || ""}
</div>
<div className="text-sm font-medium text-gray-500">
{user.email}
{user?.email}
</div>
</div>
<button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
></button>
</div>
<div className="mt-3 space-y-1">
{userNavigation.map((item) => (
<Link
key={item.name}
as="a"
onClick={item.click}
href={item.href}
className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
>

View File

@ -16,14 +16,9 @@ import { useRouter } from "next/router";
import Link from "next/link";
import Head from "next/head";
import avatarFromInitials from "avatar-from-initials";
const user = {
name: "Debbie Lewis",
handle: "deblewis",
email: "debbielewis@example.com",
imageUrl:
"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=320&h=320&q=80",
};
import { useSession } from "next-auth/react";
import { User } from "next-auth";
import { Value } from "sass";
const subNavigation = [
{
@ -52,6 +47,8 @@ function classNames(...classes: any) {
export default function Setttings() {
const [availableToHire, setAvailableToHire] = useState(true);
const session = useSession();
let user = session.data?.user;
const router = useRouter();
subNavigation.forEach((element) => {
@ -81,7 +78,7 @@ export default function Setttings() {
href={item.href}
className={classNames(
item.current
? "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700"
? "bg-teal-50 border-neon-dark text-teal-700 hover:bg-teal-50 hover:text-teal-700"
: "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900",
"group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
)}
@ -194,7 +191,8 @@ export default function Setttings() {
type="text"
name="first-name"
id="first-name"
value="Timur Ercan"
value={user?.name || ""}
onChange={() => {}}
autoComplete="given-name"
className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
/>
@ -208,7 +206,7 @@ export default function Setttings() {
</label>
<input
disabled
value={user.email}
value={user?.email}
type="text"
name="first-name"
id="first-name"

View File

@ -1,4 +1,4 @@
import NextAuth from "next-auth";
import NextAuth, { Session } from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials";
import { ErrorCode } from "@documenso/lib/auth";
@ -67,11 +67,29 @@ export default NextAuth({
}
return {
id: user.id.toString(),
id: user.id,
email: user.email,
name: user.name,
};
},
}),
],
callbacks: {
async jwt({ token, user, account }) {
return {
...token,
};
},
async session({ session, token }) {
const documensoSession: Session = {
...session,
user: {
...session.user,
},
};
documensoSession.expires;
return documensoSession;
},
},
});