Fix login form

This commit is contained in:
Dane Everitt 2020-07-04 14:21:28 -07:00
parent 02f83c58f5
commit 8c20158e58
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 106 additions and 64 deletions

View file

@ -11,6 +11,8 @@ import { httpErrorToHuman } from '@/api/http';
import { FlashMessage } from '@/state/flashes';
import ReCAPTCHA from 'react-google-recaptcha';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
type OwnProps = RouteComponentProps & {
clearFlashes: ActionCreator<void>;
@ -36,36 +38,29 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
{ref.current && ref.current.render()}
<LoginFormContainer
title={'Login to Continue'}
className={'w-full flex'}
css={tw`w-full flex`}
onSubmit={submit}
>
<label htmlFor={'username'}>Username or Email</label>
<Field
type={'text'}
label={'Username or Email'}
id={'username'}
name={'username'}
className={'input'}
light
/>
<div className={'mt-6'}>
<label htmlFor={'password'}>Password</label>
<div css={tw`mt-6`}>
<Field
type={'password'}
label={'Password'}
id={'password'}
name={'password'}
className={'input'}
light
/>
</div>
<div className={'mt-6'}>
<button
type={'submit'}
className={'btn btn-primary btn-jumbo'}
>
{isSubmitting ?
<Spinner size={'small'} className={'mx-auto'}/>
:
'Login'
}
</button>
<div css={tw`mt-6`}>
<Button type={'submit'} size={'xlarge'} isLoading={isSubmitting}>
Login
</Button>
</div>
{recaptchaEnabled &&
<ReCAPTCHA
@ -80,10 +75,10 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
onExpired={() => setFieldValue('recaptchaData', null)}
/>
}
<div className={'mt-6 text-center'}>
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/password'}
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`}
>
Forgot password?
</Link>