Merge branch 'login-ui' into 'main'

Move Login pages into the UI, delete AuthLayout

See merge request soapbox-pub/soapbox!2730

src/components/big-card.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+
+interface IBigCard {
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  children: React.ReactNode
+}
+
+const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => {
+  return (
+    <Card variant='rounded' size='xl'>
+      <CardBody>
+        <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
+          <Stack space={2}>
+            <Text size='2xl' align='center' weight='bold'>{title}</Text>
+            {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
+          </Stack>
+        </div>
+
+        <Stack space={5}>
+          <div className='mx-auto sm:w-2/3 sm:pt-10'>
+            {children}
+          </div>
+        </Stack>
+      </CardBody>
+    </Card>
+  );
+};
+
+export { BigCard };

src/containers/soapbox.tsx

@@ -17,7 +17,6 @@ import GdprBanner from 'soapbox/components/gdpr-banner';
 import Helmet from 'soapbox/components/helmet';
 import LoadingScreen from 'soapbox/components/loading-screen';
 import { StatProvider } from 'soapbox/contexts/stat-context';
-import AuthLayout from 'soapbox/features/auth-layout';
 import EmbeddedStatus from 'soapbox/features/embedded-status';
 import PublicLayout from 'soapbox/features/public-layout';
 import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
@@ -104,11 +103,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route path='/login' 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>
   );

