Fully support auth in Web UI; persist users in localStorage (for now); add ugly ?auth=... param

web/src/components/ActionBar.js

@@ -25,6 +25,7 @@ const ActionBar = (props) => {
                 <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>{title}</Typography>
                 {props.selectedSubscription !== null && <IconSubscribeSettings
                     subscription={props.selectedSubscription}
+                    users={props.users}
                     onClearAll={props.onClearAll}
                     onUnsubscribe={props.onUnsubscribe}
                 />}

web/src/components/App.js

@@ -12,12 +12,14 @@ import connectionManager from "../app/ConnectionManager";
 import Subscriptions from "../app/Subscriptions";
 import Navigation from "./Navigation";
 import ActionBar from "./ActionBar";
+import Users from "../app/Users";
 
 const App = () => {
     console.log(`[App] Rendering main view`);
 
     const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
     const [subscriptions, setSubscriptions] = useState(new Subscriptions());
+    const [users, setUsers] = useState(new Users());
     const [selectedSubscription, setSelectedSubscription] = useState(null);
     const handleNotification = (subscriptionId, notification) => {
         setSubscriptions(prev => {
@@ -25,11 +27,14 @@ const App = () => {
             return prev.update(newSubscription).clone();
         });
     };
-    const handleSubscribeSubmit = (subscription) => {
+    const handleSubscribeSubmit = (subscription, user) => {
         console.log(`[App] New subscription: ${subscription.id}`);
+        if (user !== null) {
+            setUsers(prev => prev.add(user).clone());
+        }
         setSubscriptions(prev => prev.add(subscription).clone());
         setSelectedSubscription(subscription);
-        api.poll(subscription.baseUrl, subscription.topic)
+        api.poll(subscription.baseUrl, subscription.topic, user)
             .then(messages => {
                 setSubscriptions(prev => {
                     const newSubscription = prev.get(subscription.id).addNotifications(messages);
@@ -61,12 +66,13 @@ const App = () => {
     };
     useEffect(() => {
         setSubscriptions(repository.loadSubscriptions());
+        setUsers(repository.loadUsers());
     }, [/* initial render only */]);
     useEffect(() => {
-        connectionManager.refresh(subscriptions, handleNotification);
+        connectionManager.refresh(subscriptions, users, handleNotification);
         repository.saveSubscriptions(subscriptions);
-    }, [subscriptions]);
-
+        repository.saveUsers(users);
+    }, [subscriptions, users]);
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline/>
@@ -74,6 +80,7 @@ const App = () => {
                 <CssBaseline/>
                 <ActionBar
                     selectedSubscription={selectedSubscription}
+                    users={users}
                     onClearAll={handleDeleteAllNotifications}
                     onUnsubscribe={handleUnsubscribe}
                     onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}

web/src/components/IconSubscribeSettings.js

@@ -14,6 +14,7 @@ import api from "../app/Api";
 const IconSubscribeSettings = (props) => {
     const [open, setOpen] = useState(false);
     const anchorRef = useRef(null);
+    const users = props.users;
 
     const handleToggle = () => {
         setOpen((prevOpen) => !prevOpen);
@@ -39,7 +40,9 @@ const IconSubscribeSettings = (props) => {
     const handleSendTestMessage = () => {
         const baseUrl = props.subscription.baseUrl;
         const topic = props.subscription.topic;
-        api.publish(baseUrl, topic, `This is a test notification sent by the ntfy Web UI at ${new Date().toString()}.`); // FIXME result ignored
+        const user = users.get(baseUrl); // May be null
+        api.publish(baseUrl, topic, user,
+            `This is a test notification sent by the ntfy Web UI at ${new Date().toString()}.`); // FIXME result ignored
         setOpen(false);
     }
 

web/src/components/Navigation.js

@@ -54,10 +54,15 @@ const Navigation = (props) => {
 Navigation.width = navWidth;
 
 const NavList = (props) => {
+    const [subscribeDialogKey, setSubscribeDialogKey] = useState(0);
     const [subscribeDialogOpen, setSubscribeDialogOpen] = useState(false);
-    const handleSubscribeSubmit = (subscription) => {
+    const handleSubscribeReset = () => {
         setSubscribeDialogOpen(false);
-        props.onSubscribeSubmit(subscription);
+        setSubscribeDialogKey(prev => prev+1);
+    }
+    const handleSubscribeSubmit = (subscription, user) => {
+        handleSubscribeReset();
+        props.onSubscribeSubmit(subscription, user);
     }
     return (
         <>
@@ -85,13 +90,15 @@ const NavList = (props) => {
                 </ListItemButton>
             </List>
             <SubscribeDialog
+                key={subscribeDialogKey} // Resets dialog when canceled/closed
                 open={subscribeDialogOpen}
-                onCancel={() => setSubscribeDialogOpen(false)}
-                onSubmit={handleSubscribeSubmit}
+                onCancel={handleSubscribeReset}
+                onSuccess={handleSubscribeSubmit}
             />
         </>
     );
 };
+
 const NavSubscriptionList = (props) => {
     const subscriptions = props.subscriptions;
     return (

web/src/components/SubscribeDialog.js

@@ -13,6 +13,7 @@ import theme from "./theme";
 import api from "../app/Api";
 import {topicUrl} from "../app/utils";
 import useStyles from "./styles";
+import User from "../app/User";
 
 const defaultBaseUrl = "http://127.0.0.1"
 //const defaultBaseUrl = "https://ntfy.sh"
@@ -20,43 +21,50 @@ const defaultBaseUrl = "http://127.0.0.1"
 const SubscribeDialog = (props) => {
     const [baseUrl, setBaseUrl] = useState(defaultBaseUrl); // FIXME
     const [topic, setTopic] = useState("");
-    const [user, setUser] = useState(null);
     const [showLoginPage, setShowLoginPage] = useState(false);
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const handleCancel = () => {
         setTopic('');
         props.onCancel();
     }
-    const handleSubmit = async () => {
-        const success = await api.auth(baseUrl, topic, null);
-        if (!success) {
-            console.log(`[SubscribeDialog] Login required for ${topicUrl(baseUrl, topic)}`)
-            setShowLoginPage(true);
-            return;
-        }
-        const subscription = new Subscription(defaultBaseUrl, topic);
-        props.onSubmit(subscription);
+    const handleSuccess = (baseUrl, topic, user) => {
+        const subscription = new Subscription(baseUrl, topic);
+        props.onSuccess(subscription, user);
         setTopic('');
     }
     return (
         <Dialog open={props.open} onClose={props.onClose} fullScreen={fullScreen}>
             {!showLoginPage && <SubscribePage
+                baseUrl={baseUrl}
                 topic={topic}
                 setTopic={setTopic}
                 onCancel={handleCancel}
-                onSubmit={handleSubmit}
+                onNeedsLogin={() => setShowLoginPage(true)}
+                onSuccess={handleSuccess}
             />}
             {showLoginPage && <LoginPage
                 baseUrl={baseUrl}
                 topic={topic}
                 onBack={() => setShowLoginPage(false)}
-                onSubmit={handleSubmit}
+                onSuccess={handleSuccess}
             />}
         </Dialog>
     );
 };
 
 const SubscribePage = (props) => {
+    const baseUrl = props.baseUrl;
+    const topic = props.topic;
+    const handleSubscribe = async () => {
+        const success = await api.auth(baseUrl, topic, null);
+        if (!success) {
+            console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for anonymous user`);
+            props.onNeedsLogin();
+            return;
+        }
+        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for anonymous user`);
+        props.onSuccess(baseUrl, topic, null);
+    };
     return (
         <>
             <DialogTitle>Subscribe to topic</DialogTitle>
@@ -79,7 +87,7 @@ const SubscribePage = (props) => {
             </DialogContent>
             <DialogActions>
                 <Button onClick={props.onCancel}>Cancel</Button>
-                <Button onClick={props.onSubmit} disabled={props.topic === ""}>Subscribe</Button>
+                <Button onClick={handleSubscribe} disabled={props.topic === ""}>Subscribe</Button>
             </DialogActions>
         </>
     );
@@ -93,14 +101,15 @@ const LoginPage = (props) => {
     const baseUrl = props.baseUrl;
     const topic = props.topic;
     const handleLogin = async () => {
-        const user = {username: username, password: password};
+        const user = new User(baseUrl, username, password);
         const success = await api.auth(baseUrl, topic, user);
         if (!success) {
             console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
             setErrorText(`User ${username} not authorized`);
             return;
         }
-        console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} successful for user ${username}`);
+        console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
+        props.onSuccess(baseUrl, topic, user);
     };
     return (
         <>