👌 IMPROVE: Ajustements et Hotfix

2020-04-20 17:53:44 +02:00 · 2020-04-20 17:53:44 +02:00 · 25582e4cc7
commit 25582e4cc7
parent c1fe81a921
10 changed files with 278 additions and 20 deletions
--- a/api/assets/functions/main/randomNumber.js
+++ b/api/assets/functions/main/randomNumber.js
@ -30,5 +30,5 @@ module.exports = randomNumberOutput = ({ res, next }, argsObject) => {
    }

    const result = randomNumber(min, max);
-    return res.status(200).json({ result, resultHTML: `<p>${formatNumberResult(result)}</p>` });
+    return res.status(200).json({ result, resultHTML: `<p>Nombre aléatoire compris entre ${min} inclus et ${max} inclus : <strong>${formatNumberResult(result)}</strong></p>` });
 }
--- a/website/components/EditFormFunction.js
+++ b/website/components/EditFormFunction.js
@ -74,6 +74,7 @@ const EditFormFunction = (props) => {
                            <select value={input.type} onChange={handleChangeInput} name="type" id={`type-${index}`} className="form-control">
                                <option value="text">text</option>
                                <option value="number">number</option>
+                                <option value="calendar">calendar</option>
                            </select>

                            <div className="form-group text-center">
--- a/website/components/FunctionArticle.js
+++ b/website/components/FunctionArticle.js
@ -3,7 +3,7 @@ import htmlParser from 'html-react-parser';
 const FunctionArticle = ({ article }) => {
    return (
        <div style={{ marginBottom: '50px' }} className="container-fluid">
-            {(article != undefined) && htmlParser(article)}
+            {(article != undefined) ? htmlParser(article) : <p className="text-center">L'article n'est pas encore disponible.</p>}
        </div>
    );
 }
--- a/website/components/FunctionForm.js
+++ b/website/components/FunctionForm.js
@ -1,7 +1,14 @@
 import { Fragment, useState } from 'react';
 import Loader from './Loader';
 import htmlParser from 'html-react-parser';
+import dynamic from 'next/dynamic';
 import api from '../utils/api';
+import fr from 'date-fns/locale/fr';
+import { registerLocale } from  "react-datepicker";
+import date from 'date-and-time';
+import "react-datepicker/dist/react-datepicker.css";
+
+registerLocale('fr', fr);

 const FunctionForm = (props) => {

@ -40,20 +47,68 @@ const FunctionForm = (props) => {
        <Fragment>
            <form onSubmit={handleSubmit}>
                {props.inputsArray.map((input, index) => {
-                    let inputResult;
                    switch (input.type) {
-                        case "text" || "number":
-                            inputResult = (<input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />);
-                            break;
-                        default:
-                            inputResult = (<p>Erreur, l'input n'est pas valide...</p>);
-                    }
+                        case "text":
+                        case "number":
                            return (
                                <div key={index} className="form-group">
                                    <label className="form-label"  htmlFor={input.name}>{input.label}</label>
-                            {inputResult}
+                                    <input onChange={handleChange} type={input.type} name={input.name} id={input.name} placeholder={input.placeholder} className="form-control" />
                                </div>
                            );
+                        case "calendar":
+                            // Permet au datepicker de prendre la hauteur
+                            if (typeof window != 'undefined') {
+                                const newScript = document.createElement("script");
+                                newScript.src = "/js/extraHeightCSS.js";
+                                document.body.appendChild(newScript);
+                            }
+                            const DatePicker = dynamic(
+                                () => import('react-datepicker'),
+                                { ssr: false }
+                            );
+                            return (
+                                <div key={index} className="form-group">
+                                    <label className="form-label"  htmlFor={input.name}>{input.label}</label>
+                                    <br/>
+                                    <DatePicker
+                                        selected={(() => {
+                                            try {
+                                                if (inputState[input.name] != undefined) {
+                                                    const dateArray = inputState[input.name].split('/');
+                                                    const year      = dateArray[2];
+                                                    const month     = dateArray[1];
+                                                    const day       = dateArray[0];
+                                                    return new Date(year, parseInt(month) - 1, parseInt(day) + 1);
+                                                }
+                                                throw "Not a valid date";
+                                            } catch { 
+                                                return new Date();
+                                            }
+                                        })()}
+                                        locale="fr"
+                                        dateFormat="dd/MM/yyyy"
+                                        fixedHeight
+                                        placeholderText={input.placeholder}
+                                        onChange={(dateObject) => {
+                                            try {
+                                                const formattedDate = date.format(dateObject, 'DD/MM/YYYY', true);
+                                                handleChange({
+                                                    target: {
+                                                        name: input.name,
+                                                        value: formattedDate
+                                                    }
+                                                });
+                                            } catch {}
+                                        }}
+                                    />
+                                </div>
+                            );
+                        default:
+                            return (
+                                <p>Erreur, l'input n'est pas valide...</p>
+                            );
+                    }
                })}
                
                <div className="form-group text-center">
--- a/website/package-lock.json
+++ b/website/package-lock.json
@ -2555,6 +2555,11 @@
        }
      }
    },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
    "cli-cursor": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@ -2863,6 +2868,15 @@
        "sha.js": "^2.4.8"
      }
    },
+    "create-react-context": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+      "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+      "requires": {
+        "gud": "^1.0.0",
+        "warning": "^4.0.3"
+      }
+    },
    "cross-env": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
@ -3276,6 +3290,11 @@
      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.13.1.tgz",
      "integrity": "sha512-/Uge9DJAT+s+oAcDxtBhyR8+sKjUnZbYmyhbmWjTHNtX7B7oWD8YyYdeXcBRbwSj6hVvj+IQegJam7m7czhbFw=="
    },
