Merge pull request #17 from ubigu/develop

Release

client/src/components/A11yStatement.tsx

@@ -0,0 +1,41 @@
+import { React } from 'react';
+
+export function A11yStatement() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center', width: '60%', margin: '36px' }}>
+      <h1> Saavutettavuusseloste </h1>
+      <p>Tämä saavutettavuusseloste koskee Ubigu Oy:n tarjoamaa Kartalla -sovellusta.</p>
+      <h2>Palvelun saavutettavuuden nykytila</h2>
+      <p>Palvelu täyttää kansainvälisen WCAG 2.1 saavutettavuussäädöksen tason AA-vaatimukset osittain. Palvelussa on pieniä puuttaita saavutettavuuteen liittyne, jotka on kuvattu alla. </p>
+      <h3> Puutteet saavutettavuudessa</h3>
+      <ul>
+        <li>
+          <p>
+            Responsiivisuusongelmia:
+            Palvelun käyttöliittymät ja toiminnallisuudet eivät toimi eri päätelaitteilla ja tuetlilla selaimilla kriteeristön asettamissa rajoissa. Erityisesti karttapohjaisissa kysymyksissä on runsaasti responsiivisuuteen liittyviä ongelmia. (WCAG 1.4.10 Responsiivisuus)
+          </p>
+        </li>
+        <li>
+          <p>
+            Heikkoja kontrasteja:
+            Palvelussa saattaa olla heikkoja kontrasteja kuvissa ja kartoissa, joita hyödynnetään kyselyissä. (WCAG 1.4.3 Kontrasti, minimi, 1.4.11 Ei-tekstimuotoisen sisällön kontrasti)
+          </p>
+        </li>
+        <li>
+          <p>
+            Liian pieni kosketusalue:
+            Mobiiliversiossa interaktiivisten elementtien kosketusalueet ovat liian pienet ja vaikeuttavat palvelun käyttämistä. (WCAG 3.2.1 Kohdistaminen)
+          </p>
+        </li>
+      </ul>
+      <h3> Lainsäädännön ulkopuoliset puutteet </h3>
+      <ul>
+        <li>
+          <p>
+            Kartat, joita ei ole tarkoitettu navigointikäyttöön (esimerkiksi sää- tai maastokartat)
+          </p>
+        </li>
+      </ul>
+    </div>
+  )
+}

client/src/components/Application.tsx

@@ -12,11 +12,13 @@ import TranslationProvider from '@src/stores/TranslationContext';
 import fiLocale from 'date-fns/locale/fi';
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { A11yStatement } from './A11yStatement';
 import Compose from './Compose';
+import { DataProtectionStatement } from './DataProtectionStatement';
 import { NotFoundPage } from './NotFoundPage';
-import './react-split-pane.css';
-import SurveyPage from './SurveyPage';
 import SurveyLanguageRouter from './SurveyLanguageRouter';
+import SurveyPage from './SurveyPage';
+import './react-split-pane.css';
 
 /** Application entry point wrapper component */
 const Application = () => {
@@ -39,6 +41,12 @@ const Application = () => {
         <BrowserRouter basename="/">
           <SurveyLanguageRouter />
           <Switch>
+            <Route path="/saavutettavuusseloste" exact>
+              <A11yStatement/>
+            </Route>
+            <Route path="/tietosuojaseloste" exact>
+              <DataProtectionStatement/>
+            </Route>
             <Route path="/:name" exact>
               <SurveyPage />
             </Route>

client/src/components/DataProtectionStatement.tsx

@@ -0,0 +1,27 @@
+import { React } from 'react';
+
+export function DataProtectionStatement() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'center', justifyContent: 'center', width: '60%', margin: '36px' }}>
+      <h1> Tietosuoja- ja tiedonhallintaselote </h1>
+      <p>Tämä tietosuoja- ja tiedonhallintaseloste koskee Ubigu Oy:n tarjoamaa Kartalla -sovellusta.</p>
+      <h2>1. Rekisterinpitäjä</h2>
+      <p> Ubigu Oy</p>
+
+      <h2>2. Henkilötiedot</h2>
+      <p>Web-sovellus ei kerää käyttäjien henkilötietoja automaattisesti. Henkilötietoja pyydetään ja käsitellään vain käyttäjän antaessa ne erikseen luvan esimerkiksi yhteydenottolomakkeen kautta. Tällöin kerättävät tiedot voivat sisältää nimen, sähköpostiosoitteen ja viestin sisällön.</p>
+
+      <h2>3. Tietojen käyttötarkoitus</h2>
+      <p>Kerätyt henkilötiedot käytetään ainoastaan käyttäjän yhteydenottopyynnön käsittelyyn. Tietoja ei käytetä markkinointiin eikä jaeta kolmansille osapuolille.</p>
+
+      <h2>4. Tietojen säilytys ja suojaus</h2>
+      <p>Henkilötietoja säilytetään vain niin kauan kuin on tarpeen yhteydenottopyynnön käsittelyyn. Tietoja suojataan asianmukaisesti teknisin ja organisatorisin toimenpitein.</p>
+
+      <h2>5. Käyttäjän oikeudet</h2>
+      <p>Käyttäjällä on oikeus tarkastaa häntä koskevat henkilötiedot, pyytää niiden oikaisua tai poistoa sekä vastustaa tietojen käsittelyä. Pyynnöt tulee lähettää web-sovelluksen ylläpitäjälle.</p>
+
+      <h2>6. Muutokset tietosuojaselosteeseen</h2>
+      <p>Web-sovelluksen ylläpitäjä pidättää oikeuden tehdä muutoksia tähän tietosuojaselosteeseen. Muutoksista ilmoitetaan web-sovelluksen sivuilla.</p>
+    </div>
+  )
+}

