diff --git a/app/soapbox/features/auth-layout/index.tsx b/app/soapbox/features/auth-layout/index.tsx index 629bb3c9b..b792bc006 100644 --- a/app/soapbox/features/auth-layout/index.tsx +++ b/app/soapbox/features/auth-layout/index.tsx @@ -4,7 +4,7 @@ import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-ro import LandingGradient from 'soapbox/components/landing-gradient'; import SiteLogo from 'soapbox/components/site-logo'; -import { useAppSelector, useFeatures, useSoapboxConfig, useOwnAccount, useInstance } from 'soapbox/hooks'; +import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks'; import { Button, Card, CardBody } from '../../components/ui'; import LoginPage from '../auth-login/components/login-page'; @@ -28,14 +28,8 @@ const AuthLayout = () => { const account = useOwnAccount(); const instance = useInstance(); - const features = useFeatures(); - const soapboxConfig = useSoapboxConfig(); - - const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true; - const isOpen = features.accountCreation && instance.registrations; - const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true); + const { isOpen } = useRegistrationStatus(); const isLoginPage = history.location.pathname === '/login'; - const shouldShowRegisterLink = (isLoginPage && (isOpen || (pepeEnabled && pepeOpen))); return (
@@ -50,7 +44,7 @@ const AuthLayout = () => {
- {shouldShowRegisterLink && ( + {(isLoginPage && isOpen) && (
- {(isOpen || pepeEnabled && pepeOpen) && ( + {isOpen && ( - {(isOpen || pepeEnabled && pepeOpen) && ( + {isOpen && ( diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index bbb357bfa..953526ee2 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/app/soapbox/features/ui/components/navbar.tsx @@ -9,7 +9,7 @@ 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, useInstance, useOwnAccount } from 'soapbox/hooks'; +import { useAppDispatch, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks'; import ProfileDropdown from './profile-dropdown'; @@ -25,11 +25,9 @@ const messages = defineMessages({ const Navbar = () => { const dispatch = useAppDispatch(); const intl = useIntl(); - - const node = useRef(null); - + const { isOpen } = useRegistrationStatus(); const account = useOwnAccount(); - const instance = useInstance(); + const node = useRef(null); const [isLoading, setLoading] = useState(false); const [username, setUsername] = useState(''); @@ -150,7 +148,7 @@ const Navbar = () => { - {!instance.registrations && ( + {!isOpen && ( diff --git a/app/soapbox/features/ui/components/panels/sign-up-panel.tsx b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx index 117a8a8b9..7df125591 100644 --- a/app/soapbox/features/ui/components/panels/sign-up-panel.tsx +++ b/app/soapbox/features/ui/components/panels/sign-up-panel.tsx @@ -2,13 +2,14 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { Button, Stack, Text } from 'soapbox/components/ui'; -import { useAppSelector, useInstance } from 'soapbox/hooks'; +import { useAppSelector, useInstance, useRegistrationStatus } from 'soapbox/hooks'; const SignUpPanel = () => { const instance = useInstance(); + const { isOpen } = useRegistrationStatus(); const me = useAppSelector((state) => state.me); - if (me || !instance.registrations) return null; + if (me || !isOpen) return null; return ( diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts index 148aadb60..7c662bca2 100644 --- a/app/soapbox/hooks/index.ts +++ b/app/soapbox/hooks/index.ts @@ -12,7 +12,8 @@ export { useOnScreen } from './useOnScreen'; export { useOwnAccount } from './useOwnAccount'; export { usePrevious } from './usePrevious'; export { useRefEventHandler } from './useRefEventHandler'; +export { useRegistrationStatus } from './useRegistrationStatus'; export { useSettings } from './useSettings'; export { useSoapboxConfig } from './useSoapboxConfig'; export { useSystemTheme } from './useSystemTheme'; -export { useTheme } from './useTheme'; +export { useTheme } from './useTheme'; \ No newline at end of file diff --git a/app/soapbox/hooks/useRegistrationStatus.ts b/app/soapbox/hooks/useRegistrationStatus.ts new file mode 100644 index 000000000..6ede86941 --- /dev/null +++ b/app/soapbox/hooks/useRegistrationStatus.ts @@ -0,0 +1,22 @@ +import { useAppSelector } from './useAppSelector'; +import { useFeatures } from './useFeatures'; +import { useInstance } from './useInstance'; +import { useSoapboxConfig } from './useSoapboxConfig'; + +export const useRegistrationStatus = () => { + const instance = useInstance(); + const features = useFeatures(); + const soapboxConfig = useSoapboxConfig(); + + const pepeOpen = useAppSelector(state => state.verification.instance.get('registrations') === true); + const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true; + + return { + /** Registrations are open, either through Pepe or traditional account creation. */ + isOpen: (features.accountCreation && instance.registrations) || (pepeEnabled && pepeOpen), + /** Whether Pepe is open. */ + pepeOpen, + /** Whether Pepe is enabled. */ + pepeEnabled, + }; +}; \ No newline at end of file