Merge branch 'public-layout-improvements' into 'develop'

Move invite page and external login page to AuthLayout

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

app/soapbox/components/ui/card/card.tsx

@@ -62,7 +62,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     return (
       <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
-        <span className='sr-only' data-testid='back-button'>Back</span>
+        <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );
   };

app/soapbox/containers/soapbox.tsx

@@ -185,13 +185,14 @@ const SoapboxMount = () => {
                 <Route exact path='/about/:slug?' component={PublicLayout} />
                 <Route exact path='/beta/:slug?' component={PublicLayout} />
                 <Route exact path='/mobile/:slug?' component={PublicLayout} />
-                <Route exact path='/login' component={AuthLayout} />
+                <Route path='/login' 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} />
+                <Route path='/invite/:token' component={AuthLayout} />
 
                 <Route path='/' component={UI} />
               </Switch>

app/soapbox/features/auth_layout/index.tsx

@@ -12,6 +12,8 @@ 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 RegisterInvite from '../register_invite';
 import Verification from '../verification';
 import EmailPassthru from '../verification/email_passthru';
 
@@ -40,16 +42,18 @@ const AuthLayout = () => {
           </header>
 
           <div className='flex flex-col justify-center items-center'>
-            <div className='sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
+            <div className='pb-10 sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
               <Card variant='rounded' size='xl'>
                 <CardBody>
                   <Switch>
                     <Route exact path='/verify' component={Verification} />
                     <Route exact path='/verify/email/:token' component={EmailPassthru} />
+                    <Route exact path='/login/external' component={ExternalLoginForm} />
                     <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} />
 
                     <Redirect from='/auth/password/new' to='/reset-password' />
                     <Redirect from='/auth/password/edit' to='/edit-password' />

app/soapbox/features/register_invite/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+
+import { Stack, CardTitle, Text } from 'soapbox/components/ui';
+import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
+import { useAppSelector } from 'soapbox/hooks';
+
+interface RegisterInviteParams {
+  token: string,
+}
+
+/** Page to register with an invitation. */
+const RegisterInvite: React.FC = () => {
+  const { token } = useParams<RegisterInviteParams>();
+  const siteTitle = useAppSelector(state => state.instance.title);
+
+  const title = (
+    <FormattedMessage
+      id='register_invite.title'
+      defaultMessage="You've been invited to join {siteTitle}!"
+      values={{ siteTitle }}
+    />
+  );
+
+  return (
+    <Stack space={3}>
+      <Stack className='mb-4'>
+        <CardTitle title={title} />
+
+        <Text theme='muted'>
+          <FormattedMessage
+            id='register_invite.lead'
+            defaultMessage='Complete the form below to create an account.'
+          />
+        </Text>
+      </Stack>
+
+      <RegistrationForm inviteToken={token} />
+    </Stack>
+  );
+};
+
+export default RegisterInvite;

app/soapbox/features/ui/index.tsx

@@ -76,7 +76,6 @@ import {
   // GroupRemovedAccounts,
   // GroupCreate,
   // GroupEdit,
-  ExternalLogin,
   Settings,
   MediaDisplay,
   EditProfile,
@@ -108,7 +107,6 @@ import {
   NotificationsContainer,
   ModalContainer,
   ProfileHoverCard,
-  RegisterInvite,
   Share,
   NewStatus,
   IntentionalError,
@@ -173,7 +171,6 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
   // Ex: use /login instead of /auth, but redirect /auth to /login
   return (
     <Switch>
-      <WrappedRoute path='/login/external' page={EmptyPage} component={ExternalLogin} content={children} publicRoute exact />
       <WrappedRoute path='/email-confirmation' page={EmptyPage} component={EmailConfirmation} publicRoute exact />
       <WrappedRoute path='/logout' page={EmptyPage} component={LogoutPage} publicRoute exact />
 
@@ -290,8 +287,6 @@ 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' 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} />
       <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />

app/soapbox/pages/default_page.tsx

@@ -8,13 +8,11 @@ import {
   SignUpPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
-import { isStandalone } from 'soapbox/utils/state';
 
 import { Layout } from '../components/ui';
 
 const DefaultPage: React.FC = ({ children }) => {
   const me = useAppSelector(state => state.me);
-  const standalone = useAppSelector(isStandalone);
   const features = useFeatures();
 
   return (
@@ -24,7 +22,7 @@ const DefaultPage: React.FC = ({ children }) => {
       </Layout.Main>
 
       <Layout.Aside>
-        {!me && !standalone && (
+        {!me && (
           <BundleContainer fetchComponent={SignUpPanel}>
             {Component => <Component key='sign-up-panel' />}
           </BundleContainer>