KeygenStep: display user's keys as copyable inputs

src/components/copyable-input.tsx

@@ -6,10 +6,14 @@ import { Button, HStack, Input } from './ui';
 interface ICopyableInput {
   /** Text to be copied. */
   value: string;
+  /** Input type. */
+  type?: 'text' | 'password';
+  /** Callback after the value has been copied. */
+  onCopy?(): void;
 }
 
 /** An input with copy abilities. */
-const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
+const CopyableInput: React.FC<ICopyableInput> = ({ value, type = 'text', onCopy }) => {
   const input = useRef<HTMLInputElement>(null);
 
   const selectInput = () => {
@@ -20,13 +24,15 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
     } else {
       document.execCommand('copy');
     }
+
+    onCopy?.();
   };
 
   return (
     <HStack alignItems='center'>
       <Input
         ref={input}
-        type='text'
+        type={type}
         value={value}
         className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
         outerClassName='grow'

src/features/ui/components/modals/nostr-signin-modal/steps/keygen-step.tsx

@@ -3,7 +3,8 @@ import { NostrSigner } from 'nspec';
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Button, Stack, Modal } from 'soapbox/components/ui';
+import CopyableInput from 'soapbox/components/copyable-input';
+import { Button, Stack, Modal, FormGroup } from 'soapbox/components/ui';
 import { NKeys } from 'soapbox/features/nostr/keys';
 import { useInstance } from 'soapbox/hooks';
 import { download } from 'soapbox/utils/download';
@@ -30,10 +31,12 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
   const [downloaded, setDownloaded] = useState(false);
 
   const handleDownload = () => {
-    download(nsec, `${slugify(instance.title)}-${npub.slice(5, 9)}.nsec`);
+    download(nsec, `${slugify(instance.title)}-${npub.slice(5, 9)}.nsec.txt`);
     setDownloaded(true);
   };
 
+  const handleCopy = () => setDownloaded(true);
+
   const handleNext = () => {
     const signer = NKeys.add(secretKey);
     setSigner(signer);
@@ -50,8 +53,18 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
           </Button>
         </Stack>
 
-        <Stack space={3} alignItems='end'>
-          <Button theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
+        <Stack space={3}>
+          <FormGroup labelText='Public key'>
+            <CopyableInput value={npub} />
+          </FormGroup>
+
+          <FormGroup labelText='Secret key'>
+            <CopyableInput value={nsec} type='password' onCopy={handleCopy} />
+          </FormGroup>
+        </Stack>
+
+        <Stack alignItems='end'>
+          <Button className='mt-3' theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}>
             Next
           </Button>
         </Stack>