Merge pull request #158 from c4dt/156

Non-admins cannot access form management view

Author: PascalinDe

web/frontend/src/layout/App.tsx

@@ -69,7 +69,14 @@ const App = () => {
                   </RequireAuth>
                 }
               />
-              <Route path={'/forms/:formId'} element={<FormShow />} />
+              <Route
+                path={'/forms/:formId'}
+                element={
+                  <RequireAuth auth={['election', 'create']}>
+                    <FormShow />
+                  </RequireAuth>
+                }
+              />
               <Route path={'/forms/:formId/result'} element={<FormResult />} />
               <Route
                 path={ROUTE_BALLOT_SHOW + '/:formId'}

web/frontend/src/pages/form/components/FormRow.tsx

@@ -1,16 +1,21 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useContext, useEffect, useState } from 'react';
 import { LightFormInfo } from 'types/form';
 import { Link } from 'react-router-dom';
 import FormStatus from './FormStatus';
 import QuickAction from './QuickAction';
 import { default as i18n } from 'i18next';
+import { AuthContext } from '../../..';
 
 type FormRowProps = {
   form: LightFormInfo;
 };
 
+const SUBJECT_ELECTION = 'election';
+const ACTION_CREATE = 'create';
+
 const FormRow: FC<FormRowProps> = ({ form }) => {
   const [titles, setTitles] = useState<any>({});
+  const authCtx = useContext(AuthContext);
   useEffect(() => {
     if (form.Title === undefined) return;
     setTitles({ En: form.Title.En, Fr: form.Title.Fr, De: form.Title.De, URL: form.Title.URL });
@@ -25,14 +30,17 @@ const FormRow: FC<FormRowProps> = ({ form }) => {
       formRowI18n.addResource(lang.toLowerCase(), 'form', 'title', title);
     }
   });
+  const formTitle = formRowI18n.t('title', { ns: 'form', fallbackLng: 'en' });
   return (
     <tr className="bg-white border-b hover:bg-gray-50 ">
       <td className="px-1.5 sm:px-6 py-4 font-medium text-gray-900 whitespace-nowrap truncate">
-        <Link className="text-gray-700 hover:text-[#ff0000]" to={`/forms/${form.FormID}`}>
-          <div className="max-w-[20vw] truncate">
-            {formRowI18n.t('title', { ns: 'form', fallbackLng: 'en' })}
-          </div>
-        </Link>
+        {authCtx.isLogged && authCtx.isAllowed(SUBJECT_ELECTION, ACTION_CREATE) ? (
+          <Link className="text-gray-700 hover:text-[#ff0000]" to={`/forms/${form.FormID}`}>
+            <div className="max-w-[20vw] truncate">{formTitle}</div>
+          </Link>
+        ) : (
+          <div className="max-w-[20vw] truncate">{formTitle}</div>
+        )}
       </td>
       <td className="px-1.5 sm:px-6 py-4">{<FormStatus status={form.Status} />}</td>
       <td className="px-1.5 sm:px-6 py-4 text-right">