Merge pull request #60 from InseeFr/develop

Develop

.github/workflows/build.yml

@@ -9,19 +9,19 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - name: Use Node.js 14C
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - run: yarn --frozen-lockfile
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - name: script download and install access-content
         run: |
          chmod +x ./scripts/getContent.sh
@@ -33,7 +33,7 @@ jobs:
       - run: yarn run test
       - run: yarn build
       - name: Upload build
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: build

.github/workflows/develop-release.yml

@@ -11,19 +11,19 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - name: Use Node.js 14C
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - run: yarn --frozen-lockfile
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - name: script download and install access-content
         run: |
          chmod +x ./scripts/getContent.sh
@@ -34,15 +34,15 @@ jobs:
       - run: yarn
       - run: yarn build
       - name: Upload build
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: build
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout current branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Get current version
         id: version
         uses: notiz-dev/github-action-json-property@release

.github/workflows/release.yml

@@ -11,19 +11,19 @@ jobs:
   install:
     runs-on: ubuntu-latest
     steps:
-      - name: Use Node.js 14C
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - run: yarn --frozen-lockfile
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
       - name: script download and install access-content
         run: |
          chmod +x ./scripts/getContent.sh
@@ -34,15 +34,15 @@ jobs:
       - run: yarn
       - run: yarn build
       - name: Upload build
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: build
           path: build
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout current branch
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Get current version
         id: version
         uses: notiz-dev/github-action-json-property@release
@@ -64,10 +64,10 @@ jobs:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Download build
         id: download
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
           name: build
           path: build

.gitignore

@@ -23,4 +23,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-yarn.lock*

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx
+FROM nginx:stable-alpine
 COPY build /usr/share/nginx/html
 RUN rm etc/nginx/conf.d/default.conf
 COPY nginx-coleman-promotion.conf etc/nginx/conf.d/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colempub",
-  "version": "1.0.2",
+  "version": "1.0.10",
   "dependencies": {
     "axios": "^0.19.2",
     "bootstrap": "^3.3.7",
@@ -22,7 +22,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/components/auth/component.js

@@ -7,11 +7,13 @@ import { getSurveyVerifMailById } from 'utils/read-content';
 import { getQuestionnaireUrl } from 'utils/api';
 import useAuth from 'utils/hook/auth';
 import NoSurveyPage from 'components/content/ineligible';
+import UnauthorizedPage from 'components/content/unauthorized';
 
 const Auth = ({ urlBackEnd, id, history, keycloakAuth }) => {
   const { loading, authenticated, authError } = useAuth(keycloakAuth);
   const [error, setError] = useState(null);
   const [ineligible, setIneligible] = useState(false);
+  const [unauthorized, setUnauthorized] = useState(false);
 
   const redirectToUrl = url => {
     window.location = url;
@@ -35,8 +37,11 @@ const Auth = ({ urlBackEnd, id, history, keycloakAuth }) => {
         setIneligible(true);
       }
     } catch (e) {
-      // including 410 status - no habilitation found
-      setError('technique');
+      if (e.response.status === 401 || e.response.status === 403 || e.response.status === 404) {
+        setUnauthorized(true);
+      } else {
+        setError('technique');
+      }
     }
   }, [history, id, urlBackEnd, keycloakAuth]);
 
@@ -50,6 +55,7 @@ const Auth = ({ urlBackEnd, id, history, keycloakAuth }) => {
       {loading && <Loading id={id} />}
       {error && <ErrorComponent error={error} />}
       {ineligible && <NoSurveyPage id={id} />}
+      {unauthorized && <UnauthorizedPage id={id} />}
     </>
   );
 };

src/components/content/faq/component.js

@@ -31,9 +31,11 @@ class Faq extends Component {
     const { itemDisplayed } = this.state;
     return (
       <section>
-        <h2>{`Questions générales`}</h2>
+        {faqData.filter(f => f.type === 'general' && f.body !== undefined).length > 0 && (
+          <h2>{`Questions générales`}</h2>
+        )}
         {faqData.map(({ id, title, body, type }) =>
-          type === 'general' ? (
+          type === 'general' && body !== undefined ? (
             <FaqItem
               id={id}
               key={`faq-item-${id}`}

src/components/content/unauthorized.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { getUnauthorizedText } from 'utils/read-content';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const UnauthorizedPage = ({ id }) => {
+  return (
+    <>
+      <div className="no-survey">
+        <section>
+          <p>
+            <ReactMarkdown source={getUnauthorizedText()} linkTarget="_blank" />
+            {` En cas de difficultés, vous pouvez `}
+            <Link to={`/${id}/contacter-assistance`}>{`contacter l'assistance`}</Link>
+          </p>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default UnauthorizedPage;
+UnauthorizedPage.propTypes = {
+  id: PropTypes.string.isRequired,
+};

src/components/forms/assistance-form.js

@@ -146,6 +146,7 @@ class AssistanceForm extends React.Component {
     const formData = {
       auth,
       idue: auth ? params.get('idue') : '',
+      questioningId: auth ? params.get('questioningId') : '',
       name: formControls.name.value,
       idec: formControls.idec.value,
       phonenumber: formControls.phonenumber.value,

src/components/home.js

@@ -6,7 +6,7 @@ import SurveyItem from 'components/template/survey-item';
 
 const Home = () => (
   <div id="main">
-    <Banner title={`Portail de réponse aux enquêtes de la statistique publique`} />
+    <Banner title={`Portail de réponse\r\n aux enquêtes de la statistique publique`} />
 
     <div className="row">
       <div className="col-md-12 text-justify">

src/components/template/response-button.js

@@ -14,7 +14,7 @@ const ResponseButton = ({ id }) => (
         <button
           type="button"
           className="btn btn-lg"
-          id="boutonRepondre"
+          id="accessButton"
           disabled={!getIsSurveyOnlineById(id)}
         >
           {'Accéder au questionnaire'}

src/components/template/survey-item.js

@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
 
 const SurveyItem = ({ survey }) => (
   <div className="survey-item">
-    <Link to={`/${survey.id}`} tabIndex="-1">
-      <button type="button" className="btn btn-lg" id="boutonRepondre">
+    <Link to={`/${survey.id}`} tabIndex="-1" className='survey-item-link'>
+      <button type="button" className="btn" id="boutonRepondre">
         <span>{survey.titleShort}</span>
         <br />
         {`${window.location.host}/${survey.id}`}

src/index.scss

@@ -94,8 +94,27 @@ h2 {
 .btn-md {
   margin-right: 10px;
 }
+
+#survey-item-link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+#boutonRepondre {
+  display: flex;
+  flex-direction: column;
+  white-space: inherit;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  word-wrap: break-word;
+}
+
 #menuItemRepondre,
 #boutonRepondre,
+#accessButton,
 #boutonMailConfirm,
 #boutonMailModif,
 #formSend,
@@ -105,10 +124,12 @@ h2 {
 }
 #menuItemRepondre:hover,
 #boutonRepondre:hover,
+#accessButton:hover,
 #boutonMailConfirm:hover,
 #boutonMailModif:hover,
 #menuItemRepondre:focus,
 #boutonRepondre:focus,
+#accessButton:focus,
 #boutonMailConfirm:focus,
 #boutonMailModif:focus,
 #formSend:hover,
@@ -321,14 +342,18 @@ div.banner-top h1 {
 
 /* survey item */
 .surveys-list {
-  text-align: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  margin-top:2rem;
 }
+
 .survey-item {
-  text-align: center;
-  margin: 5px;
-  display: inline-block;
+  width: 30%;
+  min-width: 300px;
   border-radius: 7px;
-  width: auto;
   background-color: $blue-insee;
   color: $yellow-insee;
 
@@ -340,7 +365,7 @@ div.banner-top h1 {
     text-decoration: none;
   }
   span {
-    font-size: 2em;
+    font-size: 1.5em;
   }
 }