Fix recaptcha on login forms

resources/scripts/api/auth/login.ts

@@ -6,9 +6,19 @@ export interface LoginResponse {
     confirmationToken?: string;
 }
 
-export default (user: string, password: string): Promise<LoginResponse> => {
+export interface LoginData {
+    username: string;
+    password: string;
+    recaptchaData?: string | null;
+}
+
+export default ({ username, password, recaptchaData }: LoginData): Promise<LoginResponse> => {
     return new Promise((resolve, reject) => {
-        http.post('/auth/login', { user, password })
+        http.post('/auth/login', {
+            user: username,
+            password,
+            'g-recaptcha-response': recaptchaData,
+        })
             .then(response => {
                 if (!(response.data instanceof Object)) {
                     return reject(new Error('An error occurred while processing the login request.'));

resources/scripts/components/App.tsx

@@ -7,8 +7,10 @@ import DashboardRouter from '@/routers/DashboardRouter';
 import ServerRouter from '@/routers/ServerRouter';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { Provider } from 'react-redux';
+import { SiteSettings } from '@/state/settings';
 
-interface WindowWithUser extends Window {
+interface ExtendedWindow extends Window {
+    SiteConfiguration?: SiteSettings;
     PterodactylUser?: {
         uuid: string;
         username: string;
@@ -22,20 +24,24 @@ interface WindowWithUser extends Window {
 }
 
 const App = () => {
-    const data = (window as WindowWithUser).PterodactylUser;
-    if (data && !store.getState().user.data) {
+    const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
+    if (PterodactylUser && !store.getState().user.data) {
         store.getActions().user.setUserData({
-            uuid: data.uuid,
-            username: data.username,
-            email: data.email,
-            language: data.language,
-            rootAdmin: data.root_admin,
-            useTotp: data.use_totp,
-            createdAt: new Date(data.created_at),
-            updatedAt: new Date(data.updated_at),
+            uuid: PterodactylUser.uuid,
+            username: PterodactylUser.username,
+            email: PterodactylUser.email,
+            language: PterodactylUser.language,
+            rootAdmin: PterodactylUser.root_admin,
+            useTotp: PterodactylUser.use_totp,
+            createdAt: new Date(PterodactylUser.created_at),
+            updatedAt: new Date(PterodactylUser.updated_at),
         });
     }
 
+    if (!store.getState().settings.data) {
+        store.getActions().settings.setSettings(SiteConfiguration!);
+    }
+
     return (
         <StoreProvider store={store}>
             <Provider store={store}>

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,78 +1,107 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
-import login from '@/api/auth/login';
+import login, { LoginData } from '@/api/auth/login';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import { Actions, useStoreActions } from 'easy-peasy';
+import { ActionCreator, Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { FormikProps, withFormik } from 'formik';
 import { object, string } from 'yup';
 import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
-
-interface Values {
-    username: string;
-    password: string;
-}
+import { FlashMessage } from '@/state/flashes';
+import ReCAPTCHA from 'react-google-recaptcha';
 
 type OwnProps = RouteComponentProps & {
-    clearFlashes: any;
-    addFlash: any;
+    clearFlashes: ActionCreator<void>;
+    addFlash: ActionCreator<FlashMessage>;
 }
 
-const LoginContainer = ({ isSubmitting }: OwnProps & FormikProps<Values>) => (
-    <React.Fragment>
-        <h2 className={'text-center text-neutral-100 font-medium py-4'}>
-            Login to Continue
-        </h2>
-        <FlashMessageRender className={'mb-2'}/>
-        <LoginFormContainer>
-            <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>
+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);
+
+    const submit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if (ref.current && !values.recaptchaData) {
+            return ref.current.execute();
+        }
+
+        handleSubmit(e);
+    };
+
+    console.log(values.recaptchaData);
+
+    return (
+        <React.Fragment>
+            {ref.current && ref.current.render()}
+            <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={'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 ?
-                        <span className={'spinner white'}>&nbsp;</span>
-                        :
-                        'Login'
-                    }
-                </button>
-            </div>
-            <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>
-    </React.Fragment>
-);
+                <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 ?
+                            <span className={'spinner white'}>&nbsp;</span>
+                            :
+                            '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>
+        </React.Fragment>
+    );
+};
 
-const EnhancedForm = withFormik<OwnProps, Values>({
+const EnhancedForm = withFormik<OwnProps, LoginData>({
     displayName: 'LoginContainerForm',
 
     mapPropsToValues: (props) => ({
         username: '',
         password: '',
+        recaptchaData: null,
     }),
 
     validationSchema: () => object().shape({
@@ -80,9 +109,9 @@ const EnhancedForm = withFormik<OwnProps, Values>({
         password: string().required('Please enter your account password.'),
     }),
 
-    handleSubmit: ({ username, password }, { props, setSubmitting }) => {
+    handleSubmit: (values, { props, setFieldValue, setSubmitting }) => {
         props.clearFlashes();
-        login(username, password)
+        login(values)
             .then(response => {
                 if (response.complete) {
                     // @ts-ignore
@@ -96,6 +125,7 @@ const EnhancedForm = withFormik<OwnProps, Values>({
                 console.error(error);
 
                 setSubmitting(false);
+                setFieldValue('recaptchaData', null);
                 props.addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
             });
     },

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,8 +1,10 @@
-import * as React from 'react';
-import { Form } from 'formik';
+import React, { forwardRef } from 'react';
 
-export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) => (
-    <Form
+type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
+
+export default forwardRef<any, Props>(({ className, ...props }, ref) => (
+    <form
+        ref={ref}
         className={'flex items-center justify-center login-box'}
         {...props}
         style={{
@@ -15,5 +17,5 @@ export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLA
         <div className={'flex-1'}>
             {props.children}
         </div>
-    </Form>
-);
+    </form>
+));

resources/scripts/state/index.ts

@@ -2,17 +2,20 @@ import { createStore } from 'easy-peasy';
 import flashes, { FlashStore } from '@/state/flashes';
 import user, { UserStore } from '@/state/user';
 import permissions, { GloablPermissionsStore } from '@/state/permissions';
+import settings, { SettingsStore } from '@/state/settings';
 
 export interface ApplicationStore {
     permissions: GloablPermissionsStore;
     flashes: FlashStore;
     user: UserStore;
+    settings: SettingsStore;
 }
 
 const state: ApplicationStore = {
     permissions,
     flashes,
     user,
+    settings,
 };
 
 export const store = createStore(state);

resources/scripts/state/settings.ts

@@ -0,0 +1,25 @@
+import { action, Action } from 'easy-peasy';
+
+export interface SiteSettings {
+    name: string;
+    locale: string;
+    recaptcha: {
+        enabled: boolean;
+        siteKey: string;
+    };
+}
+
+export interface SettingsStore {
+    data?: SiteSettings;
+    setSettings: Action<SettingsStore, SiteSettings>;
+}
+
+const settings: SettingsStore = {
+    data: undefined,
+
+    setSettings: action((state, payload) => {
+        state.data = payload;
+    }),
+};
+
+export default settings;

resources/views/templates/wrapper.blade.php

@@ -21,7 +21,12 @@
         @section('user-data')
             @if(!is_null(Auth::user()))
                 <script>
-                    window.PterodactylUser = {!! json_encode(Auth::user()->toVueObject()) !!}
+                    window.PterodactylUser = {!! json_encode(Auth::user()->toVueObject()) !!};
+                </script>
+            @endif
+            @if(!empty($siteConfiguration))
+                <script>
+                    window.SiteConfiguration = {!! json_encode($siteConfiguration) !!};
                 </script>
             @endif
         @show