sync back c

.github/workflows/build.yml

@@ -70,7 +70,7 @@ jobs:
                   branch: ${{env.BRANCH}}
                   force: true
                   tags: true
-            - uses: actions/upload-artifact@v2
+            - uses: actions/upload-artifact@v4
               if: failure()
               with:
                   name: cypress-videos

.github/workflows/dockerImage.yml

@@ -58,7 +58,7 @@ jobs:
                   echo "127.0.0.1 localhost" | sudo tee -a /etc/hosts
                   echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf
                   npm run test:build
-            - uses: actions/upload-artifact@v2
+            - uses: actions/upload-artifact@v4
               with:
                   name: buildfiles
                   path: build/**/*
@@ -86,7 +86,7 @@ jobs:
         steps:
             - uses: actions/checkout@v4
             - name: Download buildfiles artifact
-              uses: actions/download-artifact@v2
+              uses: actions/download-artifact@v4
               with:
                   name: buildfiles
                   path: build

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@onlineberatung/onlineberatung-frontend",
 	"title": "Online-Beratung",
-	"version": "2.9.14",
+	"version": "2.9.18",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/onlineberatung/onlineberatung-frontend.git"

public/releases/releases.json

@@ -1,6 +1 @@
-{
-	"19700101001": {
-		"title": "Beispiel #1",
-		"file": "19700101001.md"
-	}
-}
+{}

src/components/message/MessageAttachment.tsx

