MrUnknownDE/panel
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/panel.git synced 2026-04-22 08:13:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

webauthn: update login flow to support other 2fa methods

Browse Source
This commit is contained in:
Matthew Penner
2021-07-17 12:48:14 -06:00
parent 42a3e740ba
commit 31c2ef5279
13 changed files with 255 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
resources/scripts/components/auth/LoginFormContainer.tsx
View File

@@ -5,11 +5,7 @@ import { breakpoint } from '@/theme';
import FlashMessageRender from '@/components/FlashMessageRender';
import tw from 'twin.macro';
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
title?: string;
}
const Container = styled.div`
const Wrapper = styled.div`
${breakpoint('sm')`
${tw`w-4/5 mx-auto`}
`};
@@ -28,24 +24,26 @@ const Container = styled.div`
`};
`;
export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
<Container>
const Inner = ({ children }: { children: React.ReactNode }) => (
<div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
<div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
<img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
</div>
<div css={tw`flex-1`}>
{children}
</div>
</div>
);
const Container = ({ title, children }: { title?: string, children: React.ReactNode }) => (
<Wrapper>
{title &&
<h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
{title}
</h2>
}
<FlashMessageRender css={tw`mb-2 px-1`}/>
<Form {...props} ref={ref}>
<div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
<div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
<img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
</div>
<div css={tw`flex-1`}>
{props.children}
</div>
</div>
</Form>
{children}
<p css={tw`text-center text-neutral-500 text-xs mt-4`}>
&copy; 2015 - {(new Date()).getFullYear()}&nbsp;
<a
@@ -57,5 +55,31 @@ export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) =>
Pterodactyl Software
</a>
</p>
</Wrapper>
);
type FormContainerProps = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
title?: string;
}
const FormContainer = forwardRef<HTMLFormElement, FormContainerProps>(({ title, ...props }, ref) => (
<Container title={title}>
<Form {...props} ref={ref}>
<Inner>{props.children}</Inner>
</Form>
</Container>
));
type DivContainerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
title?: string;
}
export const DivContainer = ({ title, ...props }: DivContainerProps) => (
<Container title={title}>
<div {...props}>
<Inner>{props.children}</Inner>
</div>
</Container>
);
export default FormContainer;