feat: display environment infotext (#299)

* add environment info text * inserted new line in environment text * changed sie to Sie * role for poc-nat-admin * fix build * remove any workaround * Update routing.component.tsx Co-authored-by: fOppenheimer <[email protected]>
corona-warn-app · Apr 20, 2022 · 0d8be45 · 0d8be45
1 parent 4e44127
commit 0d8be45
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -5,19 +5,20 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@react-keycloak/web": "^3.4.0",
+    "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/crypto-js": "^4.0.1",
     "@types/file-saver": "^2.0.2",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/qrcode.react": "^1.0.1",
     "@types/react": "^17.0.0",
     "@types/react-datepicker": "^4.3.4",
     "@types/react-dom": "^17.0.0",
     "@types/react-pdf": "^5.0.2",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/qrcode.react": "^1.0.1",
     "@types/uuid": "^8.3.0",
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
@@ -27,26 +28,32 @@
     "husky": "^5.1.3",
     "i18next": "^19.9.2",
     "i18next-resource-store-loader": "^0.1.2",
+    "jquery": "1.9.1",
     "keycloak-js": "^12.0.4",
     "lint-staged": "^10.5.4",
     "moment": "^2.29.1",
+    "popper.js": "1.16.1",
     "prettier": "^2.2.1",
-    "qrcode.react": "^1.0.1",
-    "react": "^17.0.1",
+    "prop-types": "15.7.0",
+    "qrcode.react": "^1.0.0",
+    "react": "^17.0.0",
     "react-bootstrap": "^1.5.2",
     "react-datepicker": "^4.6.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.0",
     "react-i18next": "^11.8.10",
     "react-moment": "^1.1.1",
     "react-pdf": "^5.2.0",
     "react-qr-reader": "^2.2.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.1",
     "react-scripts": "4.0.3",
     "sass": "^1.43.4",
     "typescript": "^4.1.2",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1"
   },
+  "resolutions": {
+    "@types/react": "17.0.43"
+  },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
       "prettier --write"
@@ -88,4 +95,4 @@
     "http-proxy-middleware": "^1.1.1",
     "https-proxy-agent": "^5.0.0"
   }
-}
+}
diff --git a/src/assets/SCSS/custom.scss b/src/assets/SCSS/custom.scss
@@ -61,8 +61,16 @@ hr {
 
 #qt-header {
     margin: 0;
-    padding: 1rem;
-    height: 84px;
+    padding: 1rem 1rem 0rem 1rem;
+    // height: 84px;
+    width: 100%;
+    text-align: center;
+    justify-content: center;
+}
+
+#qt-environment {
+    margin: 0;
+    padding: 0;
     width: 100%;
     text-align: center;
     justify-content: center;
@@ -211,11 +219,25 @@ hr {
     color: #757575;
 }
 
+#c19-logo {
+    width: 54px;
+    height: 54px;
+}
+
 .header-font {
     font-family: "TeleNeo";
     font-weight: bold;
     font-size: 26px;
     color: black;
+    white-space: pre-line;
+    line-height: 24px;
+}
+.environment-font {
+    font-family: "TeleNeo";
+    font-weight: bold;
+    font-size: 22px;
+    color: red;
+    white-space: pre-line;
 }
 
 // @media screen and (max-device-width: 480px) {
@@ -358,14 +380,14 @@ hr {
     position: inherit;
     width: 20px;
     height: 20px;
-    margin-top: 0.1rem;;
+    margin-top: 0.1rem;
 }
 .rdb-label {
     height: 20px;
     align-self: center;
     padding-left: 0.5rem;
 }
