Apply new eslint rules; default to prettier for styling

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -19,10 +19,10 @@ interface Values {
 
 export default () => {
     const ref = useRef<Reaptcha>(null);
-    const [ token, setToken ] = useState('');
+    const [token, setToken] = useState('');
 
     const { clearFlashes, addFlash } = useFlash();
-    const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
+    const { enabled: recaptchaEnabled, siteKey } = useStoreState((state) => state.settings.data!.recaptcha);
 
     useEffect(() => {
         clearFlashes();
@@ -34,7 +34,7 @@ export default () => {
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.
         if (recaptchaEnabled && !token) {
-            ref.current!.execute().catch(error => {
+            ref.current!.execute().catch((error) => {
                 console.error(error);
 
                 setSubmitting(false);
@@ -45,11 +45,11 @@ export default () => {
         }
 
         requestPasswordResetEmail(email, token)
-            .then(response => {
+            .then((response) => {
                 resetForm();
                 addFlash({ type: 'success', title: 'Success', message: response });
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
                 addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
             })
@@ -66,47 +66,42 @@ export default () => {
             onSubmit={handleSubmission}
             initialValues={{ email: '' }}
             validationSchema={object().shape({
-                email: string().email('A valid email address must be provided to continue.')
+                email: string()
+                    .email('A valid email address must be provided to continue.')
                     .required('A valid email address must be provided to continue.'),
             })}
         >
             {({ isSubmitting, setSubmitting, submitForm }) => (
-                <LoginFormContainer
-                    title={'Request Password Reset'}
-                    css={tw`w-full flex`}
-                >
+                <LoginFormContainer title={'Request Password Reset'} css={tw`w-full flex`}>
                     <Field
                         light
                         label={'Email'}
-                        description={'Enter your account email address to receive instructions on resetting your password.'}
+                        description={
+                            'Enter your account email address to receive instructions on resetting your password.'
+                        }
                         name={'email'}
                         type={'email'}
                     />
                     <div css={tw`mt-6`}>
-                        <Button
-                            type={'submit'}
-                            size={'xlarge'}
-                            disabled={isSubmitting}
-                            isLoading={isSubmitting}
-                        >
+                        <Button type={'submit'} size={'xlarge'} disabled={isSubmitting} isLoading={isSubmitting}>
                             Send Email
                         </Button>
                     </div>
-                    {recaptchaEnabled &&
-                    <Reaptcha
-                        ref={ref}
-                        size={'invisible'}
-                        sitekey={siteKey || '_invalid_key'}
-                        onVerify={response => {
-                            setToken(response);
-                            submitForm();
-                        }}
-                        onExpire={() => {
-                            setSubmitting(false);
-                            setToken('');
-                        }}
-                    />
-                    }
+                    {recaptchaEnabled && (
+                        <Reaptcha
+                            ref={ref}
+                            size={'invisible'}
+                            sitekey={siteKey || '_invalid_key'}
+                            onVerify={(response) => {
+                                setToken(response);
+                                submitForm();
+                            }}
+                            onExpire={() => {
+                                setSubmitting(false);
+                                setToken('');
+                            }}
+                        />
+                    )}
                     <div css={tw`mt-6 text-center`}>
                         <Link
                             to={'/auth/login'}

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -13,18 +13,18 @@ import Button from '@/components/elements/Button';
 
 interface Values {
     code: string;
-    recoveryCode: '',
+    recoveryCode: '';
 }
 
-type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>
+type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>;
 
 type Props = OwnProps & {
     clearAndAddHttpError: ActionCreator<FlashStore['clearAndAddHttpError']['payload']>;
-}
+};
 
 const LoginCheckpointContainer = () => {
     const { isSubmitting, setFieldValue } = useFormikContext<Values>();
-    const [ isMissingDevice, setIsMissingDevice ] = useState(false);
+    const [isMissingDevice, setIsMissingDevice] = useState(false);
 
     return (
         <LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
@@ -44,12 +44,7 @@ const LoginCheckpointContainer = () => {
                 />
             </div>
             <div css={tw`mt-6`}>
-                <Button
-                    size={'xlarge'}
-                    type={'submit'}
-                    disabled={isSubmitting}
-                    isLoading={isSubmitting}
-                >
+                <Button size={'xlarge'} type={'submit'} disabled={isSubmitting} isLoading={isSubmitting}>
                     Continue
                 </Button>
             </div>
@@ -58,11 +53,11 @@ const LoginCheckpointContainer = () => {
                     onClick={() => {
                         setFieldValue('code', '');
                         setFieldValue('recoveryCode', '');
-                        setIsMissingDevice(s => !s);
+                        setIsMissingDevice((s) => !s);
                     }}
                     css={tw`cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                 >
-                    {!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
+                    {!isMissingDevice ? "I've Lost My Device" : 'I Have My Device'}
                 </span>
             </div>
             <div css={tw`mt-6 text-center`}>
@@ -80,7 +75,7 @@ const LoginCheckpointContainer = () => {
 const EnhancedForm = withFormik<Props, Values>({
     handleSubmit: ({ code, recoveryCode }, { setSubmitting, props: { clearAndAddHttpError, location } }) => {
         loginCheckpoint(location.state?.token || '', code, recoveryCode)
-            .then(response => {
+            .then((response) => {
                 if (response.complete) {
                     // @ts-ignore
                     window.location = response.intended || '/';
@@ -89,7 +84,7 @@ const EnhancedForm = withFormik<Props, Values>({
 
                 setSubmitting(false);
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
                 setSubmitting(false);
                 clearAndAddHttpError({ error });
@@ -111,10 +106,7 @@ export default ({ history, location, ...props }: OwnProps) => {
         return null;
     }
 
-    return <EnhancedForm
-        clearAndAddHttpError={clearAndAddHttpError}
-        history={history}
-        location={location}
-        {...props}
-    />;
+    return (
+        <EnhancedForm clearAndAddHttpError={clearAndAddHttpError} history={history} location={location} {...props} />
+    );
 };

resources/scripts/components/auth/LoginContainer.tsx

@@ -18,10 +18,10 @@ interface Values {
 
 const LoginContainer = ({ history }: RouteComponentProps) => {
     const ref = useRef<Reaptcha>(null);
-    const [ token, setToken ] = useState('');
+    const [token, setToken] = useState('');
 
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
+    const { enabled: recaptchaEnabled, siteKey } = useStoreState((state) => state.settings.data!.recaptcha);
 
     useEffect(() => {
         clearFlashes();
@@ -33,7 +33,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
         // If there is no token in the state yet, request the token and then abort this submit request
         // since it will be re-submitted when the recaptcha data is returned by the component.
         if (recaptchaEnabled && !token) {
-            ref.current!.execute().catch(error => {
+            ref.current!.execute().catch((error) => {
                 console.error(error);
 
                 setSubmitting(false);
@@ -44,7 +44,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
         }
 
         login({ ...values, recaptchaData: token })
-            .then(response => {
+            .then((response) => {
                 if (response.complete) {
                     // @ts-ignore
                     window.location = response.intended || '/';
@@ -53,7 +53,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
 
                 history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
 
                 setToken('');
@@ -75,42 +75,30 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
         >
             {({ isSubmitting, setSubmitting, submitForm }) => (
                 <LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`}>
-                    <Field
-                        light
-                        type={'text'}
-                        label={'Username or Email'}
-                        name={'username'}
-                        disabled={isSubmitting}
-                    />
+                    <Field light type={'text'} label={'Username or Email'} name={'username'} disabled={isSubmitting} />
                     <div css={tw`mt-6`}>
-                        <Field
-                            light
-                            type={'password'}
-                            label={'Password'}
-                            name={'password'}
-                            disabled={isSubmitting}
-                        />
+                        <Field light type={'password'} label={'Password'} name={'password'} disabled={isSubmitting} />
                     </div>
                     <div css={tw`mt-6`}>
                         <Button type={'submit'} size={'xlarge'} isLoading={isSubmitting} disabled={isSubmitting}>
                             Login
                         </Button>
                     </div>
-                    {recaptchaEnabled &&
-                    <Reaptcha
-                        ref={ref}
-                        size={'invisible'}
-                        sitekey={siteKey || '_invalid_key'}
-                        onVerify={response => {
-                            setToken(response);
-                            submitForm();
-                        }}
-                        onExpire={() => {
-                            setSubmitting(false);
-                            setToken('');
-                        }}
-                    />
-                    }
+                    {recaptchaEnabled && (
+                        <Reaptcha
+                            ref={ref}
+                            size={'invisible'}
+                            sitekey={siteKey || '_invalid_key'}
+                            onVerify={(response) => {
+                                setToken(response);
+                                submitForm();
+                            }}
+                            onExpire={() => {
+                                setSubmitting(false);
+                                setToken('');
+                            }}
+                        />
+                    )}
                     <div css={tw`mt-6 text-center`}>
                         <Link
                             to={'/auth/password'}

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -7,7 +7,7 @@ import tw from 'twin.macro';
 
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
     title?: string;
-}
+};
 
 const Container = styled.div`
     ${breakpoint('sm')`
@@ -30,24 +30,18 @@ const Container = styled.div`
 
 export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
     <Container>
-        {title &&
-        <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
-            {title}
-        </h2>
-        }
-        <FlashMessageRender css={tw`mb-2 px-1`}/>
+        {title && <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>{title}</h2>}
+        <FlashMessageRender css={tw`mb-2 px-1`} />
         <Form {...props} ref={ref}>
             <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 css={tw`flex-1`}>
-                    {props.children}
+                    <img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`} />
                 </div>
+                <div css={tw`flex-1`}>{props.children}</div>
             </div>
         </Form>
         <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
-            &copy; 2015 - {(new Date()).getFullYear()}&nbsp;
+            &copy; 2015 - {new Date().getFullYear()}&nbsp;
             <a
                 rel={'noopener nofollow noreferrer'}
                 href={'https://pterodactyl.io'}

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -20,7 +20,7 @@ interface Values {
 }
 
 export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
-    const [ email, setEmail ] = useState('');
+    const [email, setEmail] = useState('');
 
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -36,7 +36,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                 // @ts-ignore
                 window.location = '/';
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
 
                 setSubmitting(false);
@@ -52,22 +52,20 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                 passwordConfirmation: '',
             }}
             validationSchema={object().shape({
-                password: string().required('A new password is required.')
+                password: string()
+                    .required('A new password is required.')
                     .min(8, 'Your new password should be at least 8 characters in length.'),
                 passwordConfirmation: string()
                     .required('Your new password does not match.')
                     // @ts-ignore
-                    .oneOf([ ref('password'), null ], 'Your new password does not match.'),
+                    .oneOf([ref('password'), null], 'Your new password does not match.'),
             })}
         >
             {({ isSubmitting }) => (
-                <LoginFormContainer
-                    title={'Reset Password'}
-                    css={tw`w-full flex`}
-                >
+                <LoginFormContainer title={'Reset Password'} css={tw`w-full flex`}>
                     <div>
                         <label>Email</label>
-                        <Input value={email} isLight disabled/>
+                        <Input value={email} isLight disabled />
                     </div>
                     <div css={tw`mt-6`}>
                         <Field
@@ -79,20 +77,10 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                         />
                     </div>
                     <div css={tw`mt-6`}>
-                        <Field
-                            light
-                            label={'Confirm New Password'}
-                            name={'passwordConfirmation'}
-                            type={'password'}
-                        />
+                        <Field light label={'Confirm New Password'} name={'passwordConfirmation'} type={'password'} />
                     </div>
                     <div css={tw`mt-6`}>
-                        <Button
-                            size={'xlarge'}
-                            type={'submit'}
-                            disabled={isSubmitting}
-                            isLoading={isSubmitting}
-                        >
+                        <Button size={'xlarge'} type={'submit'} disabled={isSubmitting} isLoading={isSubmitting}>
                             Reset Password
                         </Button>
                     </div>