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

Fix login error message width, closes #1792

Browse source
This commit is contained in:
Dane Everitt 2020-01-19 14:31:07 -08:00
parent 11c430cf69
commit f9ec96c70a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
2 changed files with 78 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

29
resources/scripts/components/auth/LoginFormContainer.tsx
View file

@ -1,40 +1,17 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import styled from 'styled-components';
import { Form } from 'formik'; import { Form } from 'formik';
import { breakpoint } from 'styled-components-breakpoint';
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>; type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
const LoginContainer = styled.div` export default forwardRef<any, Props>(({ ...props }, ref) => (
${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) => (
<Form {...props}> <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'}> <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'}/> <img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
</div> </div>
<div className={'flex-1'}> <div className={'flex-1'}>
{props.children} {props.children}
</div> </div>
</LoginContainer> </div>
</Form> </Form>
)); ));