import * as React from 'react'; import {useState} from 'react'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; import Dialog from '@mui/material/Dialog'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material"; import theme from "./theme"; import api from "../app/Api"; import {topicUrl, validTopic, validUrl} from "../app/utils"; import userManager from "../app/UserManager"; import subscriptionManager from "../app/SubscriptionManager"; import poller from "../app/Poller"; import DialogFooter from "./DialogFooter"; import {useTranslation} from "react-i18next"; const publicBaseUrl = "https://ntfy.sh"; const SubscribeDialog = (props) => { const [baseUrl, setBaseUrl] = useState(""); const [topic, setTopic] = useState(""); const [showLoginPage, setShowLoginPage] = useState(false); const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); const handleSuccess = async () => { const actualBaseUrl = (baseUrl) ? baseUrl : window.location.origin; const subscription = await subscriptionManager.add(actualBaseUrl, topic); poller.pollInBackground(subscription); // Dangle! props.onSuccess(subscription); } return ( {!showLoginPage && setShowLoginPage(true)} onSuccess={handleSuccess} />} {showLoginPage && setShowLoginPage(false)} onSuccess={handleSuccess} />} ); }; const SubscribePage = (props) => { const { t } = useTranslation(); const [anotherServerVisible, setAnotherServerVisible] = useState(false); const [errorText, setErrorText] = useState(""); const baseUrl = (anotherServerVisible) ? props.baseUrl : window.location.origin; const topic = props.topic; const existingTopicUrls = props.subscriptions.map(s => topicUrl(s.baseUrl, s.topic)); const existingBaseUrls = Array.from(new Set([publicBaseUrl, ...props.subscriptions.map(s => s.baseUrl)])) .filter(s => s !== window.location.origin); 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); if (!success) { console.log(`[SubscribeDialog] Login to ${topicUrl(baseUrl, topic)} failed for user ${username}`); if (user) { setErrorText(t("subscribe_dialog_error_user_not_authorized", { username: username })); return; } else { props.onNeedsLogin(); return; } } console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`); props.onSuccess(); }; const handleUseAnotherChanged = (e) => { props.setBaseUrl(""); setAnotherServerVisible(e.target.checked); }; const subscribeButtonEnabled = (() => { if (anotherServerVisible) { const isExistingTopicUrl = existingTopicUrls.includes(topicUrl(baseUrl, topic)); return validTopic(topic) && validUrl(baseUrl) && !isExistingTopicUrl; } else { const isExistingTopicUrl = existingTopicUrls.includes(topicUrl(window.location.origin, topic)); return validTopic(topic) && !isExistingTopicUrl; } })(); return ( <> {t("subscribe_dialog_subscribe_title")} {t("subscribe_dialog_subscribe_description")} props.setTopic(ev.target.value)} type="text" fullWidth variant="standard" inputProps={{ maxLength: 64, "aria-label": t("subscribe_dialog_subscribe_topic_placeholder") }} /> } label={t("subscribe_dialog_subscribe_use_another_label")} /> {anotherServerVisible && props.setBaseUrl(newVal)} renderInput={ (params) => } />} ); }; const LoginPage = (props) => { const { t } = useTranslation(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [errorText, setErrorText] = useState(""); const baseUrl = (props.baseUrl) ? props.baseUrl : window.location.origin; const topic = props.topic; const handleLogin = async () => { const 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(t("subscribe_dialog_error_user_not_authorized", { username: username })); return; } console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`); await userManager.save(user); props.onSuccess(); }; return ( <> {t("subscribe_dialog_login_title")} {t("subscribe_dialog_login_description")} setUsername(ev.target.value)} type="text" fullWidth variant="standard" inputProps={{ "aria-label": t("subscribe_dialog_login_username_label") }} /> setPassword(ev.target.value)} fullWidth variant="standard" inputProps={{ "aria-label": t("subscribe_dialog_login_password_label") }} /> ); }; export default SubscribeDialog;