webauthn: update login flow to support other 2fa methods

resources/scripts/components/auth/LoginContainer.tsx

@@ -39,19 +39,37 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
                 setSubmitting(false);
                 clearAndAddHttpError({ error });
             });
-
             return;
         }
 
         login({ ...values, recaptchaData: token })
             .then(response => {
+                console.log('wow!');
+                console.log(response);
                 if (response.complete) {
+                    console.log(`Redirecting to: ${response.intended || '/'}`);
                     // @ts-ignore
                     window.location = response.intended || '/';
                     return;
                 }
 
-                history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
+                if (response.methods?.includes('webauthn')) {
+                    console.log('Redirecting to: /auth/login/key');
+                    history.replace('/auth/login/key', {
+                        token: response.confirmationToken,
+                        publicKey: response.publicKey,
+                        hasTotp: response.methods.includes('totp'),
+                    });
+                    return;
+                }
+
+                if (response.methods?.includes('totp')) {
+                    console.log('/auth/login/checkpoint');
+                    history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
+                    return;
+                }
+
+                console.log('huh?');
             })
             .catch(error => {
                 console.error(error);

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -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;

resources/scripts/components/auth/LoginKeyCheckpointContainer.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import tw from 'twin.macro';
+import { DivContainer as LoginFormContainer } from '@/components/auth/LoginFormContainer';
+
+const LoginKeyCheckpointContainer = () => {
+    return (
+        <LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} />
+    );
+};
+
+export default LoginKeyCheckpointContainer;