Fixes Mobile responsiveness

docs/frontend_doc.md

@@ -278,10 +278,7 @@ Return:
 
 ```json
 
-{"Proxies": [
-  {"123.456.78.9:9000": "https://example.com/"},
-  {"111.222.333.444:9000": "https://blabla.ch/"}
-]}
+{"Proxies": Object { "123.456.78.9:9000": "https://example0.com", "123.456.78.9:9001": "https://example1.com", "123.456.78.9:9002": "https://example2.com", … }}
 
 ```
 

web/frontend/package.json

@@ -16,6 +16,7 @@
     "@dedis/kyber": "^3.4.4",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.6",
+    "@tailwindcss/typography": "^0.5.2",
     "ajv": "^8.11.0",
     "buffer": "^6.0.3",
     "file-saver": "^2.0.5",
@@ -73,4 +74,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

web/frontend/src/language/en.json

@@ -52,7 +52,9 @@
     "adminDetails": "Add or remove roles of users from the admin table",
     "navBarCreateElection": "Create election",
     "homeTitle": "Welcome to our e-voting platform!",
-    "homeText": "Use the navigation bar above to reach the the page you want.",
+    "homeWhatsNew": "What's new",
+    "homeJustShippedVersion": "Just shipped version",
+    "homeText": "Use the navigation bar above to reach the page you want.",
     "loginText": "You need to login to access the content of {{from}}",
     "loginCallback": "We are proceeding with the authentication. You should be redirected...",
     "logout": "Logout",
@@ -197,8 +199,9 @@
     "download": "Export results in JSON format",
     "rowsPerPage": "Elections per page",
     "of": " of ",
+    "about0": "The following diagram pictures the d-voting system from a deployment point of view. It describes the components and their interactions.",
     "about1": "This website hosts the interface of an evoting system. This system runs smart contracts, handled by a set of Byzantine fault-tolerant nodes.",
-    "about2": "When an administrator creates an election, the election parameters are saved on a blockchain and so are every following transaction (closing/cancelling election, casting a vote,...). ",
+    "about2": "When an administrator creates an election, the election parameters are saved on a blockchain and so are every following transaction (closing/cancelling election, casting a vote etc...). ",
     "about3": "A distributed key is generated at election creation time so that when a user votes, his/her vote is encrypted with the key guarantying the anonymity of the vote. However the system doesn't enforce the anonymity of the voter.",
     "about4": "When an election is closed, the nodes shuffle the ballots and check its correctness before decrypting the shuffle and publish the result of the election on a smart contract.",
     "end": "The end",
@@ -230,6 +233,9 @@
     "editProxyError": "An error occurred while trying to edit the proxy address. Error: ",
     "removeProxyError": "An error occurred while trying to remove the node and proxy addresses. Error: ",
     "enterNodeProxy": "Please enter the addresses of the node and the proxy",
-    "invalidProxyError": "Error: the address you entered is not a valid URL."
+    "invalidProxyError": "Error: the address you entered is not a valid URL.",
+    "learnMore": "Learn more about D-Voting platform",
+    "aboutPlatform": "About the Platform",
+    "whatMakesUsDifferent": "What makes us different"
   }
 }

web/frontend/src/layout/Flash.tsx

