environments/review-ditto-auth-csh1vn/deployments/4454
parent
5bc6a9a220
commit
62723a2c16
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import Emoji from 'soapbox/components/ui/emoji/emoji';
|
||||
|
||||
interface IEmojiGraphic {
|
||||
emoji: string;
|
||||
}
|
||||
|
||||
/** Large emoji with a background for display purposes (eg breaking up a page). */
|
||||
const EmojiGraphic: React.FC<IEmojiGraphic> = ({ emoji }) => {
|
||||
return (
|
||||
<div className='flex items-center justify-center'>
|
||||
<div className='rounded-full bg-gray-100 p-8 dark:bg-gray-800'>
|
||||
<Emoji className='h-24 w-24' emoji={emoji} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmojiGraphic;
|
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
|
||||
import Stack from 'soapbox/components/ui/stack/stack';
|
||||
import Text from 'soapbox/components/ui/text/text';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
const NostrExtensionIndicator: React.FC = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const onClick = () => {
|
||||
dispatch(nostrExtensionLogIn());
|
||||
dispatch(closeModal('NOSTR_SIGNIN'));
|
||||
};
|
||||
|
||||
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 type='button' className='underline' onClick={onClick}>{node}</button>,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage id='nostr_extension.not_found' defaultMessage='Browser extension not found.' />
|
||||
)}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default NostrExtensionIndicator;
|
@ -0,0 +1,29 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import ExtensionStep from './steps/extension-step';
|
||||
import KeyAddStep from './steps/key-add-step';
|
||||
|
||||
type Step = 'extension' | 'key-add';
|
||||
|
||||
interface INostrLoginModal {
|
||||
onClose: (type?: string) => void;
|
||||
}
|
||||
|
||||
const NostrLoginModal: React.FC<INostrLoginModal> = ({ onClose }) => {
|
||||
const [step, setStep] = useState<Step>(window.nostr ? 'extension' : 'key-add');
|
||||
|
||||
const handleClose = () => onClose('NOSTR_SIGNIN');
|
||||
|
||||
switch (step) {
|
||||
case 'extension':
|
||||
return <ExtensionStep setStep={setStep} onClose={handleClose} />;
|
||||
case 'key-add':
|
||||
return <KeyAddStep onClose={handleClose} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export default NostrLoginModal;
|
||||
|
||||
export type { Step };
|
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
|
||||
import { Button, Stack, Modal } from 'soapbox/components/ui';
|
||||
import { useAppDispatch } from 'soapbox/hooks';
|
||||
|
||||
import EmojiGraphic from '../components/emoji-graphic';
|
||||
import { Step } from '../nostr-login-modal';
|
||||
|
||||
interface IExtensionStep {
|
||||
setStep: (step: Step) => void;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
const ExtensionStep: React.FC<IExtensionStep> = ({ setStep, onClose }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const onClick = () => {
|
||||
dispatch(nostrExtensionLogIn());
|
||||
onClose();
|
||||
};
|
||||
|
||||
const onClickAlt = () => setStep('key-add');
|
||||
|
||||
return (
|
||||
<Modal title={<FormattedMessage id='nostr_signin.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
|
||||
<Stack space={6}>
|
||||
<EmojiGraphic emoji='🔐' />
|
||||
|
||||
<Stack space={3}>
|
||||
<Button theme='accent' size='lg' onClick={onClick}>
|
||||
<FormattedMessage id='nostr_signin.siwe.action' defaultMessage='Sign in with extension' />
|
||||
</Button>
|
||||
|
||||
<Button theme='transparent' onClick={onClickAlt}>
|
||||
<FormattedMessage id='nostr_signin.siwe.alt' defaultMessage='Sign in with key' />
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExtensionStep;
|
Loading…
Reference in new issue