Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into pagetitles2

Browse source
This commit is contained in:
Charles Morgan 2020-08-01 23:14:27 -05:00 committed by GitHub
commit 658c2b12ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 124 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -26,6 +26,7 @@
"react-fast-compare": "^3.2.0",
"react-google-recaptcha": "^2.0.1",
"react-helmet": "^6.1.0",
"react-ga": "^3.1.2",
"react-hot-loader": "^4.12.21",
"react-i18next": "^11.2.1",
"react-redux": "^7.1.0",

4
resources/scripts/api/auth/requestPasswordResetEmail.ts
View file

@ -1,8 +1,8 @@
import http from '@/api/http';
export default (email: string): Promise<string> => {
export default (email: string, recaptchaData?: string): Promise<string> => {
return new Promise((resolve, reject) => {
http.post('/auth/password', { email })
http.post('/auth/password', { email, 'g-recaptcha-response': recaptchaData })
.then(response => resolve(response.data.status || ''))
.catch(reject);
});

40
resources/scripts/components/auth/ForgotPasswordContainer.tsx
View file

@ -1,27 +1,40 @@
import * as React from 'react';
import { useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
import { httpErrorToHuman } from '@/api/http';
import LoginFormContainer from '@/components/auth/LoginFormContainer';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { useStoreState } from 'easy-peasy';
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';
import Reaptcha from 'reaptcha';
import useFlash from '@/plugins/useFlash';
interface Values {
email: string;
}
export default () => {
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const ref = useRef<Reaptcha>(null);
const [ token, setToken ] = useState('');
const { clearFlashes, addFlash } = useFlash();
const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
const handleSubmission = ({ email }: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
setSubmitting(true);
clearFlashes();
requestPasswordResetEmail(email)
// 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 => console.error(error));
return;
}
requestPasswordResetEmail(email, token)
.then(response => {
resetForm();
addFlash({ type: 'success', title: 'Success', message: response });
@ -42,7 +55,7 @@ export default () => {
.required('A valid email address must be provided to continue.'),
})}
>
{({ isSubmitting }) => (
{({ isSubmitting, setSubmitting, submitForm }) => (
<LoginFormContainer
title={'Request Password Reset'}
css={tw`w-full flex`}
@ -64,6 +77,21 @@ export default () => {
Send Email
</Button>
</div>
{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
type={'button'}

133
resources/scripts/components/auth/LoginContainer.tsx
View file

@ -1,41 +1,67 @@
import React, { useRef } from 'react';
import React, { useRef, useState } from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import login, { LoginData } from '@/api/auth/login';
import login from '@/api/auth/login';
import LoginFormContainer from '@/components/auth/LoginFormContainer';
import { ActionCreator, Actions, useStoreActions, useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { FormikProps, withFormik } from 'formik';
import { useStoreState } from 'easy-peasy';
import { Formik, FormikHelpers } from 'formik';
import { object, string } from 'yup';
import Field from '@/components/elements/Field';
import { httpErrorToHuman } from '@/api/http';
import { FlashMessage } from '@/state/flashes';
import ReCAPTCHA from 'react-google-recaptcha';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Reaptcha from 'reaptcha';
import useFlash from '@/plugins/useFlash';
type OwnProps = RouteComponentProps & {
clearFlashes: ActionCreator<void>;
addFlash: ActionCreator<FlashMessage>;
interface Values {
username: string;
password: string;
}
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 LoginContainer = ({ history }: RouteComponentProps) => {
const ref = useRef<Reaptcha>(null);
const [ token, setToken ] = useState('');
const submit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
if (ref.current && !values.recaptchaData) {
return ref.current.execute();
const onSubmit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes();
// 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 => console.error(error));
return;
}
handleSubmit(e);
login({ ...values, recaptchaData: token })
.then(response => {
if (response.complete) {
// @ts-ignore
window.location = response.intended || '/';
return;
}
history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
})
.catch(error => {
console.error(error);
setSubmitting(false);
clearAndAddHttpError({ error });
});
};
return (
<React.Fragment>
{ref.current && ref.current.render()}
<LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} onSubmit={submit}>
<Formik
onSubmit={onSubmit}
initialValues={{ username: '', password: '' }}
validationSchema={object().shape({
username: string().required('A username or email must be provided.'),
password: string().required('Please enter your account password.'),
})}
>
{({ isSubmitting, setSubmitting, submitForm }) => (
<LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`}>
<Field
type={'text'}
label={'Username or Email'}
@ -58,16 +84,18 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
</Button>
</div>
{recaptchaEnabled &&
<ReCAPTCHA
<Reaptcha
ref={ref}
size={'invisible'}
sitekey={siteKey || '_invalid_key'}
onChange={token => {
ref.current && ref.current.reset();
setFieldValue('recaptchaData', token);
onVerify={response => {
setToken(response);
submitForm();
}}
onExpired={() => setFieldValue('recaptchaData', null)}
onExpire={() => {
setSubmitting(false);
setToken('');
}}
/>
}
<div css={tw`mt-6 text-center`}>
@ -79,54 +107,9 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
</Link>
</div>
</LoginFormContainer>
</React.Fragment>
)}
</Formik>
);
};
const EnhancedForm = withFormik<OwnProps, LoginData>({
displayName: 'LoginContainerForm',
mapPropsToValues: () => ({
username: '',
password: '',
recaptchaData: null,
}),
validationSchema: () => object().shape({
username: string().required('A username or email must be provided.'),
password: string().required('Please enter your account password.'),
}),
handleSubmit: (values, { props, setFieldValue, setSubmitting }) => {
props.clearFlashes();
login(values)
.then(response => {
if (response.complete) {
// @ts-ignore
window.location = response.intended || '/';
return;
}
props.history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
})
.catch(error => {
console.error(error);
setSubmitting(false);
setFieldValue('recaptchaData', null);
props.addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
});
},
})(LoginContainer);
export default (props: RouteComponentProps) => {
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
return (
<EnhancedForm
{...props}
addFlash={addFlash}
clearFlashes={clearFlashes}
/>
);
};
export default LoginContainer;

2
resources/scripts/state/flashes.ts
View file

@ -6,7 +6,7 @@ export interface FlashStore {
items: FlashMessage[];
addFlash: Action<FlashStore, FlashMessage>;
addError: Action<FlashStore, { message: string; key?: string }>;
clearAndAddHttpError: Action<FlashStore, { error: any, key: string }>;
clearAndAddHttpError: Action<FlashStore, { error: any, key?: string }>;
clearFlashes: Action<FlashStore, string | void>;
}

2
routes/auth.php
View file

@ -26,7 +26,7 @@ Route::group(['middleware' => 'guest'], function () {
// Password reset routes. This endpoint is hit after going through
// the forgot password routes to acquire a token (or after an account
// is created).
Route::post('/password/reset', 'ResetPasswordController')->name('auth.reset-password')->middleware('recaptcha');
Route::post('/password/reset', 'ResetPasswordController')->name('auth.reset-password');
// Catch any other combinations of routes and pass them off to the Vuejs component.
Route::fallback('LoginController@index');