Fix login form

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -8,6 +8,8 @@ import { ApplicationStore } from '@/state';
 import Field from '@/components/elements/Field';
 import { Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     email: string;
@@ -43,33 +45,30 @@ export default () => {
             {({ isSubmitting }) => (
                 <LoginFormContainer
                     title={'Request Password Reset'}
-                    className={'w-full flex'}
+                    css={tw`w-full flex`}
                 >
                     <Field
-                        light={true}
+                        light
                         label={'Email'}
                         description={'Enter your account email address to receive instructions on resetting your password.'}
                         name={'email'}
                         type={'email'}
                     />
-                    <div className={'mt-6'}>
-                        <button
+                    <div css={tw`mt-6`}>
+                        <Button
                             type={'submit'}
-                            className={'btn btn-primary btn-jumbo flex justify-center'}
+                            size={'xlarge'}
                             disabled={isSubmitting}
+                            isLoading={isSubmitting}
                         >
-                            {isSubmitting ?
-                                <div className={'spinner-circle spinner-sm spinner-white'}></div>
-                                :
-                                'Send Email'
-                            }
-                        </button>
+                            Send Email
+                        </Button>
                     </div>
-                    <div className={'mt-6 text-center'}>
+                    <div css={tw`mt-6 text-center`}>
                         <Link
                             type={'button'}
                             to={'/auth/login'}
-                            className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                            css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                         >
                             Return to Login
                         </Link>

resources/scripts/components/auth/LoginContainer.tsx

@@ -11,6 +11,8 @@ import { httpErrorToHuman } from '@/api/http';
 import { FlashMessage } from '@/state/flashes';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 type OwnProps = RouteComponentProps & {
     clearFlashes: ActionCreator<void>;
@@ -36,36 +38,29 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
             {ref.current && ref.current.render()}
             <LoginFormContainer
                 title={'Login to Continue'}
-                className={'w-full flex'}
+                css={tw`w-full flex`}
                 onSubmit={submit}
             >
-                <label htmlFor={'username'}>Username or Email</label>
                 <Field
                     type={'text'}
+                    label={'Username or Email'}
                     id={'username'}
                     name={'username'}
-                    className={'input'}
+                    light
                 />
-                <div className={'mt-6'}>
-                    <label htmlFor={'password'}>Password</label>
+                <div css={tw`mt-6`}>
                     <Field
                         type={'password'}
+                        label={'Password'}
                         id={'password'}
                         name={'password'}
-                        className={'input'}
+                        light
                     />
                 </div>
-                <div className={'mt-6'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-jumbo'}
-                    >
-                        {isSubmitting ?
-                            <Spinner size={'small'} className={'mx-auto'}/>
-                            :
-                            'Login'
-                        }
-                    </button>
+                <div css={tw`mt-6`}>
+                    <Button type={'submit'} size={'xlarge'} isLoading={isSubmitting}>
+                        Login
+                    </Button>
                 </div>
                 {recaptchaEnabled &&
                 <ReCAPTCHA
@@ -80,10 +75,10 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
                     onExpired={() => setFieldValue('recaptchaData', null)}
                 />
                 }
-                <div className={'mt-6 text-center'}>
+                <div css={tw`mt-6 text-center`}>
                     <Link
                         to={'/auth/password'}
-                        className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        css={tw`text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600`}
                     >
                         Forgot password?
                     </Link>

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Form } from 'formik';
 import styled from 'styled-components/macro';
-import { breakpoint } from 'styled-components-breakpoint';
+import { breakpoint } from '@/theme';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import tw from 'twin.macro';
 
@@ -30,27 +30,29 @@ const Container = styled.div`
 
 export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
     <Container>
-        {title && <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+        {title &&
+        <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
             {title}
-        </h2>}
-        <FlashMessageRender className={'mb-2 px-1'}/>
+        </h2>
+        }
+        <FlashMessageRender css={tw`mb-2 px-1`}/>
         <Form {...props} ref={ref}>
-            <div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1'}>
-                <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
-                    <img src={'/assets/svgs/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
+            <div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
+                <div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
+                    <img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
                 </div>
-                <div className={'flex-1'}>
+                <div css={tw`flex-1`}>
                     {props.children}
                 </div>
             </div>
         </Form>
-        <p className={'text-center text-neutral-500 text-xs mt-4'}>
+        <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
             &copy; 2015 - 2020&nbsp;
             <a
-                rel={'noopener nofollow'}
+                rel={'noopener nofollow noreferrer'}
                 href={'https://pterodactyl.io'}
                 target={'_blank'}
-                className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
             >
                 Pterodactyl Software
             </a>