|
|
|
@ -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>
|
|
|
|
|
{!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>
|
|
|
|
|
) : (
|
|
|
|
|
<>
|
|
|
|
|
{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='primary'
|
|
|
|
|
type='submit'
|
|
|
|
|
disabled={isLoading}
|
|
|
|
|
theme='tertiary'
|
|
|
|
|
size='sm'
|
|
|
|
|
{...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
|
|
|
|
|
>
|
|
|
|
|
{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' />
|
|
|
|
|
<FormattedMessage id='account.login' defaultMessage='Log in' />
|
|
|
|
|
</Button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</HStack>
|
|
|
|
|
|
|
|
|
|
{(isOpen) && (
|
|
|
|
|
<Button theme='primary' to='/signup' size='sm'>
|
|
|
|
|
<FormattedMessage id='account.register' defaultMessage='Sign up' />
|
|
|
|
|
</Button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</HStack>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|