Move Login page to UI

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

@@ -104,7 +104,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} />

src/features/auth-layout/index.tsx

@@ -64,7 +64,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='/reset-password' component={PasswordReset} />
                     <Route exact path='/edit-password' component={PasswordResetConfirm} />
                     <Route path='/invite/:token' component={RegisterInvite} />

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>
+    <Form onSubmit={handleSubmit}>
-      <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'>
+      <FormGroup labelText={usernameLabel}>
-        <h1 className='text-center text-2xl font-bold'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
+        <Input
-      </div>
+          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}>
+      <FormGroup
-        <Form onSubmit={handleSubmit}>
+        labelText={passwordLabel}
-          <FormGroup labelText={usernameLabel}>
+        hintText={
-            <Input
+          <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
-              aria-label={usernameLabel}
+            <FormattedMessage
-              placeholder={usernameLabel}
+              id='login.reset_password_hint'
-              type='text'
+              defaultMessage='Trouble logging in?'
-              name='username'
-              autoCorrect='off'
-              autoCapitalize='off'
-              required
             />
-          </FormGroup>
+          </Link>
+        }
+      >
+        <Input
+          aria-label={passwordLabel}
+          placeholder={passwordLabel}
+          type='password'
+          name='password'
+          autoComplete='off'
+          autoCorrect='off'
+          autoCapitalize='off'
+          required
+        />
+      </FormGroup>
 
-          <FormGroup
+      <FormActions>
-            labelText={passwordLabel}
+        <Button
-            hintText={
+          theme='primary'
-              <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
+          type='submit'
-                <FormattedMessage
+          disabled={isLoading}
-                  id='login.reset_password_hint'
+        >
-                  defaultMessage='Trouble logging in?'
+          <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-                />
+        </Button>
-              </Link>
+      </FormActions>
-            }
+    </Form>
-          >
-            <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>
   );
 };
 

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/ui/index.tsx

@@ -134,6 +134,7 @@ import {
   FollowedTags,
   AboutPage,
   RegistrationPage,
+  LoginPage,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -357,6 +358,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
       )}
 
+      <WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );