WIP: Auth

web/src/components/NotificationList.js

@@ -1,9 +1,9 @@
 import Container from "@mui/material/Container";
-import {CardContent, CardHeader, Stack} from "@mui/material";
+import {CardContent, Stack} from "@mui/material";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
-import {formatTitle, formatMessage, unmatchedTags} from "../app/utils";
+import {formatMessage, formatTitle, unmatchedTags} from "../app/utils";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from '@mui/icons-material/Close';
 

web/src/components/SubscribeDialog.js

@@ -8,47 +8,110 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import {useState} from "react";
 import Subscription from "../app/Subscription";
+import {useMediaQuery} from "@mui/material";
+import theme from "./theme";
+import api from "../app/Api";
+import {topicUrl} from "../app/utils";
 
 const defaultBaseUrl = "http://127.0.0.1"
 //const defaultBaseUrl = "https://ntfy.sh"
 
 const SubscribeDialog = (props) => {
+    const [baseUrl, setBaseUrl] = useState(defaultBaseUrl); // FIXME
     const [topic, setTopic] = useState("");
+    const [showLoginPage, setShowLoginPage] = useState(false);
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
     const handleCancel = () => {
         setTopic('');
         props.onCancel();
     }
-    const handleSubmit = () => {
+    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);
         setTopic('');
     }
+    return (
+        <Dialog open={props.open} onClose={props.onClose} fullScreen={fullScreen}>
+            {!showLoginPage && <SubscribePage
+                topic={topic}
+                setTopic={setTopic}
+                onCancel={handleCancel}
+                onSubmit={handleSubmit}
+            />}
+            {showLoginPage && <LoginPage
+                topic={topic}
+                onBack={() => setShowLoginPage(false)}
+            />}
+        </Dialog>
+    );
+};
+
+const SubscribePage = (props) => {
     return (
         <>
-            <Dialog open={props.open} onClose={props.onClose}>
-                <DialogTitle>Subscribe to topic</DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        Topics may not be password-protected, so choose a name that's not easy to guess.
-                        Once subscribed, you can PUT/POST notifications.
-                    </DialogContentText>
-                    <TextField
-                        autoFocus
-                        margin="dense"
-                        id="name"
-                        label="Topic name, e.g. phil_alerts"
-                        value={topic}
-                        onChange={ev => setTopic(ev.target.value)}
-                        type="text"
-                        fullWidth
-                        variant="standard"
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleCancel}>Cancel</Button>
-                    <Button onClick={handleSubmit} autoFocus disabled={topic === ""}>Subscribe</Button>
-                </DialogActions>
-            </Dialog>
+            <DialogTitle>Subscribe to topic</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    Topics may not be password-protected, so choose a name that's not easy to guess.
+                    Once subscribed, you can PUT/POST notifications.
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="topic"
+                    label="Topic name, e.g. phil_alerts"
+                    value={props.topic}
+                    onChange={ev => props.setTopic(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onCancel}>Cancel</Button>
+                <Button onClick={props.onSubmit} disabled={props.topic === ""}>Subscribe</Button>
+            </DialogActions>
+        </>
+    );
+};
+
+const LoginPage = (props) => {
+    return (
+        <>
+            <DialogTitle>Login required</DialogTitle>
+            <DialogContent>
+                <DialogContentText>
+                    This topic is password-protected. Please enter username and
+                    password to subscribe.
+                </DialogContentText>
+                <TextField
+                    autoFocus
+                    margin="dense"
+                    id="username"
+                    label="Username, e.g. phil"
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <TextField
+                    margin="dense"
+                    id="password"
+                    label="Password"
+                    type="password"
+                    fullWidth
+                    variant="standard"
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onBack}>Back</Button>
+                <Button>Login</Button>
+            </DialogActions>
         </>
     );
 };