NostrSigninModal: add extension indicator, flesh out IdentityStep
This commit is contained in:
parent
15af206a45
commit
1c97a163d0
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
|
||||||
|
import Stack from 'soapbox/components/ui/stack/stack';
|
||||||
|
import Text from 'soapbox/components/ui/text/text';
|
||||||
|
|
||||||
|
interface INostrExtensionIndicator {
|
||||||
|
signinAction: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NostrExtensionIndicator: React.FC<INostrExtensionIndicator> = ({ signinAction }) => {
|
||||||
|
return (
|
||||||
|
<Stack space={2} className='rounded-lg bg-gray-100 p-2 dark:bg-gray-800'>
|
||||||
|
<Text size='xs'>
|
||||||
|
{window.nostr ? (
|
||||||
|
<FormattedMessage
|
||||||
|
id='nostr_extension.found'
|
||||||
|
defaultMessage='<link>Sign in</link> with browser extension.'
|
||||||
|
values={{
|
||||||
|
link: (node) => <button className='underline' onClick={signinAction}>{node}</button>,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FormattedMessage id='nostr_extension.not_found' defaultMessage='Browser extension not found.' />
|
||||||
|
)}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NostrExtensionIndicator;
|
|
@ -1,15 +1,33 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { Stack } from 'soapbox/components/ui';
|
import Button from 'soapbox/components/ui/button/button';
|
||||||
|
import FormGroup from 'soapbox/components/ui/form-group/form-group';
|
||||||
|
import HStack from 'soapbox/components/ui/hstack/hstack';
|
||||||
|
import Input from 'soapbox/components/ui/input/input';
|
||||||
|
import Stack from 'soapbox/components/ui/stack/stack';
|
||||||
|
|
||||||
|
import NostrExtensionIndicator from '../nostr-extension-indicator';
|
||||||
|
|
||||||
interface IIdentityStep {
|
interface IIdentityStep {
|
||||||
setStep: (step: number) => void;
|
setStep: (step: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const IdentityStep: React.FC<IIdentityStep> = () => {
|
const IdentityStep: React.FC<IIdentityStep> = ({ setStep }) => {
|
||||||
return (
|
return (
|
||||||
<Stack>
|
<Stack space={3}>
|
||||||
identity step
|
<NostrExtensionIndicator signinAction={() => setStep(0)} />
|
||||||
|
|
||||||
|
<FormGroup labelText='Username'>
|
||||||
|
<Input
|
||||||
|
icon={require('@tabler/icons/at.svg')}
|
||||||
|
placeholder='Username or npub'
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<HStack space={2} alignItems='center' justifyContent='between'>
|
||||||
|
<Button theme='transparent'>Sign up</Button>
|
||||||
|
<Button theme='accent' onClick={() => setStep(2)}>Next</Button>
|
||||||
|
</HStack>
|
||||||
</Stack>
|
</Stack>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue