Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: avatar images

Browse Source
This commit is contained in:
Mythie
2024-06-27 21:50:42 +10:00
parent 5b4e6e530b
commit 22c02aac02
19 changed files with 546 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/app/(dashboard)/settings/profile/page.tsx
View File

@ -3,6 +3,7 @@ import type { Metadata } from 'next';
import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
import { AvatarImageForm } from '~/components/forms/avatar-image';
import { ProfileForm } from '~/components/forms/profile';
import { DeleteAccountDialog } from './delete-account-dialog';
@ -18,6 +19,7 @@ export default async function ProfileSettingsPage() {
<div>
<SettingsHeader title="Profile" subtitle="Here you can edit your personal details." />
<AvatarImageForm className="mb-8 max-w-xl" user={user} />
<ProfileForm className="mb-8 max-w-xl" user={user} />
<hr className="my-4 max-w-xl" />

10
apps/web/src/app/(profile)/layout.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
import { getTeams } from '@documenso/lib/server-only/team/get-teams';
import { RefreshOnFocus } from '~/components/(dashboard)/refresh-on-focus/refresh-on-focus';
@ -16,18 +15,15 @@ type PublicProfileLayoutProps = {
export default async function PublicProfileLayout({ children }: PublicProfileLayoutProps) {
const { user, session } = await getServerComponentSession();
let teams: GetTeamsResponse = [];
if (user && session) {
teams = await getTeams({ userId: user.id });
}
// I wouldn't typically do this but it's better than the `let` statement
const teams = user && session ? await getTeams({ userId: user.id }) : undefined;
return (
<NextAuthProvider session={session}>
<div className="min-h-screen">
<ProfileHeader user={user} teams={teams} />
<main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>
<main className="my-8 px-4 md:my-12 md:px-8">{children}</main>
</div>
<RefreshOnFocus />

62
apps/web/src/app/(profile)/p/[url]/page.tsx
View File

@ -5,10 +5,12 @@ import { notFound, redirect } from 'next/navigation';
import { FileIcon } from 'lucide-react';
import { DateTime } from 'luxon';
import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import { getServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
import { getPublicProfileByUrl } from '@documenso/lib/server-only/profile/get-public-profile-by-url';
import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
import { formatDirectTemplatePath } from '@documenso/lib/utils/templates';
import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
import { Button } from '@documenso/ui/primitives/button';
import {
Table,
@ -52,19 +54,27 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
notFound();
}
const { user } = await getServerComponentSession();
const { profile, templates } = publicProfile;
return (
<div className="flex flex-col items-center justify-center py-4 sm:py-32">
<div className="flex flex-col items-center">
<Avatar className="dark:border-border h-24 w-24 border-2 border-solid">
{publicProfile.avatarImageId && (
<AvatarImage
src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${publicProfile.avatarImageId}`}
/>
)}
<AvatarFallback className="text-sm text-gray-400">
{extractInitials(publicProfile.name)}
</AvatarFallback>
</Avatar>
<div className="mt-4 flex flex-row items-center justify-center">
<h2 className="font-bold">{publicProfile.name}</h2>
<h2 className="text-xl font-semibold md:text-2xl">{publicProfile.name}</h2>
{publicProfile.badge && (
<Tooltip>
@ -88,7 +98,7 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
/>
<div className="ml-2">
<p className="text-foreground text-base font-bold">
<p className="text-foreground text-base font-semibold">
{BADGE_DATA[publicProfile.badge.type].name}
</p>
<p className="text-muted-foreground mt-0.5 text-sm">
@ -100,13 +110,43 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
)}
</div>
<div className="text-muted-foreground mt-4 max-w-lg whitespace-pre-wrap break-words text-center">
{profile.bio}
<div className="text-muted-foreground mt-4 space-y-1">
{(profile.bio ?? '').split('\n').map((line, index) => (
<p
key={index}
className="max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm"
>
{line}
</p>
))}
</div>
</div>
{templates.length === 0 && (
<div className="mt-4 w-full max-w-xl border-t pt-4">
<p className="text-muted-foreground max-w-[60ch] whitespace-pre-wrap break-words text-center text-sm leading-relaxed">
It looks like {publicProfile.name} hasn't added any documents to their profile yet.{' '}
{!user?.id && (
<span className="mt-2 inline-block">
While waiting for them to do so you can create your own Documenso account and get
started with document signing right away.
</span>
)}
{'userId' in profile && user?.id === profile.userId && (
<span className="mt-2 inline-block">
Go to your{' '}
<Link href="/settings/public-profile" className="underline">
public profile settings
</Link>{' '}
to add documents.
</span>
)}
</p>
</div>
)}
{templates.length > 0 && (
<div className="mt-8 w-full max-w-3xl rounded-md border">
<div className="mt-8 w-full max-w-xl rounded-md border">
<Table className="w-full" overflowHidden>
<TableHeader>
<TableRow>
@ -119,16 +159,18 @@ export default async function PublicProfilePage({ params }: PublicProfilePagePro
{templates.map((template) => (
<TableRow key={template.id}>
<TableCell className="text-muted-foreground flex flex-col justify-between overflow-hidden text-sm sm:flex-row">
<div className="flex flex-1 items-start gap-2">
<div className="flex flex-1 items-start justify-start gap-2">
<FileIcon
className="text-muted-foreground/40 h-8 w-8 flex-shrink-0"
strokeWidth={1.5}
/>
<div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-center md:justify-between">
<div className="flex flex-1 flex-col gap-4 overflow-hidden md:flex-row md:items-start md:justify-between">
<div>
<p className="text-sm font-bold">{template.publicTitle}</p>
<p className="line-clamp-3 max-w-[70ch] whitespace-normal text-xs text-neutral-400">
<p className="text-foreground text-sm font-semibold leading-none">
{template.publicTitle}
</p>
<p className="text-muted-foreground mt-1 line-clamp-3 max-w-[70ch] whitespace-normal text-xs">
{template.publicDescription}
</p>
</div>

4
apps/web/src/app/(profile)/profile-header.tsx
View File

@ -62,9 +62,9 @@ export const ProfileHeader = ({ user, teams = [] }: ProfileHeaderProps) => {
</Link>
<div className="flex flex-row items-center justify-center">
<p className="mr-4 text-neutral-400">
<p className="text-muted-foreground mr-4">
<span className="text-sm sm:hidden">Want your own public profile?</span>
<span className="hidden sm:block">
<span className="hidden text-sm sm:block">
Like to have your own public profile with agreements?
</span>
</p>

3
apps/web/src/app/(teams)/t/[teamUrl]/settings/page.tsx
View File

@ -13,6 +13,7 @@ import { AddTeamEmailDialog } from '~/components/(teams)/dialogs/add-team-email-
import { DeleteTeamDialog } from '~/components/(teams)/dialogs/delete-team-dialog';
import { TransferTeamDialog } from '~/components/(teams)/dialogs/transfer-team-dialog';
import { UpdateTeamForm } from '~/components/(teams)/forms/update-team-form';
import { AvatarImageForm } from '~/components/forms/avatar-image';
import { TeamEmailDropdown } from './team-email-dropdown';
import { TeamTransferStatus } from './team-transfer-status';
@ -44,6 +45,8 @@ export default async function TeamsSettingsPage({ params }: TeamsSettingsPagePro
transferVerification={team.transferVerification}
/>
<AvatarImageForm className="mb-8" team={team} user={session.user} />
<UpdateTeamForm teamId={team.id} teamName={team.name} teamUrl={team.url} />
<section className="mt-6 space-y-6">

16
apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
View File

@ -7,6 +7,7 @@ import { motion } from 'framer-motion';
import { CheckCircle2, ChevronsUpDown, Plus, Settings2 } from 'lucide-react';
import { signOut } from 'next-auth/react';
import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import { TEAM_MEMBER_ROLE_MAP, TEAM_URL_REGEX } from '@documenso/lib/constants/teams';
import { isAdmin } from '@documenso/lib/next-auth/guards/is-admin';
import type { GetTeamsResponse } from '@documenso/lib/server-only/team/get-teams';
@ -99,6 +100,9 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
className="relative flex h-12 flex-row items-center px-0 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent md:px-2"
>
<AvatarWithText
avatarSrc={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${
selectedTeam ? selectedTeam.avatarImageId : user.avatarImageId
}`}
avatarFallback={formatAvatarFallback(selectedTeam?.name)}
primaryText={selectedTeam ? selectedTeam.name : user.name}
secondaryText={formatSecondaryAvatarText(selectedTeam)}
@ -122,6 +126,11 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
<DropdownMenuItem asChild>
<Link href={formatRedirectUrlOnSwitch()}>
<AvatarWithText
avatarSrc={
user.avatarImageId
? `${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${user.avatarImageId}`
: undefined
}
avatarFallback={formatAvatarFallback()}
primaryText={user.name}
secondaryText={formatSecondaryAvatarText()}
@ -180,10 +189,15 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
href={formatRedirectUrlOnSwitch(team.url)}
>
<AvatarWithText
avatarSrc={
team.avatarImageId
? `${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${team.avatarImageId}`
: undefined
}
avatarFallback={formatAvatarFallback(team.name)}
primaryText={team.name}
secondaryText={
<div className="relative">
<div className="relative w-full">
<motion.span
className="overflow-hidden"
variants={{

188
apps/web/src/components/forms/avatar-image.tsx Normal file
View File

@ -0,0 +1,188 @@
'use client';
import { useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod';
import { ErrorCode, useDropzone } from 'react-dropzone';
import { useForm } from 'react-hook-form';
import { match } from 'ts-pattern';
import { z } from 'zod';
import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import { base64 } from '@documenso/lib/universal/base64';
import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
import type { Team, User } from '@documenso/prisma/client';
import { TRPCClientError } from '@documenso/trpc/client';
import { trpc } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
import { Button } from '@documenso/ui/primitives/button';
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@documenso/ui/primitives/form/form';
import { useToast } from '@documenso/ui/primitives/use-toast';
export const ZAvatarImageFormSchema = z.object({
bytes: z.string().nullish(),
});
export type TAvatarImageFormSchema = z.infer<typeof ZAvatarImageFormSchema>;
export type AvatarImageFormProps = {
className?: string;
user: User;
team?: Team;
};
export const AvatarImageForm = ({ className, user, team }: AvatarImageFormProps) => {
const { toast } = useToast();
const router = useRouter();
const { mutateAsync: setProfileImage } = trpc.profile.setProfileImage.useMutation();
const initials = extractInitials(team?.name || user.name || '');
const hasAvatarImage = useMemo(() => {
if (team) {
return team.avatarImageId !== null;
}
return user.avatarImageId !== null;
}, [team, user.avatarImageId]);
const avatarImageId = team ? team.avatarImageId : user.avatarImageId;
const form = useForm<TAvatarImageFormSchema>({
values: {
bytes: null,
},
resolver: zodResolver(ZAvatarImageFormSchema),
});
const { getRootProps, getInputProps } = useDropzone({
maxSize: 1024 * 1024,
accept: {
'image/*': ['.png', '.jpg', '.jpeg'],
},
multiple: false,
onDropAccepted: ([file]) => {
void file.arrayBuffer().then((buffer) => {
const contents = base64.encode(new Uint8Array(buffer));
form.setValue('bytes', contents);
void form.handleSubmit(onFormSubmit)();
});
},
onDropRejected: ([file]) => {
form.setError('bytes', {
type: 'onChange',
message: match(file.errors[0].code)
.with(ErrorCode.FileTooLarge, () => 'Uploaded file is too large')
.with(ErrorCode.FileTooSmall, () => 'Uploaded file is too small')
.with(ErrorCode.FileInvalidType, () => 'Uploaded file not an allowed file type')
.otherwise(() => 'An unknown error occurred'),
});
},
});
const onFormSubmit = async (data: TAvatarImageFormSchema) => {
try {
await setProfileImage({
bytes: data.bytes,
teamId: team?.id,
});
toast({
title: 'Avatar Updated',
description: 'Your avatar has been updated successfully.',
duration: 5000,
});
router.refresh();
} catch (err) {
if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
toast({
title: 'An error occurred',
description: err.message,
variant: 'destructive',
});
} else {
toast({
title: 'An unknown error occurred',
variant: 'destructive',
description:
'We encountered an unknown error while attempting to update the avatar. Please try again later.',
});
}
}
};
return (
<Form {...form}>
<form
className={cn('flex w-full flex-col gap-y-4', className)}
// onSubmit={form.handleSubmit(onFormSubmit)}
>
<fieldset className="flex w-full flex-col gap-y-4" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="bytes"
render={() => (
<FormItem>
<FormLabel>Avatar</FormLabel>
<FormControl>
<div className="flex items-center gap-8">
<div className="relative">
<Avatar className="h-16 w-16 border-2 border-solid">
{avatarImageId && (
<AvatarImage
src={`${NEXT_PUBLIC_WEBAPP_URL()}/api/avatar/${avatarImageId}`}
/>
)}
<AvatarFallback className="text-sm text-gray-400">
{initials}
</AvatarFallback>
</Avatar>
{hasAvatarImage && (
<button
className="bg-background/70 text-destructive absolute inset-0 flex cursor-pointer items-center justify-center text-xs opacity-0 transition-opacity hover:opacity-100"
disabled={form.formState.isSubmitting}
onClick={() => void onFormSubmit({ bytes: null })}
>
Remove
</button>
)}
</div>
<Button
type="button"
variant="secondary"
size="sm"
{...getRootProps()}
loading={form.formState.isSubmitting}
disabled={form.formState.isSubmitting}
>
Upload Avatar
<input {...getInputProps()} />
</Button>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</fieldset>
</form>
</Form>
);
};

2
apps/web/src/components/templates/manage-public-template-dialog.tsx
View File

@ -169,6 +169,8 @@ export const ManagePublicTemplateDialog = ({
description: 'Template has been updated.',
duration: 5000,
});
onOpenChange(false);
} catch {
toast({
title: 'An unknown error occurred',

34
apps/web/src/pages/api/avatar/[id].tsx Normal file
View File

@ -0,0 +1,34 @@
import type { NextApiRequest, NextApiResponse } from 'next';
import { getAvatarImage } from '@documenso/lib/server-only/profile/get-avatar-image';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== 'GET') {
return res.status(405).json({
status: 'error',
message: 'Method not allowed',
});
}
const { id } = req.query;
if (typeof id !== 'string') {
return res.status(400).json({
status: 'error',
message: 'Missing id',
});
}
const result = await getAvatarImage({ id });
if (!result) {
return res.status(404).json({
status: 'error',
message: 'Not found',
});
}
res.setHeader('Content-Type', result.contentType);
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
res.send(result.content);
}