blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

Avatar from user

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

57
apps/web/components/navigation.tsx
View File

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

20
apps/web/components/settings.tsx
View File

@@ -16,14 +16,9 @@ import { useRouter } from "next/router";
import Link from "next/link"; import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import avatarFromInitials from "avatar-from-initials"; import avatarFromInitials from "avatar-from-initials";
import { useSession } from "next-auth/react";
const user = { import { User } from "next-auth";
name: "Debbie Lewis", import { Value } from "sass";
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",
};
const subNavigation = [ const subNavigation = [
{ {
@@ -52,6 +47,8 @@ function classNames(...classes: any) {
export default function Setttings() { export default function Setttings() {
const [availableToHire, setAvailableToHire] = useState(true); const [availableToHire, setAvailableToHire] = useState(true);
const session = useSession();
let user = session.data?.user;
const router = useRouter(); const router = useRouter();
subNavigation.forEach((element) => { subNavigation.forEach((element) => {
@@ -81,7 +78,7 @@ export default function Setttings() {
href={item.href} href={item.href}
className={classNames( className={classNames(
item.current 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", : "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" "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" type="text"
name="first-name" name="first-name"
id="first-name" id="first-name"
value="Timur Ercan" value={user?.name || ""}
onChange={() => {}}
autoComplete="given-name" 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" 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> </label>
<input <input
disabled disabled
value={user.email} value={user?.email}
type="text" type="text"
name="first-name" name="first-name"
id="first-name" id="first-name"

22
apps/web/pages/api/auth/[...nextauth].ts
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 GitHubProvider from "next-auth/providers/github";
import CredentialsProvider from "next-auth/providers/credentials"; import CredentialsProvider from "next-auth/providers/credentials";
import { ErrorCode } from "@documenso/lib/auth"; import { ErrorCode } from "@documenso/lib/auth";
@@ -67,11 +67,29 @@ export default NextAuth({
} }
return { return {
id: user.id.toString(), id: user.id,
email: user.email, email: user.email,
name: user.name, 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;
},
},
}); });