aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/Navigation.jsx2
-rw-r--r--modern/src/common/components/StatusCard.jsx32
-rw-r--r--modern/src/resources/l10n/en.json1
-rw-r--r--modern/src/settings/SharePage.jsx109
4 files changed, 113 insertions, 31 deletions
diff --git a/modern/src/Navigation.jsx b/modern/src/Navigation.jsx
index 731eeb62..2bec6456 100644
--- a/modern/src/Navigation.jsx
+++ b/modern/src/Navigation.jsx
@@ -55,6 +55,7 @@ import DeviceConnectionsPage from './settings/DeviceConnectionsPage';
import GroupConnectionsPage from './settings/GroupConnectionsPage';
import UserConnectionsPage from './settings/UserConnectionsPage';
import LogsPage from './reports/LogsPage';
+import SharePage from './settings/SharePage';
const Navigation = () => {
const navigate = useNavigate();
@@ -122,6 +123,7 @@ const Navigation = () => {
<Route path="devices" element={<DevicesPage />} />
<Route path="device/:id/connections" element={<DeviceConnectionsPage />} />
<Route path="device/:id/command" element={<CommandDevicePage />} />
+ <Route path="device/:id/share" element={<SharePage />} />
<Route path="device/:id" element={<DevicePage />} />
<Route path="device" element={<DevicePage />} />
<Route path="drivers" element={<DriversPage />} />
diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx
index 53048645..a63d0f80 100644
--- a/modern/src/common/components/StatusCard.jsx
+++ b/modern/src/common/components/StatusCard.jsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
-import dayjs from 'dayjs';
import Draggable from 'react-draggable';
import {
Card,
@@ -16,11 +15,6 @@ import {
Menu,
MenuItem,
CardMedia,
- Dialog,
- TextField,
- DialogActions,
- DialogContent,
- Button,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import CloseIcon from '@mui/icons-material/Close';
@@ -138,7 +132,6 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
const [anchorEl, setAnchorEl] = useState(null);
const [removing, setRemoving] = useState(false);
- const [shared, setShared] = useState(null);
const handleRemove = useCatch(async (removed) => {
if (removed) {
@@ -178,20 +171,6 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
}
}, [navigate, position]);
- const handleShare = useCatchCallback(async () => {
- const expiration = dayjs().add(1, 'week').toISOString();
- const response = await fetch('/api/devices/share', {
- method: 'POST',
- body: new URLSearchParams(`deviceId=${deviceId}&expiration=${expiration}`),
- });
- if (response.ok) {
- const token = await response.text();
- setShared(`${window.location.origin}?token=${token}`);
- } else {
- throw Error(await response.text());
- }
- }, [deviceId, setShared]);
-
return (
<>
<div className={classes.root}>
@@ -293,7 +272,7 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
<MenuItem component="a" target="_blank" href={`https://www.google.com/maps/search/?api=1&query=${position.latitude}%2C${position.longitude}`}>{t('linkGoogleMaps')}</MenuItem>
<MenuItem component="a" target="_blank" href={`http://maps.apple.com/?ll=${position.latitude},${position.longitude}`}>{t('linkAppleMaps')}</MenuItem>
<MenuItem component="a" target="_blank" href={`https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${position.latitude}%2C${position.longitude}&heading=${position.course}`}>{t('linkStreetView')}</MenuItem>
- {!shareDisabled && !user.temporary && <MenuItem onClick={handleShare}>{t('deviceShare')}</MenuItem>}
+ {!shareDisabled && !user.temporary && <MenuItem onClick={() => navigate(`/settings/device/${deviceId}/share`)}>{t('deviceShare')}</MenuItem>}
</Menu>
)}
<RemoveDialog
@@ -302,15 +281,6 @@ const StatusCard = ({ deviceId, position, onClose, disableActions, desktopPaddin
itemId={deviceId}
onResult={(removed) => handleRemove(removed)}
/>
- <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 814bfde0..b91312c7 100644
--- a/modern/src/resources/l10n/en.json
+++ b/modern/src/resources/l10n/en.json
@@ -101,6 +101,7 @@
"sharedColumns": "Columns",
"sharedDropzoneText": "Drag and drop a file here or click",
"sharedLogs": "Logs",
+ "sharedLink": "Link",
"calendarSimple": "Simple",
"calendarRecurrence": "Recurrence",
"calendarOnce": "Once",
diff --git a/modern/src/settings/SharePage.jsx b/modern/src/settings/SharePage.jsx
new file mode 100644
index 00000000..d16fe44d
--- /dev/null
+++ b/modern/src/settings/SharePage.jsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useNavigate, useParams } from 'react-router-dom';
+import dayjs from 'dayjs';
+import {
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+ Typography,
+ Container,
+ TextField,
+ Button,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import SettingsMenu from './components/SettingsMenu';
+import { useCatchCallback } from '../reactHelper';
+import useSettingsStyles from './common/useSettingsStyles';
+
+const SharePage = () => {
+ const navigate = useNavigate();
+ const classes = useSettingsStyles();
+ const t = useTranslation();
+
+ const { id } = useParams();
+
+ const device = useSelector((state) => state.devices.items[id]);
+
+ const [expiration, setExpiration] = useState(dayjs().add(1, 'week').locale('en').format('YYYY-MM-DD'));
+ const [link, setLink] = useState();
+
+ const handleShare = useCatchCallback(async () => {
+ const expirationTime = dayjs(expiration).toISOString();
+ const response = await fetch('/api/devices/share', {
+ method: 'POST',
+ body: new URLSearchParams(`deviceId=${id}&expiration=${expirationTime}`),
+ });
+ if (response.ok) {
+ const token = await response.text();
+ setLink(`${window.location.origin}?token=${token}`);
+ } else {
+ throw Error(await response.text());
+ }
+ }, [id, expiration, setLink]);
+
+ return (
+ <PageLayout menu={<SettingsMenu />} breadcrumbs={['deviceShare']}>
+ <Container maxWidth="xs" className={classes.container}>
+ <Accordion defaultExpanded>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography variant="subtitle1">
+ {t('sharedRequired')}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.details}>
+ <TextField
+ value={device.name}
+ label={t('sharedDevice')}
+ disabled
+ />
+ <TextField
+ label={t('userExpirationTime')}
+ type="date"
+ value={(expiration && dayjs(expiration).locale('en').format('YYYY-MM-DD')) || '2099-01-01'}
+ onChange={(e) => setExpiration(dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format())}
+ />
+ <Button
+ variant="outlined"
+ color="primary"
+ onClick={handleShare}
+ >
+ {t('reportShow')}
+ </Button>
+ <TextField
+ value={link || ''}
+ onChange={(e) => setLink(e.target.value)}
+ label={t('sharedLink')}
+ InputProps={{
+ readOnly: true,
+ }}
+ />
+ </AccordionDetails>
+ </Accordion>
+ <div className={classes.buttons}>
+ <Button
+ type="button"
+ color="primary"
+ variant="outlined"
+ onClick={() => navigate(-1)}
+ >
+ {t('sharedCancel')}
+ </Button>
+ <Button
+ type="button"
+ color="primary"
+ variant="contained"
+ onClick={() => navigator.clipboard?.writeText(link)}
+ disabled={!link}
+ >
+ {t('sharedCopy')}
+ </Button>
+ </div>
+ </Container>
+ </PageLayout>
+ );
+};
+
+export default SharePage;