SubscribeDialog use existing user

web/src/app/NotificationManager.js

@@ -1,4 +1,4 @@
-import {formatMessage, formatTitleWithFallback, openUrl, topicShortUrl} from "./utils";
+import {formatMessage, formatTitleWithDefault, openUrl, topicShortUrl} from "./utils";
 import prefs from "./Prefs";
 import subscriptionManager from "./SubscriptionManager";
 
@@ -11,7 +11,7 @@ class NotificationManager {
         }
         const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
         const message = formatMessage(notification);
-        const title = formatTitleWithFallback(notification, shortUrl);
+        const title = formatTitleWithDefault(notification, shortUrl);
 
         console.log(`[NotificationManager, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
         const n = new Notification(title, {

web/src/app/utils.js

@@ -33,7 +33,7 @@ const toEmojis = (tags) => {
 }
 
 
-export const formatTitleWithFallback = (m, fallback) => {
+export const formatTitleWithDefault = (m, fallback) => {
     if (m.title) {
         return formatTitle(m);
     }

web/src/components/App.js

@@ -19,10 +19,10 @@ import pruner from "../app/Pruner";
 import subscriptionManager from "../app/SubscriptionManager";
 import userManager from "../app/UserManager";
 
-// TODO subscribe dialog check/use existing user
 // TODO make default server functional
 // TODO routing
 // TODO embed into ntfy server
+// TODO new notification indicator
 
 const App = () => {
     const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);

web/src/components/Preferences.js

@@ -143,22 +143,24 @@ const Pref = (props) => {
 
 const DefaultServer = (props) => {
     return (
-        <Paper sx={{p: 3}}>
-            <Typography variant="h5">
-                Default server
-            </Typography>
-            <Paragraph>
-                This server is used as a default when adding new topics.
-            </Paragraph>
-            <TextField
-                margin="dense"
-                id="defaultBaseUrl"
-                placeholder="https://ntfy.sh"
-                type="text"
-                fullWidth
-                variant="standard"
-            />
-        </Paper>
+        <Card sx={{ padding: 1 }}>
+            <CardContent>
+                <Typography variant="h5">
+                    Default server
+                </Typography>
+                <Paragraph>
+                    This server is used as a default when adding new topics.
+                </Paragraph>
+                <TextField
+                    margin="dense"
+                    id="defaultBaseUrl"
+                    placeholder="https://ntfy.sh"
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+            </CardContent>
+        </Card>
     );
 };
 
@@ -183,7 +185,7 @@ const Users = () => {
         }
     };
     return (
-        <Card sx={{p: 3}}>
+        <Card sx={{ padding: 1 }}>
             <CardContent>
                 <Typography variant="h5">
                     Manage users

web/src/components/SubscribeDialog.js

@@ -16,6 +16,7 @@ import userManager from "../app/UserManager";
 import subscriptionManager from "../app/SubscriptionManager";
 import poller from "../app/Poller";
 
+const publicBaseUrl = "https://ntfy.sh"
 const defaultBaseUrl = "http://127.0.0.1"
 //const defaultBaseUrl = "https://ntfy.sh"
 
@@ -60,19 +61,27 @@ const SubscribeDialog = (props) => {
 
 const SubscribePage = (props) => {
     const [anotherServerVisible, setAnotherServerVisible] = useState(false);
+    const [errorText, setErrorText] = useState("");
     const baseUrl = (anotherServerVisible) ? props.baseUrl : defaultBaseUrl;
     const topic = props.topic;
     const existingTopicUrls = props.subscriptions.map(s => topicUrl(s.baseUrl, s.topic));
-    const existingBaseUrls = Array.from(new Set(["https://ntfy.sh", ...props.subscriptions.map(s => s.baseUrl)]))
+    const existingBaseUrls = Array.from(new Set([publicBaseUrl, ...props.subscriptions.map(s => s.baseUrl)]))
         .filter(s => s !== defaultBaseUrl);
     const handleSubscribe = async () => {
-        const success = await api.auth(baseUrl, topic, null);
+        const user = await userManager.get(baseUrl); // May be undefined
+        const username = (user) ? user.username : "anonymous";
+        const success = await api.auth(baseUrl, topic, user);
         if (!success) {
-            console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for anonymous user`);
-            props.onNeedsLogin();
-            return;
+            console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
+            if (user) {
+                setErrorText(`User ${username} not authorized`);
+                return;
+            } else {
+                props.onNeedsLogin();
+                return;
+            }
         }
-        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for anonymous user`);
+        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
         props.onSuccess();
     };
     const handleUseAnotherChanged = (e) => {
@@ -122,10 +131,10 @@ const SubscribePage = (props) => {
                     }
                 />}
             </DialogContent>
-            <DialogActions>
+            <DialogFooter status={errorText}>
                 <Button onClick={props.onCancel}>Cancel</Button>
                 <Button onClick={handleSubscribe} disabled={!subscribeButtonEnabled}>Subscribe</Button>
-            </DialogActions>
+            </DialogFooter>
         </>
     );
 };

web/src/components/theme.js

@@ -21,6 +21,15 @@ const theme = createTheme({
         },
       },
     },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          ':last-child': {
+            paddingBottom: '16px'
+          }
+        }
+      }
+    }
   },
 });