From b91fb3f5868a7b96715c7200d098f465ec47286e Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 8 Dec 2022 00:01:32 +0000 Subject: [PATCH 1/5] 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 --- web/package-lock.json | 35 +++++++++++++++++++++------ web/package.json | 1 + web/public/static/langs/en.json | 1 + web/src/components/SubscribeDialog.js | 16 +++++++++++- 4 files changed, 44 insertions(+), 9 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index caf111e..0d1a85c 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -18,6 +18,7 @@ "i18next-browser-languagedetector": "^6.1.4", "i18next-http-backend": "^1.4.0", "js-base64": "^3.7.2", + "nanoid": "^4.0.0", "react": "latest", "react-dom": "latest", "react-i18next": "^11.16.2", @@ -11868,14 +11869,14 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz", + "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==", "bin": { - "nanoid": "bin/nanoid.cjs" + "nanoid": "bin/nanoid.js" }, "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + "node": "^14 || ^16 || >=18" } }, "node_modules/natural-compare": { @@ -13692,6 +13693,17 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "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": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -25412,9 +25424,9 @@ } }, "nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz", + "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==" }, "natural-compare": { "version": "1.4.0", @@ -25873,6 +25885,13 @@ "nanoid": "^3.3.4", "picocolors": "^1.0.0", "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": { diff --git a/web/package.json b/web/package.json index e97191b..13bc146 100644 --- a/web/package.json +++ b/web/package.json @@ -19,6 +19,7 @@ "i18next-browser-languagedetector": "^6.1.4", "i18next-http-backend": "^1.4.0", "js-base64": "^3.7.2", + "nanoid": "^4.0.0", "react": "latest", "react-dom": "latest", "react-i18next": "^11.16.2", diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index 4d12c07..92380c2 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -129,6 +129,7 @@ "subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts", "subscribe_dialog_subscribe_use_another_label": "Use another server", "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_subscribe": "Subscribe", "subscribe_dialog_login_title": "Login required", diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index 62cfeb2..1a8c1b8 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -15,8 +15,10 @@ import subscriptionManager from "../app/SubscriptionManager"; import poller from "../app/Poller"; import DialogFooter from "./DialogFooter"; import {useTranslation} from "react-i18next"; +import {customAlphabet} from 'nanoid/non-secure' const publicBaseUrl = "https://ntfy.sh"; +const randomAlphanumericString = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 21); const SubscribeDialog = (props) => { const [baseUrl, setBaseUrl] = useState(""); @@ -77,6 +79,17 @@ const SubscribePage = (props) => { console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`); 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) => { props.setBaseUrl(""); setAnotherServerVisible(e.target.checked); @@ -118,7 +131,8 @@ const SubscribePage = (props) => { maxLength: 64, "aria-label": t("subscribe_dialog_subscribe_topic_placeholder") }} - /> + /> +
Date: Thu, 8 Dec 2022 10:32:02 +0000 Subject: [PATCH 2/5] Place "Generate topic name" in the same line as the text field Signed-off-by: Yarden Shoham --- web/src/components/SubscribeDialog.js | 46 +++++++++++++++++---------- 1 file changed, 29 insertions(+), 17 deletions(-) diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index 1a8c1b8..61a26ff 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -6,7 +6,7 @@ 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 {Autocomplete, Checkbox, FormControlLabel, Grid, useMediaQuery} from "@mui/material"; import theme from "./theme"; import api from "../app/Api"; import {topicUrl, validTopic, validUrl} from "../app/utils"; @@ -53,6 +53,14 @@ const SubscribeDialog = (props) => { ); }; +const Row = (props) => { + return ( +
+ {props.children} +
+ ); +}; + const SubscribePage = (props) => { const { t } = useTranslation(); const [anotherServerVisible, setAnotherServerVisible] = useState(false); @@ -117,22 +125,26 @@ const SubscribePage = (props) => { {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") - }} - /> -
+
+ props.setTopic(ev.target.value)} + type="text" + fullWidth + variant="standard" + inputProps={{ + maxLength: 64, + "aria-label": t("subscribe_dialog_subscribe_topic_placeholder") + }} + /> + +
Date: Thu, 8 Dec 2022 10:42:28 +0000 Subject: [PATCH 3/5] Remove nanoid dependency Signed-off-by: Yarden Shoham --- web/package-lock.json | 35 ++++++--------------------- web/package.json | 1 - web/src/components/SubscribeDialog.js | 14 +++++++++-- 3 files changed, 20 insertions(+), 30 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 0d1a85c..caf111e 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -18,7 +18,6 @@ "i18next-browser-languagedetector": "^6.1.4", "i18next-http-backend": "^1.4.0", "js-base64": "^3.7.2", - "nanoid": "^4.0.0", "react": "latest", "react-dom": "latest", "react-i18next": "^11.16.2", @@ -11869,14 +11868,14 @@ } }, "node_modules/nanoid": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz", - "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==", + "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.js" + "nanoid": "bin/nanoid.cjs" }, "engines": { - "node": "^14 || ^16 || >=18" + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, "node_modules/natural-compare": { @@ -13693,17 +13692,6 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "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": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -25424,9 +25412,9 @@ } }, "nanoid": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz", - "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==" + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "natural-compare": { "version": "1.4.0", @@ -25885,13 +25873,6 @@ "nanoid": "^3.3.4", "picocolors": "^1.0.0", "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": { diff --git a/web/package.json b/web/package.json index 13bc146..e97191b 100644 --- a/web/package.json +++ b/web/package.json @@ -19,7 +19,6 @@ "i18next-browser-languagedetector": "^6.1.4", "i18next-http-backend": "^1.4.0", "js-base64": "^3.7.2", - "nanoid": "^4.0.0", "react": "latest", "react-dom": "latest", "react-i18next": "^11.16.2", diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index 61a26ff..e116f32 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -15,10 +15,20 @@ import subscriptionManager from "../app/SubscriptionManager"; import poller from "../app/Poller"; import DialogFooter from "./DialogFooter"; import {useTranslation} from "react-i18next"; -import {customAlphabet} from 'nanoid/non-secure' const publicBaseUrl = "https://ntfy.sh"; -const randomAlphanumericString = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 21); + +const randomAlphanumericString = () => { + const alphabet = 'abcdefghijklmnopqrstuvwxyz0123456789'; + const size = 16; + + let id = ''; + let i = size; + while (i--) { + id += alphabet[(Math.random() * alphabet.length) | 0]; + } + return id; + } const SubscribeDialog = (props) => { const [baseUrl, setBaseUrl] = useState(""); From 71e46860acd2462599cc214868594259e30ff167 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 8 Dec 2022 11:07:16 +0000 Subject: [PATCH 4/5] Remove unused layouts Signed-off-by: Yarden Shoham --- web/src/components/SubscribeDialog.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index e116f32..eb0f6ae 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -6,7 +6,7 @@ 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, Grid, useMediaQuery} from "@mui/material"; +import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material"; import theme from "./theme"; import api from "../app/Api"; import {topicUrl, validTopic, validUrl} from "../app/utils"; @@ -63,14 +63,6 @@ const SubscribeDialog = (props) => { ); }; -const Row = (props) => { - return ( -
- {props.children} -
- ); -}; - const SubscribePage = (props) => { const { t } = useTranslation(); const [anotherServerVisible, setAnotherServerVisible] = useState(false); From e0d6a0b974ad2210af128a03ed6288291c19179f Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 8 Dec 2022 11:54:37 +0000 Subject: [PATCH 5/5] Simplify logic Signed-off-by: Yarden Shoham --- web/src/components/SubscribeDialog.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js index eb0f6ae..30e4a3c 100644 --- a/web/src/components/SubscribeDialog.js +++ b/web/src/components/SubscribeDialog.js @@ -89,17 +89,6 @@ const SubscribePage = (props) => { console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`); 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) => { props.setBaseUrl(""); setAnotherServerVisible(e.target.checked); @@ -143,7 +132,7 @@ const SubscribePage = (props) => { "aria-label": t("subscribe_dialog_subscribe_topic_placeholder") }} /> -