Added a simple menu item as a backup for copying the link in case the…

… browser does not support web share api

frontend/src/components/CurrentBooking/AlterBookingDrawer.tsx

@@ -20,6 +20,8 @@ import {
     Spacer,
     TimeTextBold
 } from '../BookingDrawer/BookingDrawer';
+import ShareMenu from './ShareMenu';
+import { useState } from 'react';
 
 const MIN_DURATION = 15;
 const LAST_HOUR = 17;
@@ -87,13 +89,21 @@ const AlterBookingDrawer = (props: Props) => {
     const text: string = 'Hello World! I shared this content via Web Share';
     const url: string | undefined = booking?.meetingLink;
 
+    const [shareMenuOpen, setShareMenuOpen] = useState(false);
+    const [shareAnchorEl, setShareAnchorEl] =
+        React.useState<null | HTMLElement>(null);
+
     const handleAlterTime = (minutes: number) => {
         if (booking === undefined || minutes == 0) {
             return;
         }
         onAlterTime(booking, minutes);
     };
 
+    const shareMenuOnClose = (open: Boolean) => {
+        setShareMenuOpen(!shareMenuOpen);
+    };
+
     const checkStartingTime = () => {
         if (booking) {
             const start = DateTime.fromISO(booking.startTime);
@@ -239,11 +249,18 @@ const AlterBookingDrawer = (props: Props) => {
         cancelBooking(booking);
     };
 
-    const handleOnShareClick = (shareDetails: ShareData) => {
+    const handleOnShareClick = (
+        event: HTMLElement | null,
+        shareDetails: ShareData
+    ) => {
         if (navigator.share) {
             navigator.share(shareDetails).catch((error) => {
                 console.error('Something went wrong sharing the link', error);
             });
+        } else if (event != null) {
+            console.log('Web Share API not enabled!');
+            setShareAnchorEl(event);
+            setShareMenuOpen(!shareMenuOpen);
         }
     };
 
@@ -294,16 +311,25 @@ const AlterBookingDrawer = (props: Props) => {
                     </RowCentered>
                     <Row>
                         <DrawerButtonSecondary
-                            onClick={() =>
-                                handleOnShareClick({
+                            id="shareButton"
+                            onClick={(
+                                event: React.MouseEvent<HTMLButtonElement>
+                            ) => {
+                                handleOnShareClick(event.currentTarget, {
                                     url,
                                     title,
                                     text
-                                })
-                            }
+                                });
+                            }}
                         >
                             <ShareIcon /> <Spacer /> Share meeting
                         </DrawerButtonSecondary>
+                        <ShareMenu
+                            anchorEl={shareAnchorEl}
+                            open={shareMenuOpen}
+                            onClose={shareMenuOnClose}
+                            url={url ? url : 'no link'}
+                        ></ShareMenu>
                     </Row>
 
                     <Row>

frontend/src/components/CurrentBooking/ShareMenu.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+interface Props {
+    anchorEl: HTMLElement | null;
+    open: boolean;
+    onClose: (open: boolean) => void;
+    url: string;
+}
+
+const ShareMenu = (props: Props) => {
+    const { anchorEl, open, onClose, url } = props;
+
+    const copy = () => {
+        navigator.clipboard.writeText(url).then((value) => {
+            onClose(!open);
+        });
+    };
+
+    return (
+        <Menu
+            open={open}
+            onClose={onClose}
+            anchorEl={anchorEl}
+            MenuListProps={{
+                'aria-labelledby': 'basic-button'
+            }}
+        >
+            <MenuItem onClick={copy}>Copy Link</MenuItem>
+        </Menu>
+    );
+};
+
+export default ShareMenu;