From 18596ecc34d476e4f5f6695273a4e30dff94df7d Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Thu, 8 Dec 2022 09:16:59 -0500
Subject: [PATCH] Changelog

---
 docs/releases.md                      |  4 ++++
 web/public/static/langs/en.json       |  2 +-
 web/src/app/utils.js                  | 10 +++++++++-
 web/src/components/SubscribeDialog.js | 16 ++--------------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/releases.md b/docs/releases.md
index 1e8fff71..cfb50825 100644
--- a/docs/releases.md
+++ b/docs/releases.md
@@ -4,6 +4,10 @@ and the [ntfy Android app](https://github.com/binwiederhier/ntfy-android/release
 
 ## ntfy server v1.30.0 (UNRELEASED)
 
+**Features:**
+
+* Web: Generate random topic name button ([#453](https://github.com/binwiederhier/ntfy/issues/453), thanks to [@yardenshoham](https://github.com/yardenshoham))
+
 **Bug fixes + maintenance:**
 
 * Remove `--env-topic` option from `ntfy publish` as per [deprecation](deprecations.md) (no ticket)
diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index 92380c2c..6b831b79 100644
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@@ -129,7 +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_generate_topic_name": "Generate name",
   "subscribe_dialog_subscribe_button_cancel": "Cancel",
   "subscribe_dialog_subscribe_button_subscribe": "Subscribe",
   "subscribe_dialog_login_title": "Login required",
diff --git a/web/src/app/utils.js b/web/src/app/utils.js
index ffc359b5..8b64b2c1 100644
--- a/web/src/app/utils.js
+++ b/web/src/app/utils.js
@@ -94,7 +94,6 @@ export const unmatchedTags = (tags) => {
     else return tags.filter(tag => !(tag in emojis));
 }
 
-
 export const maybeWithBasicAuth = (headers, user) => {
     if (user) {
         headers['Authorization'] = `Basic ${encodeBase64(`${user.username}:${user.password}`)}`;
@@ -241,3 +240,12 @@ export async function* fetchLinesIterator(fileURL, headers) {
         yield chunk.substr(startIndex); // last line didn't end in a newline char
     }
 }
+
+export const randomAlphanumericString = (len) => {
+    const alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
+    let id = "";
+    for (let i = 0; i < len; i++) {
+        id += alphabet[(Math.random() * alphabet.length) | 0];
+    }
+    return id;
+}
diff --git a/web/src/components/SubscribeDialog.js b/web/src/components/SubscribeDialog.js
index 30e4a3c2..9e591c55 100644
--- a/web/src/components/SubscribeDialog.js
+++ b/web/src/components/SubscribeDialog.js
@@ -9,7 +9,7 @@ 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 {randomAlphanumericString, topicUrl, validTopic, validUrl} from "../app/utils";
 import userManager from "../app/UserManager";
 import subscriptionManager from "../app/SubscriptionManager";
 import poller from "../app/Poller";
@@ -18,18 +18,6 @@ import {useTranslation} from "react-i18next";
 
 const publicBaseUrl = "https://ntfy.sh";
 
-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("");
     const [topic, setTopic] = useState("");
@@ -132,7 +120,7 @@ const SubscribePage = (props) => {
                             "aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
                         }}
                         />
-                        <Button onClick={() => {props.setTopic(randomAlphanumericString())}} style={{flexShrink: "0", marginTop: "0.5em"}}>
+                        <Button onClick={() => {props.setTopic(randomAlphanumericString(16))}} style={{flexShrink: "0", marginTop: "0.5em"}}>
                             {t("subscribe_dialog_subscribe_button_generate_topic_name")}
                         </Button>
                 </div>