+    "date-fns": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.12.0.tgz",
+      "integrity": "sha512-qJgn99xxKnFgB1qL4jpxU7Q2t0LOn1p8KMIveef3UZD7kqjT3tpFNNdXJelEHhE+rUgffriXriw/sOSU+cS1Hw=="
+    },
    "debug": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@ -3289,6 +3308,19 @@
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
    "defaults": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@ -3614,6 +3646,34 @@
        "is-arrayish": "^0.2.1"
      }
    },
+    "es-abstract": {
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
+      "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+      "requires": {
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1",
+        "is-callable": "^1.1.5",
+        "is-regex": "^1.0.5",
+        "object-inspect": "^1.7.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.0",
+        "string.prototype.trimleft": "^2.1.1",
+        "string.prototype.trimright": "^2.1.1"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
    "es5-ext": {
      "version": "0.10.53",
      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
@ -4184,6 +4244,11 @@
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
      "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ=="
    },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
    "gzip-size": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@ -4500,6 +4565,11 @@
        }
      }
    },
+    "is-arguments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
+    },
    "is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -4518,6 +4588,11 @@
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
    },
+    "is-callable": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz",
+      "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q=="
+    },
    "is-data-descriptor": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
@ -4536,6 +4611,11 @@
        }
      }
    },
+    "is-date-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
+    },
    "is-descriptor": {
      "version": "0.1.6",
      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@ -4625,6 +4705,22 @@
        "isobject": "^3.0.1"
      }
    },
+    "is-regex": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz",
+      "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
+      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@ -5910,6 +6006,20 @@
        }
      }
    },
+    "object-inspect": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz",
+      "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
+    },
+    "object-is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
+      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
    "object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@ -6287,6 +6397,11 @@
        "ts-pnp": "^1.1.2"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
    "posix-character-classes": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@ -8484,6 +8599,18 @@
        "tinycolor2": "^1.4.1"
      }
    },
+    "react-datepicker": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.14.1.tgz",
+      "integrity": "sha512-8eWHvrjXfKVkt5rERXC6/c/eEdcE2stIsl+QmTO5Efgpacf8MOCyVpBisJLVLDYjVlENczhOcRlIzvraODHKxA==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.9.0",
+        "react-popper": "^1.3.4"
+      }
+    },
    "react-dom": {
      "version": "16.13.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.0.tgz",
@ -8515,6 +8642,25 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
      "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
    },
+    "react-onclickoutside": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",
+      "integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A=="
+    },
+    "react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "^0.3.0",
+        "deep-equal": "^1.1.1",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      }
+    },
    "react-property": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/react-property/-/react-property-1.0.1.tgz",
@ -8702,6 +8848,15 @@
      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.10.tgz",
      "integrity": "sha512-8t6074A68gHfU8Neftl0Le6KTDwfGAj7IyjPIMSfikI2wJUTHDMaIq42bUsfVnj8mhx0R+45rdUXHGpN164avA=="
    },
+    "regexp.prototype.flags": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
+      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
    "regexpu-core": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
@ -9436,6 +9591,44 @@
      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
    },
+    "string.prototype.trimend": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
+      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "string.prototype.trimleft": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz",
+      "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5",
+        "string.prototype.trimstart": "^1.0.0"
+      }
+    },
+    "string.prototype.trimright": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz",
+      "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5",
+        "string.prototype.trimend": "^1.0.0"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
+      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
    "string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -9807,6 +10000,11 @@
      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
    },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
    "typedarray": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
--- a/website/package.json
+++ b/website/package.json
@ -15,6 +15,7 @@
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.19.2",
    "date-and-time": "^0.13.1",
+    "date-fns": "^2.12.0",
    "html-react-parser": "^0.10.2",
    "next": "9.3.2",
    "next-fonts": "^1.0.3",
@ -22,6 +23,7 @@
    "nprogress": "^0.2.0",
    "react": "16.13.0",
    "react-color": "^2.18.0",
+    "react-datepicker": "^2.14.1",
    "react-dom": "16.13.0",
    "react-swipeable-views": "^0.13.9",
    "react-swipeable-views-utils": "^0.13.9",
--- a/website/pages/admin/[slug].js
+++ b/website/pages/admin/[slug].js
@ -13,7 +13,7 @@ import '../../public/css/pages/admin.css';

 const AdminFunctionComponent = (props) => {

-    const [slideIndex, setSlideIndex] = useState(2);
+    const [slideIndex, setSlideIndex] = useState(0);

    return (
        <Fragment>
--- a/website/pages/index.js
+++ b/website/pages/index.js
@ -29,7 +29,7 @@ const Home = () => {
                        <div className="col-24">
                            <h1 className="title-important">FunctionProject</h1>
                            <p className="Home__description">
-                                Apprenez la programmation grâce à l'apprentissage par projet alias fonction.<br/>
+                                Apprenez la programmation grâce à l'apprentissage par projet alias fonction (en <span className="important">JavaScript</span>).<br/>
                                Découvrez la liste des fonctions disponibles : 
                            </p>
                        </div>
--- a/website/public/css/general.css
+++ b/website/public/css/general.css
@ -112,7 +112,7 @@ a, .important {
    margin-bottom: .5em;
 }
 .form-result {
-    margin-top: 25px;
+    margin: 30px;
 }
 .form-success {
    color: #90EE90;
--- a/website/public/js/extraHeightCSS.js
+++ b/website/public/js/extraHeightCSS.js
@ -0,0 +1,2 @@
+reactSwipeableExtraHeight = document.querySelector('.react-swipeable-view-container');
+reactSwipeableExtraHeight.parentElement.style = "height: 400px; overflow-x: hidden;";