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

Update: Add new prop in ExtensionStep

This commit is contained in:
danidfra 2024-09-30 19:09:02 -03:00
parent 7445325e6a
commit 1bda5a6ceb
2 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx
View File

@ -17,7 +17,7 @@ const NostrLoginModal: React.FC<INostrLoginModal> = ({ onClose, step: firstStep
switch (step) {
case 'extension':
return <ExtensionStep onClickAlt={() => setStep('key-add')} onClose={handleClose} />;
return <ExtensionStep onClickAlt={() => setStep('key-add')} onClose={handleClose} isLogin />;
case 'key-add':
return <KeyAddStep onClose={handleClose} />;
default:

58
src/features/ui/components/modals/nostr-login-modal/steps/extension-step.tsx
View File

@ -1,18 +1,28 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import { openModal } from 'soapbox/actions/modals';
import { nostrExtensionLogIn } from 'soapbox/actions/nostr';
import EmojiGraphic from 'soapbox/components/emoji-graphic';
import { Button, Stack, Modal } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
import { Button, Stack, Modal, Text, Divider, HStack } from 'soapbox/components/ui';
import { useAppDispatch, useInstance, useSoapboxConfig } from 'soapbox/hooks';
interface IExtensionStep {
isLogin?: boolean;
onClickAlt: () => void;
onClose(): void;
}
const ExtensionStep: React.FC<IExtensionStep> = ({ onClickAlt, onClose }) => {
const ExtensionStep: React.FC<IExtensionStep> = ({ isLogin, onClickAlt, onClose }) => {
const dispatch = useAppDispatch();
const instance = useInstance();
const { logo } = useSoapboxConfig();
const handleClose = () => {
onClose();
dispatch(openModal('NOSTR_SIGNUP'));
};
const onClick = () => {
dispatch(nostrExtensionLogIn());
@ -20,18 +30,48 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ onClickAlt, onClose }) => {
};
return (
<Modal title={<FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign in' />} onClose={onClose}>
<Stack space={6}>
<EmojiGraphic emoji='🔐' />
<Modal
title={isLogin ?
<FormattedMessage id='nostr_login.siwe.title' defaultMessage='Log in' /> : <FormattedMessage id='nostr_signup.siwe.title' defaultMessage='Sign up' />
}
width='sm'
onClose={onClose}
>
<Stack space={6} justifyContent='center' alignItems='center' className='pb-6'>
<Text weight='semibold'>
<FormattedMessage id='nostr_signin.siwe.welcome' defaultMessage='Welcome to {site_title}' values={{ site_title: instance.title }} />
</Text>
{logo ?
<div className='h-36 w-36'>
<img src={logo} alt='' />
</div>
:
<EmojiGraphic emoji='🔐' />
}
<Stack space={3}>
<Button theme='accent' size='lg' onClick={onClick}>
<FormattedMessage id='nostr_signup.siwe.action' defaultMessage='Sign in with extension' />
{isLogin ? <FormattedMessage id='nostr_login.siwe.action' defaultMessage='Log in with extension' /> : <FormattedMessage id='nostr_signup.siwe.action' defaultMessage='Sign up with extension' /> }
</Button>
<Button theme='transparent' onClick={onClickAlt}>
<FormattedMessage id='nostr_signup.siwe.alt' defaultMessage='Sign in with key' />
<Divider text='or' />
<Button theme={isLogin ? 'muted' : 'transparent'} onClick={onClickAlt} icon={require('@tabler/icons/outline/alert-triangle.svg')}>
{isLogin ? <FormattedMessage id='nostr_login.siwe.alt' defaultMessage='Log in with key' /> : <FormattedMessage id='nostr_signup.siwe.alt' defaultMessage={'Don\'t have an extension?'} /> }
</Button>
{isLogin && <HStack space={2} justifyContent='center'>
<Text size='xs'>
<FormattedMessage id='nostr_signup.siwe.new_user' defaultMessage='New on {site_title}?' values={{ site_title: instance.title }} />
</Text>
<Link to={'/'} className='text-xs text-blue-500' onClick={handleClose}>
<FormattedMessage id='nostr_login.siwe.sign_up' defaultMessage='Sign Up' />
</Link>
</HStack>}
</Stack>
</Stack>
</Modal>