Show share link in a dialog

2 files changed, 17 insertions, 12 deletions

diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx
index c6eec3ca..0b5d4148 100644
--- a/modern/src/common/components/StatusCard.jsx
+++ b/modern/src/common/components/StatusCard.jsx
@@ -16,7 +16,11 @@ import {
   Menu,
   MenuItem,
   CardMedia,
-  Snackbar,
+  Dialog,
+  TextField,
+  DialogActions,
+  DialogContent,
+  Button,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import CloseIcon from '@mui/icons-material/Close';
@@ -34,7 +38,6 @@ import usePositionAttributes from '../attributes/usePositionAttributes';
 import { devicesActions } from '../../store';
 import { useCatch, useCatchCallback } from '../../reactHelper';
 import { useAttributePreference } from '../util/preferences';
-import { snackBarDurationShortMs } from '../util/duration';
 
 const useStyles = makeStyles((theme) => ({
   card: {
@@ -134,7 +137,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
   const [anchorEl, setAnchorEl] = useState(null);
 
   const [removing, setRemoving] = useState(false);
-  const [shared, setShared] = useState(false);
+  const [shared, setShared] = useState(null);
 
   const handleRemove = useCatch(async (removed) => {
     if (removed) {
@@ -182,8 +185,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
     });
     if (response.ok) {
       const token = await response.text();
-      navigator.clipboard.writeText(`${window.location.origin}?token=${token}`);
-      setShared(true);
+      setShared(`${window.location.origin}?token=${token}`);
     } else {
       throw Error(await response.text());
     }
@@ -299,12 +301,15 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
         itemId={deviceId}
         onResult={(removed) => handleRemove(removed)}
       />
-      <Snackbar
-        open={shared}
-        onClose={() => setShared(false)}
-        autoHideDuration={snackBarDurationShortMs}
-        message={t('sharedLinkCopied')}
-      />
+      <Dialog open={Boolean(shared)} onClose={() => setShared(null)}>
+        <DialogContent>
+          <TextField value={shared} onFocus={e => e.target.select()} />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShared(null)}>{t('sharedCancel')}</Button>
+          <Button onClick={() => navigator.clipboard?.writeText(shared)}>{t('sharedCopy')}</Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 };
diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json
index 8ba25991..01f3b560 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -5,6 +5,7 @@
     "sharedUpload": "Upload",
     "sharedSet": "Set",
     "sharedCancel": "Cancel",
+    "sharedCopy": "Copy",
     "sharedAdd": "Add",
     "sharedEdit": "Edit",
     "sharedRemove": "Remove",
@@ -99,7 +100,6 @@
     "sharedImport": "Import",
     "sharedColumns": "Columns",
     "sharedDropzoneText": "Drag and drop a file here or click",
-    "sharedLinkCopied": "Link copied",
     "sharedLogs": "Logs",
     "calendarSimple": "Simple",
     "calendarRecurrence": "Recurrence",