mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Navbar: hide login form in standalone mode

Browse Source
environments/review-navbar-sta-dgipoz/deployments/4603
Alex Gleason 4 months ago
parent 315d570645
commit 0494265551
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File

152
src/features/ui/components/navbar.tsx
Unescape View File

@ -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>
) : ( </div>
<> ) : (
{features.nostrSignup ? ( <>
<div className='hidden items-center xl:flex'> {features.nostrSignup ? (
<Button <div className='hidden items-center xl:flex'>
theme='primary' <Button
onClick={handleNostrLogin} theme='primary'
disabled={isLoading} onClick={handleNostrLogin}
> disabled={isLoading}
{intl.formatMessage(messages.login)} >
</Button> {intl.formatMessage(messages.login)}
</div> </Button>
) : ( </div>
<Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}> ) : (
<Input <Form className='hidden items-center space-x-2 xl:flex rtl:space-x-reverse' onSubmit={handleSubmit}>
required <Input
value={username} required
onChange={(event) => setUsername(event.target.value)} value={username}
type='text' onChange={(event) => setUsername(event.target.value)}
placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)} type='text'
className='max-w-[200px]' placeholder={intl.formatMessage(features.logInWithUsername ? messages.username : messages.email)}
/> className='max-w-[200px]'
/>
<Input
required <Input
value={password} required
onChange={(event) => setPassword(event.target.value)} value={password}
type='password' onChange={(event) => setPassword(event.target.value)}
placeholder={intl.formatMessage(messages.password)} type='password'
className='max-w-[200px]' placeholder={intl.formatMessage(messages.password)}
/> className='max-w-[200px]'
/>
<Link to='/reset-password'>
<Tooltip text={intl.formatMessage(messages.forgotPassword)}> <Link to='/reset-password'>
<IconButton <Tooltip text={intl.formatMessage(messages.forgotPassword)}>
src={require('@tabler/icons/outline/help.svg')} <IconButton
className='cursor-pointer bg-transparent text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200' src={require('@tabler/icons/outline/help.svg')}
iconClassName='h-5 w-5' 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> </Tooltip>
</Link>
<Button
theme='primary'
type='submit'
disabled={isLoading}
>
{intl.formatMessage(messages.login)}
</Button>
</Form>
)}
<div className='space-x-1.5 xl:hidden'>
<Button <Button
theme='primary' theme='tertiary'
type='submit' size='sm'
disabled={isLoading} {...(features.nostrSignup ? { onClick: handleNostrLogin } : { to: '/login' })}
> >
{intl.formatMessage(messages.login)} <FormattedMessage id='account.login' defaultMessage='Log in' />
</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> </Button>
)}
</div> {(isOpen) && (
</> <Button theme='primary' to='/signup' size='sm'>
)} <FormattedMessage id='account.register' defaultMessage='Sign up' />
</HStack> </Button>
)}
</div>
</>
)}
</HStack>
)}
</div> </div>
</div> </div>
</nav> </nav>

Write Preview
Loading…
Cancel
Save