Function AuthLayout

console/src/layouts/AuthLayout.tsx:29–75

({
  children,
  ...props
}: React.PropsWithChildren<FlexProps>)

import { UnauthenticatedPageFooter } from "./PageFooter";

export const AuthLayout = ({
  children,
  ...props
}: React.PropsWithChildren<FlexProps>) => {
  const { colors } = useTheme<MaterializeTheme>();
  const appConfig = useAppConfig();
  const isOidc =
    appConfig.mode === "self-managed" && appConfig.authMode === "Oidc";

  return (
    <Center background={colors.background.primary} height="100vh" {...props}>
      <VStack alignItems="stretch" flexGrow="1" spacing="0" height="100%">
        <Grid
          gridTemplateColumns={{ base: "1fr", lg: isOidc ? "1fr" : "1fr 1fr" }}
          gridTemplateRows={{ base: "1fr 3fr", lg: "1fr" }}
          alignItems={{ base: "start", lg: "center" }}
          height="100%"
          width="100%"
        >
          {!isOidc && (
            <Hide below="lg">
              <HStack my="8" justifyContent="center" mx="12">
                <CodeBlock
                  lineNumbers
                  title="Create a user"
                  contents={`CREATE ROLE mat_admin WITH LOGIN PASSWORD 'password';`}
                  width="600px"
                >
                  {`CREATE ROLE mat_admin WITH LOGIN PASSWORD 'password';`}
                </CodeBlock>
              </HStack>
            </Hide>
          )}
          <Center
            justifyContent={{
              base: "center",
              lg: isOidc ? "center" : "flex-start",
            }}
          >
            {children}
          </Center>
        </Grid>
        <UnauthenticatedPageFooter />
      </VStack>
    </Center>
  );
};

export const AuthContentContainer = ({
  children,