Merge branch 'main' into feat/reset-branding-to-default

apps/remix/app/components/dialogs/folder-delete-dialog.tsx

@@ -122,7 +122,7 @@ export const FolderDeleteDialog = ({ folder, isOpen, onOpenChange }: FolderDelet
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>

apps/remix/app/components/dialogs/organisation-create-dialog.tsx

@@ -336,7 +336,7 @@ const BillingPlanForm = ({ value, onChange, plans, canCreateFreeOrganisation }:
         >
           <div className="w-full text-left">
             <div className="flex items-center justify-between">
-              <p className="text-medium">
+              <p className="font-medium">
                 <Trans context="Plan price">Free</Trans>
               </p>
 

apps/remix/app/components/dialogs/organisation-email-domain-delete-dialog.tsx

@@ -115,7 +115,7 @@ export const OrganisationEmailDomainDeleteDialog = ({
                     <FormLabel>
                       <Trans>
                         Confirm by typing{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -370,7 +370,7 @@ export const OrganisationMemberInviteDialog = ({ trigger, ...props }: Organisati
                           <button
                             type="button"
                             className={cn(
-                              'justify-left inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
+                              'inline-flex h-10 w-10 items-center justify-start text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50',
                               index === 0 ? 'mt-8' : 'mt-0',
                             )}
                             disabled={organisationMemberInvites.length === 1}

apps/remix/app/components/dialogs/token-create-dialog.tsx

@@ -0,0 +1,250 @@
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
+import { trpc } from '@documenso/trpc/react';
+import { ZCreateApiTokenRequestSchema } from '@documenso/trpc/server/api-token-router/create-api-token.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@documenso/ui/primitives/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@documenso/ui/primitives/form/form';
+import { Input } from '@documenso/ui/primitives/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@documenso/ui/primitives/select';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
+import type { z } from 'zod';
+
+import { useCurrentTeam } from '~/providers/team';
+
+const NEVER_EXPIRE = 'NEVER' as const;
+
+export const EXPIRATION_DATES = {
+  ONE_WEEK: msg`7 days`,
+  ONE_MONTH: msg`1 month`,
+  THREE_MONTHS: msg`3 months`,
+  SIX_MONTHS: msg`6 months`,
+  ONE_YEAR: msg`12 months`,
+  [NEVER_EXPIRE]: msg`Never`,
+} as const;
+
+const ZCreateTokenFormSchema = ZCreateApiTokenRequestSchema.pick({
+  tokenName: true,
+  expirationDate: true,
+});
+
+type TCreateTokenFormSchema = z.infer<typeof ZCreateTokenFormSchema>;
+
+export type TokenCreateDialogProps = {
+  trigger?: React.ReactNode;
+} & Omit<DialogPrimitive.DialogProps, 'children'>;
+
+export const TokenCreateDialog = ({ trigger, ...props }: TokenCreateDialogProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const team = useCurrentTeam();
+
+  const [open, setOpen] = useState(false);
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+
+  const form = useForm<TCreateTokenFormSchema>({
+    resolver: zodResolver(ZCreateTokenFormSchema),
+    defaultValues: {
+      tokenName: '',
+      expirationDate: 'THREE_MONTHS',
+    },
+  });
+
+  const { mutateAsync: createToken } = trpc.apiToken.create.useMutation();
+
+  const onSubmit = async ({ tokenName, expirationDate }: TCreateTokenFormSchema) => {
+    try {
+      const { token } = await createToken({
+        teamId: team.id,
+        tokenName,
+        expirationDate: expirationDate === NEVER_EXPIRE ? null : expirationDate,
+      });
+
+      setCreatedToken(token);
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.UNAUTHORIZED, () => msg`You do not have permission to create a token for this team.`)
+        .otherwise(() => msg`Something went wrong. Please try again later.`);
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+        duration: 5000,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      form.reset();
+      setCreatedToken(null);
+    }
+  }, [open, form]);
+
+  return (
+    <Dialog open={open} onOpenChange={(value) => !form.formState.isSubmitting && setOpen(value)} {...props}>
+      <DialogTrigger onClick={(e) => e.stopPropagation()} asChild>
+        {trigger ?? (
+          <Button className="flex-shrink-0">
+            <Trans>Create token</Trans>
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent
+        className="max-w-lg"
+        position="center"
+        onInteractOutside={(event) => {
+          // Prevent losing the created token by accidentally clicking outside the dialog.
+          if (createdToken) {
+            event.preventDefault();
+          }
+        }}
+      >
+        {createdToken ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Token created</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Copy your token now. For security reasons you will not be able to see it again.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="relative">
+              <Input
+                className="pr-12 font-mono text-sm"
+                aria-label={_(msg`Your new API token`)}
+                name="createdToken"
+                readOnly
+                value={createdToken}
+              />
+              <div className="absolute top-0 right-2 bottom-0 flex items-center justify-center">
+                <CopyTextButton
+                  value={createdToken}
+                  onCopySuccess={() => toast({ title: _(msg`Token copied to clipboard`) })}
+                />
+              </div>
+            </div>
+
+            <DialogFooter>
+              <Button type="button" onClick={() => setOpen(false)}>
+                <Trans>Done</Trans>
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>
+                <Trans>Create API token</Trans>
+              </DialogTitle>
+
+              <DialogDescription>
+                <Trans>Use API tokens to authenticate with the Documenso API.</Trans>
+              </DialogDescription>
+            </DialogHeader>
+
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <fieldset className="flex h-full flex-col space-y-4" disabled={form.formState.isSubmitting}>
+                  <FormField
+                    control={form.control}
+                    name="tokenName"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel required>
+                          <Trans>Name</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Input className="bg-background" {...field} />
+                        </FormControl>
+
+                        <FormDescription>
+                          <Trans>A name to help you identify this token later.</Trans>
+                        </FormDescription>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="expirationDate"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          <Trans>Expires in</Trans>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Select value={field.value ?? NEVER_EXPIRE} onValueChange={field.onChange}>
+                            <SelectTrigger className="bg-background">
+                              <SelectValue />
+                            </SelectTrigger>
+
+                            <SelectContent>
+                              {Object.entries(EXPIRATION_DATES).map(([key, date]) => (
+                                <SelectItem key={key} value={key}>
+                                  {_(date)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DialogFooter>
+                    <Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+                      <Trans>Cancel</Trans>
+                    </Button>
+
+                    <Button type="submit" loading={form.formState.isSubmitting}>
+                      <Trans>Create token</Trans>
+                    </Button>
+                  </DialogFooter>
+                </fieldset>
+              </form>
+            </Form>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/remix/app/components/dialogs/token-delete-dialog.tsx

@@ -105,7 +105,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <Trans>Are you sure you want to delete this token?</Trans>
+            <Trans>Delete token</Trans>
           </DialogTitle>
 
           <DialogDescription>
@@ -126,7 +126,7 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
 
@@ -139,21 +139,18 @@ export default function TokenDeleteDialog({ token, onDelete, children }: TokenDe
               />
 
               <DialogFooter>
-                <div className="flex w-full flex-nowrap gap-4">
-                  <Button type="button" variant="secondary" className="flex-1" onClick={() => setIsOpen(false)}>
-                    <Trans>Cancel</Trans>
-                  </Button>
+                <Button type="button" variant="secondary" onClick={() => setIsOpen(false)}>
+                  <Trans>Cancel</Trans>
+                </Button>
 
-                  <Button
-                    type="submit"
-                    variant="destructive"
-                    className="flex-1"
-                    disabled={!form.formState.isValid}
-                    loading={form.formState.isSubmitting}
-                  >
-                    <Trans>I'm sure! Delete it</Trans>
-                  </Button>
-                </div>
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  disabled={!form.formState.isValid}
+                  loading={form.formState.isSubmitting}
+                >
+                  <Trans>Delete</Trans>
+                </Button>
               </DialogFooter>
             </fieldset>
           </form>

apps/remix/app/components/dialogs/webhook-delete-dialog.tsx

@@ -117,7 +117,7 @@ export const WebhookDeleteDialog = ({ webhook, children }: WebhookDeleteDialogPr
                     <FormLabel>
                       <Trans>
                         Confirm by typing:{' '}
-                        <span className="font-semibold font-sm text-destructive">{deleteMessage}</span>
+                        <span className="font-semibold text-destructive text-sm">{deleteMessage}</span>
                       </Trans>
                     </FormLabel>
                     <FormControl>