Merge branch 'signup-ui' into 'main'

Move signup page into the UI

See merge request soapbox-pub/soapbox!2723

src/containers/soapbox.tsx

@@ -30,12 +30,10 @@ import {
   useAppSelector,
   useAppDispatch,
   useOwnAccount,
-  useFeatures,
   useSoapboxConfig,
   useSettings,
   useTheme,
   useLocale,
-  useInstance,
 } from 'soapbox/hooks';
 import MESSAGES from 'soapbox/messages';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -76,10 +74,8 @@ const SoapboxMount = () => {
   useCachedLocationHandler();
 
   const me = useAppSelector(state => state.me);
-  const instance = useInstance();
   const { account } = useOwnAccount();
   const soapboxConfig = useSoapboxConfig();
-  const features = useFeatures();
 
   const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
   const showOnboarding = account && needsOnboarding;
@@ -109,11 +105,6 @@ const SoapboxMount = () => {
       )}
 
       <Route path='/login' component={AuthLayout} />
-
-      {(features.accountCreation && instance.registrations) && (
-        <Route exact path='/signup' component={AuthLayout} />
-      )}
-
       <Route path='/reset-password' component={AuthLayout} />
       <Route path='/edit-password' component={AuthLayout} />
       <Route path='/invite/:token' component={AuthLayout} />

src/features/auth-layout/index.tsx

@@ -10,7 +10,6 @@ import { Button, 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 RegistrationForm from '../auth-login/components/registration-form';
 import ExternalLoginForm from '../external-login/components/external-login-form';
 import Footer from '../public-layout/components/footer';
 import RegisterInvite from '../register-invite';
@@ -66,7 +65,6 @@ const AuthLayout = () => {
                     <Route exact path='/login/external' component={ExternalLoginForm} />
                     <Route exact path='/login/add' component={LoginPage} />
                     <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 path='/invite/:token' component={RegisterInvite} />

src/features/auth-login/components/registration-page.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Card, CardTitle, Stack } from 'soapbox/components/ui';
+
+import RegistrationForm from './registration-form';
+
+const RegistrationPage: React.FC = () => {
+  return (
+    <Card variant='rounded'>
+      <Stack space={2}>
+        <CardTitle title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />} />
+        <RegistrationForm />
+      </Stack>
+    </Card>
+  );
+};
+
+export default RegistrationPage;

src/features/ui/index.tsx

@@ -21,7 +21,7 @@ import withHoc from 'soapbox/components/hoc/with-hoc';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb-navigation';
 import { Layout } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useOwnAccount, useSoapboxConfig, useFeatures, useDraggedFiles, useInstance } from 'soapbox/hooks';
 import AdminPage from 'soapbox/pages/admin-page';
 import ChatsPage from 'soapbox/pages/chats-page';
 import DefaultPage from 'soapbox/pages/default-page';
@@ -133,6 +133,7 @@ import {
   EditGroup,
   FollowedTags,
   AboutPage,
+  RegistrationPage,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -158,6 +159,7 @@ interface ISwitchingColumnsArea {
 }
 
 const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) => {
+  const instance = useInstance();
   const features = useFeatures();
   const { search } = useLocation();
 
@@ -351,6 +353,10 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
 
       <WrappedRoute path='/about/:slug?' page={DefaultPage} component={AboutPage} publicRoute exact />
 
+      {(features.accountCreation && instance.registrations) && (
+        <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
+      )}
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );

src/features/ui/util/async-components.ts

@@ -242,6 +242,10 @@ export function LogoutPage() {
   return import('../../auth-login/components/logout');
 }
 
+export function RegistrationPage() {
+  return import('../../auth-login/components/registration-page');
+}
+
 export function Settings() {
   return import('../../settings');
 }