Merge pull request #533 from yardenshoham/generate-topic-name
Add "Generate topic name" button to "Subscribe to topic" dialogpull/536/head
commit
eebd0f113b
|
@ -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",
|
||||||
|
|
|
@ -18,6 +18,18 @@ import {useTranslation} from "react-i18next";
|
||||||
|
|
||||||
const publicBaseUrl = "https://ntfy.sh";
|
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 SubscribeDialog = (props) => {
|
||||||
const [baseUrl, setBaseUrl] = useState("");
|
const [baseUrl, setBaseUrl] = useState("");
|
||||||
const [topic, setTopic] = useState("");
|
const [topic, setTopic] = useState("");
|
||||||
|
@ -104,21 +116,26 @@ const SubscribePage = (props) => {
|
||||||
<DialogContentText>
|
<DialogContentText>
|
||||||
{t("subscribe_dialog_subscribe_description")}
|
{t("subscribe_dialog_subscribe_description")}
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
<TextField
|
<div style={{display: 'flex'}} role="row">
|
||||||
autoFocus
|
<TextField
|
||||||
margin="dense"
|
autoFocus
|
||||||
id="topic"
|
margin="dense"
|
||||||
placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
|
id="topic"
|
||||||
value={props.topic}
|
placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
|
||||||
onChange={ev => props.setTopic(ev.target.value)}
|
value={props.topic}
|
||||||
type="text"
|
onChange={ev => props.setTopic(ev.target.value)}
|
||||||
fullWidth
|
type="text"
|
||||||
variant="standard"
|
fullWidth
|
||||||
inputProps={{
|
variant="standard"
|
||||||
maxLength: 64,
|
inputProps={{
|
||||||
"aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
|
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
|
<FormControlLabel
|
||||||
sx={{pt: 1}}
|
sx={{pt: 1}}
|
||||||
control={
|
control={
|
||||||
|
|
Loading…
Reference in New Issue