@@ -6,7 +6,7 @@ import {
 import { ReactComponent as DownloadIcon } from '../../resources/img/icons/download.svg';
 import { useTranslation } from 'react-i18next';
 import { apiUrl } from '../../resources/scripts/endpoints';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { FETCH_METHODS, fetchData } from '../../api';
 import {
 	decryptAttachment,
@@ -54,6 +54,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 	const [attachmentStatus, setAttachmentStatus] = React.useState(
 		props.t === 'e2e' ? ENCRYPTED : NOT_ENCRYPTED
 	);
+	const currentDownloadLink = useRef<any>();
 
 	const decryptFile = useCallback(
 		async (url: string) => {
@@ -151,6 +152,18 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 		return null;
 	}, []);
 
+	const attachmentAriaLabel = () => {
+		if (
+			props.t === 'e2e' &&
+			encryptedFile &&
+			attachmentStatus === DECRYPTION_FINISHED
+		)
+			return translate('e2ee.attachment.save');
+		else if (props.t === 'e2e' && attachmentStatus !== DECRYPTION_FINISHED)
+			return translate(`e2ee.attachment.${attachmentStatus}`);
+		else return translate('attachments.download.label');
+	};
+
 	return (
 		<div
 			className={
@@ -159,7 +172,11 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 					: ''
 			}
 		>
-			<div className="messageItem__message__attachment">
+			<button
+				aria-label={attachmentAriaLabel()}
+				onClick={() => currentDownloadLink.current.click()}
+				className="messageItem__message__attachment"
+			>
 				<span className="messageItem__message__attachment__icon">
 					{attachmentStatus === IS_DECRYPTING ? (
 						<LoadingSpinner />
@@ -198,12 +215,13 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 							: null}
 					</p>
 				</span>
-			</div>
+			</button>
 			{props.t === 'e2e' && (
 				<>
 					{encryptedFile &&
 					attachmentStatus === DECRYPTION_FINISHED ? (
 						<a
+							ref={currentDownloadLink}
 							href={encryptedFile}
 							download={props.file.name}
 							rel="noopener noreferer"
@@ -217,6 +235,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 						</a>
 					) : (
 						<button
+							ref={currentDownloadLink}
 							onClick={() =>
 								decryptFile(
 									apiUrl + props.attachment.title_link
@@ -242,6 +261,7 @@ export const MessageAttachment = (props: MessageAttachmentProps) => {
 			)}
 			{props.t !== 'e2e' && (
 				<a
+					ref={currentDownloadLink}
 					href={apiUrl + props.attachment.title_link}
 					rel="noopener noreferer"
 					className="messageItem__message__attachment__download"

src/components/message/message.styles.scss

@@ -217,9 +217,11 @@ $message-attachment-color: $secondary !default;
 			align-items: center;
 			background-color: $dark-grey;
 			border-radius: $icon-size;
+			border: none;
 			color: $message-attachment-color;
 			padding: 6px $grid-base-three 5px 12px;
 			max-width: 350px;
+			cursor: pointer;
 
 			&__icon svg {
 				* {
@@ -241,7 +243,7 @@ $message-attachment-color: $secondary !default;
 
 				p {
 					margin: 0;
-					color: var(--text-color-contrast-switch, $secondary);
+					color: var(--skin-color-default, $secondary);
 					line-height: $icon-size;
 					text-decoration: underline;
 
@@ -250,14 +252,11 @@ $message-attachment-color: $secondary !default;
 						color: var(--text-color-contrast-switch, $primary);
 						text-decoration: none;
 					}
-				}
-
-				&:hover p {
-					color: var(--text-color-contrast-switch, $primary);
-				}
 
-				svg * {
-					fill: var(--text-color-contrast-switch, $primary);
+					&:hover {
+						color: var(--skin-color-default, $secondary);
+						opacity: 0.8;
+					}
 				}
 			}
 

src/components/registration/welcomeScreen.styles.scss

@@ -50,7 +50,7 @@ $welcome-screen-button-text-align: center !default;
 		}
 
 		button {
-			min-width: 205px;
+			min-width: auto;
 			width: 100%;
 		}
 

src/containers/registration/components/ProposedAgencies/proposedAgencies.styles.scss

@@ -55,7 +55,7 @@ $infoIconSize: 16px;
 
 	&__inputContainer {
 		margin-top: $grid-base-three;
-		margin-left: 44px;
+		margin-left: 12px;
 
 		.inputField {
 			margin-top: 0;

src/extensions/components/legalInformationLinks/Imprint.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTenant } from '../../../..';
+import { LegalPageWrapper } from '../legalPageWrapper/LegalPageWrapper';
+import useDocumentTitle from '../../utils/useDocumentTitle';
+
+export const Imprint = () => {
+	const [t] = useTranslation();
+	const tenant = useTenant();
+	useDocumentTitle(t('profile.footer.imprint'));
+	return (
+		<LegalPageWrapper
+			content={tenant?.content?.impressum || t('profile.footer.imprint')}
+			className={'terms'}
+		/>
+	);
+};

src/extensions/components/legalInformationLinks/Privacy.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTenant } from '../../../..';
+import { LegalPageWrapper } from '../legalPageWrapper/LegalPageWrapper';
+import useDocumentTitle from '../../utils/useDocumentTitle';
+
+export const Privacy = () => {
+	const [t] = useTranslation();
+	const tenant = useTenant();
+	useDocumentTitle(t('profile.footer.dataprotection'));
+	return (
+		<LegalPageWrapper
+			content={
+				tenant?.content?.privacy || t('profile.footer.dataprotection')
+			}
+			className={'terms'}
+		/>
+	);
+};

src/extensions/components/legalInformationLinks/TermsAndConditions.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTenant } from '../../../..';
+
+import { LegalPageWrapper } from '../legalPageWrapper/LegalPageWrapper';
+import useDocumentTitle from '../../utils/useDocumentTitle';
+
+export const TermsAndConditions = () => {
+	const [t] = useTranslation();
+	const tenant = useTenant();
+	useDocumentTitle(t('legal.termsAndConditions.label'));
+	return (
+		<LegalPageWrapper
+			content={
+				tenant?.content?.termsAndConditions ||
+				t('legal.termsAndConditions.label')
+			}
+			className="terms"
+		/>
+	);
+};

src/extensions/components/legalPageWrapper/LegalPageWrapper.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import * as React from 'react';
+
+import { Stage } from '../stage/stage';
+import htmlParser from '../../resources/scripts/util/htmlParser';
+import './legalPageWrapper.styles.scss';
+
+export interface LegalPageWrapperProps {
+	className?: string;
+	content: string;
+}
+export const LegalPageWrapper = ({
+	className,
+	content
+}: LegalPageWrapperProps) => {
+	return (
+		<div className={clsx('legalPageWrapper stageLayout', className)}>
+			<Stage className="stageLayout__stage" />
+			<div className={clsx('stageLayout__content', className)}>
+				<section className="template">
+					{typeof content === 'string' && htmlParser(content)}
+				</section>
+			</div>
+		</div>
+	);
+};

src/extensions/components/legalPageWrapper/legalPageWrapper.styles.scss

@@ -0,0 +1,42 @@
+.legalPageWrapper {
+	@include breakpoint($fromLarge) {
+		.stage {
+			display: flex;
+		}
+	}
+
+	.template {
+		h2 + p,
+		h3 + p,
+		h4 + p {
+			margin-top: 0.3rem;
+		}
+		ol {
+			counter-reset: item;
+			li {
+				display: block;
+			}
+
+			li::before {
+				content: counters(item, '.') '. ';
+				counter-increment: item;
+				font-weight: bold;
+			}
+
+			ol {
+				counter-reset: item;
+			}
+		}
+	}
+
+	.stageLayout__content {
+		align-items: flex-start;
+		justify-content: flex-start;
+		padding-top: 120px;
+
+		@include breakpoint($fromLarge) {
+			width: calc(60vw - 160px);
+			left: calc(40vw + 80px);
+		}
+	}
+}