moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

KeygenStep: display user's keys as copyable inputs

This commit is contained in:
Alex Gleason 2024-02-19 13:26:39 -06:00
parent f20687313f
commit 772cecf26b
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/copyable-input.tsx
View File

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

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

@ -3,7 +3,8 @@ import { NostrSigner } from 'nspec';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl'; 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 { NKeys } from 'soapbox/features/nostr/keys';
import { useInstance } from 'soapbox/hooks'; import { useInstance } from 'soapbox/hooks';
import { download } from 'soapbox/utils/download'; import { download } from 'soapbox/utils/download';
@ -30,10 +31,12 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
const [downloaded, setDownloaded] = useState(false); const [downloaded, setDownloaded] = useState(false);
const handleDownload = () => { 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); setDownloaded(true);
}; };
const handleCopy = () => setDownloaded(true);
const handleNext = () => { const handleNext = () => {
const signer = NKeys.add(secretKey); const signer = NKeys.add(secretKey);
setSigner(signer); setSigner(signer);
@ -50,8 +53,18 @@ const KeygenStep: React.FC<IKeygenStep> = ({ setSigner, setStep, onClose }) => {
</Button> </Button>
</Stack> </Stack>
<Stack space={3} alignItems='end'> <Stack space={3}>
<Button theme='accent' disabled={!downloaded} size='lg' onClick={handleNext}> <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 Next
</Button> </Button>
</Stack> </Stack>