City-of-Helsinki · klempine · Jun 4, 2020 · May 19, 2020 · May 19, 2020 · May 19, 2020
diff --git a/.env b/.env
@@ -7,5 +7,5 @@ REACT_APP_OIDC_SCOPE="openid profile $REACT_APP_PROFILE_AUDIENCE"
 REACT_APP_SENTRY_DSN="https://8b5b23e2171b42cd8617e2b1ad7353b6@sentry.hel.ninja/63"
 REACT_APP_VERSION=$npm_package_version
 TRANSLATION_LANGUAGES=en,fi,sv
-TRANSLATIONS_SHEET_ID=1Q5LfG2wC_vxsoK0Ko-J1npWzY-96QQCERqMpvA0s9hg
+TRANSLATIONS_SHEET_ID=1Ky-E1nJ_pRUYMoORobahOJ_IWucfL7kirBBLiA6r8zs
 TRANSLATION_PROJECT_NAME=open-city-profile
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -35,7 +35,7 @@ build-production:
     DOCKER_IMAGE_NAME: "$CI_PROJECT_NAME-production"
     DOCKER_BUILD_ARG_REACT_APP_ENVIRONMENT: 'production'
     DOCKER_BUILD_ARG_REACT_APP_OIDC_AUTHORITY: "https://api.hel.fi/sso/"
