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
Alex Gleason
commit
c6c6572f78
|
|
@ -10,7 +10,8 @@ import { openSidebar } from 'soapbox/actions/sidebar';
|
|||
import SiteLogo from 'soapbox/components/site-logo';
|
||||
import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
|
||||
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';
|
||||
|
||||
|
|
@ -28,6 +29,7 @@ const Navbar = () => {
|
|||
const dispatch = useAppDispatch();
|
||||
const intl = useIntl();
|
||||
const features = useFeatures();
|
||||
const standalone = useAppSelector(isStandalone);
|
||||
const { isOpen } = useRegistrationStatus();
|
||||
const { account } = useOwnAccount();
|
||||
const node = useRef(null);
|
||||
|
|
@ -103,83 +105,85 @@ const Navbar = () => {
|
|||
)}
|
||||
</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'>
|
||||
{account ? (
|
||||
<div className='relative hidden items-center lg:flex'>
|
||||
<ProfileDropdown account={account}>
|
||||
<Avatar src={account.avatar} size={34} />
|
||||
</ProfileDropdown>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{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>
|
||||
)}
|
||||
{!standalone && (
|
||||
<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'>
|
||||
{account ? (
|
||||
<div className='relative hidden items-center lg:flex'>
|
||||
<ProfileDropdown account={account}>
|
||||
<Avatar src={account.avatar} size={34} />
|
||||
</ProfileDropdown>
|
||||
</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>
|
||||
</nav>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue