Fix login error message width, closes pterodactyl#1792

Author: DaneEveritt

resources/scripts/components/auth/LoginContainer.tsx

@@ -12,12 +12,33 @@ import { httpErrorToHuman } from '@/api/http';
 import { FlashMessage } from '@/state/flashes';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Spinner from '@/components/elements/Spinner';
+import styled from 'styled-components';
+import { breakpoint } from 'styled-components-breakpoint';
 
 type OwnProps = RouteComponentProps & {
     clearFlashes: ActionCreator<void>;
     addFlash: ActionCreator<FlashMessage>;
 }
 
+const Container = styled.div`
+    ${breakpoint('sm')`
+        ${tw`w-4/5 mx-auto`}
+    `};
+
+    ${breakpoint('md')`
+        ${tw`p-10`}
+    `};
+
+    ${breakpoint('lg')`
+        ${tw`w-3/5`}
+    `};
+
+    ${breakpoint('xl')`
+        ${tw`w-full`}
+        max-width: 660px;
+    `};
+`;
+
 const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handleSubmit }: OwnProps & FormikProps<LoginData>) => {
     const ref = useRef<ReCAPTCHA | null>(null);
     const { enabled: recaptchaEnabled, siteKey } = useStoreState<ApplicationStore, any>(state => state.settings.data!.recaptcha);
@@ -38,58 +59,63 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
             <h2 className={'text-center text-neutral-100 font-medium py-4'}>
                 Login to Continue
             </h2>
-            <FlashMessageRender className={'mb-2'}/>
-            <LoginFormContainer onSubmit={submit}>
-                <label htmlFor={'username'}>Username or Email</label>
-                <Field
-                    type={'text'}
-                    id={'username'}
-                    name={'username'}
-                    className={'input'}
-                />
-                <div className={'mt-6'}>
-                    <label htmlFor={'password'}>Password</label>
+            <Container>
+                <FlashMessageRender className={'mb-2 px-1'}/>
+                <LoginFormContainer
+                    className={'w-full flex'}
+                    onSubmit={submit}
+                >
+                    <label htmlFor={'username'}>Username or Email</label>
                     <Field
-                        type={'password'}
-                        id={'password'}
-                        name={'password'}
+                        type={'text'}
+                        id={'username'}
+                        name={'username'}
                         className={'input'}
                     />
-                </div>
-                <div className={'mt-6'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-jumbo'}
-                    >
-                        {isSubmitting ?
-                            <Spinner size={'tiny'} className={'mx-auto'}/>
-                            :
-                            'Login'
-                        }
-                    </button>
-                </div>
-                {recaptchaEnabled &&
-                <ReCAPTCHA
-                    ref={ref}
-                    size={'invisible'}
-                    sitekey={siteKey || '_invalid_key'}
-                    onChange={token => {
-                        ref.current && ref.current.reset();
-                        setFieldValue('recaptchaData', token);
-                        submitForm();
-                    }}
-                    onExpired={() => setFieldValue('recaptchaData', null)}
-                />
-                }
-                <div className={'mt-6 text-center'}>
-                    <Link
-                        to={'/auth/password'}
-                        className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
-                    >
-                        Forgot password?
-                    </Link>
-                </div>
-            </LoginFormContainer>
+                    <div className={'mt-6'}>
+                        <label htmlFor={'password'}>Password</label>
+                        <Field
+                            type={'password'}
+                            id={'password'}
+                            name={'password'}
+                            className={'input'}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <button
+                            type={'submit'}
+                            className={'btn btn-primary btn-jumbo'}
+                        >
+                            {isSubmitting ?
+                                <Spinner size={'tiny'} className={'mx-auto'}/>
+                                :
+                                'Login'
+                            }
+                        </button>
+                    </div>
+                    {recaptchaEnabled &&
+                    <ReCAPTCHA
+                        ref={ref}
+                        size={'invisible'}
+                        sitekey={siteKey || '_invalid_key'}
+                        onChange={token => {
+                            ref.current && ref.current.reset();
+                            setFieldValue('recaptchaData', token);
+                            submitForm();
+                        }}
+                        onExpired={() => setFieldValue('recaptchaData', null)}
+                    />
+                    }
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/auth/password'}
+                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        >
+                            Forgot password?
+                        </Link>
+                    </div>
+                </LoginFormContainer>
+            </Container>
         </React.Fragment>
     );
 };

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,40 +1,17 @@
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
 import { Form } from 'formik';
-import { breakpoint } from 'styled-components-breakpoint';
 
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
 
-const LoginContainer = styled.div`
-    ${tw`bg-white shadow-lg rounded-lg p-6 mx-1`};
-
-    ${breakpoint('sm')`
-        ${tw`w-4/5 mx-auto`}
-    `};
-
-    ${breakpoint('md')`
-        ${tw`flex p-10`}
-    `};
-
-    ${breakpoint('lg')`
-        ${tw`w-3/5`}
-    `};
-
-    ${breakpoint('xl')`
-        ${tw`w-full`}
-        max-width: 660px;
-    `};
-`;
-
-export default forwardRef<any, Props>(({ className, ...props }, ref) => (
+export default forwardRef<any, Props>(({ ...props }, ref) => (
     <Form {...props}>
-        <LoginContainer>
+        <div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 mx-1'}>
             <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
                 <img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
             </div>
             <div className={'flex-1'}>
                 {props.children}
             </div>
-        </LoginContainer>
+        </div>
     </Form>
 ));