forked from Alex/Pterodactyl-Panel
Correctly center the spinner in buttons
This commit is contained in:
Dane Everitt
parent
8c20158e58
commit
1c97dd4e24
@ -5,12 +5,12 @@ import { httpErrorToHuman } from '@/api/http';
|
||||
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
||||
import { ActionCreator } from 'easy-peasy';
|
||||
import { StaticContext } from 'react-router';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import { useFormikContext, withFormik } from 'formik';
|
||||
import { object, string } from 'yup';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import { FlashStore } from '@/state/flashes';
|
||||
import Field from '@/components/elements/Field';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
|
||||
interface Values {
|
||||
code: string;
|
||||
@ -29,13 +29,10 @@ const LoginCheckpointContainer = () => {
|
||||
const [ isMissingDevice, setIsMissingDevice ] = useState(false);
|
||||
|
||||
return (
|
||||
<LoginFormContainer
|
||||
title={'Device Checkpoint'}
|
||||
className={'w-full flex'}
|
||||
>
|
||||
<div className={'mt-6'}>
|
||||
<LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
light={true}
|
||||
light
|
||||
name={isMissingDevice ? 'recoveryCode' : 'code'}
|
||||
title={isMissingDevice ? 'Recovery Code' : 'Authentication Code'}
|
||||
description={
|
||||
@ -44,38 +41,35 @@ const LoginCheckpointContainer = () => {
|
||||
: 'Enter the two-factor token generated by your device.'
|
||||
}
|
||||
type={isMissingDevice ? 'text' : 'number'}
|
||||
autoFocus={true}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
<div css={tw`mt-6`}>
|
||||
<Button
|
||||
size={'xlarge'}
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ?
|
||||
<Spinner size={'small'} className={'mx-auto'}/>
|
||||
:
|
||||
'Continue'
|
||||
}
|
||||
</button>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<div css={tw`mt-6 text-center`}>
|
||||
<span
|
||||
onClick={() => {
|
||||
setFieldValue('code', '');
|
||||
setFieldValue('recoveryCode', '');
|
||||
setIsMissingDevice(s => !s);
|
||||
}}
|
||||
className={'cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
||||
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'}
|
||||
</span>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<div css={tw`mt-6 text-center`}>
|
||||
<Link
|
||||
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>
|
||||
|
||||
@ -36,11 +36,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
|
||||
return (
|
||||
<React.Fragment>
|
||||
{ref.current && ref.current.render()}
|
||||
<LoginFormContainer
|
||||
title={'Login to Continue'}
|
||||
css={tw`w-full flex`}
|
||||
onSubmit={submit}
|
||||
>
|
||||
<LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} onSubmit={submit}>
|
||||
<Field
|
||||
type={'text'}
|
||||
label={'Username or Email'}
|
||||
|
||||
@ -11,15 +11,16 @@ import Spinner from '@/components/elements/Spinner';
|
||||
import { Formik, FormikHelpers } from 'formik';
|
||||
import { object, ref, string } from 'yup';
|
||||
import Field from '@/components/elements/Field';
|
||||
|
||||
type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
|
||||
import Input from '@/components/elements/Input';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
|
||||
interface Values {
|
||||
password: string;
|
||||
passwordConfirmation: string;
|
||||
}
|
||||
|
||||
export default ({ match, history, location }: Props) => {
|
||||
export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
|
||||
const [ email, setEmail ] = useState('');
|
||||
|
||||
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
@ -62,46 +63,43 @@ export default ({ match, history, location }: Props) => {
|
||||
{({ isSubmitting }) => (
|
||||
<LoginFormContainer
|
||||
title={'Reset Password'}
|
||||
className={'w-full flex'}
|
||||
css={tw`w-full flex`}
|
||||
>
|
||||
<div>
|
||||
<label>Email</label>
|
||||
<input className={'input'} value={email} disabled={true}/>
|
||||
<Input value={email} light disabled/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
light={true}
|
||||
light
|
||||
label={'New Password'}
|
||||
name={'password'}
|
||||
type={'password'}
|
||||
description={'Passwords must be at least 8 characters in length.'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<div css={tw`mt-6`}>
|
||||
<Field
|
||||
light={true}
|
||||
light
|
||||
label={'Confirm New Password'}
|
||||
name={'passwordConfirmation'}
|
||||
type={'password'}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
<div css={tw`mt-6`}>
|
||||
<Button
|
||||
size={'xlarge'}
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
{isSubmitting ?
|
||||
<Spinner size={'small'} className={'mx-auto'}/>
|
||||
:
|
||||
'Reset Password'
|
||||
}
|
||||
</button>
|
||||
Reset Password
|
||||
</Button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<div css={tw`mt-6 text-center`}>
|
||||
<Link
|
||||
to={'/auth/login'}
|
||||
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`}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
|
||||
interface Props {
|
||||
isLoading?: boolean;
|
||||
@ -10,9 +11,9 @@ interface Props {
|
||||
}
|
||||
|
||||
const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
|
||||
${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
|
||||
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
|
||||
|
||||
${props => props.isSecondary && css<Props>`
|
||||
${props => props.isSecondary && css<Props>`
|
||||
${tw`border border-neutral-600 bg-transparent text-neutral-200`};
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@ -79,8 +80,8 @@ type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props>
|
||||
const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
|
||||
<StyledButton {...props}>
|
||||
{isLoading &&
|
||||
<div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
|
||||
<div className={'spinner-circle spinner-white spinner-sm'}/>
|
||||
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
|
||||
<Spinner size={'small'}/>
|
||||
</div>
|
||||
}
|
||||
<span css={isLoading ? tw`text-transparent` : undefined}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user