Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-17 02:01:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: wip

Browse Source
This commit is contained in:
David Nguyen
2023-12-27 17:32:56 +11:00
parent ca703fc221
commit 917a1271bf
8 changed files with 170 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/app/(dashboard)/settings/teams/page.tsx
View File

@ -3,40 +3,17 @@
import { AnimatePresence, motion } from 'framer-motion';
import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
import { useToast } from '@documenso/ui/primitives/use-toast';
import SettingsHeader from '~/components/(dashboard)/settings/layout/header';
import CreateTeamDialog from '~/components/(teams)/dialogs/create-team-dialog';
import UserTeamsPageDataTable from '~/components/(teams)/tables/user-teams-page-data-table';
import TeamEmailUsage from './team-email-usage';
import { TeamInvitations } from './team-invitations';
export default function TeamsSettingsPage() {
const { toast } = useToast();
const { data: teamEmail } = trpc.team.getTeamEmailByEmail.useQuery();
const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
trpc.team.deleteTeamEmail.useMutation({
onSuccess: () => {
toast({
title: 'Success',
description: 'You have successfully revoked access.',
duration: 5000,
});
},
onError: () => {
toast({
title: 'Something went wrong',
variant: 'destructive',
duration: 10000,
description:
'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
});
},
});
return (
<div>
<SettingsHeader title="Teams" subtitle="Manage all teams you are currently associated with.">
@ -58,35 +35,7 @@ export default function TeamsSettingsPage() {
opacity: 0,
}}
>
<div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
<div className="text-sm">
<h3 className="text-base font-medium">Team email</h3>
<p className="text-muted-foreground">
Your email is currently being used by team{' '}
<span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
).
</p>
<p className="text-muted-foreground mt-1">
They have permission on your behalf to:
</p>
<ul className="text-muted-foreground mt-0.5 list-inside list-disc">
<li>Display your name and email in documents</li>
<li>View all documents sent to your account</li>
</ul>
</div>
{/* Todo: Teams - Add 'are you sure'. */}
<Button
variant="destructive"
loading={isDeletingTeamEmail}
onClick={async () => deleteTeamEmail({ teamId: teamEmail.team.id })}
>
Revoke access
</Button>
</div>
<TeamEmailUsage teamEmail={teamEmail} />
</motion.section>
)}
</AnimatePresence>

103
apps/web/src/app/(dashboard)/settings/teams/team-email-usage.tsx Normal file
View File

@ -0,0 +1,103 @@
'use client';
import { useState } from 'react';
import type { TeamEmail } from '@documenso/prisma/client';
import { trpc } from '@documenso/trpc/react';
import { Button } from '@documenso/ui/primitives/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@documenso/ui/primitives/dialog';
import { useToast } from '@documenso/ui/primitives/use-toast';
export type TeamEmailUsageProps = {
teamEmail: TeamEmail & { team: { name: string; url: string } };
};
export default function TeamEmailUsage({ teamEmail }: TeamEmailUsageProps) {
const [open, setOpen] = useState(false);
const { toast } = useToast();
const { mutateAsync: deleteTeamEmail, isLoading: isDeletingTeamEmail } =
trpc.team.deleteTeamEmail.useMutation({
onSuccess: () => {
toast({
title: 'Success',
description: 'You have successfully revoked access.',
duration: 5000,
});
},
onError: () => {
toast({
title: 'Something went wrong',
variant: 'destructive',
duration: 10000,
description:
'We encountered an unknown error while attempting to revoke access. Please try again or contact support.',
});
},
});
return (
<div className="mt-8 flex flex-row items-center justify-between rounded-lg bg-gray-50/70 p-6">
<div className="text-sm">
<h3 className="text-base font-medium">Team email</h3>
<p className="text-muted-foreground">
Your email is currently being used by team{' '}
<span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}
).
</p>
<p className="text-muted-foreground mt-1">They have permission on your behalf to:</p>
<ul className="text-muted-foreground mt-0.5 list-inside list-disc">
<li>Display your name and email in documents</li>
<li>View all documents sent to your account</li>
</ul>
</div>
<Dialog open={open} onOpenChange={(value) => !isDeletingTeamEmail && setOpen(value)}>
<DialogTrigger asChild>
<Button variant="destructive">Revoke access</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription className="mt-4">
You are about to revoke access for team{' '}
<span className="font-semibold">{teamEmail.team.name}</span> ({teamEmail.team.url}) to
use your email.
</DialogDescription>
</DialogHeader>
<fieldset disabled={isDeletingTeamEmail}>
<DialogFooter className="space-x-4">
<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button
type="submit"
variant="destructive"
loading={isDeletingTeamEmail}
onClick={async () => deleteTeamEmail({ teamId: teamEmail.teamId })}
>
Revoke
</Button>
</DialogFooter>
</fieldset>
</DialogContent>
</Dialog>
</div>
);
}