459 lines
15 KiB
JavaScript
459 lines
15 KiB
JavaScript
import * as React from "react";
|
|
import { useContext, useState } from "react";
|
|
import {
|
|
Button,
|
|
TextField,
|
|
Dialog,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
Chip,
|
|
InputAdornment,
|
|
Portal,
|
|
Snackbar,
|
|
useMediaQuery,
|
|
MenuItem,
|
|
IconButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Divider,
|
|
} from "@mui/material";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import {
|
|
Check,
|
|
Clear,
|
|
ClearAll,
|
|
Edit,
|
|
EnhancedEncryption,
|
|
Lock,
|
|
LockOpen,
|
|
NotificationsOff,
|
|
RemoveCircle,
|
|
Send,
|
|
} from "@mui/icons-material";
|
|
import theme from "./theme";
|
|
import subscriptionManager, { NotificationType } from "../app/SubscriptionManager";
|
|
import DialogFooter from "./DialogFooter";
|
|
import accountApi, { Role } from "../app/AccountApi";
|
|
import session from "../app/Session";
|
|
import routes from "./routes";
|
|
import PopupMenu from "./PopupMenu";
|
|
import { formatShortDateTime, shuffle } from "../app/utils";
|
|
import api from "../app/Api";
|
|
import { AccountContext } from "./App";
|
|
import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
|
|
import { UnauthorizedError } from "../app/errors";
|
|
import notifier from "../app/Notifier";
|
|
|
|
export const SubscriptionPopup = (props) => {
|
|
const { t } = useTranslation();
|
|
const { account } = useContext(AccountContext);
|
|
const navigate = useNavigate();
|
|
const [displayNameDialogOpen, setDisplayNameDialogOpen] = useState(false);
|
|
const [reserveAddDialogOpen, setReserveAddDialogOpen] = useState(false);
|
|
const [reserveEditDialogOpen, setReserveEditDialogOpen] = useState(false);
|
|
const [reserveDeleteDialogOpen, setReserveDeleteDialogOpen] = useState(false);
|
|
const [showPublishError, setShowPublishError] = useState(false);
|
|
const { subscription } = props;
|
|
const placement = props.placement ?? "left";
|
|
const reservations = account?.reservations || [];
|
|
|
|
const showReservationAdd = config.enable_reservations && !subscription?.reservation && account?.stats.reservations_remaining > 0;
|
|
const showReservationAddDisabled =
|
|
!showReservationAdd &&
|
|
config.enable_reservations &&
|
|
!subscription?.reservation &&
|
|
(config.enable_payments || account?.stats.reservations_remaining === 0);
|
|
const showReservationEdit = config.enable_reservations && !!subscription?.reservation;
|
|
const showReservationDelete = config.enable_reservations && !!subscription?.reservation;
|
|
|
|
const handleChangeDisplayName = async () => {
|
|
setDisplayNameDialogOpen(true);
|
|
};
|
|
|
|
const handleReserveAdd = async () => {
|
|
setReserveAddDialogOpen(true);
|
|
};
|
|
|
|
const handleReserveEdit = async () => {
|
|
setReserveEditDialogOpen(true);
|
|
};
|
|
|
|
const handleReserveDelete = async () => {
|
|
setReserveDeleteDialogOpen(true);
|
|
};
|
|
|
|
const handleSendTestMessage = async () => {
|
|
const { baseUrl, topic } = props.subscription;
|
|
const tags = shuffle([
|
|
"grinning",
|
|
"octopus",
|
|
"upside_down_face",
|
|
"palm_tree",
|
|
"maple_leaf",
|
|
"apple",
|
|
"skull",
|
|
"warning",
|
|
"jack_o_lantern",
|
|
"de-server-1",
|
|
"backups",
|
|
"cron-script",
|
|
"script-error",
|
|
"phils-automation",
|
|
"mouse",
|
|
"go-rocks",
|
|
"hi-ben",
|
|
]).slice(0, Math.round(Math.random() * 4));
|
|
const priority = shuffle([1, 2, 3, 4, 5])[0];
|
|
const title = shuffle([
|
|
"",
|
|
"",
|
|
"", // Higher chance of no title
|
|
"Oh my, another test message?",
|
|
"Titles are optional, did you know that?",
|
|
"ntfy is open source, and will always be free. Cool, right?",
|
|
"I don't really like apples",
|
|
"My favorite TV show is The Wire. You should watch it!",
|
|
"You can attach files and URLs to messages too",
|
|
"You can delay messages up to 3 days",
|
|
])[0];
|
|
const nowSeconds = Math.round(Date.now() / 1000);
|
|
const message = shuffle([
|
|
`Hello friend, this is a test notification from ntfy web. It's ${formatShortDateTime(nowSeconds)} right now. Is that early or late?`,
|
|
`So I heard you like ntfy? If that's true, go to GitHub and star it, or to the Play store and rate it. Thanks! Oh yeah, this is a test notification.`,
|
|
`It's almost like you want to hear what I have to say. I'm not even a machine. I'm just a sentence that Phil typed on a random Thursday.`,
|
|
`Alright then, it's ${formatShortDateTime(nowSeconds)} already. Boy oh boy, where did the time go? I hope you're alright, friend.`,
|
|
`There are nine million bicycles in Beijing That's a fact; It's a thing we can't deny. I wonder if that's true ...`,
|
|
`I'm really excited that you're trying out ntfy. Did you know that there are a few public topics, such as ntfy.sh/stats and ntfy.sh/announcements.`,
|
|
`It's interesting to hear what people use ntfy for. I've heard people talk about using it for so many cool things. What do you use it for?`,
|
|
])[0];
|
|
try {
|
|
await api.publish(baseUrl, topic, message, {
|
|
title,
|
|
priority,
|
|
tags,
|
|
});
|
|
} catch (e) {
|
|
console.log(`[SubscriptionPopup] Error publishing message`, e);
|
|
setShowPublishError(true);
|
|
}
|
|
};
|
|
|
|
const handleClearAll = async () => {
|
|
console.log(`[SubscriptionPopup] Deleting all notifications from ${props.subscription.id}`);
|
|
await subscriptionManager.deleteNotifications(props.subscription.id);
|
|
};
|
|
|
|
const handleUnsubscribe = async () => {
|
|
console.log(`[SubscriptionPopup] Unsubscribing from ${props.subscription.id}`, props.subscription);
|
|
await subscriptionManager.remove(props.subscription);
|
|
if (session.exists() && !subscription.internal) {
|
|
try {
|
|
await accountApi.deleteSubscription(props.subscription.baseUrl, props.subscription.topic);
|
|
} catch (e) {
|
|
console.log(`[SubscriptionPopup] Error unsubscribing`, e);
|
|
if (e instanceof UnauthorizedError) {
|
|
session.resetAndRedirect(routes.login);
|
|
}
|
|
}
|
|
}
|
|
const newSelected = await subscriptionManager.first(); // May be undefined
|
|
if (newSelected && !newSelected.internal) {
|
|
navigate(routes.forSubscription(newSelected));
|
|
} else {
|
|
navigate(routes.app);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PopupMenu horizontal={placement} anchorEl={props.anchor} open={!!props.anchor} onClose={props.onClose}>
|
|
<NotificationToggle subscription={subscription} />
|
|
<Divider />
|
|
<MenuItem onClick={handleChangeDisplayName}>
|
|
<ListItemIcon>
|
|
<Edit fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_change_display_name")}
|
|
</MenuItem>
|
|
{showReservationAdd && (
|
|
<MenuItem onClick={handleReserveAdd}>
|
|
<ListItemIcon>
|
|
<Lock fontSize="small" />
|
|
</ListItemIcon>
|
|
{t("action_bar_reservation_add")}
|
|
</MenuItem>
|
|
)}
|
|
{showReservationAddDisabled && (
|
|
<MenuItem sx={{ cursor: "default" }}>
|
|
<ListItemIcon>
|
|
<Lock fontSize="small" color="disabled" />
|
|
</ListItemIcon>
|
|
|
|
<span style={{ opacity: 0.3 }}>{t("action_bar_reservation_add")}</span>
|
|
<ReserveLimitChip />
|
|
</MenuItem>
|
|
)}
|
|
{showReservationEdit && (
|
|
<MenuItem onClick={handleReserveEdit}>
|
|
<ListItemIcon>
|
|
<EnhancedEncryption fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_reservation_edit")}
|
|
</MenuItem>
|
|
)}
|
|
{showReservationDelete && (
|
|
<MenuItem onClick={handleReserveDelete}>
|
|
<ListItemIcon>
|
|
<LockOpen fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_reservation_delete")}
|
|
</MenuItem>
|
|
)}
|
|
<MenuItem onClick={handleSendTestMessage}>
|
|
<ListItemIcon>
|
|
<Send fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_send_test_notification")}
|
|
</MenuItem>
|
|
<MenuItem onClick={handleClearAll}>
|
|
<ListItemIcon>
|
|
<ClearAll fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_clear_notifications")}
|
|
</MenuItem>
|
|
<MenuItem onClick={handleUnsubscribe}>
|
|
<ListItemIcon>
|
|
<RemoveCircle fontSize="small" />
|
|
</ListItemIcon>
|
|
|
|
{t("action_bar_unsubscribe")}
|
|
</MenuItem>
|
|
</PopupMenu>
|
|
<Portal>
|
|
<Snackbar
|
|
open={showPublishError}
|
|
autoHideDuration={3000}
|
|
onClose={() => setShowPublishError(false)}
|
|
message={t("message_bar_error_publishing")}
|
|
/>
|
|
<DisplayNameDialog open={displayNameDialogOpen} subscription={subscription} onClose={() => setDisplayNameDialogOpen(false)} />
|
|
{showReservationAdd && (
|
|
<ReserveAddDialog
|
|
open={reserveAddDialogOpen}
|
|
topic={subscription.topic}
|
|
reservations={reservations}
|
|
onClose={() => setReserveAddDialogOpen(false)}
|
|
/>
|
|
)}
|
|
{showReservationEdit && (
|
|
<ReserveEditDialog
|
|
open={reserveEditDialogOpen}
|
|
reservation={subscription.reservation}
|
|
reservations={props.reservations}
|
|
onClose={() => setReserveEditDialogOpen(false)}
|
|
/>
|
|
)}
|
|
{showReservationDelete && (
|
|
<ReserveDeleteDialog
|
|
open={reserveDeleteDialogOpen}
|
|
topic={subscription.topic}
|
|
onClose={() => setReserveDeleteDialogOpen(false)}
|
|
/>
|
|
)}
|
|
</Portal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const DisplayNameDialog = (props) => {
|
|
const { t } = useTranslation();
|
|
const { subscription } = props;
|
|
const [error, setError] = useState("");
|
|
const [displayName, setDisplayName] = useState(subscription.displayName ?? "");
|
|
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
const handleSave = async () => {
|
|
await subscriptionManager.setDisplayName(subscription.id, displayName);
|
|
if (session.exists() && !subscription.internal) {
|
|
try {
|
|
console.log(`[SubscriptionSettingsDialog] Updating subscription display name to ${displayName}`);
|
|
await accountApi.updateSubscription(subscription.baseUrl, subscription.topic, { display_name: displayName });
|
|
} catch (e) {
|
|
console.log(`[SubscriptionSettingsDialog] Error updating subscription`, e);
|
|
if (e instanceof UnauthorizedError) {
|
|
session.resetAndRedirect(routes.login);
|
|
} else {
|
|
setError(e.message);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
props.onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={props.open} onClose={props.onClose} maxWidth="sm" fullWidth fullScreen={fullScreen}>
|
|
<DialogTitle>{t("display_name_dialog_title")}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>{t("display_name_dialog_description")}</DialogContentText>
|
|
<TextField
|
|
autoFocus
|
|
placeholder={t("display_name_dialog_placeholder")}
|
|
value={displayName}
|
|
onChange={(ev) => setDisplayName(ev.target.value)}
|
|
type="text"
|
|
fullWidth
|
|
variant="standard"
|
|
inputProps={{
|
|
maxLength: 64,
|
|
"aria-label": t("display_name_dialog_placeholder"),
|
|
}}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton onClick={() => setDisplayName("")} edge="end">
|
|
<Clear />
|
|
</IconButton>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</DialogContent>
|
|
<DialogFooter status={error}>
|
|
<Button onClick={props.onClose}>{t("common_cancel")}</Button>
|
|
<Button onClick={handleSave}>{t("common_save")}</Button>
|
|
</DialogFooter>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const getNotificationType = (subscription) => {
|
|
if (subscription.mutedUntil === 1) {
|
|
return "muted";
|
|
}
|
|
|
|
return subscription.notificationType ?? NotificationType.BROWSER;
|
|
};
|
|
|
|
const checkedItem = (
|
|
<ListItemIcon>
|
|
<Check />
|
|
</ListItemIcon>
|
|
);
|
|
|
|
const NotificationToggle = ({ subscription }) => {
|
|
const { t } = useTranslation();
|
|
const type = getNotificationType(subscription);
|
|
|
|
const handleChange = async (newType) => {
|
|
try {
|
|
if (newType !== NotificationType.SOUND && !(await notifier.maybeRequestPermission())) {
|
|
return;
|
|
}
|
|
|
|
await subscriptionManager.setNotificationType(subscription, newType);
|
|
} catch (e) {
|
|
console.error("[NotificationToggle] Error setting notification type", e);
|
|
}
|
|
};
|
|
|
|
const unmute = async () => {
|
|
await subscriptionManager.setMutedUntil(subscription.id, 0);
|
|
};
|
|
|
|
if (type === "muted") {
|
|
return (
|
|
<MenuItem onClick={unmute}>
|
|
<ListItemIcon>
|
|
<NotificationsOff />
|
|
</ListItemIcon>
|
|
{t("notification_toggle_unmute")}
|
|
</MenuItem>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<MenuItem>
|
|
{type === NotificationType.SOUND && checkedItem}
|
|
<ListItemText inset={type !== NotificationType.SOUND} onClick={() => handleChange(NotificationType.SOUND)}>
|
|
{t("notification_toggle_sound")}
|
|
</ListItemText>
|
|
</MenuItem>
|
|
{!notifier.denied() && !notifier.iosSupportedButInstallRequired() && (
|
|
<>
|
|
{notifier.supported() && (
|
|
<MenuItem>
|
|
{type === NotificationType.BROWSER && checkedItem}
|
|
<ListItemText inset={type !== NotificationType.BROWSER} onClick={() => handleChange(NotificationType.BROWSER)}>
|
|
{t("notification_toggle_browser")}
|
|
</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
{notifier.pushSupported() && (
|
|
<MenuItem>
|
|
{type === NotificationType.BACKGROUND && checkedItem}
|
|
<ListItemText inset={type !== NotificationType.BACKGROUND} onClick={() => handleChange(NotificationType.BACKGROUND)}>
|
|
{t("notification_toggle_background")}
|
|
</ListItemText>
|
|
</MenuItem>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const ReserveLimitChip = () => {
|
|
const { account } = useContext(AccountContext);
|
|
if (account?.role === Role.ADMIN || account?.stats.reservations_remaining > 0) {
|
|
return <></>;
|
|
}
|
|
if (config.enable_payments) {
|
|
return account?.limits.reservations > 0 ? <LimitReachedChip /> : <ProChip />;
|
|
}
|
|
if (account) {
|
|
return <LimitReachedChip />;
|
|
}
|
|
return <></>;
|
|
};
|
|
|
|
const LimitReachedChip = () => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Chip
|
|
label={t("action_bar_reservation_limit_reached")}
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{
|
|
opacity: 0.8,
|
|
borderWidth: "2px",
|
|
height: "24px",
|
|
marginLeft: "5px",
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const ProChip = () => (
|
|
<Chip
|
|
label="ntfy Pro"
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{
|
|
opacity: 0.8,
|
|
fontWeight: "bold",
|
|
borderWidth: "2px",
|
|
height: "24px",
|
|
marginLeft: "5px",
|
|
}}
|
|
/>
|
|
);
|