@@ -22,7 +22,7 @@ const Flash = () => {
                       ${msg.getLevel() === FlashLevel.Error && 'bg-red-500'}`}>
           <div
             id={msg.id}
-            className={`flex items-center text-white text-sm font-bold px-4 py-3 max-w-7xl mx-auto px-2 md:px-6 lg:px-8`}
+            className={`flex items-center text-white text-sm font-bold py-3 max-w-7xl mx-auto px-2 md:px-6 lg:px-8`}
             role="alert">
             <div className="px-2">
               {msg.getLevel() === FlashLevel.Info && <InformationCircleIcon className="h-6 w-6" />}

web/frontend/src/layout/Footer.tsx

@@ -3,7 +3,7 @@ import ProxyInput from 'components/utils/proxy';
 const Footer = () => (
   <div className="flex flex-row border-t justify-center bg-white items-center w-full p-4 text-gray-300 text-xs">
     <footer>
-      <div className="flex flex-row items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
+      <div className="hidden sm:flex flex-row items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
         <span className="text-gray-400"> &copy; 2022 DEDIS LAB - </span>
         <a className="text-gray-600" href="https://github.com/dedis/dela">
           https://github.com/dedis/dela
@@ -12,6 +12,15 @@ const Footer = () => (
           <ProxyInput />
         </div>
       </div>
+      <div className="flex sm:hidden flex-col items-center max-w-7xl mx-auto py-2 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <span className="text-gray-400"> &copy; 2022 DEDIS LAB - </span>
+        <a className="text-gray-600" href="https://github.com/dedis/dela">
+          https://github.com/dedis/dela
+        </a>
+        <div className="pt-2">
+          <ProxyInput />
+        </div>
+      </div>
     </footer>
   </div>
 );

web/frontend/src/mocks/handlers.ts

@@ -394,10 +394,7 @@ export const handlers = [
   rest.get(endpoints.getProxiesAddresses, async (req, res, ctx) => {
     await new Promise((r) => setTimeout(r, RESPONSE_TIME));
 
-    const response = [];
-    mockNodeProxyAddresses.forEach((proxy, node) => response.push({ [node]: proxy }));
-
-    return res(ctx.status(200), ctx.json({ Proxies: response }));
+    return res(ctx.status(200), ctx.json({ Proxies: Object.fromEntries(mockNodeProxyAddresses) }));
   }),
 
   rest.put(endpoints.editProxyAddress('*'), async (req, res, ctx) => {

web/frontend/src/pages/About.tsx

@@ -1,28 +1,76 @@
-import React, { FC, Fragment } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import dVotingSystem from '../assets/d-votingSystem.png';
 
 const About: FC = () => {
   const { t } = useTranslation();
-
   return (
-    <Fragment>
-      <div className="w-[60rem] font-sans px-4 py-4 text-justify">
-        <div>
-          <br />
-          {t('about1')}
-          <br />
-          <br />
-          {t('about2')}
-          <br />
-          <br />
-          {t('about3')}
-          <br />
-          <br />
-          {t('about4')}
-          <br />
+    <div className="py-14 overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 space-y-8 sm:px-6 lg:px-8">
+        <div className="text-base max-w-prose mx-auto lg:max-w-none">
+          <h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
+            {t('aboutPlatform')}
+          </h2>
+          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+            {t('whatMakesUsDifferent')}
+          </p>
+        </div>
+        <div className="relative z-10 text-base max-w-prose mx-auto lg:max-w-5xl lg:mx-0 lg:pr-72">
+          <p className="text-lg text-gray-500">{t('about0')}</p>
+        </div>
+        <div className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
+          <div className="relative z-10">
+            <div className="prose prose-indigo text-gray-500 mx-auto lg:max-w-none">
+              <p>{t('about1')}</p>
+              <p>{t('about2')}</p>
+              <p>{t('about3')}</p>
+              <p>{t('about4')}</p>
+            </div>
+            <div className="mt-10 flex text-base max-w-prose mx-auto lg:max-w-none">
+              <div className="rounded-md shadow ml-4">
+                <a
+                  href="https://dedis.github.io/d-voting/#/"
+                  className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
+                  {t('learnMore')}
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
+            <svg
+              className="absolute top-0 right-0 -mt-20 -mr-20 lg:top-auto lg:right-auto lg:bottom-1/2 lg:left-1/2 lg:mt-0 lg:mr-0 xl:top-0 xl:right-0 xl:-mt-20 xl:-mr-20"
+              width={404}
+              height={384}
+              fill="none"
+              viewBox="0 0 404 384"
+              aria-hidden="true">
+              <defs>
+                <pattern
+                  id="bedc54bc-7371-44a2-a2bc-dc68d819ae60"
+                  x={0}
+                  y={0}
+                  width={20}
+                  height={20}
+                  patternUnits="userSpaceOnUse">
+                  <rect
+                    x={0}
+                    y={0}
+                    width={4}
+                    height={4}
+                    className="text-gray-200"
+                    fill="currentColor"
+                  />
+                </pattern>
+              </defs>
+              <rect width={404} height={384} fill="url(#bedc54bc-7371-44a2-a2bc-dc68d819ae60)" />
+            </svg>
+            <div className="relative bg-white rounded-lg shadow-lg">
+              <img src={dVotingSystem} alt="" />
+            </div>
+          </div>
         </div>
       </div>
-    </Fragment>
+    </div>
   );
 };
 

web/frontend/src/pages/Home.tsx

@@ -1,13 +1,88 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ChevronRightIcon } from '@heroicons/react/solid';
+import { ROUTE_ELECTION_INDEX } from 'Routes';
+import { Link } from 'react-router-dom';
+import introductionImage from '../assets/introductionImage.png';
 
 const Home: FC = () => {
   const { t } = useTranslation();
-
   return (
-    <div className="flex flex-col">
-      <h1>{t('homeTitle')}</h1>
-      <div>{t('homeText')}</div>
+    <div className="bg-white pb-8 sm:pb-6 lg:pb-6">
+      <div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-44">
+        <div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
+          <div>
+            <div className="mt-20">
+              <div>
+                <a href="https://github.com/dedis/d-voting" className="inline-flex space-x-4">
+                  <span className="rounded bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-600 tracking-wide uppercase">
+                    {t('homeWhatsNew')}
+                  </span>
+                  <span className="inline-flex items-center text-sm font-medium text-indigo-600 space-x-1">
+                    <span>{t('homeJustShippedVersion')} 1.0.0</span>
+                    <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+                  </span>
+                </a>
+              </div>
+              <div className="mt-6 sm:max-w-xl">
+                <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+                  {t('homeTitle')}
+                </h1>
+                <p className="mt-6 text-xl text-gray-500">{t('homeText')}</p>
+              </div>
+              <div className="mt-12 sm:max-w-lg sm:w-full sm:flex">
+                <div className="mt-4 sm:mt-0 sm:ml-3">
+                  <Link to={ROUTE_ELECTION_INDEX}>
+                    <button className="block w-full rounded-md border border-transparent px-5 py-3 bg-indigo-600 text-base font-medium text-white shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:px-10">
+                      Get Started
+                    </button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
+          <div className="py-12 sm:relative sm:mt-12 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
+            <div className="hidden sm:block">
+              <svg
+                className="absolute top-8 right-1/2 -mr-3 lg:m-0 lg:left-0"
+                width={404}
+                height={392}
+                fill="none"
+                viewBox="0 0 404 392">
+                <defs>
+                  <pattern
+                    id="837c3e70-6c3a-44e6-8854-cc48c737b659"
+                    x={0}
+                    y={0}
+                    width={20}
+                    height={20}
+                    patternUnits="userSpaceOnUse">
+                    <rect
+                      x={0}
+                      y={0}
+                      width={4}
+                      height={4}
+                      className="text-gray-200"
+                      fill="currentColor"
+                    />
+                  </pattern>
+                </defs>
+                <rect width={404} height={392} fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)" />
+              </svg>
+            </div>
+            <div className="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full lg:pl-12">
+              <img
+                className="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none"
+                src={introductionImage}
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

web/frontend/src/pages/admin/DKGTable.tsx

@@ -118,9 +118,12 @@ const DKGTable: FC<DKGTableProps> = ({ nodeProxyAddresses, setNodeProxyAddresses
               <th scope="col" className="px-6 py-3">
                 {t('proxy')}
               </th>
-              <th scope="col" className="px-6 py-3">
+              <th scope="col" className=" px-2 py-3">
                 <span className="sr-only">{t('edit')}</span>
               </th>
+              <th scope="col" className=" px-2 py-3">
+                <span className="sr-only">{t('delete')}</span>
+              </th>
             </tr>
           </thead>
           <tbody>