StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix up authentication flows to use formik correctly

Browse source
This commit is contained in:
Dane Everitt 2020-03-28 15:42:53 -07:00
parent cb945b1f13
commit 7244cdbf5d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 233 additions and 222 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,47 @@
import React, { forwardRef } from 'react';
import { Form } from 'formik';
import styled from 'styled-components';
import { breakpoint } from 'styled-components-breakpoint';
import FlashMessageRender from '@/components/FlashMessageRender';
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>;
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
title?: string;
}
export default forwardRef<any, Props>(({ ...props }, ref) => (
<Form {...props}>
<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'}>
<img src={'/assets/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
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: 700px;
`};
`;
export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
<Container>
{title && <h2 className={'text-center text-neutral-100 font-medium py-4'}>
{title}
</h2>}
<FlashMessageRender className={'mb-2 px-1'}/>
<Form {...props} ref={ref}>
<div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1'}>
<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'}/>
</div>
<div className={'flex-1'}>
{props.children}
</div>
</div>
<div className={'flex-1'}>
{props.children}
</div>
</div>
</Form>
</Form>
</Container>
));