Orders - Show warning if user doesn't have a mastodon account set

web/api.py

@@ -115,6 +115,16 @@ def authorized_sub(func):
     return func(*args, **kwargs)
   return wrapper
 
+@api.route('/subs/<username>')
+@login_required
+@authorized_sub
+def sub(username, sub):
+  return jsonify({
+    "username": sub.telegram_username,
+    "mastodon_server": sub.mastodon_server.name if sub.mastodon_server is not None else None,
+    "mastodon_username": sub.mastodon_username
+  })
+
 @api.route('/orders/')
 @login_required
 def my_order_sets():

web/vite/src/OrderSets.tsx

@@ -7,13 +7,16 @@ import {
   Badge,
   Box,
   RingProgress,
+  Alert,
 } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 import { TimeValue } from "@mantine/dates";
 import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
 
 import { ConfirmDialogButton } from "./ConfirmDialogButton";
 import { NavigateButton } from "./NavigateButton";
-import { useFetcher } from "react-router";
+import { Link, useFetcher } from "react-router";
+import { useUserContext } from "./UserContext";
 
 export interface OrderSetProps {
   orderSets: (Pick<
@@ -39,6 +42,7 @@ export const OrderSets: React.FC<OrderSetProps> = ({
   username,
   linkBack,
 }) => {
+  const { username: current_user } = useUserContext();
   const fetcher = useFetcher();
   const handleDelete = React.useCallback(
     (id: number) => {
@@ -50,12 +54,44 @@ export const OrderSets: React.FC<OrderSetProps> = ({
     [fetcher],
   );
 
+  const [isMastodonSet, setIsMastodonSet] = React.useState(true);
+  React.useEffect(() => {
+    fetch(`/api/subs/${username}`)
+      .then((response) => response.json())
+      .then((data) => {
+        if (!data.mastodon_server || !data.mastodon_username) {
+          setIsMastodonSet(false);
+        }
+      });
+  }, [username]);
+
   return (
     <>
       <Box mb="lg">
         <Title order={1}>Order Sets for {username}</Title>
         {linkBack ? linkBack : null}
       </Box>
+      {orderSets.length > 0 && isMastodonSet ? null : (
+        <Flex justify="center">
+          <Alert
+            variant="light"
+            color="orange"
+            title="Warning"
+            icon={<IconAlertTriangle />}
+            my="md"
+            w="40rem"
+          >
+            <b>{username}</b> must authorize with a Mastodon account before
+            orders can be issued.
+            {username === current_user ? (
+              <>
+                <br />
+                <Link to="/profile/">Edit Profile</Link>
+              </>
+            ) : null}
+          </Alert>
+        </Flex>
+      )}
       <Flex gap="md" wrap="wrap">
         {orderSets
           ? orderSets.map(