-.toast-container{
+.toast-container {
     display: flex;
     position: absolute;
     justify-content: center;
@@ -388,7 +410,6 @@ hr {
     background: #d4edda;
     padding: 0%;
     color: #155724;
-
 }
 
 .qt-notification-text {
@@ -493,12 +514,18 @@ td {
     text-decoration: underline !important;
     font-weight: bolder;
 }
-.disclaimer-text{
+.disclaimer-text {
     text-align: justify;
     white-space: pre-line;
     margin: 0%;
 }
-.speech-bubble{
+.environment-info-text {
+    width:100%;
+    text-align: center;
+    white-space: pre-line;
+    margin: 0%;
+}
+.speech-bubble {
     display: flex;
     align-self: baseline;
     margin-left: 0.1rem;
@@ -544,6 +571,6 @@ td {
 .btn-add-statistic-icon {
     padding: 0px;
     border: 0px;
-    width:24px;
-    height:24px;  
-}
+    width: 24px;
+    height: 24px;
+}
diff --git a/src/assets/i18n/de/translation.json b/src/assets/i18n/de/translation.json
@@ -154,5 +154,7 @@
   "enablePcr": "PoC-NAA-Test erlauben",
   "LP217198-3": "Antigen-Schnelltest",
   "LP6464-4": "PoC-NAA-Test",
-  "test-type": "Testtyp"
+  "test-type": "Testtyp",
+  "environment-info1": "<strong>Hinweis</strong>: Dies ist ein <strong>Schulungssystem</strong>.\nFür die Erfassung <strong>echter Patientendaten</strong> darf nur das <strong>Produktivsystem</strong> genutzt werden.\n Das <strong>Produktivsystem</strong> erreichen Sie unter ",
+  "environment-info-link": "https://schnelltestportal.de/qt"
 }
diff --git a/src/components/modals/group-modal.component.tsx b/src/components/modals/group-modal.component.tsx
@@ -353,7 +353,7 @@ const GroupModal = (props: any) => {
                                 maxLength={300}
                             />
 
-                            {utils.hasRole(keycloak, 'c19_quick_test_counter')
+                            {utils.hasRole(keycloak, 'c19_quick_test_poc_nat_admin')
                                 ?
                                 <FormGroupPermissionCkb controlId='formenablePcr' title={t('translation:enablePcr')}
                                     //label={t('translation:for-counter')}

diff --git a/src/components/modules/header.component.tsx b/src/components/modules/header.component.tsx
@@ -23,17 +23,19 @@ import React from 'react';
 import { Row, Image, Container, Navbar, NavDropdown, Nav } from 'react-bootstrap'
 
 import '../../i18n';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { useKeycloak } from '@react-keycloak/web';
 
 import useNavigation from '../../misc/useNavigation';
 import C19Logo from '../../assets/images/c-19_logo.png'
 import useLocalStorage from '../../misc/useLocalStorage';
+import { useHistory } from 'react-router-dom';
 
 const Header = (props: any) => {
 
     const navigation = useNavigation();
+    const history = useHistory();
     const { t } = useTranslation();
     const { keycloak } = useKeycloak();
 
@@ -68,11 +70,41 @@ const Header = (props: any) => {
 
             {/* user icon and user name */}
             <Row id='qt-header'>
-                <span className='header-font my-auto mx-1'>
-                    <Image src={C19Logo} />
-                    {t('translation:title')}{environmentName ? ' - ' + environmentName : ''}
+                <Image id='c19-logo' src={C19Logo} />
+                <span className='header-font my-auto mx-1 pt-1'>
+                    {t('translation:title')}
+                    {!environmentName
+                        ? <></>
+                        : <span className='environment-font my-auto mx-1'>
+                            {'\n' + environmentName}
+                        </span>
+                    }
                 </span>
+                {!(environmentName && history.location.pathname === navigation?.routes.root)
+                    ? <></>
+                    : < span className='environment-info-text py-3'>
+                        <Trans>
+                            {t('translation:environment-info1')}
+                            {<a
+                                href={t('translation:environment-info-link')}
+                                target='blank'
+                            >
+                                {t('translation:environment-info-link')}
+                            </a>}
+                            {'.'}
+                        </Trans>
+                    </span>
+                }
+
             </Row>
+            {/* {!environmentName
+                ? <></>
+                : <Row id='qt-environment'>
+                    <span className='header-font my-auto mx-1'>
+                        {environmentName}
+                    </span>
+                </Row>
+            } */}
             <Navbar id='user-container' >
                 <NavDropdown
                     className="nav-dropdown-title"
@@ -91,7 +123,7 @@ const Header = (props: any) => {
                     </Nav.Link>
                 </NavDropdown>
             </Navbar>
-        </Container>
+        </Container >
     )
 }
 

diff --git a/src/i18n.tsx b/src/i18n.tsx
@@ -29,7 +29,7 @@ i18n.use(initReactI18next).init({
   lng: 'de',
   resources: resBundle,
   fallbackLng: 'en',
-  debug: true,
+  debug: false,
   /* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */
   ns: ['translations'],
   defaultNS: 'translations',

diff --git a/src/routing.component.tsx b/src/routing.component.tsx
@@ -201,4 +201,4 @@ const Routing = () => {
     )
 }
 
-export default Routing;
+export default Routing;