tinyauth/site/src/pages/unauthorized-page.tsx

import { Button, Code, Paper, Text } from "@mantine/core";
import { Layout } from "../components/layouts/layout";
import { Navigate } from "react-router";
import { isQueryValid } from "../utils/utils";

export const UnauthorizedPage = () => {
  const queryString = window.location.search;
  const params = new URLSearchParams(queryString);
  const username = params.get("username") ?? "";
  const resource = params.get("resource") ?? "";

  if (!isQueryValid(username)) {
    return <Navigate to="/" />;
  }

  return (
    <Layout>
      <Paper shadow="md" p={30} mt={30} radius="md" withBorder>
        <Text size="xl" fw={700}>
          Unauthorized
        </Text>
        <Text>
          The user with username <Code>{username}</Code> is not authorized to{" "}
          {isQueryValid(resource) ? (
            <span>
              access the <Code>{resource}</Code> resource.
            </span>
          ) : (
            "login."
          )}
        </Text>
        <Button
          fullWidth
          mt="xl"
          onClick={() => window.location.replace("/login")}
        >
          Try again
        </Button>
      </Paper>
    </Layout>
  );
};