if configured require password on room creation

react/src/Components/Footer/Components/GoToLobbyDialog.js

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import DialogContent from '@mui/material/DialogContent';
+import { SvgIcon } from 'Components/SvgIcon';
+import { useTranslation } from 'react-i18next';
+
+const AntDialogTitle = props => {
+  const { children, onClose, ...other } = props;
+
+
+  return (
+    <DialogTitle {...other}>
+      {children}
+      {onClose ? (
+        <Button
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 26,
+            top: 27,
+          }}
+        >
+          <SvgIcon size={30} name={'close'} color={'white'} />
+        </Button>
+      ) : null}
+    </DialogTitle>
+  );
+};
+
+export function GoToLobbyDialog(props) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = React.useState(false);
+  const { onClose, url, open, onGoToLobbyClicked } = props;
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(url);
+    setCopied(true);
+  };
+
+
+
+
+
+
+
+
+
+  const handleClose = (event, reason) => {
+    onClose();
+  };
+
+
+
+  const goToLobbyClicked = (e) =>{
+    onGoToLobbyClicked()
+
+  }
+
+  return (
+    <Dialog onClose={handleClose} open={open}  maxWidth={'sm'}>
+      <AntDialogTitle onClose={handleClose}>{t('Share this url with the conference participants')}</AntDialogTitle>
+      <DialogContent>
+
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <a
+      href={url}
+      title={url} // Tooltip showing the full URL on hover
+      style={{
+        color: 'white',
+        fontSize: '1em',
+        cursor: 'pointer',
+        display: 'inline-block',
+        maxWidth: '350px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {url}
+    </a>
+      <span
+        style={{ textDecoration: 'underline', cursor: 'pointer', fontSize: '1.5em', marginTop:'15px'}}
+        onClick={copyToClipboard}
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </span>
+    </div>
+
+
+
+        <Button
+                  style={{marginTop:'35px'}}
+
+            onClick={goToLobbyClicked}
+            size='medium'
+            color="secondary"
+            variant="contained"
+            type="submit"
+            id="go_to_lobby_button"
+        >
+        {t("Go to Lobby")}
+        </Button>
+
+
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+GoToLobbyDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+};

react/src/Components/Footer/Components/RoomCreationPasswordDialog.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import DialogContent from '@mui/material/DialogContent';
+import Input from '@mui/material/Input';
+import { SvgIcon } from 'Components/SvgIcon';
+import { useTranslation } from 'react-i18next';
+
+const AntDialogTitle = props => {
+  const { children, onClose, ...other } = props;
+
+  return (
+    <DialogTitle {...other}>
+      {children}
+      {onClose ? (
+        <Button
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 26,
+            top: 27,
+          }}
+        >
+          <SvgIcon size={30} name={'close'} color={'white'} />
+        </Button>
+      ) : null}
+    </DialogTitle>
+  );
+};
+
+export function RoomCreationPasswordDialog(props) {
+  const { t } = useTranslation();
+  const { onClose, password, onPasswordChange, open, onCreateRoomClicked } = props;
+
+  const handleClose = (event, reason) => {
+    onClose();
+  };
+
+  const handlePasswordChange = (event) => {
+    onPasswordChange(event.target.value); // Update password state in the parent
+  };
+
+/* 
+  const handleRoomNameChange = (event) =>{
+    onRoomNameChange(event.target.value)
+  } */
+
+  const createRoomClicked = (e) =>{
+    onCreateRoomClicked()
+
+  }
+
+  return (
+    <Dialog onClose={handleClose} open={open}  maxWidth={'sm'}>
+      <AntDialogTitle onClose={handleClose}>{t('Room creation requires password.')}</AntDialogTitle>
+      <span>
+      Enter room creation password
+      </span>
+      <DialogContent>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {/*   <Input
+          type='text'
+          value={roomName}
+          onChange={handleRoomNameChange}
+          placeholder="Enter room name"
+        /> */}
+      <Input
+          style={{marginTop:'15px'}}
+          type='password'
+          value={password}
+          onChange={handlePasswordChange}
+          placeholder="Enter password"
+        />
+
+        </div>
+
+
+        <Button
+                  style={{marginTop:'35px'}}
+
+            onClick={createRoomClicked}
+            size='medium'
+            color="secondary"
+            variant="contained"
+            type="submit"
+            id="create_room_button"
+        >
+        {t("Create Room")}
+        </Button>
+
+
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+RoomCreationPasswordDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+};

react/src/Components/Footer/Components/UnauthorizedDialog.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import DialogContent from '@mui/material/DialogContent';
+import { SvgIcon } from 'Components/SvgIcon';
+import { useTranslation } from 'react-i18next';
+
+const AntDialogTitle = props => {
+  const { children, onClose, ...other } = props;
+
+
+  return (
+    <DialogTitle {...other}>
+      {children}
+      {onClose ? (
+        <Button
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 26,
+            top: 27,
+          }}
+        >
+          <SvgIcon size={30} name={'close'} color={'white'} />
+        </Button>
+      ) : null}
+    </DialogTitle>
+  );
+};
+
+export function UnauthrorizedDialog(props) {
+  const { t } = useTranslation();
+  const { onClose, open, onExitClicked } = props;
+
+
+  const handleClose = (event, reason) => {
+    onClose();
+  };
+
+
+
+  const exitClicked = (e) =>{
+    onExitClicked()
+
+  }
+
+  return (
+    <Dialog onClose={handleClose} open={open}  maxWidth={'sm'}>
+      <AntDialogTitle onClose={handleClose}>{t('You are unauthorized to join this room.')}</AntDialogTitle>
+      <DialogContent>
+
+
+        <Button
+                  style={{marginTop:'35px'}}
+
+            onClick={exitClicked}
+            size='medium'
+            color="secondary"
+            variant="contained"
+            type="submit"
+            id="exit_button"
+        >
+        {t("Exit")}
+        </Button>
+
+
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+UnauthrorizedDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+};