-    DOCKER_BUILD_ARG_REACT_APP_PROFILE_GRAPHQL: "https://profiili-api.prod.kuva.hel.ninja/graphql/"
+    DOCKER_BUILD_ARG_REACT_APP_PROFILE_GRAPHQL: "https://api.hel.fi/profiili/graphql/"
   only:
     refs:
       - master

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-city-profile-ui",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "license": "MIT",
   "private": true,
   "dependencies": {
@@ -11,30 +11,35 @@
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/file-saver": "^2.0.1",
     "@types/jest": "24.0.19",
+    "@types/lodash": "^4.14.153",
     "@types/node": "12.11.5",
     "@types/react": "16.9.9",
     "@types/react-dom": "16.9.2",
     "@types/react-helmet": "^6.0.0",
     "@types/react-modal": "^3.10.1",
     "@types/react-redux": "^7.1.5",
     "@types/react-router-dom": "^5.1.0",
+    "@types/validator": "^13.0.0",
     "@types/yup": "^0.26.24",
     "apollo-boost": "^0.4.4",
     "classnames": "^2.2.6",
     "date-fns": "^2.9.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
+    "file-saver": "^2.0.2",
     "formik": "^2.0.4",
     "graphql": "^14.5.8",
     "graphql.macro": "^1.4.2",
-    "hds-core": "0.6.3",
-    "hds-design-tokens": "0.2.0",
-    "hds-react": "0.7.2",
+    "hds-core": "0.11.1",
+    "hds-design-tokens": "0.11.1",
+    "hds-react": "0.11.1",
     "i18n-iso-countries": "^5.3.0",
     "i18next": "^17.3.0",
     "i18next-browser-languagedetector": "^4.0.1",
+    "lodash": "^4.17.15",
     "oidc-client": "^1.9.1",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
@@ -48,6 +53,7 @@
     "redux-oidc": "^3.1.5",
     "redux-starter-kit": "^1.0.0",
     "typescript": "^3.7.3",
+    "validator": "^13.0.0",
     "yup": "^0.27.0"
   },
   "scripts": {

diff --git a/public/silent_renew.html b/public/silent_renew.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.10.1/oidc-client.min.js"></script>
+<script>
+  var mgr = new Oidc.UserManager();
+  mgr.signinSilentCallback().catch(error => {
+    console.error('silent_renew.html error', error);
+  });
+</script></body>
+</html>
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { MemoryRouter } from 'react-router';
 
 import App from './App';
 
 it('renders without crashing', () => {
-  shallow(<App />);
+  shallow(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  );
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { Switch, Route } from 'react-router';
 import { ApolloProvider } from '@apollo/react-hooks';
 import { Provider as ReduxProvider } from 'react-redux';
@@ -18,9 +19,11 @@ import OidcCallback from './auth/components/oidcCallback/OidcCallback';
 import Profile from './profile/components/profile/Profile';
 import { fetchApiTokenThunk } from './auth/redux';
 import ProfileDeleted from './profile/components/profileDeleted/ProfileDeleted';
+import AccessibilityStatement from './accessibilityStatement/AccessibilityStatement';
 import { MAIN_CONTENT_ID } from './common/constants';
 import AccessibilityShortcuts from './common/accessibilityShortcuts/AccessibilityShortcuts';
 import AppMeta from './AppMeta';
+import authenticate from './auth/authenticate';
 
 countries.registerLocale(fi);
 countries.registerLocale(en);
@@ -51,6 +54,12 @@ if (process.env.REACT_APP_ENVIRONMENT !== 'production') {
 type Props = {};
 
 function App(props: Props) {
+  const location = useLocation();
+
+  if (location.pathname === '/loginsso') {
+    authenticate();
+  }
+
   return (
     <ReduxProvider store={store}>
       <OidcProvider store={store} userManager={userManager}>
@@ -60,13 +69,6 @@ function App(props: Props) {
             {/* This should be the first focusable element */}
             <AccessibilityShortcuts mainContentId={MAIN_CONTENT_ID} />
             <Switch>
-              <Route
-                path="/silent_renew"
-                render={() => {
-                  userManager.signinSilentCallback();
-                  return null;
-                }}
-              />
               <Route path="/callback">
                 <OidcCallback />
               </Route>
@@ -79,9 +81,13 @@ function App(props: Props) {
               >
                 <Profile />
               </Route>
+              <Route path="/accessibility">
+                <AccessibilityStatement />
+              </Route>
               <Route path="/profile-deleted" exact>
                 <ProfileDeleted />
               </Route>
+              <Route path="/loginsso" exact />
               <Route path="*">404 - not found</Route>
             </Switch>
           </MatomoProvider>

diff --git a/src/accessibilityStatement/AccessibilityStatement.module.css b/src/accessibilityStatement/AccessibilityStatement.module.css
@@ -0,0 +1,53 @@
+.pageWrapper {
+    min-height: 100vh;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    margin: var(--spacing-layout-xs) var(--spacing-layout-2-xs) 0;
+    width: auto;
+    flex: 1 0 auto;
+}
+
+.innerWrapper {
+    width: auto;
+    margin-left: var(--spacing-xs);
+    margin-bottom: var(--spacing-layout-m);
+}
+
+
+.innerWrapper p {
+    margin: var(--spacing-layout-2-xs) 0;
+}
+
+.innerWrapper h1 {
+    font-size: var(--fontsize-h-3);
+}
+
+.innerWrapper h2 {
+    margin-top: var(--spacing-layout-xs);
+    font-size: var(--fontsize-h-4);
+}
+
+@media (min-width: 768px) {
+    .innerWrapper {
+        width: 768px;
+    }
+
+    .innerWrapper h1 {
+        font-size: var(--fontsize-h-2);
+    }
+
+    .innerWrapper h2 {
+        font-size: var(--fontsize-h-3);
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        margin: var(--spacing-layout-xs) auto 0;
+        width: 1130px;
+    }
+}
diff --git a/src/accessibilityStatement/AccessibilityStatement.tsx b/src/accessibilityStatement/AccessibilityStatement.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './AccessibilityStatement.module.css';
+import Header from '../common/header/Header';
+import Footer from '../common/footer/Footer';
+import AccessibilityStatementFi from './AccessibilityStatementFi';
+import AccessibilityStatementSv from './AccessibilityStatementSv';
+import AccessibilityStatementEn from './AccessibilityStatementEn';
+
+function AccessibilityStatement() {
+  const { i18n } = useTranslation();
+  const selectStatement = () => {
+    const lang =
+      i18n.languages[0].length > 2
+        ? i18n.languages[0].substr(0, 2)
+        : i18n.languages[0];
+
+    switch (lang) {
+      case 'fi':
+        return <AccessibilityStatementFi />;
+      case 'sv':
+        return <AccessibilityStatementSv />;
+      case 'en':
+        return <AccessibilityStatementEn />;
+      default:
+        return <div>Invalid language.</div>;
+    }
+  };
+
+  return (
+    <div className={styles.pageWrapper}>
+      <Header />
+      <div className={styles.container}>
+        <div className={styles.innerWrapper}>{selectStatement()}</div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default AccessibilityStatement;
diff --git a/src/accessibilityStatement/AccessibilityStatementEn.tsx b/src/accessibilityStatement/AccessibilityStatementEn.tsx
@@ -0,0 +1,89 @@
+import React, { Fragment } from 'react';
+
+function AccessibilityStatementEn() {
+  return (
+    <Fragment>
+      <h1>Accessibility Statement</h1>
+      <p>
+        This accessibility statement applies to the website Youth membership
+        registration. The site address is https://hel.fi/profiili
+      </p>
+      <h2>Statutory provisions applicable to the website</h2>
+      <p>
+        This website was published after 23 September 2018. The website must
+        fulfil statutory accessibility requirements.
+      </p>
+      <h2>The objective of the city</h2>
+      <p>
+        As regards the accessibility of digital services, Helsinki aims to reach
+        at least Level AA or above as set forth in the WCAG guidelines in so far
+        as is reasonably practical.
+      </p>
+      <h2>Compliance status</h2>
+      <p>
+        The accessibility compliance of this website has not yet been evaluated.
+      </p>
+      <h2>Preparing an accessibility statement</h2>
+      <p>This statement was prepared on 6.4.2020</p>
+      <h2>Updating the accessibility statement</h2>
+      <p>
+        The accessibility statement will be updated so that it corresponds with
+        the observations related to accessibility compliance made during an
+        audit.
+      </p>
+
+      <h2>Requesting information in an accessible format</h2>
+      <p>
+        If a user feels that content on a website is not available in an
+        accessible format, they can request for this information by e-mail at{' '}
+        <a href="mailto:helsinki.palaute@hel.fi">helsinki.palaute@hel.fi</a> or
+        through the feedback form at{' '}
+        <a href="https://www.hel.fi/feedback">www.hel.fi/feedback</a>. The aim
+        is to reply to the enquiry within a reasonable time frame.{' '}
+      </p>
+
+      <h2>Feedback and contact information</h2>
+      <p>
+        City Executive Office, Helsinki
+        <br />
+        <a href="tel:+35893101641">+358 9 310 1641</a>
+      </p>
+
+      <h2>The City of Helsinki and accessibility</h2>
+      <p>
+        The objective of the city of Helsinki is to be an accessible city to
+        all. Helsinki aims to ensure that all residents are able to move about
+        and act as effortlessly as possible and that all content and services
+        are accessible to all.
+      </p>
+
+      <p>
+        The city promotes accessibility of digital services by streamlining
+        publishing work and organising accessibility-related training for its
+        staff.
+      </p>
+      <p>
+        The accessibility level of websites is monitored constantly during their
+        maintenance. Immediate action will be taken if deficiencies are found.
+        The aim is to carry out the necessary amendments as quickly as possible.
+      </p>
+
+      <h2>The disabled and users of assistive technologies</h2>
+      <p>
+        The city provides counselling and support for the disabled and users of
+        assistive technologies. Support is available on guidance sites announced
+        on the city’s website and through telephone counselling.
+      </p>
+
+      <h2>Approval of the accessibility statement</h2>
+      <p>This statement was approved on 17.4.2020</p>
+      <p>
+        City Executive Office
+        <br />
+        City of Helsinki
+      </p>
+    </Fragment>
+  );
+}
+
+export default AccessibilityStatementEn;