| 19 | } |
| 20 | |
| 21 | export default function AuthLayout({ |
| 22 | title, |
| 23 | description, |
| 24 | action, |
| 25 | cta, |
| 26 | ctaHref, |
| 27 | showCounter, |
| 28 | }: AuthLayoutProps) { |
| 29 | const [sq] = useSearchParams(); |
| 30 | const location = useLocation(); |
| 31 | |
| 32 | const returnTo = sq.get("returnTo") || location.state?.returnTo; |
| 33 | const deviceId = sq.get("deviceId") || location.state?.deviceId; |
| 34 | const navigation = useNavigation(); |
| 35 | |
| 36 | return ( |
| 37 | <> |
| 38 | <GridBackground /> |
| 39 | |
| 40 | <div className="grid min-h-screen grid-rows-(--grid-layout)"> |
| 41 | <SimpleNavbar |
| 42 | logoHref="/" |
| 43 | actionElement={ |
| 44 | <div> |
| 45 | <LinkButton to={ctaHref} text={cta} theme="light" size="MD" /> |
| 46 | </div> |
| 47 | } |
| 48 | /> |
| 49 | <Container> |
| 50 | <div className="isolate flex h-full w-full items-center justify-center"> |
| 51 | <div className="-mt-16 max-w-2xl space-y-8"> |
| 52 | {showCounter ? ( |
| 53 | <div className="text-center"> |
| 54 | <StepCounter currStepIdx={0} nSteps={2} /> |
| 55 | </div> |
| 56 | ) : null} |
| 57 | <div className="space-y-2 text-center"> |
| 58 | <h1 className="text-4xl font-semibold text-black dark:text-white">{title}</h1> |
| 59 | <p className="text-slate-600 dark:text-slate-400">{description}</p> |
| 60 | </div> |
| 61 | |
| 62 | <Fieldset className="space-y-12"> |
| 63 | <div className="mx-auto max-w-sm space-y-4"> |
| 64 | <form action={`${CLOUD_API}/oidc/google`} method="POST"> |
| 65 | {/*This could be the KVM ID*/} |
| 66 | {deviceId ? <input type="hidden" name="deviceId" value={deviceId} /> : null} |
| 67 | {returnTo ? <input type="hidden" name="returnTo" value={returnTo} /> : null} |
| 68 | <Button |
| 69 | size="LG" |
| 70 | theme="light" |
| 71 | fullWidth |
| 72 | text={`${action}`} |
| 73 | LeadingIcon={GoogleIcon} |
| 74 | textAlign="center" |
| 75 | type="submit" |
| 76 | loading={ |
| 77 | (navigation.state === "submitting" || navigation.state === "loading") && |
| 78 | navigation.formMethod?.toLowerCase() === "post" && |