kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'navbar-standalone' into 'main'
Navbar: hide login form in standalone mode See merge request soapbox-pub/soapbox!3019environments/review-main-yi2y9f/deployments/4605
commit
c6c6572f78
|
@ -10,7 +10,8 @@ import { openSidebar } from 'soapbox/actions/sidebar';
|
||||||
import SiteLogo from 'soapbox/components/site-logo';
|
import SiteLogo from 'soapbox/components/site-logo';
|
||||||
import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
|
import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
|
||||||
import Search from 'soapbox/features/compose/components/search';
|
import Search from 'soapbox/features/compose/components/search';
|
||||||
import { useAppDispatch, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
|
import { useAppDispatch, useAppSelector, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
|
||||||
|
import { isStandalone } from 'soapbox/utils/state';
|
||||||
|
|
||||||
import ProfileDropdown from './profile-dropdown';
|
import ProfileDropdown from './profile-dropdown';
|
||||||
|
|
||||||
|
@ -28,6 +29,7 @@ const Navbar = () => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const features = useFeatures();
|
const features = useFeatures();
|
||||||
|
const standalone = useAppSelector(isStandalone);
|
||||||
const { isOpen } = useRegistrationStatus();
|
const { isOpen } = useRegistrationStatus();
|
||||||
const { account } = useOwnAccount();
|
const { account } = useOwnAccount();
|
||||||
const node = useRef(null);
|
const node = useRef(null);
|
||||||
|
@ -103,83 +105,85 @@ const Navbar = () => {
|
||||||
)}
|
)}
|
||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
<HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
|
{!standalone && (
|
||||||
{account ? (
|
<HStack space={3} alignItems='center' className='absolute inset-y-0 right-0 pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0'>
|
||||||
<div className='relative hidden items-center lg:flex'>
|
{account ? (
|
||||||
<ProfileDropdown account={account}>
|
<div className='relative hidden items-center lg:flex'>
|
||||||
<Avatar src={account.avatar} size={34} />
|
<ProfileDropdown account={account}>
|
||||||
</ProfileDropdown>
|
<Avatar src={account.avatar} size={34} />
|
||||||
</div>
|
</ProfileDropdown>
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{features.nostrSignup ? (
|
|
||||||
<div className='hidden items-center xl:flex'>
|
|
||||||
<Button
|
|
||||||
theme='primary'
|
|
||||||
onClick={handleNostrLogin}
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{intl.formatMessage(messages.login)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}>
|
|
||||||
<Input
|
|
||||||
required
|
|
||||||
value={username}
|
|
||||||
onChange={(event) => setUsername(event.target.value)}
|
|
||||||
type='text'
|
|
||||||
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
|
|
||||||
className='max-w-[200px]'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Input
|
|
||||||
required
|
|
||||||
value={password}
|
|
||||||
onChange={(event) => setPassword(event.target.value)}
|
|
||||||
type='password'
|
|
||||||
placeholder={intl.formatMessage(messages.password)}
|
|
||||||
className='max-w-[200px]'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Link to='/reset-password'>
|
|
||||||
<Tooltip text={intl.formatMessage(messages.forgotPassword)}>
|
|
||||||
<IconButton
|
|
||||||
src={require('@tabler/icons/outline/help.svg')}
|
|
||||||
className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
|
|
||||||
iconClassName='h-5 w-5'
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
theme='primary'
|
|
||||||
type='submit'
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{intl.formatMessage(messages.login)}
|
|
||||||
</Button>
|
|
||||||
</Form>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='space-x-1.5 xl:hidden'>
|
|
||||||
<Button
|
|
||||||
theme='tertiary'
|
|
||||||
size='sm'
|
|
||||||
{...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
|
|
||||||
>
|
|
||||||
<FormattedMessage id='account.login' defaultMessage='Log in' />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{(isOpen) && (
|
|
||||||
<Button theme='primary' to='/signup' size='sm'>
|
|
||||||
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
) : (
|
||||||
)}
|
<>
|
||||||
</HStack>
|
{features.nostrSignup ? (
|
||||||
|
<div className='hidden items-center xl:flex'>
|
||||||
|
<Button
|
||||||
|
theme='primary'
|
||||||
|
onClick={handleNostrLogin}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{intl.formatMessage(messages.login)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}>
|
||||||
|
<Input
|
||||||
|
required
|
||||||
|
value={username}
|
||||||
|
onChange={(event) => setUsername(event.target.value)}
|
||||||
|
type='text'
|
||||||
|
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
|
||||||
|
className='max-w-[200px]'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
required
|
||||||
|
value={password}
|
||||||
|
onChange={(event) => setPassword(event.target.value)}
|
||||||
|
type='password'
|
||||||
|
placeholder={intl.formatMessage(messages.password)}
|
||||||
|
className='max-w-[200px]'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Link to='/reset-password'>
|
||||||
|
<Tooltip text={intl.formatMessage(messages.forgotPassword)}>
|
||||||
|
<IconButton
|
||||||
|
src={require('@tabler/icons/outline/help.svg')}
|
||||||
|
className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200'
|
||||||
|
iconClassName='h-5 w-5'
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
theme='primary'
|
||||||
|
type='submit'
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{intl.formatMessage(messages.login)}
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className='space-x-1.5 xl:hidden'>
|
||||||
|
<Button
|
||||||
|
theme='tertiary'
|
||||||
|
size='sm'
|
||||||
|
{...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
|
||||||
|
>
|
||||||
|
<FormattedMessage id='account.login' defaultMessage='Log in' />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{(isOpen) && (
|
||||||
|
<Button theme='primary' to='/signup' size='sm'>
|
||||||
|
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
Ładowanie…
Reference in New Issue