astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Philipp Heckel 2022-02-25 23:25:04 -05:00
parent 6d343c0f1a
commit 530f55c234
16 changed files with 237 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web/src/components/SubscribeDialog.js
View file

@ -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 (
<>