Merge pull request #533 from yardenshoham/generate-topic-name

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

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",

web/src/components/SubscribeDialog.js

@@ -18,6 +18,18 @@ 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("");
@@ -104,21 +116,26 @@ const SubscribePage = (props) => {
                 <DialogContentText>
                     {t("subscribe_dialog_subscribe_description")}
                 </DialogContentText>
-                <TextField
-                    autoFocus
-                    margin="dense"
-                    id="topic"
-                    placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
-                    value={props.topic}
-                    onChange={ev => props.setTopic(ev.target.value)}
-                    type="text"
-                    fullWidth
-                    variant="standard"
-                    inputProps={{
-                        maxLength: 64,
-                        "aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
-                    }}
-                />
+                <div style={{display: 'flex'}} role="row">
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="topic"
+                        placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
+                        value={props.topic}
+                        onChange={ev => props.setTopic(ev.target.value)}
+                        type="text"
+                        fullWidth
+                        variant="standard"
+                        inputProps={{
+                            maxLength: 64,
+                            "aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
+                        }}
+                        />
+                        <Button onClick={() => {props.setTopic(randomAlphanumericString())}} style={{flexShrink: "0", marginTop: "0.5em"}}>
+                            {t("subscribe_dialog_subscribe_button_generate_topic_name")}
+                        </Button>
+                </div>
                 <FormControlLabel
                     sx={{pt: 1}}
                     control={