WIPWIPWIP

web/public/config.js

@@ -4,6 +4,6 @@
 // The actual config is dynamically generated server-side.
 
 var config = {
-    appRoot: "/",
+    appRoot: "/app",
     disallowedTopics: ["docs", "static", "file", "app", "settings"]
 };

web/src/app/Api.js

@@ -5,7 +5,7 @@ import {
     topicUrl,
     topicUrlAuth,
     topicUrlJsonPoll,
-    topicUrlJsonPollWithSince,
+    topicUrlJsonPollWithSince, userAuthUrl,
     userStatsUrl
 } from "./utils";
 import userManager from "./UserManager";
@@ -101,7 +101,7 @@ class Api {
         return send;
     }
 
-    async auth(baseUrl, topic, user) {
+    async topicAuth(baseUrl, topic, user) {
         const url = topicUrlAuth(baseUrl, topic);
         console.log(`[Api] Checking auth for ${url}`);
         const response = await fetch(url, {
@@ -117,6 +117,22 @@ class Api {
         throw new Error(`Unexpected server response ${response.status}`);
     }
 
+    async userAuth(baseUrl, user) {
+        const url = userAuthUrl(baseUrl);
+        console.log(`[Api] Checking auth for ${url}`);
+        const response = await fetch(url, {
+            headers: maybeWithBasicAuth({}, user)
+        });
+        if (response.status !== 200) {
+            throw new Error(`Unexpected server response ${response.status}`);
+        }
+        const json = await response.json();
+        if (!json.token) {
+            throw new Error(`Unexpected server response: Cannot find token`);
+        }
+        return json.token;
+    }
+
     async userStats(baseUrl) {
         const url = userStatsUrl(baseUrl);
         console.log(`[Api] Fetching user stats ${url}`);

web/src/app/Session.js

@@ -0,0 +1,22 @@
+class Session {
+    store(username, token) {
+        localStorage.setItem("user", username);
+        localStorage.setItem("token", token);
+    }
+
+    reset() {
+        localStorage.removeItem("user");
+        localStorage.removeItem("token");
+    }
+
+    username() {
+        return localStorage.getItem("user");
+    }
+
+    token() {
+        return localStorage.getItem("token");
+    }
+}
+
+const session = new Session();
+export default session;

web/src/app/db.js

@@ -1,4 +1,5 @@
 import Dexie from 'dexie';
+import session from "./Session";
 
 // Uses Dexie.js
 // https://dexie.org/docs/API-Reference#quick-reference
@@ -6,7 +7,8 @@ import Dexie from 'dexie';
 // Notes:
 // - As per docs, we only declare the indexable columns, not all columns
 
-const db = new Dexie('ntfy');
+const dbName = (session.username()) ? `ntfy-${session.username()}` : "ntfy";
+const db = new Dexie(dbName);
 
 db.version(1).stores({
     subscriptions: '&id,baseUrl',

web/src/app/utils.js

@@ -19,6 +19,7 @@ export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJ
 export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`;
 export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
 export const userStatsUrl = (baseUrl) => `${baseUrl}/user/stats`;
+export const userAuthUrl = (baseUrl) => `${baseUrl}/user/auth`;
 export const shortUrl = (url) => url.replaceAll(/https?:\/\//g, "");
 export const expandUrl = (url) => [`https://${url}`, `http://${url}`];
 export const expandSecureUrl = (url) => `https://${url}`;

web/src/components/ActionBar.js

@@ -25,10 +25,14 @@ import logo from "../img/ntfy.svg";
 import {useTranslation} from "react-i18next";
 import {Portal, Snackbar} from "@mui/material";
 import SubscriptionSettingsDialog from "./SubscriptionSettingsDialog";
+import session from "../app/Session";
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import Button from "@mui/material/Button";
 
 const ActionBar = (props) => {
     const { t } = useTranslation();
     const location = useLocation();
+    const username = session.username();
     let title = "ntfy";
     if (props.selected) {
         title = topicDisplayName(props.selected);
@@ -69,6 +73,7 @@ const ActionBar = (props) => {
                         subscription={props.selected}
                         onUnsubscribe={props.onUnsubscribe}
                     />}
+                <ProfileIcon/>
             </Toolbar>
         </AppBar>
     );
@@ -114,7 +119,7 @@ const SettingsIcons = (props) => {
         if (newSelected) {
             navigate(routes.forSubscription(newSelected));
         } else {
-            navigate(routes.root);
+            navigate(routes.app);
         }
     };
 
@@ -237,4 +242,90 @@ const SettingsIcons = (props) => {
     );
 };
 
+const ProfileIcon = (props) => {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const username = session.username();
+
+    const handleToggleOpen = () => {
+        setOpen((prevOpen) => !prevOpen);
+    };
+
+    const handleClose = (event) => {
+        if (anchorRef.current && anchorRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+    };
+
+    const handleListKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            setOpen(false);
+        } else if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }
+
+    const handleUpgrade = () => {
+        // TODO
+    };
+
+    const handleLogout = () => {
+        session.reset();
+        window.location.href = routes.app;
+    };
+
+    // return focus to the button when we transitioned from !open -> open
+    const prevOpen = useRef(open);
+    useEffect(() => {
+        if (prevOpen.current === true && open === false) {
+            anchorRef.current.focus();
+        }
+        prevOpen.current = open;
+    }, [open]);
+
+    return (
+        <>
+            {username &&
+                <IconButton color="inherit" size="large" edge="end" ref={anchorRef} onClick={handleToggleOpen} sx={{marginRight: 0}} aria-label={t("xxxxxxx")}>
+                    <AccountCircleIcon/>
+                </IconButton>
+            }
+            {!username &&
+                <>
+                    <Button>Sign in</Button>
+                    <Button>Sign up</Button>
+                </>
+            }
+            <Popper
+                open={open}
+                anchorEl={anchorRef.current}
+                role={undefined}
+                placement="bottom-start"
+                transition
+                disablePortal
+            >
+                {({TransitionProps, placement}) => (
+                    <Grow
+                        {...TransitionProps}
+                        style={{transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom'}}
+                    >
+                        <Paper>
+                            <ClickAwayListener onClickAway={handleClose}>
+                                <MenuList autoFocusItem={open} onKeyDown={handleListKeyDown}>
+                                    <MenuItem onClick={handleUpgrade}>Upgrade</MenuItem>
+                                    <MenuItem onClick={handleLogout}>Logout</MenuItem>
+                                </MenuList>
+                            </ClickAwayListener>
+                        </Paper>
+                    </Grow>
+                )}
+            </Popper>
+        </>
+    );
+};
+
+
 export default ActionBar;

web/src/components/App.js

@@ -23,6 +23,8 @@ import PublishDialog from "./PublishDialog";
 import Messaging from "./Messaging";
 import "./i18n"; // Translations!
 import {Backdrop, CircularProgress} from "@mui/material";
+import Home from "./Home";
+import Login from "./Login";
 
 // TODO races when two tabs are open
 // TODO investigate service workers
@@ -35,8 +37,10 @@ const App = () => {
                     <CssBaseline/>
                     <ErrorBoundary>
                         <Routes>
+                            <Route path={routes.home} element={<Home/>}/>
+                            <Route path={routes.login} element={<Login/>}/>
                             <Route element={<Layout/>}>
-                                <Route path={routes.root} element={<AllSubscriptions/>}/>
+                                <Route path={routes.app} element={<AllSubscriptions/>}/>
                                 <Route path={routes.settings} element={<Preferences/>}/>
                                 <Route path={routes.subscription} element={<SingleSubscription/>}/>
                                 <Route path={routes.subscriptionExternal} element={<SingleSubscription/>}/>

web/src/components/Home.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {
+    CardActions,
+    CardContent,
+    FormControl, Link,
+    Select,
+    Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    useMediaQuery
+} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import prefs from "../app/Prefs";
+import {Paragraph} from "./styles";
+import EditIcon from '@mui/icons-material/Edit';
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import Container from "@mui/material/Container";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import Card from "@mui/material/Card";
+import Button from "@mui/material/Button";
+import {useLiveQuery} from "dexie-react-hooks";
+import theme from "./theme";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import userManager from "../app/UserManager";
+import {playSound, shuffle, sounds, validUrl} from "../app/utils";
+import {useTranslation} from "react-i18next";
+
+const Home = () => {
+    return (
+        <Container maxWidth="md" sx={{marginTop: 3, marginBottom: 3}}>
+            <Stack spacing={3}>
+               This is the landing page
+                <Link href="/login">Login</Link>
+            </Stack>
+        </Container>
+    );
+};
+
+export default Home;

web/src/components/Login.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {Avatar, Checkbox, FormControlLabel, Grid, Link, Stack} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import api from "../app/Api";
+import {useNavigate} from "react-router-dom";
+import routes from "./routes";
+import session from "../app/Session";
+
+const Copyright = (props) => {
+    return (
+        <Typography variant="body2" color="text.secondary" align="center" {...props}>
+            {'Copyright © '}
+            <Link color="inherit" href="https://mui.com/">
+                Your Website
+            </Link>{' '}
+            {new Date().getFullYear()}
+            {'.'}
+        </Typography>
+    );
+};
+
+const Login = () => {
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        const data = new FormData(event.currentTarget);
+        console.log({
+            email: data.get('email'),
+            password: data.get('password'),
+        });
+        const user ={
+            username: data.get('email'),
+            password: data.get('password'),
+        }
+        const token = await api.userAuth("http://localhost:2586"/*window.location.origin*/, user);
+        console.log(`[Api] User auth for user ${user.username} successful, token is ${token}`);
+        session.store(user.username, token);
+        window.location.href = routes.app;
+    };
+
+    return (
+        <>
+            <Box
+                sx={{
+                    marginTop: 8,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                }}
+            >
+                <Avatar sx={{m: 1, bgcolor: 'secondary.main'}}>
+                    <LockOutlinedIcon/>
+                </Avatar>
+                <Typography component="h1" variant="h5">
+                    Sign in
+                </Typography>
+                <Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1}}>
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="email"
+                        label="Email Address"
+                        name="email"
+                        autoComplete="email"
+                        autoFocus
+                    />
+                    <TextField
+                        margin="normal"
+                        required
+                        fullWidth
+                        name="password"
+                        label="Password"
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                    />
+                    <FormControlLabel
+                        control={<Checkbox value="remember" color="primary"/>}
+                        label="Remember me"
+                    />
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        sx={{mt: 3, mb: 2}}
+                    >
+                        Sign In
+                    </Button>
+                    <Grid container>
+                        <Grid item xs>
+                            <Link href="#" variant="body2">
+                                Forgot password?
+                            </Link>
+                        </Grid>
+                        <Grid item>
+                            <Link href="#" variant="body2">
+                                {"Don't have an account? Sign Up"}
+                            </Link>
+                        </Grid>
+                    </Grid>
+                </Box>
+            </Box>
+            <Copyright sx={{mt: 8, mb: 4}}/>
+        </>
+    );
+}
+
+export default Login;

web/src/components/Navigation.js

@@ -104,14 +104,14 @@ const NavList = (props) => {
                 {showNotificationContextNotSupportedBox && <NotificationContextNotSupportedAlert/>}
                 {showNotificationGrantBox && <NotificationGrantAlert onRequestPermissionClick={handleRequestNotificationPermission}/>}
                 {!showSubscriptionsList &&
-                    <ListItemButton onClick={() => navigate(routes.root)} selected={location.pathname === config.appRoot}>
+                    <ListItemButton onClick={() => navigate(routes.app)} selected={location.pathname === config.appRoot}>
                         <ListItemIcon><ChatBubble/></ListItemIcon>
                         <ListItemText primary={t("nav_button_all_notifications")}/>
                     </ListItemButton>}
                 {showSubscriptionsList &&
                     <>
                         <ListSubheader>{t("nav_topics_title")}</ListSubheader>
-                        <ListItemButton onClick={() => navigate(routes.root)} selected={location.pathname === config.appRoot}>
+                        <ListItemButton onClick={() => navigate(routes.app)} selected={location.pathname === config.appRoot}>
                             <ListItemIcon><ChatBubble/></ListItemIcon>
                             <ListItemText primary={t("nav_button_all_notifications")}/>
                         </ListItemButton>

web/src/components/Preferences.js

@@ -32,7 +32,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import userManager from "../app/UserManager";
-import {playSound, shuffle, sounds, validUrl} from "../app/utils";
+import {playSound, shuffle, sounds, validTopic, validUrl} from "../app/utils";
 import {useTranslation} from "react-i18next";
 
 const Preferences = () => {
@@ -42,6 +42,7 @@ const Preferences = () => {
                 <Notifications/>
                 <Appearance/>
                 <Users/>
+                <AccessControl/>
             </Stack>
         </Container>
     );
@@ -473,4 +474,164 @@ const Language = () => {
     )
 };
 
+const AccessControl = () => {
+    const { t } = useTranslation();
+    const [dialogKey, setDialogKey] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const entries = useLiveQuery(() => userManager.all());
+    const handleAddClick = () => {
+        setDialogKey(prev => prev+1);
+        setDialogOpen(true);
+    };
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+    };
+    const handleDialogSubmit = async (user) => {
+        setDialogOpen(false);
+        try {
+            await userManager.save(user);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} added`);
+        } catch (e) {
+            console.log(`[Preferences] Error adding user.`, e);
+        }
+    };
+    return (
+        <Card sx={{ padding: 1 }} aria-label={t("prefs_users_title")}>
+            <CardContent sx={{ paddingBottom: 1 }}>
+                <Typography variant="h5" sx={{marginBottom: 2}}>
+                    Access control
+                </Typography>
+                <Paragraph>
+                    Define read/write access to topics for this server.
+                </Paragraph>
+                {entries?.length > 0 && <AccessControlTable entries={entries}/>}
+            </CardContent>
+            <CardActions>
+                <Button onClick={handleAddClick}>{t("prefs_users_add_button")}</Button>
+                <AccessControlDialog
+                    key={`aclDialog${dialogKey}`}
+                    open={dialogOpen}
+                    user={null}
+                    users={entries}
+                    onCancel={handleDialogCancel}
+                    onSubmit={handleDialogSubmit}
+                />
+            </CardActions>
+        </Card>
+    );
+};
+
+const AccessControlTable = (props) => {
+    const { t } = useTranslation();
+    const [dialogKey, setDialogKey] = useState(0);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [dialogUser, setDialogUser] = useState(null);
+    const handleEditClick = (user) => {
+        setDialogKey(prev => prev+1);
+        setDialogUser(user);
+        setDialogOpen(true);
+    };
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+    };
+    const handleDialogSubmit = async (user) => {
+        setDialogOpen(false);
+        try {
+            await userManager.save(user);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} updated`);
+        } catch (e) {
+            console.log(`[Preferences] Error updating user.`, e);
+        }
+    };
+    const handleDeleteClick = async (user) => {
+        try {
+            await userManager.delete(user.baseUrl);
+            console.debug(`[Preferences] User ${user.username} for ${user.baseUrl} deleted`);
+        } catch (e) {
+            console.error(`[Preferences] Error deleting user for ${user.baseUrl}`, e);
+        }
+    };
+    return (
+        <Table size="small" aria-label={t("prefs_users_table")}>
+            <TableHead>
+                <TableRow>
+                    <TableCell sx={{paddingLeft: 0}}>Topic</TableCell>
+                    <TableCell>User</TableCell>
+                    <TableCell>Access</TableCell>
+                    <TableCell/>
+                </TableRow>
+            </TableHead>
+            <TableBody>
+                {props.entries?.map(user => (
+                    <TableRow
+                        key={user.baseUrl}
+                        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                    >
+                        <TableCell component="th" scope="row" sx={{paddingLeft: 0}} aria-label={t("prefs_users_table_user_header")}>{user.username}</TableCell>
+                        <TableCell aria-label={t("xxxxxxxxxx")}>{user.baseUrl}</TableCell>
+                        <TableCell align="right">
+                            <IconButton onClick={() => handleEditClick(user)} aria-label={t("prefs_users_edit_button")}>
+                                <EditIcon/>
+                            </IconButton>
+                            <IconButton onClick={() => handleDeleteClick(user)} aria-label={t("prefs_users_delete_button")}>
+                                <CloseIcon />
+                            </IconButton>
+                        </TableCell>
+                    </TableRow>
+                ))}
+            </TableBody>
+            <AccessControlDialog
+                key={`userEditDialog${dialogKey}`}
+                open={dialogOpen}
+                user={dialogUser}
+                users={props.entries}
+                onCancel={handleDialogCancel}
+                onSubmit={handleDialogSubmit}
+            />
+        </Table>
+    );
+};
+
+const AccessControlDialog = (props) => {
+    const { t } = useTranslation();
+    const [topic, setTopic] = useState("");
+    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const addButtonEnabled = (() => {
+        return validTopic(topic);
+    })();
+    const handleSubmit = async () => {
+        // TODO
+    };
+    return (
+        <Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
+            <DialogTitle>Add entry</DialogTitle>
+            <DialogContent>
+                <TextField
+                    autoFocus={editMode}
+                    margin="dense"
+                    id="topic"
+                    label={"Topic"}
+                    aria-label={"Topic xx"}
+                    value={topic}
+                    onChange={ev => setTopic(ev.target.value)}
+                    type="text"
+                    fullWidth
+                    variant="standard"
+                />
+                <FormControl fullWidth variant="standard" sx={{ margin: 1 }}>
+                    <Select value={"read-write"} onChange={() => {}}>
+                        <MenuItem value={"private"}>Read/write access only by me</MenuItem>
+                        <MenuItem value={"read-only"}>Read/write access by user, anonymous read</MenuItem>
+                    </Select>
+                </FormControl>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={props.onCancel}>Cancel</Button>
+                <Button onClick={handleSubmit} disabled={!addButtonEnabled}>Add entry</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+
 export default Preferences;

web/src/components/SubscribeDialog.js

@@ -63,7 +63,7 @@ const SubscribePage = (props) => {
     const handleSubscribe = async () => {
         const user = await userManager.get(baseUrl); // May be undefined
         const username = (user) ? user.username : t("subscribe_dialog_error_user_anonymous");
-        const success = await api.auth(baseUrl, topic, user);
+        const success = await api.topicAuth(baseUrl, topic, user);
         if (!success) {
             console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
             if (user) {
@@ -163,7 +163,7 @@ const LoginPage = (props) => {
     const topic = props.topic;
     const handleLogin = async () => {
         const user = {baseUrl, username, password};
-        const success = await api.auth(baseUrl, topic, user);
+        const success = await api.topicAuth(baseUrl, topic, user);
         if (!success) {
             console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`);
             setErrorText(t("subscribe_dialog_error_user_not_authorized", { username: username }));

web/src/components/routes.js

@@ -2,7 +2,9 @@ import config from "../app/config";
 import {shortUrl} from "../app/utils";
 
 const routes = {
-    root: config.appRoot,
+    home: "/",
+    login: "/login",
+    app: config.appRoot,
     settings: "/settings",
     subscription: "/:topic",
     subscriptionExternal: "/:baseUrl/:topic",