Merge branch 'next-pepe' into 'next'

LandingPage: conditional registration flow

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

app/soapbox/features/auth_login/components/registration_form.js

@@ -261,7 +261,7 @@ class RegistrationForm extends ImmutablePureComponent {
     const isLoading = this.state.captchaLoading || this.state.submissionLoading;
 
     return (
-      <SimpleForm onSubmit={this.onSubmit}>
+      <SimpleForm onSubmit={this.onSubmit} data-testid='registrations-open'>
         <fieldset disabled={isLoading}>
           <div className='simple_form__overlay-area'>
             <div className='fields-group'>

app/soapbox/features/landing_page/__tests__/landing_page.test.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import LandingPage from '..';
+import { INSTANCE_REMEMBER_SUCCESS } from '../../../actions/instance';
+import { PEPE_FETCH_INSTANCE_SUCCESS } from '../../../actions/verification';
+import { render, screen, rootReducer, applyActions } from '../../../jest/test-helpers';
+
+describe('<LandingPage />', () => {
+  it('renders a RegistrationForm for an open Pleroma instance', () => {
+
+    const state = rootReducer(undefined, {
+      type: INSTANCE_REMEMBER_SUCCESS,
+      instance: {
+        version: '2.7.2 (compatible; Pleroma 2.3.0)',
+        registrations: true,
+      },
+    });
+
+    render(<LandingPage />, null, state);
+
+    expect(screen.queryByTestId('registrations-open')).toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-closed')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-pepe')).not.toBeInTheDocument();
+  });
+
+  it('renders "closed" message for a closed Pleroma instance', () => {
+
+    const state = rootReducer(undefined, {
+      type: INSTANCE_REMEMBER_SUCCESS,
+      instance: {
+        version: '2.7.2 (compatible; Pleroma 2.3.0)',
+        registrations: false,
+      },
+    });
+
+    render(<LandingPage />, null, state);
+
+    expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-pepe')).not.toBeInTheDocument();
+  });
+
+  it('renders Pepe flow for an open Truth Social instance', () => {
+
+    const state = applyActions(undefined, [{
+      type: INSTANCE_REMEMBER_SUCCESS,
+      instance: {
+        version: '3.4.1 (compatible; TruthSocial 1.0.0)',
+        registrations: false,
+      },
+    }, {
+      type: PEPE_FETCH_INSTANCE_SUCCESS,
+      instance: {
+        registrations: true,
+      },
+    }], rootReducer);
+
+    render(<LandingPage />, null, state);
+
+    expect(screen.queryByTestId('registrations-pepe')).toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-closed')).not.toBeInTheDocument();
+  });
+
+  it('renders "closed" message for a Truth Social instance with Pepe closed', () => {
+
+    const state = applyActions(undefined, [{
+      type: INSTANCE_REMEMBER_SUCCESS,
+      instance: {
+        version: '3.4.1 (compatible; TruthSocial 1.0.0)',
+        registrations: false,
+      },
+    }, {
+      type: PEPE_FETCH_INSTANCE_SUCCESS,
+      instance: {
+        registrations: false,
+      },
+    }], rootReducer);
+
+    render(<LandingPage />, null, state);
+
+    expect(screen.queryByTestId('registrations-closed')).toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-pepe')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('registrations-open')).not.toBeInTheDocument();
+  });
+});

app/soapbox/features/landing_page/index.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 
 import VerificationBadge from 'soapbox/components/verification_badge';
+import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
 
 import { Button, Card, CardBody, Stack, Text } from '../../components/ui';
 
 const LandingPage = () => {
-  const instance = useSelector((state) => state.get('instance'));
-  const isOpen = useSelector(state => state.getIn(['verification', 'instance', 'registrations'], false) === true);
+  const features = useFeatures();
+  const instance = useAppSelector((state) => state.instance);
+  const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
+  /** Registrations are closed */
   const renderClosed = () => {
     return (
-      <Stack space={3}>
+      <Stack space={3} data-testid='registrations-closed'>
         <Text size='xl' weight='bold' align='center'>
           <FormattedMessage
             id='registration.closed_title'
@@ -30,6 +33,38 @@ const LandingPage = () => {
     );
   };
 
+  /** Mastodon API registrations are open */
+  const renderOpen = () => {
+    return <RegistrationForm />;
+  };
+
+  /** Pepe API registrations are open */
+  const renderPepe = () => {
+    return (
+      <Stack space={3} data-testid='registrations-pepe'>
+        <VerificationBadge className='h-16 w-16 mx-auto' />
+
+        <Stack>
+          <Text size='2xl' weight='bold' align='center'>Let&apos;s get started!</Text>
+          <Text theme='muted' align='center'>Social Media Without Discrimination</Text>
+        </Stack>
+
+        <Button to='/auth/verify' theme='primary' block>Create an account</Button>
+      </Stack>
+    );
+  };
+
+  // Render registration flow depending on features
+  const renderBody = () => {
+    if (features.pepe && pepeOpen) {
+      return renderPepe();
+    } else if (instance.registrations) {
+      return renderOpen();
+    } else {
+      return renderClosed();
+    }
+  };
+
   return (
     <main className='mt-16 sm:mt-24'>
       <div className='mx-auto max-w-7xl'>
@@ -49,18 +84,7 @@ const LandingPage = () => {
           <div className='hidden lg:block sm:mt-24 lg:mt-0 lg:col-span-6'>
             <Card size='xl' variant='rounded' className='sm:max-w-md sm:w-full sm:mx-auto'>
               <CardBody>
-                {isOpen ? (
-                  <Stack space={3}>
-                    <VerificationBadge className='h-16 w-16 mx-auto' />
-
-                    <Stack>
-                      <Text size='2xl' weight='bold' align='center'>Let&apos;s get started!</Text>
-                      <Text theme='muted' align='center'>Social Media Without Discrimination</Text>
-                    </Stack>
-
-                    <Button to='/auth/verify' theme='primary' block>Create an account</Button>
-                  </Stack>
-                ) : renderClosed()}
+                {renderBody()}
               </CardBody>
             </Card>
           </div>

app/soapbox/jest/test-helpers.tsx

@@ -69,4 +69,5 @@ export {
   mockStore,
   applyActions,
   rootState,
+  rootReducer,
 };

app/soapbox/utils/__tests__/features-test.js

@@ -109,4 +109,22 @@ describe('getFeatures', () => {
       expect(features.focalPoint).toBe(false);
     });
   });
+
+  describe('pepe', () => {
+    it('is true for Truth Social', () => {
+      const instance = InstanceRecord({
+        version: '3.4.1 (compatible; TruthSocial 1.0.0)',
+      });
+      const features = getFeatures(instance);
+      expect(features.pepe).toBe(true);
+    });
+
+    it('is false for Pleroma', () => {
+      const instance = InstanceRecord({
+        version: '2.7.2 (compatible; Pleroma 2.3.0)',
+      });
+      const features = getFeatures(instance);
+      expect(features.pepe).toBe(false);
+    });
+  });
 });

app/soapbox/utils/features.ts

@@ -130,6 +130,7 @@ const getInstanceFeatures = (instance: Instance) => {
     ]),
     trendingTruths: v.software === TRUTHSOCIAL,
     trendingStatuses: v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
+    pepe: v.software === TRUTHSOCIAL,
   };
 };
 

tsconfig.json

@@ -10,7 +10,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "typeRoots": [ "./types", "./node_modules/@types"]
   },
   "exclude": ["node_modules", "types", "**/*.test.*", "**/__mocks__/*", "**/__tests__/*"]