From dd4f41f2465ee6eaf63c8b11992dd245e4bb4ccb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 11:52:56 -0500
Subject: [PATCH 1/5] ExternalLogin: move to AuthLayout instead of UI

---
 app/soapbox/containers/soapbox.tsx         | 2 +-
 app/soapbox/features/auth_layout/index.tsx | 2 ++
 app/soapbox/features/ui/index.tsx          | 2 --
 app/soapbox/pages/default_page.tsx         | 4 +---
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index ffc19ad21..8ec61a645 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -185,7 +185,7 @@ 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} />
                 )}
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 7a0d39c71..cb5edd8c4 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -11,6 +11,7 @@ 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 Verification from '../verification';
 import EmailPassthru from '../verification/email_passthru';
 
@@ -44,6 +45,7 @@ const AuthLayout = () => {
                 <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} />
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 91eda245f..6cf6515d6 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -76,7 +76,6 @@ import {
   // GroupRemovedAccounts,
   // GroupCreate,
   // GroupEdit,
-  ExternalLogin,
   Settings,
   MediaDisplay,
   EditProfile,
@@ -173,7 +172,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 />
 
diff --git a/app/soapbox/pages/default_page.tsx b/app/soapbox/pages/default_page.tsx
index 1bf2c2731..21c9026f5 100644
--- a/app/soapbox/pages/default_page.tsx
+++ b/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>

From 40f3b769fc8d1749a361815340bda7ece7fb9c26 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 11:56:40 -0500
Subject: [PATCH 2/5] RegisterInvite: convert to TSX

---
 app/soapbox/features/register_invite/index.js | 49 -------------------
 .../features/register_invite/index.tsx        | 43 ++++++++++++++++
 2 files changed, 43 insertions(+), 49 deletions(-)
 delete mode 100644 app/soapbox/features/register_invite/index.js
 create mode 100644 app/soapbox/features/register_invite/index.tsx

diff --git a/app/soapbox/features/register_invite/index.js b/app/soapbox/features/register_invite/index.js
deleted file mode 100644
index 486647bd2..000000000
--- a/app/soapbox/features/register_invite/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
-
-const mapStateToProps = state => {
-  return {
-    siteTitle: state.getIn(['instance', 'title']),
-  };
-};
-
-export default @connect(mapStateToProps)
-class RegisterInvite extends React.Component {
-
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    siteTitle: PropTypes.string.isRequired,
-  }
-
-  render() {
-    const { siteTitle, params } = this.props;
-
-    return (
-      <div className='register-invite'>
-        <div className='register-invite__header'>
-          <h1 className='register-invite__title'>
-            <FormattedMessage
-              id='register_invite.title'
-              defaultMessage="You've been invited to join {siteTitle}!"
-              values={{ siteTitle }}
-            />
-          </h1>
-          <p className='register-invite__lead'>
-            <FormattedMessage
-              id='register_invite.lead'
-              defaultMessage='Complete the form below to create an account.'
-            />
-          </p>
-        </div>
-        <div className='register-invite__form'>
-          <RegistrationForm inviteToken={params.token} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/register_invite/index.tsx b/app/soapbox/features/register_invite/index.tsx
new file mode 100644
index 000000000..c4187c439
--- /dev/null
+++ b/app/soapbox/features/register_invite/index.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
+import { useAppSelector } from 'soapbox/hooks';
+
+interface IRegisterInvite {
+  /** URL params. */
+  params: {
+    /** Invite token from the URL. */
+    token: string,
+  },
+}
+
+/** Page to register with an invitation. */
+const RegisterInvite: React.FC<IRegisterInvite> = ({ params }) => {
+  const siteTitle = useAppSelector(state => state.instance.title);
+
+  return (
+    <div className='register-invite'>
+      <div className='register-invite__header'>
+        <h1 className='register-invite__title'>
+          <FormattedMessage
+            id='register_invite.title'
+            defaultMessage="You've been invited to join {siteTitle}!"
+            values={{ siteTitle }}
+          />
+        </h1>
+        <p className='register-invite__lead'>
+          <FormattedMessage
+            id='register_invite.lead'
+            defaultMessage='Complete the form below to create an account.'
+          />
+        </p>
+      </div>
+      <div className='register-invite__form'>
+        <RegistrationForm inviteToken={params.token} />
+      </div>
+    </div>
+  );
+};
+
+export default RegisterInvite;

From 6ff34d77fd36502ad4a2f1af0053a9499a977706 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 12:02:13 -0500
Subject: [PATCH 3/5] RegisterInvite: move to AuthLayout

---
 app/soapbox/containers/soapbox.tsx             |  1 +
 app/soapbox/features/auth_layout/index.tsx     |  2 ++
 app/soapbox/features/register_invite/index.tsx | 14 ++++++--------
 app/soapbox/features/ui/index.tsx              |  3 ---
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 8ec61a645..11cf735d7 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -192,6 +192,7 @@ const SoapboxMount = () => {
                 <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>
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index cb5edd8c4..8c7ac36fc 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -12,6 +12,7 @@ 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';
 
@@ -50,6 +51,7 @@ const AuthLayout = () => {
                   <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' />
diff --git a/app/soapbox/features/register_invite/index.tsx b/app/soapbox/features/register_invite/index.tsx
index c4187c439..870918220 100644
--- a/app/soapbox/features/register_invite/index.tsx
+++ b/app/soapbox/features/register_invite/index.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
 
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
 import { useAppSelector } from 'soapbox/hooks';
 
-interface IRegisterInvite {
-  /** URL params. */
-  params: {
-    /** Invite token from the URL. */
-    token: string,
-  },
+interface RegisterInviteParams {
+  token: string,
 }
 
 /** Page to register with an invitation. */
-const RegisterInvite: React.FC<IRegisterInvite> = ({ params }) => {
+const RegisterInvite: React.FC = () => {
+  const { token } = useParams<RegisterInviteParams>();
   const siteTitle = useAppSelector(state => state.instance.title);
 
   return (
@@ -34,7 +32,7 @@ const RegisterInvite: React.FC<IRegisterInvite> = ({ params }) => {
         </p>
       </div>
       <div className='register-invite__form'>
-        <RegistrationForm inviteToken={params.token} />
+        <RegistrationForm inviteToken={token} />
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 6cf6515d6..14e9e5974 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -107,7 +107,6 @@ import {
   NotificationsContainer,
   ModalContainer,
   ProfileHoverCard,
-  RegisterInvite,
   Share,
   NewStatus,
   IntentionalError,
@@ -288,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} />

From e0cc33178171f3a1a3f1fb675464d8def80e5c56 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 12:04:28 -0500
Subject: [PATCH 4/5] Card: back button i18n

---
 app/soapbox/components/ui/card/card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 350048a02..9dd22bebe 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/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>
     );
   };

From 0863a34bfc277f1a8576e71fca2166df3a52133d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 12:11:08 -0500
Subject: [PATCH 5/5] RegisterInvite: use ui components
 https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/910#note_938469624

---
 .../features/register_invite/index.tsx        | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/features/register_invite/index.tsx b/app/soapbox/features/register_invite/index.tsx
index 870918220..e312c1126 100644
--- a/app/soapbox/features/register_invite/index.tsx
+++ b/app/soapbox/features/register_invite/index.tsx
@@ -2,6 +2,7 @@ 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';
 
@@ -14,27 +15,29 @@ 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 (
-    <div className='register-invite'>
-      <div className='register-invite__header'>
-        <h1 className='register-invite__title'>
-          <FormattedMessage
-            id='register_invite.title'
-            defaultMessage="You've been invited to join {siteTitle}!"
-            values={{ siteTitle }}
-          />
-        </h1>
-        <p className='register-invite__lead'>
+    <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.'
           />
-        </p>
-      </div>
-      <div className='register-invite__form'>
-        <RegistrationForm inviteToken={token} />
-      </div>
-    </div>
+        </Text>
+      </Stack>
+
+      <RegistrationForm inviteToken={token} />
+    </Stack>
   );
 };