feat(pgp): upgrade pgp key modal

michaelfortunato · Apr 26, 2024 · 3b19bae · 3b19bae
1 parent bac2274
commit 3b19bae
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 31 deletions.
diff --git a/components/GPGKey.tsx b/components/GPGKey.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { useCopyToClipboard, useIsMounted } from "@/lib/hooks";
 import { Button } from "@/components/ui/button";
 import { Fingerprint, KeyRound, KeySquare } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Toaster } from "@/components/ui/toaster";
 import { useToast } from "@/components/ui/use-toast";
-import { DownloadIcon } from "@radix-ui/react-icons";
+import { CheckIcon, DownloadIcon } from "@radix-ui/react-icons";
 import Image from "next/image";
 import Link from "next/link";
 import {
@@ -18,6 +18,7 @@ import {
 import { Badge } from "@/components/ui/badge";
 import Copy from "@geist-ui/icons/copy";
 import GNUIcon from "@/public/Official_gnu.svg";
+import { motion } from "framer-motion";
 
 const mPubID = `rsa4096/1B35E71D2AD7D44E 2024-04-18 [SC] [expires: 2025-04-18]`;
 const mPubFingerprint = `B3C97C24E201EF1777ABFF0B1B35E71D2AD7D44E`;
@@ -87,6 +88,7 @@ sub   rsa4096/6E20758D549A7D0F 2024-04-18 [E] [expires: 2025-04-18]
       994CE1164CB34E4973FA56556E20758D549A7D0F
 `;
 
+import Check from "@geist-ui/icons/check";
 const CopyButton: React.ForwardRefExoticComponent<
   {
     textToCopy: string;
@@ -96,20 +98,40 @@ const CopyButton: React.ForwardRefExoticComponent<
 > = React.forwardRef(
   ({ className, textToCopy, handleCopyPromise, ...props }, ref) => {
     const [copiedText, setCopiedText] = useCopyToClipboard();
+    const [showCheck, setShowCheck] = useState(false);
+    const timer = useRef<any>(null);
+
+    useEffect(() => {
+      if (showCheck) {
+        timer.current = setTimeout(() => {
+          setShowCheck(false);
+        }, 1000);
+      } else {
+        if (timer.current) {
+          clearTimeout(timer.current);
+          timer.current = null;
+        }
+      }
+      return () => {
+        timer.current && clearTimeout(timer.current);
+      };
+    }, [showCheck]);
+
     return (
       <Button
         ref={ref}
         {...props}
         variant="ghost"
         size="icon"
-        className={cn("active:bg-card active:text-black", className)}
+        className={cn("active:text-black", className)}
         onClick={(e) => {
-          // onClick has to come before the prop spread to override it
-          console.log(e);
-          handleCopyPromise(setCopiedText(textToCopy));
+          if (!showCheck) {
+            handleCopyPromise(setCopiedText(textToCopy));
+          }
+          setShowCheck(!showCheck);
         }}
       >
-        <Copy />
+        {showCheck ? <Check width={24} height={24} /> : <Copy />}
       </Button>
     );
   },
@@ -230,43 +252,66 @@ function GPGKeyContent() {
   );
 }
 
-function Terminal({ sourceText }: { sourceText: string }) {
+function Terminal() {
   const { toast } = useToast();
-
   const [selected, setSelected] = useState(0);
 
   return (
-    <div className="flex h-full max-h-[inherit] w-full max-w-[inherit] flex-col rounded bg-card">
-      <div className="flex items-center rounded-t border-b-zinc-200 bg-zinc-200 px-4 py-1 text-accent/75 outline outline-zinc-300">
-        <div className="flex-auto">
-          <Button
-            variant="default"
-            className="prose w-fit cursor-pointer rounded bg-current bg-zinc-200 p-2 text-sm text-accent/75 hover:bg-accent/15 hover:text-black"
-            onClick={() => setSelected(0)}
-          >
-            PGP Key
-          </Button>
+    <div className="flex h-full max-h-[inherit] w-full max-w-[inherit] flex-col divide-y divide-zinc-300 rounded bg-card">
+      <div className="flex items-center rounded-t border-b-zinc-200 bg-zinc-200 px-4 py-1 text-accent/75">
+        <div className="flex flex-auto gap-2">
+          <div className="relative">
+            <Button
+              variant="default"
+              className="prose w-fit cursor-pointer rounded bg-current bg-zinc-200 p-2 text-sm text-accent/75 hover:bg-accent/15 hover:text-black"
+              onClick={() => setSelected(0)}
+            >
+              PGP Key
+            </Button>
+            {selected == 0 && (
+              <div className="absolute flex w-full justify-center">
+                <motion.hr className="h-2 w-2/4" />
+              </div>
+            )}
+          </div>
+          <div className="relative">
+            <Button
+              variant="default"
+              className="prose w-fit cursor-pointer rounded bg-current bg-zinc-200 p-2 text-sm text-accent/75 hover:bg-accent/15 hover:text-black"
+              onClick={() => setSelected(1)}
+            >
+              Metadata
+            </Button>
+            {selected == 1 && (
+              <div className="absolute flex w-full justify-center">
+                <motion.hr className="h-2 w-2/4" />
+              </div>
+            )}
+          </div>
         </div>
         <div className="flex flex-grow flex-row-reverse gap-2">
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <CopyButton
                   className="hover:bg-accent/15 hover:text-black"
-                  textToCopy={sourceText}
+                  textToCopy={selected == 0 ? publicKeyExport : publicKeyEntry}
                   handleCopyPromise={(hello) =>
                     hello
                       .then(() =>
                         toast({
-                          title: "Copied PGP Key Clipboard!",
+                          title:
+                            selected == 0
+                              ? "Copied PGP Key To Clipboard!"
+                              : "Copied PGP Metadata To Clipboard!",
                           className: "flex justify-center",
                           duration: 1000,
                         }),
                       )
                       .catch((e) => {
                         console.log(e);
                         toast({
-                          title: "Could not copied to clipboard",
+                          title: "Could not copy to clipboard",
                           className: "flex justify-center",
                           duration: 1000,
                         });
@@ -300,13 +345,14 @@ function Terminal({ sourceText }: { sourceText: string }) {
           </TooltipProvider>
         </div>
       </div>
-      <div className="relative">
-        <hr className="absolute h-2 w-1 scale-x-[200] text-black" />
-      </div>
-      <ScrollArea className="h-full max-h-[inherit] w-full max-w-[inherit] flex-grow p-4 pl-8 pt-0">
-        <pre className="prose">
-          <code>{sourceText}</code>
-        </pre>
+      <ScrollArea className="h-full max-h-[inherit] w-full max-w-[inherit] flex-grow p-4 pl-8 pt-0 antialiased">
+        {selected == 0 ? (
+          <pre className="prose">
+            <code>{publicKeyExport}</code>
+          </pre>
+        ) : (
+          <GPGKeyEntry />
+        )}
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </div>
@@ -316,7 +362,7 @@ function Terminal({ sourceText }: { sourceText: string }) {
 function GPGKey() {
   return (
     <div className="max-h-[80vh] overflow-hidden rounded-t p-0">
-      <Terminal sourceText={publicKeyExport} />
+      <Terminal />
     </div>
   );
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -97,7 +97,7 @@ const Page: NextPageWithLayout<Props> = ({ buildInfo }: Props) => {
                     <Button>Close</Button>
                   </div>
                 </DialogOverlay>
-                <DialogContent className="w-fit max-w-full bg-card p-0">
+                <DialogContent className="w-fit max-w-full transform bg-card p-0">
                   <GPGKey />
                 </DialogContent>
               </DialogPortal>