NostrSigninModal: represent steps as strings instead of numbers
This commit is contained in:
parent
49bde675c3
commit
f20687313f
6 changed files with 30 additions and 20 deletions
|
@ -8,12 +8,14 @@ import KeyStep from './steps/key-step';
|
|||
import KeygenStep from './steps/keygen-step';
|
||||
import RegisterStep from './steps/register-step';
|
||||
|
||||
type Step = 'extension' | 'identity' | 'key' | 'keygen' | 'account' | 'register';
|
||||
|
||||
interface INostrSigninModal {
|
||||
onClose: (type?: string) => void;
|
||||
}
|
||||
|
||||
const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
|
||||
const [step, setStep] = useState(window.nostr ? 0 : 1);
|
||||
const [step, setStep] = useState<Step>(window.nostr ? 'extension' : 'identity');
|
||||
|
||||
const [, setSigner] = useState<NostrSigner | undefined>();
|
||||
const [accountId, setAccountId] = useState<string | undefined>();
|
||||
|
@ -21,21 +23,23 @@ const NostrSigninModal: React.FC<INostrSigninModal> = ({ onClose }) => {
|
|||
const handleClose = () => onClose('NOSTR_SIGNIN');
|
||||
|
||||
switch (step) {
|
||||
case 0:
|
||||
case 'extension':
|
||||
return <ExtensionStep setStep={setStep} onClose={handleClose} />;
|
||||
case 1:
|
||||
case 'identity':
|
||||
return <IdentityStep setAccountId={setAccountId} setStep={setStep} onClose={handleClose} />;
|
||||
case 2:
|
||||
case 'key':
|
||||
return <KeyStep setStep={setStep} onClose={handleClose} />;
|
||||
case 3:
|
||||
return <AccountStep accountId={accountId!} setStep={setStep} onClose={handleClose} />;
|
||||
case 4:
|
||||
return <RegisterStep onClose={handleClose} />;
|
||||
case 5:
|
||||
case 'keygen':
|
||||
return <KeygenStep setSigner={setSigner} setStep={setStep} onClose={handleClose} />;
|
||||
case 'account':
|
||||
return <AccountStep accountId={accountId!} setStep={setStep} onClose={handleClose} />;
|
||||
case 'register':
|
||||
return <RegisterStep onClose={handleClose} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export default NostrSigninModal;
|
||||
|
||||
export type { Step };
|
||||
|
|
|
@ -6,9 +6,11 @@ import { useAccount } from 'soapbox/api/hooks';
|
|||
import { Avatar, Text, Stack, Emoji, Button, Tooltip, Modal } from 'soapbox/components/ui';
|
||||
import { useInstance } from 'soapbox/hooks';
|
||||
|
||||
import { Step } from '../nostr-signin-modal';
|
||||
|
||||
interface IAccountStep {
|
||||
accountId: string;
|
||||
setStep(step: number): void;
|
||||
setStep(step: Step): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
|
@ -29,7 +31,7 @@ const AccountStep: React.FC<IAccountStep> = ({ accountId, setStep, onClose }) =>
|
|||
<Modal
|
||||
title={<FormattedMessage id='nostr_signin.account.title' defaultMessage='Your account' />}
|
||||
onClose={onClose}
|
||||
onBack={() => setStep(1)}
|
||||
onBack={() => setStep('identity')}
|
||||
>
|
||||
<Stack space={6}>
|
||||
<Stack space={3} alignItems='center'>
|
||||
|
|
|
@ -6,9 +6,10 @@ import { Button, Stack, Modal } from 'soapbox/components/ui';
|
|||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import EmojiGraphic from '../components/emoji-graphic';
|
||||
import { Step } from '../nostr-signin-modal';
|
||||
|
||||
interface IExtensionStep {
|
||||
setStep: (step: number) => void;
|
||||
setStep: (step: Step) => void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
|
@ -16,7 +17,7 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
|
|||
const dispatch = useAppDispatch();
|
||||
|
||||
const onClick = () => dispatch(nostrExtensionLogIn());
|
||||
const onClickAlt = () => setStep(1);
|
||||
const onClickAlt = () => setStep('identity');
|
||||
|
||||
return (
|
||||
<Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
|
||||
|
|
|
@ -7,10 +7,11 @@ import { useAppDispatch } from 'soapbox/hooks';
|
|||
|
||||
import EmojiGraphic from '../components/emoji-graphic';
|
||||
import NostrExtensionIndicator from '../components/nostr-extension-indicator';
|
||||
import { Step } from '../nostr-signin-modal';
|
||||
|
||||
interface IIdentityStep {
|
||||
setAccountId(accountId: string): void;
|
||||
setStep(step: number): void;
|
||||
setStep(step: Step): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
|
@ -32,7 +33,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep, onClose
|
|||
await dispatch(accountLookup(username))
|
||||
.then((account) => {
|
||||
setAccountId(account.id);
|
||||
setStep(3);
|
||||
setStep('account');
|
||||
setNotFound(false);
|
||||
setLoading(false);
|
||||
})
|
||||
|
@ -71,7 +72,7 @@ const IdentityStep: React.FC<IIdentityStep> = ({ setAccountId, setStep, onClose
|
|||
</FormGroup>
|
||||
|
||||
<HStack space={2} alignItems='center' justifyContent='between'>
|
||||
<Button theme='transparent' onClick={() => setStep(2)} disabled={loading}>Sign up</Button>
|
||||
<Button theme='transparent' onClick={() => setStep('key')} disabled={loading}>Sign up</Button>
|
||||
|
||||
<Button
|
||||
theme='accent'
|
||||
|
|
|
@ -5,9 +5,10 @@ import { Button, Stack, Modal } from 'soapbox/components/ui';
|
|||
|
||||
import EmojiGraphic from '../components/emoji-graphic';
|
||||
import NostrExtensionIndicator from '../components/nostr-extension-indicator';
|
||||
import { Step } from '../nostr-signin-modal';
|
||||
|
||||
interface IKeyStep {
|
||||
setStep(step: number): void;
|
||||
setStep(step: Step): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
|
@ -20,11 +21,11 @@ const KeyStep: React.FC<IKeyStep> = ({ setStep, onClose }) => {
|
|||
<EmojiGraphic emoji='🔑' />
|
||||
|
||||
<Stack space={3} alignItems='center'>
|
||||
<Button theme='accent' size='lg' onClick={() => setStep(5)}>
|
||||
<Button theme='accent' size='lg' onClick={() => setStep('keygen')}>
|
||||
Generate key
|
||||
</Button>
|
||||
|
||||
<Button theme='transparent' onClick={() => setStep(1)}>
|
||||
<Button theme='transparent' onClick={() => setStep('identity')}>
|
||||
I already have a key
|
||||
</Button>
|
||||
</Stack>
|
||||
|
|
|
@ -10,10 +10,11 @@ import { download } from 'soapbox/utils/download';
|
|||
import { slugify } from 'soapbox/utils/input';
|
||||
|
||||
import EmojiGraphic from '../components/emoji-graphic';
|
||||
import { Step } from '../nostr-signin-modal';
|
||||
|
||||
interface IKeygenStep {
|
||||
setSigner(signer: NostrSigner): void;
|
||||
setStep(step: number): void;
|
||||
setStep(step: Step): void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue