Merge branch 'next-routes' into 'next'

Next: routes

See merge request soapbox-pub/soapbox-fe!1281

app/soapbox/components/sidebar-navigation.tsx

@@ -73,7 +73,7 @@ const SidebarNavigation = () => {
 
       if (account.staff) {
         menu.push({
-          to: '/admin',
+          to: '/soapbox/admin',
           icon: require('@tabler/icons/icons/dashboard.svg'),
           text: <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />,
           count: dashboardCount,
@@ -106,6 +106,32 @@ const SidebarNavigation = () => {
 
   const menu = makeMenu();
 
+  /** Conditionally render the supported messages link */
+  const renderMessagesLink = (): React.ReactNode => {
+    if (features.chats) {
+      return (
+        <SidebarNavigationLink
+          to='/chats'
+          icon={require('@tabler/icons/icons/messages.svg')}
+          count={chatsCount}
+          text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
+        />
+      );
+    }
+
+    if (features.directTimeline || features.conversations) {
+      return (
+        <SidebarNavigationLink
+          to='/messages'
+          icon={require('icons/mail.svg')}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+        />
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div>
       <div className='flex flex-col space-y-2'>
@@ -138,22 +164,7 @@ const SidebarNavigation = () => {
           </>
         )}
 
-        {account && (
+        {account && renderMessagesLink()}
-          features.chats ? (
-            <SidebarNavigationLink
-              to='/chats'
-              icon={require('@tabler/icons/icons/messages.svg')}
-              count={chatsCount}
-              text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
-            />
-          ) : (
-            <SidebarNavigationLink
-              to='/messages'
-              icon={require('icons/mail.svg')}
-              text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-            />
-          )
-        )}
 
         {menu.length > 0 && (
           <DropdownMenu items={menu}>

app/soapbox/components/thumb_navigation.tsx

@@ -12,6 +12,34 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
   const features = getFeatures(useAppSelector((state) => state.instance));
 
+  /** Conditionally render the supported messages link */
+  const renderMessagesLink = (): React.ReactNode => {
+    if (features.chats) {
+      return (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/messages.svg')}
+          text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
+          to='/chats'
+          exact
+          count={chatsCount}
+        />
+      );
+    }
+
+    if (features.directTimeline || features.conversations) {
+      return (
+        <ThumbNavigationLink
+          src={require('@tabler/icons/icons/mail.svg')}
+          text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
+          to='/messages'
+          paths={['/messages', '/conversations']}
+        />
+      );
+    }
+
+    return null;
+  };
+
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
@@ -38,30 +66,13 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         />
       )}
 
-      {account && (
+      {account && renderMessagesLink()}
-        features.chats ? (
-          <ThumbNavigationLink
-            src={require('@tabler/icons/icons/messages.svg')}
-            text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
-            to='/chats'
-            exact
-            count={chatsCount}
-          />
-        ) : (
-          <ThumbNavigationLink
-            src={require('@tabler/icons/icons/mail.svg')}
-            text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
-            to='/messages'
-            paths={['/messages', '/conversations']}
-          />
-        )
-      )}
 
       {(account && account.staff) && (
         <ThumbNavigationLink
           src={require('@tabler/icons/icons/dashboard.svg')}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
-          to='/admin'
+          to='/soapbox/admin'
           count={dashboardCount}
         />
       )}

app/soapbox/containers/soapbox.tsx

@@ -20,7 +20,7 @@ import PublicLayout from 'soapbox/features/public_layout';
 import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container';
 import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
-import { useAppSelector, useAppDispatch, useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings } from 'soapbox/hooks';
 import MESSAGES from 'soapbox/locales/messages';
 import { getFeatures } from 'soapbox/utils/features';
 import { generateThemeCss } from 'soapbox/utils/theme';
@@ -68,9 +68,11 @@ const SoapboxMount = () => {
   const dispatch = useAppDispatch();
 
   const me = useAppSelector(state => state.me);
+  const instance = useAppSelector(state => state.instance);
   const account = useOwnAccount();
   const settings = useSettings();
   const soapboxConfig = useSoapboxConfig();
+  const features = useFeatures();
 
   const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en';
 
@@ -157,7 +159,7 @@ const SoapboxMount = () => {
           <>
             <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
               <Switch>
-                <Redirect from='/v1/verify_email/:token' to='/auth/verify/email/:token' />
+                <Redirect from='/v1/verify_email/:token' to='/verify/email/:token' />
 
                 {waitlisted && <Route render={(props) => <WaitlistPage {...props} account={account} />} />}
 
@@ -170,7 +172,10 @@ const SoapboxMount = () => {
                 <Route exact path='/beta/:slug?' component={PublicLayout} />
                 <Route exact path='/mobile/:slug?' component={PublicLayout} />
                 <Route exact path='/login' component={AuthLayout} />
-                <Route path='/auth/verify' component={AuthLayout} />
+                {(features.accountCreation && instance.registrations) && (
+                  <Route exact path='/signup' component={AuthLayout} />
+                )}
+                <Route path='/verify' component={AuthLayout} />
                 <Route path='/reset-password' component={AuthLayout} />
                 <Route path='/edit-password' component={AuthLayout} />
 

app/soapbox/features/admin/components/admin-tabs.tsx

@@ -19,18 +19,18 @@ const AdminTabs: React.FC = () => {
   const reportsCount = useAppSelector(state => state.admin.openReports.count());
 
   const tabs = [{
-    name: '/admin',
+    name: '/soapbox/admin',
     text: intl.formatMessage(messages.dashboard),
-    to: '/admin',
+    to: '/soapbox/admin',
   }, {
-    name: '/admin/reports',
+    name: '/soapbox/admin/reports',
     text: intl.formatMessage(messages.reports),
-    to: '/admin/reports',
+    to: '/soapbox/admin/reports',
     count: reportsCount,
   }, {
-    name: '/admin/approval',
+    name: '/soapbox/admin/approval',
     text: intl.formatMessage(messages.waitlist),
-    to: '/admin/approval',
+    to: '/soapbox/admin/approval',
     count: approvalCount,
   }];
 

app/soapbox/features/admin/components/latest_accounts_panel.tsx

@@ -46,7 +46,7 @@ const LatestAccountsPanel: React.FC<ILatestAccountsPanel> = ({ limit = 5 }) => {
   }
 
   const handleAction = () => {
-    history.push('/admin/users');
+    history.push('/soapbox/admin/users');
   };
 
   return (

app/soapbox/features/admin/index.tsx

@@ -26,9 +26,9 @@ const Admin: React.FC = () => {
       <AdminTabs />
 
       <Switch>
-        <Route path='/admin' exact component={Dashboard} />
+        <Route path='/soapbox/admin' exact component={Dashboard} />
-        <Route path='/admin/reports' exact component={Reports} />
+        <Route path='/soapbox/admin/reports' exact component={Reports} />
-        <Route path='/admin/approval' exact component={Waitlist} />
+        <Route path='/soapbox/admin/approval' exact component={Waitlist} />
       </Switch>
     </Column>
   );

app/soapbox/features/admin/tabs/dashboard.tsx

@@ -77,7 +77,7 @@ const Dashboard: React.FC = () => {
           </div>
         )}
         {isNumber(userCount) && (
-          <Link className='dashcounter' to='/admin/users'>
+          <Link className='dashcounter' to='/soapbox/admin/users'>
             <Text align='center' size='2xl' weight='medium'>
               <FormattedNumber value={userCount} />
             </Text>

app/soapbox/features/auth_layout/index.tsx

@@ -10,7 +10,7 @@ import { Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth_login/components/login_page';
 import PasswordReset from '../auth_login/components/password_reset';
 import PasswordResetConfirm from '../auth_login/components/password_reset_confirm';
-// import EmailConfirmation from '../email_confirmation';
+import RegistrationForm from '../auth_login/components/registration_form';
 import Verification from '../verification';
 import EmailPassthru from '../verification/email_passthru';
 
@@ -42,12 +42,12 @@ const AuthLayout = () => {
             <Card variant='rounded' size='xl'>
               <CardBody>
                 <Switch>
-                  <Route exact path='/auth/verify' component={Verification} />
+                  <Route exact path='/verify' component={Verification} />
-                  <Route exact path='/auth/verify/email/:token' component={EmailPassthru} />
+                  <Route exact path='/verify/email/:token' component={EmailPassthru} />
                   <Route exact path='/login' component={LoginPage} />
+                  <Route exact path='/signup' component={RegistrationForm} />
                   <Route exact path='/reset-password' component={PasswordReset} />
                   <Route exact path='/edit-password' component={PasswordResetConfirm} />
-                  {/* <Route exact path='/auth/confirmation' component={EmailConfirmation} /> */}
 
                   <Redirect from='/auth/password/new' to='/reset-password' />
                   <Redirect from='/auth/password/edit' to='/edit-password' />

app/soapbox/features/conversations/index.js

@@ -1,18 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { directComposeById } from 'soapbox/actions/compose';
+import AccountSearch from 'soapbox/components/account_search';
 
 import { mountConversations, unmountConversations, expandConversations } from '../../actions/conversations';
 import { connectDirectStream } from '../../actions/streaming';
-import { Card, CardBody, Column, Stack, Text } from '../../components/ui';
+import { Column } from '../../components/ui';
+
+import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Direct messages' },
   searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
-  body: { id: 'direct.body', defaultMessage: 'A new direct messaging experience will be available soon. Please stay tuned.' },
 });
 
 export default @connect()
@@ -54,35 +56,20 @@ class ConversationsTimeline extends React.PureComponent {
     const { intl } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)} transparent>
+      <Column label={intl.formatMessage(messages.title)}>
-        <Card variant='rounded'>
+        <AccountSearch
-          <CardBody>
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-            <Stack space={2}>
+          onSelected={this.handleSuggestion}
-              <Text size='lg' align='center' weight='bold'>{intl.formatMessage(messages.title)}</Text>
+        />
-              <Text theme='muted' align='center'>{intl.formatMessage(messages.body)}</Text>
+
-            </Stack>
+        <ConversationsListContainer
-          </CardBody>
+          scrollKey='direct_timeline'
-        </Card>
+          timelineId='direct'
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
+        />
       </Column>
     );
-
-    // return (
-    //   <Column label={intl.formatMessage(messages.title)}>
-    //     <ColumnHeader icon='envelope' active={hasUnread} title={intl.formatMessage(messages.title)} />
-
-    //     <AccountSearch
-    //       placeholder={intl.formatMessage(messages.searchPlaceholder)}
-    //       onSelected={this.handleSuggestion}
-    //     />
-
-    //     <ConversationsListContainer
-    //       scrollKey='direct_timeline'
-    //       timelineId='direct'
-    //       onLoadMore={this.handleLoadMore}
-    //       emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-    //     />
-    //   </Column>
-    // );
   }
 
 }

app/soapbox/features/landing_page/index.tsx

@@ -49,7 +49,7 @@ const LandingPage = () => {
           <Text theme='muted' align='center'>Social Media Without Discrimination</Text>
         </Stack>
 
-        <Button to='/auth/verify' theme='primary' block>Create an account</Button>
+        <Button to='/verify' theme='primary' block>Create an account</Button>
       </Stack>
     );
   };

app/soapbox/features/public_layout/components/header.tsx

@@ -96,7 +96,7 @@ const Header = () => {
 
                 {(isOpen || features.pepe && pepeOpen) && (
                   <Button
-                    to={features.pepe ? '/auth/verify' : '/signup'} // FIXME: actually route this somewhere
+                    to={features.pepe ? '/verify' : '/signup'}
                     theme='primary'
                   >
                     {intl.formatMessage(messages.register)}

app/soapbox/features/ui/components/modals/landing-page-modal.js

@@ -39,7 +39,7 @@ const LandingPageModal = ({ onClose }) => {
           </Button>
 
           {isOpen && (
-            <Button to='/auth/verify' theme='primary' block>
+            <Button to='/verify' theme='primary' block>
               {intl.formatMessage(messages.register)}
             </Button>
           )}

app/soapbox/features/ui/index.tsx

@@ -187,8 +187,12 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.federating && <WrappedRoute path='/timeline/fediverse' exact page={HomePage} component={PublicTimeline} content={children} publicRoute />}
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}
 
-      <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />
+      {features.conversations && <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />}
-      <WrappedRoute path='/messages' page={DefaultPage} component={features.directTimeline ? DirectTimeline : Conversations} content={children} />
+      {features.directTimeline ? (
+        <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} />
+      ) : (
+        <WrappedRoute path='/messages' page={DefaultPage} component={Conversations} content={children} />
+      )}
 
       {/* Gab groups */}
       {/*
@@ -227,7 +231,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <Redirect from='/home' to='/' />
 
       {/* Mastodon rendered pages */}
-      <Redirect from='/admin/dashboard' to='/admin' exact />
+      <Redirect from='/admin' to='/soapbox/admin' />
       <Redirect from='/terms' to='/about' />
       <Redirect from='/settings/preferences' to='/settings' />
       <Redirect from='/settings/two_factor_authentication_methods' to='/settings/mfa' />
@@ -286,7 +290,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
 
-      <WrappedRoute path='/invite/:token' component={RegisterInvite} content={children} publicRoute />
+      <WrappedRoute path='/invite/:token' page={DefaultPage} component={RegisterInvite} content={children} publicRoute />
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
       <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
@@ -302,11 +306,11 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {/* <WrappedRoute path='/backups' page={DefaultPage} component={Backups} content={children} /> */}
       <WrappedRoute path='/soapbox/config' adminOnly page={DefaultPage} component={SoapboxConfig} content={children} />
 
-      <WrappedRoute path='/admin' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
+      <WrappedRoute path='/soapbox/admin' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
-      <WrappedRoute path='/admin/approval' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/approval' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
-      <WrappedRoute path='/admin/reports' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/reports' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
-      <WrappedRoute path='/admin/log' staffOnly page={AdminPage} component={ModerationLog} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/log' staffOnly page={AdminPage} component={ModerationLog} content={children} exact />
-      <WrappedRoute path='/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
       <WrappedRoute path='/info' page={EmptyPage} component={ServerInfo} content={children} />
 
       <WrappedRoute path='/developers/apps/create' developerOnly page={DefaultPage} component={CreateApp} content={children} />

app/soapbox/features/verification/__tests__/index.test.tsx

@@ -9,7 +9,7 @@ import Verification from '../index';
 
 const TestableComponent = () => (
   <Switch>
-    <Route path='/auth/verify' exact><Verification /></Route>
+    <Route path='/verify' exact><Verification /></Route>
     <Route path='/' exact><span data-testid='home'>Homepage</span></Route>
   </Switch>
 );
@@ -18,7 +18,7 @@ const renderComponent = (store) => render(
   <TestableComponent />,
   {},
   store,
-  { initialEntries: ['/auth/verify'] },
+  { initialEntries: ['/verify'] },
 );
 
 describe('<Verification />', () => {

app/soapbox/utils/features.ts

@@ -71,6 +71,15 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     accountByUsername: v.software === PLEROMA,
 
+    /**
+     * Ability to create accounts.
+     * @see POST /api/v1/accounts
+     */
+    accountCreation: any([
+      v.software === MASTODON,
+      v.software === PLEROMA,
+    ]),
+
     /**
      * Ability to pin other accounts on one's profile.
      * @see POST /api/v1/accounts/:id/pin