Add "Generate topic name" button to "Subscribe to topic" dialog

Added a new button. When clicked it'll generate a random alphanumeric string and append to the current topic (or replace if empty).

Signed-off-by: Yarden Shoham <hrsi88@gmail.com>
pull/533/head
Yarden Shoham 2022-12-08 00:01:32 +00:00
parent 79356baee1
commit b91fb3f586
4 changed files with 44 additions and 9 deletions

35
web/package-lock.json generated
View File

@ -18,6 +18,7 @@
"i18next-browser-languagedetector": "^6.1.4", "i18next-browser-languagedetector": "^6.1.4",
"i18next-http-backend": "^1.4.0", "i18next-http-backend": "^1.4.0",
"js-base64": "^3.7.2", "js-base64": "^3.7.2",
"nanoid": "^4.0.0",
"react": "latest", "react": "latest",
"react-dom": "latest", "react-dom": "latest",
"react-i18next": "^11.16.2", "react-i18next": "^11.16.2",
@ -11868,14 +11869,14 @@
} }
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.4", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
"bin": { "bin": {
"nanoid": "bin/nanoid.cjs" "nanoid": "bin/nanoid.js"
}, },
"engines": { "engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" "node": "^14 || ^16 || >=18"
} }
}, },
"node_modules/natural-compare": { "node_modules/natural-compare": {
@ -13692,6 +13693,17 @@
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
}, },
"node_modules/postcss/node_modules/nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/prelude-ls": { "node_modules/prelude-ls": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@ -25412,9 +25424,9 @@
} }
}, },
"nanoid": { "nanoid": {
"version": "3.3.4", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
}, },
"natural-compare": { "natural-compare": {
"version": "1.4.0", "version": "1.4.0",
@ -25873,6 +25885,13 @@
"nanoid": "^3.3.4", "nanoid": "^3.3.4",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"source-map-js": "^1.0.2" "source-map-js": "^1.0.2"
},
"dependencies": {
"nanoid": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
}
} }
}, },
"postcss-attribute-case-insensitive": { "postcss-attribute-case-insensitive": {

View File

@ -19,6 +19,7 @@
"i18next-browser-languagedetector": "^6.1.4", "i18next-browser-languagedetector": "^6.1.4",
"i18next-http-backend": "^1.4.0", "i18next-http-backend": "^1.4.0",
"js-base64": "^3.7.2", "js-base64": "^3.7.2",
"nanoid": "^4.0.0",
"react": "latest", "react": "latest",
"react-dom": "latest", "react-dom": "latest",
"react-i18next": "^11.16.2", "react-i18next": "^11.16.2",

View File

@ -129,6 +129,7 @@
"subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts", "subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts",
"subscribe_dialog_subscribe_use_another_label": "Use another server", "subscribe_dialog_subscribe_use_another_label": "Use another server",
"subscribe_dialog_subscribe_base_url_label": "Service URL", "subscribe_dialog_subscribe_base_url_label": "Service URL",
"subscribe_dialog_subscribe_button_generate_topic_name": "Generate topic name",
"subscribe_dialog_subscribe_button_cancel": "Cancel", "subscribe_dialog_subscribe_button_cancel": "Cancel",
"subscribe_dialog_subscribe_button_subscribe": "Subscribe", "subscribe_dialog_subscribe_button_subscribe": "Subscribe",
"subscribe_dialog_login_title": "Login required", "subscribe_dialog_login_title": "Login required",

View File

@ -15,8 +15,10 @@ import subscriptionManager from "../app/SubscriptionManager";
import poller from "../app/Poller"; import poller from "../app/Poller";
import DialogFooter from "./DialogFooter"; import DialogFooter from "./DialogFooter";
import {useTranslation} from "react-i18next"; import {useTranslation} from "react-i18next";
import {customAlphabet} from 'nanoid/non-secure'
const publicBaseUrl = "https://ntfy.sh"; const publicBaseUrl = "https://ntfy.sh";
const randomAlphanumericString = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 21);
const SubscribeDialog = (props) => { const SubscribeDialog = (props) => {
const [baseUrl, setBaseUrl] = useState(""); const [baseUrl, setBaseUrl] = useState("");
@ -77,6 +79,17 @@ const SubscribePage = (props) => {
console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`); console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
props.onSuccess(); props.onSuccess();
}; };
const generateTopicName = () => {
const entropy = randomAlphanumericString();
let newTopic = props.topic;
if (newTopic) {
newTopic += "-" + entropy;
} else {
const sliceIndex = entropy.length / 2;
newTopic = entropy.slice(0, sliceIndex) + "-" + entropy.slice(sliceIndex);
}
props.setTopic(newTopic);
}
const handleUseAnotherChanged = (e) => { const handleUseAnotherChanged = (e) => {
props.setBaseUrl(""); props.setBaseUrl("");
setAnotherServerVisible(e.target.checked); setAnotherServerVisible(e.target.checked);
@ -118,7 +131,8 @@ const SubscribePage = (props) => {
maxLength: 64, maxLength: 64,
"aria-label": t("subscribe_dialog_subscribe_topic_placeholder") "aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
}} }}
/> />
<Button onClick={generateTopicName} disabled={props.topic.includes("-")}>{t("subscribe_dialog_subscribe_button_generate_topic_name")}</Button><br />
<FormControlLabel <FormControlLabel
sx={{pt: 1}} sx={{pt: 1}}
control={ control={