client/src/components/SurveyLandingPage.tsx

@@ -2,11 +2,11 @@ import { Survey } from '@interfaces/survey';
 import {
   Box,
   Button,
+  Link,
+  Stack,
   Theme,
   Typography,
-  Stack,
   useMediaQuery,
-  Link,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useTranslations } from '@src/stores/TranslationContext';
@@ -202,14 +202,14 @@ export default function SurveyLandingPage({
         }}
       >
         <Footer>
-          <Link color="primary" underline="hover" href="_blank" target="_blank">
+          <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
             {tr.FooterLinks.accessibility}
           </Link>
           {survey.displayPrivacyStatement && (
             <Link
               color="primary"
               underline="hover"
-              href="_blank"
+              href="/tietosuojaseloste"
               target="_blank"
             >
               {tr.FooterLinks.privacyStatement}

client/src/components/SurveyStepper.tsx

@@ -37,16 +37,16 @@ import { request } from '@src/utils/request';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import SplitPane from 'react-split-pane';
 import DocumentSection from './DocumentSection';
+import Footer from './Footer';
 import ImageSection from './ImageSection';
 import PageConnector from './PageConnector';
 import StepperControls from './StepperControls';
 import SubmissionInfoDialog from './SubmissionInfoDialog';
+import { SurveyFollowUpSections } from './SurveyFollowUpSections';
 import SurveyLanguageMenu from './SurveyLanguageMenu';
 import SurveyMap from './SurveyMap';
 import SurveyQuestion from './SurveyQuestion';
 import TextSection from './TextSection';
-import { SurveyFollowUpSections } from './SurveyFollowUpSections';
-import Footer from './Footer';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -595,11 +595,11 @@ export default function SurveyStepper({
         </Stepper>
       </main>
       <Footer>
-        <Link color="primary" underline="hover" href="_blank" target="_blank">
+        <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
           {tr.FooterLinks.accessibility}
         </Link>
         {survey.displayPrivacyStatement && (
-          <Link color="primary" underline="hover" href="_blank" target="_blank">
+          <Link color="primary" underline="hover" href="/tietosuojaseloste" target="_blank">
             {tr.FooterLinks.privacyStatement}
           </Link>
         )}

client/src/components/SurveyThanksPage.tsx

@@ -1,12 +1,12 @@
 import { Survey } from '@interfaces/survey';
 import {
-  Typography,
+  Box,
+  Link,
+  Stack,
   SxProps,
   Theme,
-  Box,
+  Typography,
   useMediaQuery,
-  Stack,
-  Link,
 } from '@mui/material';
 import { useImageHeaderQuery } from '@src/hooks/UseImageHeaderQuery';
 import { useTranslations } from '@src/stores/TranslationContext';
@@ -144,14 +144,14 @@ export default function SurveyThanksPage({ survey, isTestSurvey }: Props) {
         }}
       >
         <Footer>
-          <Link color="primary" underline="hover" href="_blank" target="_blank">
+          <Link color="primary" underline="hover" href="/saavutettavuusseloste" target="_blank">
             {tr.FooterLinks.accessibility}
           </Link>
           {survey.displayPrivacyStatement && (
             <Link
               color="primary"
               underline="hover"
-              href="_blank"
+              href="/tietosuojaseloste"
               target="_blank"
             >
               {tr.FooterLinks.privacyStatement}