src/features/auth-layout/index.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
-
-import LandingGradient from 'soapbox/components/landing-gradient';
-import SiteLogo from 'soapbox/components/site-logo';
-import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks';
-
-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 ExternalLoginForm from '../external-login/components/external-login-form';
-import Footer from '../public-layout/components/footer';
-import RegisterInvite from '../register-invite';
-
-const messages = defineMessages({
-  register: { id: 'auth_layout.register', defaultMessage: 'Create an account' },
-});
-
-const AuthLayout = () => {
-  const intl = useIntl();
-  const history = useHistory();
-  const { search } = useLocation();
-
-  const { account } = useOwnAccount();
-  const instance = useInstance();
-  const { isOpen } = useRegistrationStatus();
-  const isLoginPage = history.location.pathname === '/login';
-
-  return (
-    <div className='h-full'>
-      <LandingGradient />
-
-      <main className='relative h-full sm:flex sm:justify-center'>
-        <div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'>
-          <header className='relative mb-auto flex justify-between px-2 py-12'>
-            <div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'>
-              <Link to='/' className='cursor-pointer'>
-                <SiteLogo alt={instance.title} className='h-7' />
-              </Link>
-            </div>
-
-            {(isLoginPage && isOpen) && (
-              <div className='relative z-10 ml-auto flex items-center'>
-                <Button
-                  theme='tertiary'
-                  icon={require('@tabler/icons/user.svg')}
-                  to='/signup'
-                >
-                  {intl.formatMessage(messages.register)}
-                </Button>
-              </div>
-            )}
-          </header>
-
-          <div className='flex flex-col items-center justify-center'>
-            <div className='w-full pb-10 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
-              <Card variant='rounded' size='xl'>
-                <CardBody>
-                  <Switch>
-                    {/* If already logged in, redirect home. */}
-                    {account && <Redirect from='/login' to='/' exact />}
-
-                    <Route exact path='/login/external' component={ExternalLoginForm} />
-                    <Route exact path='/login/add' component={LoginPage} />
-                    <Route exact path='/login' component={LoginPage} />
-                    <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${search}`} />
-                  </Switch>
-                </CardBody>
-              </Card>
-            </div>
-          </div>
-
-          <div className='mt-auto'>
-            <Footer />
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default AuthLayout;

src/features/auth-login/components/login-form.tsx

@@ -2,11 +2,9 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useFeatures } from 'soapbox/hooks';
 
-import ConsumersList from './consumers-list';
-
 const messages = defineMessages({
   username: {
     id: 'login.fields.username_label',
@@ -35,62 +33,52 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
   const passwordLabel = intl.formatMessage(messages.password);
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
-      </div>
+    <Form onSubmit={handleSubmit}>
+      <FormGroup labelText={usernameLabel}>
+        <Input
+          aria-label={usernameLabel}
+          placeholder={usernameLabel}
+          type='text'
+          name='username'
+          autoCorrect='off'
+          autoCapitalize='off'
+          required
+        />
+      </FormGroup>
 
-      <Stack className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2' space={5}>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={usernameLabel}>
-            <Input
-              aria-label={usernameLabel}
-              placeholder={usernameLabel}
-              type='text'
-              name='username'
-              autoCorrect='off'
-              autoCapitalize='off'
-              required
+      <FormGroup
+        labelText={passwordLabel}
+        hintText={
+          <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
+            <FormattedMessage
+              id='login.reset_password_hint'
+              defaultMessage='Trouble logging in?'
             />
-          </FormGroup>
+          </Link>
+        }
+      >
+        <Input
+          aria-label={passwordLabel}
+          placeholder={passwordLabel}
+          type='password'
+          name='password'
+          autoComplete='off'
+          autoCorrect='off'
+          autoCapitalize='off'
+          required
+        />
+      </FormGroup>
 
-          <FormGroup
-            labelText={passwordLabel}
-            hintText={
-              <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
-                <FormattedMessage
-                  id='login.reset_password_hint'
-                  defaultMessage='Trouble logging in?'
-                />
-              </Link>
-            }
-          >
-            <Input
-              aria-label={passwordLabel}
-              placeholder={passwordLabel}
-              type='password'
-              name='password'
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button
-              theme='primary'
-              type='submit'
-              disabled={isLoading}
-            >
-              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-            </Button>
-          </FormActions>
-        </Form>
-
-        <ConsumersList />
-      </Stack>
-    </div>
+      <FormActions>
+        <Button
+          theme='primary'
+          type='submit'
+          disabled={isLoading}
+        >
+          <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+        </Button>
+      </FormActions>
+    </Form>
   );
 };
 

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

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { closeModal } from 'soapbox/actions/modals';
+import { BigCard } from 'soapbox/components/big-card';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
 import { isStandalone } from 'soapbox/utils/state';
 
+import ConsumersList from './consumers-list';
 import LoginForm from './login-form';
 import OtpAuthForm from './otp-auth-form';
 
@@ -68,7 +71,12 @@ const LoginPage = () => {
 
   if (mfaAuthNeeded) return <OtpAuthForm mfa_token={mfaToken} />;
 
-  return <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />;
+  return (
+    <BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
+      <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />
+      <ConsumersList />
+    </BigCard>
+  );
 };
 
 export default LoginPage;

src/features/auth-login/components/otp-auth-form.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -47,41 +48,33 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
   if (shouldRedirect) return <Redirect to='/' />;
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup
+          labelText={intl.formatMessage(messages.otpCodeLabel)}
+          hintText={intl.formatMessage(messages.otpCodeHint)}
+          errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        >
+          <Input
+            name='code'
+            type='text'
+            autoComplete='off'
+            autoFocus
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup
-            labelText={intl.formatMessage(messages.otpCodeLabel)}
-            hintText={intl.formatMessage(messages.otpCodeHint)}
-            errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        <FormActions>
+          <Button
+            theme='primary'
+            type='submit'
+            disabled={isLoading}
           >
-            <Input
-              name='code'
-              type='text'
-              autoComplete='off'
-              autoFocus
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button
-              theme='primary'
-              type='submit'
-              disabled={isLoading}
-            >
-              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+            <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 

src/features/auth-login/components/password-reset-confirm.tsx

@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { resetPasswordConfirm } from 'soapbox/actions/security';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -55,33 +56,25 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
+          <Input
+            type='password'
+            name='password'
+            placeholder={intl.formatMessage(messages.passwordPlaceholder)}
+            onChange={onChange}
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
-            <Input
-              type='password'
-              name='password'
-              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
-              onChange={onChange}
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 

src/features/auth-login/components/password-reset.tsx

@@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { resetPassword } from 'soapbox/actions/security';
+import { BigCard } from 'soapbox/components/big-card';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
@@ -36,32 +37,24 @@ const PasswordReset = () => {
   if (success) return <Redirect to='/' />;
 
   return (
-    <div>
-      <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'>
-        <h1 className='text-center text-2xl font-bold'>
-          <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
-        </h1>
-      </div>
+    <BigCard title={<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
+          <Input
+            type='text'
+            name='nickname_or_email'
+            placeholder='me@example.com'
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
-            <Input
-              type='text'
-              name='nickname_or_email'
-              placeholder='me@example.com'
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 

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

@@ -1,18 +1,15 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { Card, CardTitle, Stack } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
 
 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>
+    <BigCard title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />}>
+      <RegistrationForm />
+    </BigCard>
   );
 };
 

src/features/external-login/index.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { BigCard } from 'soapbox/components/big-card';
 
 import ExternalLoginForm from './components/external-login-form';
 
 /** Page for logging into a remote instance */
 const ExternalLoginPage: React.FC = () => {
-  return <ExternalLoginForm />;
+  return (
+    <BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
+      <ExternalLoginForm />
+    </BigCard>
+  );
 };
 
 export default ExternalLoginPage;

src/features/onboarding/steps/avatar-selection-step.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Avatar, Button, Icon, Spinner, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultAvatar } from 'soapbox/utils/accounts';
@@ -64,69 +65,54 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-900/50 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
+      subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
+    >
+      <Stack space={10}>
+        <div className='relative mx-auto rounded-full bg-gray-200'>
+          {account && (
+            <Avatar src={selectedFile || account.avatar} size={175} />
+          )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
-              </Text>
-            </Stack>
-          </div>
+          {isSubmitting && (
+            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
+              <Spinner withText={false} />
+            </div>
+          )}
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='relative mx-auto rounded-full bg-gray-200'>
-                {account && (
-                  <Avatar src={selectedFile || account.avatar} size={175} />
-                )}
+          <button
+            onClick={openFilePicker}
+            type='button'
+            className={clsx({
+              'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+              'opacity-50 pointer-events-none': isSubmitting,
+            })}
+            disabled={isSubmitting}
+          >
+            <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+          </button>
 
-                {isSubmitting && (
-                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
-                    <Spinner withText={false} />
-                  </div>
-                )}
-
-                <button
-                  onClick={openFilePicker}
-                  type='button'
-                  className={clsx({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                    'opacity-50 pointer-events-none': isSubmitting,
-                  })}
-                  disabled={isSubmitting}
-                >
-                  <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                </button>
-
-                <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
-          </div>
+          <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 

src/features/onboarding/steps/bio-step.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Card, CardBody, FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -43,62 +44,49 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
+    <BigCard
+      title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />}
+      subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />}
+    >
+      <Stack space={5}>
         <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
-              </Text>
+          <FormGroup
+            hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+            labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
+            errors={errors}
+          >
+            <Textarea
+              onChange={(event) => setValue(event.target.value)}
+              placeholder={intl.formatMessage(messages.bioPlaceholder)}
+              value={value}
+              maxLength={500}
+            />
+          </FormGroup>
+        </div>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <div>
+          <Stack justifyContent='center' space={2}>
+            <Button
+              block
+              theme='primary'
+              type='submit'
+              disabled={isSubmitting}
+              onClick={handleSubmit}
+            >
+              {isSubmitting ? (
+                <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+              ) : (
+                <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+              )}
+            </Button>
 
-          <Stack space={5}>
-            <div className='mx-auto sm:w-2/3 sm:pt-10'>
-              <FormGroup
-                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
-                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
-                errors={errors}
-              >
-                <Textarea
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
-                  value={value}
-                  maxLength={500}
-                />
-              </FormGroup>
-            </div>
-
-            <div className='mx-auto sm:w-2/3 md:w-1/2'>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </div>
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
           </Stack>
         </div>
-      </CardBody>
-    </Card>
+      </Stack>
+    </BigCard>
   );
 };
 

src/features/onboarding/steps/cover-photo-selection-step.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { BigCard } from 'soapbox/components/big-card';
 import StillImage from 'soapbox/components/still-image';
-import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, Button, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultHeader } from 'soapbox/utils/accounts';
@@ -67,89 +68,74 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />}
+      subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />}
+    >
+      <Stack space={10}>
+        <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
+          <div
+            role='button'
+            className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
+          >
+            {selectedFile || account?.header && (
+              <StillImage
+                src={selectedFile || account.header}
+                alt={intl.formatMessage(messages.header)}
+                className='absolute inset-0 rounded-t-md object-cover'
+              />
+            )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
-              </Text>
-            </Stack>
+            {isSubmitting && (
+              <div
+                className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
+              >
+                <Spinner withText={false} />
+              </div>
+            )}
+
+            <button
+              onClick={openFilePicker}
+              type='button'
+              className={clsx({
+                'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+                'opacity-50 pointer-events-none': isSubmitting,
+              })}
+              disabled={isSubmitting}
+            >
+              <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+            </button>
+
+            <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
           </div>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
-                <div
-                  role='button'
-                  className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
-                >
-                  {selectedFile || account?.header && (
-                    <StillImage
-                      src={selectedFile || account.header}
-                      alt={intl.formatMessage(messages.header)}
-                      className='absolute inset-0 rounded-t-md object-cover'
-                    />
-                  )}
+          <div className='flex flex-col px-4 pb-4'>
+            {account && (
+              <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
+            )}
 
-                  {isSubmitting && (
-                    <div
-                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
-                    >
-                      <Spinner withText={false} />
-                    </div>
-                  )}
-
-                  <button
-                    onClick={openFilePicker}
-                    type='button'
-                    className={clsx({
-                      'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                      'opacity-50 pointer-events-none': isSubmitting,
-                    })}
-                    disabled={isSubmitting}
-                  >
-                    <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                  </button>
-
-                  <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-                </div>
-
-                <div className='flex flex-col px-4 pb-4'>
-                  {account && (
-                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
-                  )}
-
-                  <Text weight='bold' size='sm'>{account?.display_name}</Text>
-                  <Text theme='muted' size='sm'>@{account?.username}</Text>
-                </div>
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
+            <Text weight='bold' size='sm'>{account?.display_name}</Text>
+            <Text theme='muted' size='sm'>@{account?.username}</Text>
           </div>
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 

src/features/onboarding/steps/display-name-step.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Card, CardBody, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
+import { BigCard } from 'soapbox/components/big-card';
+import { Button, FormGroup, Input, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -54,61 +55,46 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
+      subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
+    >
+      <Stack space={5}>
+        <FormGroup
+          hintText={hintText}
+          labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
+          errors={errors}
+        >
+          <Input
+            onChange={(event) => setValue(event.target.value)}
+            placeholder={intl.formatMessage(messages.usernamePlaceholder)}
+            type='text'
+            value={value}
+            maxLength={30}
+          />
+        </FormGroup>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            type='submit'
+            disabled={isDisabled || isSubmitting}
+            onClick={handleSubmit}
+          >
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={5}>
-              <FormGroup
-                hintText={hintText}
-                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
-                errors={errors}
-              >
-                <Input
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
-                  type='text'
-                  value={value}
-                  maxLength={30}
-                />
-              </FormGroup>
-
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isDisabled || isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 

src/features/onboarding/steps/suggested-accounts-step.tsx

@@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { BigCard } from 'soapbox/components/big-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+import { Button, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
@@ -66,43 +67,28 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
-        <div>
-          <div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
-            <Stack space={2}>
-              <Text size='2xl' align='center' weight='bold'>
-                <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
-              </Text>
+    <BigCard
+      title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />}
+      subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />}
+    >
+      {renderBody()}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
-              </Text>
-            </Stack>
-          </div>
+      <Stack>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            onClick={onNext}
+          >
+            <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+          </Button>
 
-          {renderBody()}
-
-          <div className='mx-auto sm:w-2/3 md:w-1/2'>
-            <Stack>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  onClick={onNext}
-                >
-                  <FormattedMessage id='onboarding.done' defaultMessage='Done' />
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 

src/features/register-invite/index.tsx

@@ -2,7 +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 { BigCard } from 'soapbox/components/big-card';
 import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
 import { useInstance } from 'soapbox/hooks';
 
@@ -23,21 +23,17 @@ const RegisterInvite: React.FC = () => {
     />
   );
 
+  const subtitle = (
+    <FormattedMessage
+      id='register_invite.lead'
+      defaultMessage='Complete the form below to create an account.'
+    />
+  );
+
   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>
-
+    <BigCard title={title} subtitle={subtitle}>
       <RegistrationForm inviteToken={token} />
-    </Stack>
+    </BigCard>
   );
 };
 

src/features/status/components/thread.tsx

@@ -18,13 +18,12 @@ import { Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSettings } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import { RootState } from 'soapbox/store';
 import { type Account, type Status } from 'soapbox/types/entities';
 import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status';
 
 import DetailedStatus from './detailed-status';
-import ThreadLoginCta from './thread-login-cta';
 import ThreadStatus from './thread-status';
 
 type DisplayMedia = 'default' | 'hide_all' | 'show_all';
@@ -97,7 +96,6 @@ const Thread = (props: IThread) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
   const intl = useIntl();
-  const { account: me } = useOwnAccount();
   const settings = useSettings();
 
   const displayMedia = settings.get('displayMedia') as DisplayMedia;
@@ -459,8 +457,6 @@ const Thread = (props: IThread) => {
           {children}
         </ScrollableList>
       </div>
-
-      {!me && <ThreadLoginCta />}
     </Stack>
   );
 };

src/features/status/index.tsx

@@ -9,12 +9,13 @@ import {
 } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
+import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 import Thread from './components/thread';
+import ThreadLoginCta from './components/thread-login-cta';
 
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post Details' },
@@ -47,6 +48,7 @@ interface IStatusDetails {
 const StatusDetails: React.FC<IStatusDetails> = (props) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const { isLoggedIn } = useLoggedIn();
 
   const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector((state) => getStatus(state, { id: props.params.statusId }));
@@ -113,15 +115,19 @@ const StatusDetails: React.FC<IStatusDetails> = (props) => {
   };
 
   return (
-    <Column label={intl.formatMessage(titleMessage())}>
-      <PullToRefresh onRefresh={handleRefresh}>
-        <Thread
-          status={status}
-          next={next}
-          handleLoadMore={handleLoadMore}
-        />
-      </PullToRefresh>
-    </Column>
+    <Stack space={4}>
+      <Column label={intl.formatMessage(titleMessage())}>
+        <PullToRefresh onRefresh={handleRefresh}>
+          <Thread
+            status={status}
+            next={next}
+            handleLoadMore={handleLoadMore}
+          />
+        </PullToRefresh>
+      </Column>
+
+      {!isLoggedIn && <ThreadLoginCta />}
+    </Stack>
   );
 };
 

src/features/ui/index.tsx

@@ -134,6 +134,11 @@ import {
   FollowedTags,
   AboutPage,
   RegistrationPage,
+  LoginPage,
+  PasswordReset,
+  PasswordResetConfirm,
+  RegisterInvite,
+  ExternalLogin,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -357,6 +362,15 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
       )}
 
+      <WrappedRoute path='/login/external' page={DefaultPage} component={ExternalLogin} publicRoute exact />
+      <WrappedRoute path='/login/add' page={DefaultPage} component={LoginPage} publicRoute exact />
+      <WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />
+      <WrappedRoute path='/reset-password' page={DefaultPage} component={PasswordReset} publicRoute exact />
+      <WrappedRoute path='/edit-password' page={DefaultPage} component={PasswordResetConfirm} publicRoute exact />
+      <WrappedRoute path='/invite/:token' page={DefaultPage} component={RegisterInvite} publicRoute exact />
+      <Redirect from='/auth/password/new' to='/reset-password' />
+      <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );