Rework legal links (#199)

- use international terms for config option of imprint - introduce config option for privacy notice - add links to imprint and privacy notice to all pages - rework imprint link: named link instead of symbol - public/privacy/privacy.html was kept, as some users might want to serve the file together with edumeet instead of linking to an existing external source. Co-authored-by: Marcel Beyer <[email protected]> Co-authored-by: Rémai Gábor <[email protected]>
edumeet · Nov 18, 2024 · cdeeb71 · cdeeb71
1 parent 9b136ce
commit cdeeb71
Show file tree

Hide file tree

Showing 11 changed files with 149 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -78,5 +78,7 @@ can be found here: [config.example.js](public/config/config.example.js).
 | title | The title to show if the logo is not specified. | `"string"` | ``"edumeet"`` |
 | randomizeOnBlank | Enable or disable randomize room name when it is blank. | `"boolean"` | ``true`` |
 | transcriptionEnabled | Enable or disable transcription. | `"boolean"` | ``true`` |
+| imprintUrl | Show a link to an imprint in the edumeet UI, keep blank to not show a link | `"string"` | ``""`` |
+| privacyUrl | Show a link to a privacy notice in the edumeet UI, keep blank to not show a link | `"string"` | ``""`` |
 
 ---
diff --git a/public/config/config.example.js b/public/config/config.example.js
@@ -149,6 +149,12 @@ var config = {
 	// Enable or disable transcription.
 	transcriptionEnabled: true,
 
+	// Imprint. If you want to link your imprint, please provide a URL in this variable. If it is empty, no link will be shown.
+	imprintUrl: '',
+
+	// Privacy notice. If you want to link your privacy notices, please provide a URL in this variable. If it is empty, no link will be shown.
+	privacyUrl: '',
+
 	// Client theme. Take a look at mui theme documentation.
 	theme: {
 		palette: {

diff --git a/src/components/controlbuttons/ImpressumButton.tsx b/src/components/controlbuttons/ImpressumButton.tsx
diff --git a/src/components/helpdialog/HelpDialog.tsx b/src/components/helpdialog/HelpDialog.tsx
@@ -1,11 +1,11 @@
-import { Button } from '@mui/material';
+import { Button, Box, Link, Typography } from '@mui/material';
 import { Close } from '@mui/icons-material';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { uiActions } from '../../store/slices/uiSlice';
-import { closeLabel } from '../translated/translatedComponents';
+import { closeLabel, imprintLabel, privacyLabel } from '../translated/translatedComponents';
 import ShortcutKeys from './ShortcutKeys';
 import GenericDialog from '../genericdialog/GenericDialog';
-import ImpressumButton from '../controlbuttons/ImpressumButton';
+import edumeetConfig from '../../utils/edumeetConfig';
 
 const HelpDialog = (): JSX.Element => {
 	const dispatch = useAppDispatch();
@@ -17,24 +17,41 @@ const HelpDialog = (): JSX.Element => {
 		}));
 	};
 
+	const privacyUrl = edumeetConfig.privacyUrl ?? '';
+	const imprintUrl = edumeetConfig.imprintUrl ?? '';
+
 	return (
 		<GenericDialog
 			open={ helpOpen }
 			onClose={ handleCloseHelp }
 			maxWidth='xs'
-			content={ <><ShortcutKeys /><ImpressumButton /></> }
+			content={ <><ShortcutKeys /></> }
 			actions={
-				<Button
-					onClick={ handleCloseHelp }
-					startIcon={ <Close /> }
-					variant='contained'
-					size='small'
-				>
-					{ closeLabel() }
-				</Button>
+				<Box display="flex" alignItems="center" justifyContent="space-between" width="100%">
+					<Box display="flex" alignItems="left">
+						{imprintUrl.trim() !== '' && (
+							<Link href={imprintUrl} target="_blank" color="inherit" underline="none">
+								<Typography variant="body2">{ imprintLabel() }</Typography>
+							</Link>
+						)}
+						{privacyUrl.trim() !== '' && (
+							<Link href={privacyUrl} target="_blank" color="inherit" underline="none" style={{ marginLeft: '16px' }}>
+								<Typography variant="body2">{ privacyLabel() }</Typography>
+							</Link>
+						)}
+					</Box>
+					<Button
+						onClick={ handleCloseHelp }
+						startIcon={ <Close /> }
+						variant='contained'
+						size='small'
+					>
+						{ closeLabel() }
+					</Button>
+				</Box>
 			}
 		/>
 	);
 };
 
-export default HelpDialog;
+export default HelpDialog;
diff --git a/src/components/translated/translatedComponents.tsx b/src/components/translated/translatedComponents.tsx
@@ -772,3 +772,13 @@ export const roomServerConnectionError = (message: string): string => intl.forma
 	id: 'svc.roomServerConnectionError',
 	defaultMessage: `Room-server: ${message}`
 });
+
+export const imprintLabel = (): string => intl.formatMessage({
+	id: 'label.imprint',
+	defaultMessage: 'Imprint'
+});
+
+export const privacyLabel = (): string => intl.formatMessage({
+	id: 'label.privacy',
+	defaultMessage: 'Privacy'
+});
diff --git a/src/translations/de.json b/src/translations/de.json
@@ -59,6 +59,7 @@
   "label.fullscreen": "Vollbild",
   "label.guest": null,
   "label.high": "Hoch (HD)",
+  "label.imprint": "Impressum",
   "label.italic": "kursiv",
   "label.join": "Eintreten",
   "label.joinBreakoutRoom": null,
@@ -77,6 +78,7 @@
   "label.openSettings": null,
   "label.participants": "Teilnehmer",
   "label.password": "Passwort",
+  "label.privacy": "Datenschutz",
   "label.promoteAllPeers": "Alle Teilnehmer reinlassen",
   "label.recordingInProgress": "Aufnahme läuft...",
   "label.removeBreakoutRoom": null,

diff --git a/src/utils/types.tsx b/src/utils/types.tsx
@@ -3,7 +3,6 @@ import { TFLite } from '../services/effectsService';
 
 export const defaultEdumeetConfig: EdumeetConfig = {
 	managementUrl: undefined,
-	impressumUrl: '/privacy/privacy.html',
 	p2penabled: false,
 	loginEnabled: false,
 	developmentPort: 8443,
@@ -92,12 +91,13 @@ export const defaultEdumeetConfig: EdumeetConfig = {
 		sideContentItemDarkColor: 'rgba(150, 150, 150, 0.4)',
 		sideContainerBackgroundColor: 'rgba(255, 255, 255, 0.7)',
 	},
-	reduxLoggingEnabled: false
+	reduxLoggingEnabled: false,
+	imprintUrl: '',
+	privacyUrl: ''
 };
 
 export interface EdumeetConfig {
 	managementUrl?: string;
-	impressumUrl: string;
 	p2penabled: boolean;
 	loginEnabled: boolean;
 	developmentPort: number;
@@ -133,6 +133,8 @@ export interface EdumeetConfig {
 	transcriptionEnabled: boolean;
 	theme: ThemeOptions;
 	reduxLoggingEnabled: boolean;
+	imprintUrl: string;
+	privacyUrl: string;
 }
 
 export interface HTMLMediaElementWithSink extends HTMLMediaElement {

diff --git a/src/views/join/Join.tsx b/src/views/join/Join.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
-import { Button } from '@mui/material';
+import { Button, Box, Link, Typography } from '@mui/material';
 import TextInputField from '../../components/textinputfield/TextInputField';
 import { useAppDispatch, useAppSelector, useNotifier } from '../../store/hooks';
-import { joinLabel, yourNameLabel } from '../../components/translated/translatedComponents';
+import { joinLabel, yourNameLabel, imprintLabel, privacyLabel } from '../../components/translated/translatedComponents';
 import { AccountCircle } from '@mui/icons-material';
 import MediaPreview from '../../components/mediapreview/MediaPreview';
 import AudioInputChooser from '../../components/devicechooser/AudioInputChooser';
@@ -18,9 +18,11 @@ import { meActions } from '../../store/slices/meSlice';
 import AudioOutputChooser from '../../components/devicechooser/AudioOutputChooser';
 import { canSelectAudioOutput } from '../../store/selectors';
 import TestAudioOutputButton from '../../components/audiooutputtest/AudioOutputTest';
+import edumeetConfig from '../../utils/edumeetConfig';
 import ImpressumButton from '../../components/controlbuttons/ImpressumButton';
 import MicVolume from '../../components/volume/MicVolume';
 
+
 interface JoinProps {
 	roomId: string;
 }
@@ -62,6 +64,9 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 		}
 	}, []);
 
+	const privacyUrl = edumeetConfig.privacyUrl ?? '';
+	const imprintUrl = edumeetConfig.imprintUrl ?? '';
+
 	return (
 		<GenericDialog
 			title={ <PrecallTitle /> }
@@ -87,15 +92,28 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 				</>
 			}
 			actions={
-				<><ImpressumButton /><Button
-					onClick={handleJoin}
-					variant='contained'
-					disabled={!displayName || joinInProgress || mediaLoading}
-					size='small'
-				>
-					{joinLabel()}
-				</Button></>
-
+				<Box display="flex" alignItems="center" justifyContent="space-between" width="100%">
+					<Box display="flex" alignItems="left">
+						{imprintUrl.trim() !== '' && (
+							<Link href={imprintUrl} target="_blank" color="inherit" underline="none">
+								<Typography variant="body2">{ imprintLabel() }</Typography>
+							</Link>
+						)}
+						{privacyUrl.trim() !== '' && (
+							<Link href={privacyUrl} target="_blank" color="inherit" underline="none" style={{ marginLeft: '16px' }}>
+								<Typography variant="body2">{ privacyLabel() }</Typography>
+							</Link>
+						)}
+					</Box>
+					<Button
+						onClick={handleJoin}
+						variant='contained'
+						disabled={!displayName || joinInProgress || mediaLoading}
+						size='small'
+					>
+						{ joinLabel() }
+					</Button>
+				</Box>
 			}
 		/>
 	);

diff --git a/src/views/landingpage/LandingPage.tsx b/src/views/landingpage/LandingPage.tsx
@@ -1,14 +1,13 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Container } from '@mui/material';
+import { Button, Container, Box, Link, Typography } from '@mui/material';
 import randomString from 'random-string';
 import TextInputField from '../../components/textinputfield/TextInputField';
-import { joinLabel, roomNameLabel } from '../../components/translated/translatedComponents';
+import { joinLabel, roomNameLabel, imprintLabel, privacyLabel } from '../../components/translated/translatedComponents';
 import GenericDialog from '../../components/genericdialog/GenericDialog';
 import StyledBackground from '../../components/StyledBackground';
 import PrecallTitle from '../../components/precalltitle/PrecallTitle';
 import { QRCode } from 'react-qrcode-logo';
-import ImpressumButton from '../../components/controlbuttons/ImpressumButton';
 import edumeetConfig from '../../utils/edumeetConfig';
 
 const LandingPage = (): JSX.Element => {
@@ -17,6 +16,9 @@ const LandingPage = (): JSX.Element => {
 	const [ roomId, setRoomId ] = useState(randomizeOnBlank ? randomString({ length: 8 }).toLowerCase() : '');
 	const onClicked = () => navigate(`/${roomId}`);
 
+	const privacyUrl = edumeetConfig.privacyUrl ?? '';
+	const imprintUrl = edumeetConfig.imprintUrl ?? '';
+
 	return (
 		<StyledBackground>
 			<GenericDialog
@@ -36,15 +38,28 @@ const LandingPage = (): JSX.Element => {
 
 				}
 				actions={
-					<><ImpressumButton />
+					<Box display="flex" alignItems="center" justifyContent="space-between" width="100%">
+						<Box display="flex" alignItems="left">
+							{imprintUrl.trim() !== '' && (
+								<Link href={imprintUrl} target="_blank" color="inherit" underline="none">
+									<Typography variant="body2">{ imprintLabel() }</Typography>
+								</Link>
+							)}
+							{privacyUrl.trim() !== '' && (
+								<Link href={privacyUrl} target="_blank" color="inherit" underline="none" style={{ marginLeft: '16px' }}>
+									<Typography variant="body2">{ privacyLabel() }</Typography>
+								</Link>
+							)}
+						</Box>
 						<Button
 							onClick={onClicked}
 							variant='contained'
 							disabled={!roomId}
 							size='small'
 						>
 							{ joinLabel()}
-						</Button></>
+						</Button>
+					</Box>
 				}
 			/>
 

diff --git a/src/views/lobby/Lobby.tsx b/src/views/lobby/Lobby.tsx
@@ -1,11 +1,12 @@
 import { AccountCircle } from '@mui/icons-material';
+import { Box, Link, Typography } from '@mui/material';
 import { useState } from 'react';
 import AudioInputChooser from '../../components/devicechooser/AudioInputChooser';
 import VideoInputChooser from '../../components/devicechooser/VideoInputChooser';
 import MediaPreview from '../../components/mediapreview/MediaPreview';
 import GenericDialog from '../../components/genericdialog/GenericDialog';
 import TextInputField from '../../components/textinputfield/TextInputField';
-import { roomLockedLabel, yourNameLabel } from '../../components/translated/translatedComponents';
+import { roomLockedLabel, yourNameLabel, imprintLabel, privacyLabel } from '../../components/translated/translatedComponents';
 import { setDisplayName } from '../../store/actions/meActions';
 import {
 	useAppDispatch,
@@ -17,6 +18,7 @@ import { ChooserDiv } from '../../components/devicechooser/DeviceChooser';
 import AudioOutputChooser from '../../components/devicechooser/AudioOutputChooser';
 import { canSelectAudioOutput } from '../../store/selectors';
 import TestAudioOutputButton from '../../components/audiooutputtest/AudioOutputTest';
+import edumeetConfig from '../../utils/edumeetConfig';
 
 const Lobby = (): React.JSX.Element => {
 	useNotifier();
@@ -32,6 +34,9 @@ const Lobby = (): React.JSX.Element => {
 		));
 	};
 
+	const privacyUrl = edumeetConfig.privacyUrl ?? '';
+	const imprintUrl = edumeetConfig.imprintUrl ?? '';
+
 	return (
 		<GenericDialog
 			title={ <PrecallTitle /> }
@@ -53,9 +58,25 @@ const Lobby = (): React.JSX.Element => {
 					</ChooserDiv>
 				</>
 			}
-			actions={roomLockedLabel()}
+			actions={
+				<Box display="flex" flexDirection="column" alignItems="center" justifyContent="space-between" width="100%">
+					{roomLockedLabel()}
+					<Box display="flex" alignItems="left">
+						{imprintUrl.trim() !== '' && (
+							<Link href={imprintUrl} target="_blank" color="inherit" underline="none">
+								<Typography variant="body2">{ imprintLabel() }</Typography>
+							</Link>
+						)}
+						{privacyUrl.trim() !== '' && (
+							<Link href={privacyUrl} target="_blank" color="inherit" underline="none" style={{ marginLeft: '16px' }}>
+								<Typography variant="body2">{ privacyLabel() }</Typography>
+							</Link>
+						)}
+					</Box>
+				</Box>
+			}
 		/>
 	);
 };
 
-export default Lobby;
+export default Lobby;