chore: archive the repository

Release/v2.2

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,131 @@
+# Code de conduite _Contributor Covenant_
+
+## Notre engagement
+
+En tant que membres, contributeur•trice•s et dirigeant•e•s, nous nous
+engageons à faire de la participation à notre communauté
+une expérience sans harcèlement, quel que soit l'âge,
+la taille corporelle, le handicap visible ou invisible, l'appartenance ethnique,
+les caractéristiques sexuelles, l'identité et l'expression de genre,
+le niveau d'expérience, l'éducation, le statut socio-économique,
+la nationalité, l'apparence personnelle, la race, la religion,
+ou l'identité et l'orientation sexuelle.
+
+Nous nous engageons à agir et interagir de manière à contribuer à une communauté
+ouverte, accueillante, diversifiée, inclusive et saine.
+
+## Nos critères
+
+Exemples de comportements qui contribuent à créer un environnement positif :
+
+- Faire preuve d'empathie et de bienveillance envers les autres
+- Être respectueux des opinions, points de vue et expériences divergents
+- Donner et recevoir avec grâce les critiques constructives
+- Assumer ses responsabilités et s'excuser auprès des personnes affectées par nos erreurs et apprendre de ces expériences
+- Se concentrer sur ce qui est le meilleur non pas uniquement pour nous en tant qu'individu, mais aussi pour l'ensemble de la communauté
+
+Exemples de comportements inacceptables :
+
+- L'utilisation de langage ou d'images sexualisés et d'attentions ou d'avances sexuelles de toute nature
+- Le _trolling_, les commentaires insultants ou désobligeants et les attaques
+  personnelles ou d'ordre politique
+- Le harcèlement en public ou en privé
+- La publication d'informations privées d'autrui, telle qu'une
+  adresse postale ou une adresse électronique, sans leur autorisation explicite
+- Toute autre conduite qui pourrait raisonnablement être considérée comme inappropriée
+  dans un cadre professionnel
+
+## Responsabilités d'application
+
+Les dirigeant•e•s de la communauté sont chargé•e•s de clarifier et de faire respecter nos normes de
+comportements acceptables et prendront des mesures correctives appropriées et équitables en
+réponse à tout comportement qu'ils ou elles jugent inapproprié, menaçant, offensant ou nuisible.
+
+Les dirigeant•e•s de la communauté ont le droit et la responsabilité de supprimer, modifier ou rejeter
+les commentaires, les contributions, le code, les modifications de wikis, les rapports d'incidents ou de bogues et autres contributions qui
+ne sont pas alignés sur ce code de conduite, et communiqueront les raisons des décisions de modération
+le cas échéant.
+
+## Portée d'application
+
+Ce code de conduite s'applique à la fois au sein des espaces du projet ainsi que
+dans les espaces publics lorsqu'un individu représente officiellement le projet ou sa
+communauté. Font parties des exemples de représentation d'un projet ou d'une
+communauté l'utilisation d'une adresse électronique officielle, la publication sur
+les réseaux sociaux à l'aide d'un compte officiel ou le fait d'agir en tant que représentant•e désigné•e
+lors d'un événement en ligne ou hors-ligne.
+
+## Application
+
+Les cas de comportements abusifs, harcelants ou tout autre comportement
+inacceptables peuvent être signalés aux dirigeant•e•s de la communauté responsables de l'application du code de conduite à
+contact@divlo.fr.
+Toutes les plaintes seront examinées et feront l'objet d'une enquête rapide et équitable.
+
+Tou•te•s les dirigeant•e•s de la communauté sont tenu•e•s de respecter la vie privée et la sécurité des
+personnes ayant signalé un incident.
+
+## Directives d'application
+
+Les dirigeant•e•s de communauté suivront ces directives d'application sur l'impact communautaire afin de déterminer
+les conséquences de toute action qu'ils jugent contraire au présent code de conduite :
+
+### 1. Correction
+
+**Impact communautaire** : utilisation d'un langage inapproprié ou tout autre comportement jugé
+non professionnel ou indésirable dans la communauté.
+
+**Conséquence** : un avertissement écrit et privé de la part des dirigeant•e•s de la communauté, clarifiant
+la nature du non-respect et expliquant pourquoi
+le comportement était inapproprié. Des excuses publiques peuvent être demandées.
+
+### 2. Avertissement
+
+**Impact communautaire** : un non-respect par un seul incident ou une série d'actions.
+
+**Conséquence** : un avertissement avec des conséquences dû à la poursuite du comportement.
+Aucune interaction avec les personnes concernées, y compris l'interaction non sollicitée avec
+celles et ceux qui sont chargé•e•s de l'application de ce code de conduite, pendant une période déterminée.
+Cela comprend le fait d'éviter les interactions dans les espaces communautaires ainsi que sur les canaux externes
+comme les médias sociaux. Le non-respect de ces conditions peut entraîner
+un bannissement temporaire ou permanent.
+
+### 3. Bannissement temporaire
+
+**Impact communautaire** : un non-respect grave des normes communautaires, notamment
+un comportement inapproprié soutenu.
+
+**Conséquence** : un bannissement temporaire de toutes formes d'interactions ou de
+communications avec la communauté pendant une période déterminée. Aucune interaction publique ou
+privée avec les personnes concernées, y compris les interactions non sollicitées
+avec celles et ceux qui appliquent ce code de conduite, n'est autorisée pendant cette période.
+Le non-respect de ces conditions peut entraîner un bannissement permanent.
+
+### 4. Bannissement permanent
+
+**Impact communautaire** : démontrer un schéma récurrent de non-respect des normes de la
+communauté y compris un comportement inapproprié soutenu, le harcèlement d'un individu
+ainsi que l'agression ou le dénigrement de catégories d'individus.
+
+**Conséquence** : un bannissement permanent de toutes formes d'interactions publiques au sein de
+la communauté.
+
+## Attributions
+
+Ce code de conduite est adapté du
+[Contributor Covenant](https://www.contributor-covenant.org), version 2.0,
+disponible à
+[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
+
+Les Directives d'application ont été inspirées par le
+[Code of conduct enforcement ladder][mozilla coc] de Mozilla.
+
+Pour obtenir des réponses aux questions courantes sur ce code de conduite, consultez la FAQ à
+[https://www.contributor-covenant.org/faq][faq]. Les traductions sont disponibles
+sur [https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
+[mozilla coc]: https://github.com/mozilla/diversity
+[faq]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations

.github/ISSUE_TEMPLATE/BUG.md

@@ -0,0 +1,14 @@
+---
+name: '🐛 Rapport de bug'
+about: 'Signalez un problème inattendu ou un comportement involontaire.'
+labels: 'bug'
+---
+
+## Étapes à suivre pour reproduire le bug
+
+1. Étape 1
+2. Étape 2
+
+## Comportement actuel
+
+## Comportement attendu

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -0,0 +1,7 @@
+---
+name: '✨ Ajout d'une fonctionnalité'
+about: 'Suggérer une nouvelle fonctionnalité.'
+labels: 'feature request'
+---
+
+### Description

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -0,0 +1,7 @@
+---
+name: '🙋 Question'
+about: 'Des informations complémentaires sont demandées.'
+labels: 'question'
+---
+
+### Question

.github/workflows/commitlint.yml

@@ -0,0 +1,18 @@
+# For more information see: https://github.com/marketplace/actions/commit-linter
+
+name: 'Lint Commit Messages'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  commitlint:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v2'
+        with:
+          fetch-depth: 0
+      - uses: 'wagoid/commitlint-github-action@v2'

.github/workflows/nodejs.yml

@@ -0,0 +1,61 @@
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: 'Node.js CI'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  ci_website:
+    runs-on: 'ubuntu-latest'
+    defaults:
+      run:
+        working-directory: 'website'
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - uses: 'actions/checkout@v2'
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: 'actions/setup-node@v2.1.2'
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: 'Cache dependencies'
+        uses: 'actions/cache@v2'
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+
+      - run: 'npm install'
+      - run: 'npm run lint'
+      - run: 'npm run build'
+
+  ci_api:
+    runs-on: 'ubuntu-latest'
+    defaults:
+      run:
+        working-directory: 'api'
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+      - uses: 'actions/checkout@v2'
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: 'actions/setup-node@v2.1.2'
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: 'Cache dependencies'
+        uses: 'actions/cache@v2'
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+
+      - run: 'npm install'
+      - run: 'npm run lint'

.gitignore

@@ -1 +0,0 @@
-.github/backup

LICENSE

@@ -1,8 +1,21 @@
-The MIT License (MIT)
-Copyright © 2020 Divlo
+MIT License
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Copyright (c) Divlo
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,16 +1,21 @@
 <h1 align="center"><a href="https://function.divlo.fr/">FunctionProject</a></h1>
 
+<p align="center">
+  <strong>⚠️ Le projet n'est plus maintenu.</strong>
+</p>
+
 <p align="center">
   <strong>Apprenez la programmation grâce à l'apprentissage par projet alias fonction.</strong>
 </p>
 
 <p align="center">
-  <a href="https://gitmoji.carloscuesta.me/"><img src="https://camo.githubusercontent.com/2a4924a23bd9ef18afe793f4999b1b9ec474e48f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769746d6f6a692d253230f09f989c253230f09f988d2d4646444436372e7376673f7374796c653d666c61742d737175617265" alt="Gitmoji"/></a>
+  <a href="https://github.com/Divlo/FunctionProject/actions?query=workflow%3A%22Node.js+CI%22"><img src="https://github.com/Divlo/FunctionProject/workflows/Node.js%20CI/badge.svg" alt="Node.js CI" /></a>
   <a href="https://standardjs.com"><img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"/></a>
   <a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
-  <img src="https://img.shields.io/github/stars/Divlo/FunctionProject?style=social" alt="Stars">
+  <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
+  <a href="./.github/CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
   <br/> <br/>
-  <a href="https://function.divlo.fr/"><img src="https://raw.githubusercontent.com/Divlo/FunctionProject/master/.github/FunctionProject.png" alt="FunctionProject" /></a>
+  <a href="https://function.divlo.fr/"><img src="https://raw.githubusercontent.com/Divlo/FunctionProject/master/.github/images/FunctionProject.png" alt="FunctionProject" /></a>
 </p>
 
 ## ⚙️ À propos
@@ -23,7 +28,7 @@ Si vous aimez le projet, vous pouvez aider à **le faire connaître** en utilisa
 
 Les dernières versions publiées : [https://github.com/Divlo/FunctionProject/releases](https://github.com/Divlo/FunctionProject/releases)
 
-Le projet est disponible sur [function.divlo.fr](https://function.divlo.fr/) (actuellement en version 2.1).
+Le projet est disponible sur [function.divlo.fr](https://function.divlo.fr/) (actuellement en version 2.3).
 
 ## 🚀 Open Source
 
@@ -37,12 +42,13 @@ Si vous voulez **contribuer**, avant toute chose écrivez une **"[issue](https:/
 
 Si vous voulez avoir les données des catégories et des fonctions, vous pouvez d'abord lancer l'API pour que Sequelize crée les tables SQl et ensuite exécuter le fichier SQL [backup.sql](./.github/backup.sql).
 
-### Prérequis :
+### Prérequis
 
-- NodeJS (et npm) → version récente
-- Base de donnée MySQL → J'utilise Wamp ce qui me permet d'avoir phpmyadmin.
+- [Node.js](https://nodejs.org/) >= 14
+- [npm](https://www.npmjs.com/) >= 7
+- [MySQL](https://www.mysql.com/) >= 8
 
-### Commandes (à suivre dans l'ordre) :
+### Commandes (à suivre dans l'ordre)
 
 ```sh
 # Cloner le projet
@@ -58,9 +64,27 @@ cd ../website
 npm install
 ```
 
-Vous devrez ensuite configurer l'API en créant un fichier `.env` à la racine du dossier `/api` et prendre exemple du fichier `.env.example` avec votre configuration.
+Vous devrez ensuite configurer les variables d'environnements en créant un fichier `.env` à la racine du dossier `/api`, `/website` et `s.divlo.fr` pour prendre exemple du fichier `.env.example` avec votre configuration.
 
-### Lancer l'environnement de développement :
+### Lancer l'environnement de développement
+
+#### Avec [docker](https://www.docker.com/)
+
+```sh
+# Setup and run all the services for you
+docker-compose up --build
+```
+
+**Services started :**
+
+- api : `http://localhost:8080`
+- s.divlo.fr : `http://localhost:7000`
+- website : `http://localhost:3000`
+- [phpmyadmin](https://www.phpmyadmin.net/) : `http://localhost:8000`
+- [MailDev](https://maildev.github.io/maildev/) : `http://localhost:1080`
+- [MySQL database](https://www.mysql.com/) (with PORT 3006)
+
+#### Sans docker
 
 Dans deux terminals séparés :
 
@@ -78,8 +102,6 @@ npm run dev # API lancé sur http://localhost:8080
 
 Enjoy! 😃
 
-[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
+## 📄 License
 
-## 📄 Licence
-
-Ce projet est sous licence MIT - voir le fichier [LICENSE](./LICENSE) pour plus de détails.
+[MIT](./LICENSE)

api/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+build

api/.env.example

@@ -1,12 +1,15 @@
-HOST = "http://localhost:8080"
-FRONT_END_HOST = "http://localhost:3000"
-OpenWeatherMap_API_KEY = ""
-Scraper_API_KEY = ""
-DB_HOST = ""
-DB_NAME = ""
-DB_USER = ""
-DB_PASS = ""
-JWT_SECRET = ""
-EMAIL_HOST = ""
-EMAIL_USER = ""
-EMAIL_PASSWORD = ""
+COMPOSE_PROJECT_NAME="function.divlo.fr-api"
+HOST="http://localhost:8080"
+FRONT_END_HOST="http://localhost:3000"
+OpenWeatherMap_API_KEY=""
+Scraper_API_KEY=""
+DATABASE_HOST="functionproject-database"
+DATABASE_NAME="functionproject"
+DATABASE_USER="root"
+DATABASE_PASSWORD="password"
+DATABASE_PORT=3306
+JWT_SECRET=""
+EMAIL_HOST="functionproject-maildev"
+EMAIL_USER="no-reply@functionproject.fr"
+EMAIL_PASSWORD="password"
+EMAIL_PORT=25

api/.gitignore

@@ -11,16 +11,18 @@
 # production
 /build
 
-# misc
-.DS_Store
+# envs
 .env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 .env.production
+
+# misc
+.DS_Store
 /temp
-/assets/images/
+/assets/images/users
 
 npm-debug.log*
 yarn-debug.log*

api/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:14.16.1
+
+WORKDIR /app
+
+COPY ./package*.json ./
+RUN npm install
+COPY ./ ./
+
+# docker-compose-wait
+ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.7.3/wait /wait
+RUN chmod +x /wait
+
+CMD /wait && npm run dev

api/app.js

@@ -6,6 +6,7 @@ const helmet = require('helmet')
 const cors = require('cors')
 const morgan = require('morgan')
 const { redirectToHTTPS } = require('express-http-to-https')
+const rateLimit = require('express-rate-limit')
 
 /* Files Imports & Variables */
 const sequelize = require('./assets/utils/database')
@@ -16,11 +17,27 @@ const isAdmin = require('./middlewares/isAdmin')
 const app = express()
 
 /* Middlewares */
+if (process.env.NODE_ENV === 'development') {
+  app.use(morgan('dev'))
+} else if (process.env.NODE_ENV === 'production') {
+  app.use(redirectToHTTPS())
+  const requestPerSecond = 2
+  const seconds = 60
+  const windowMs = seconds * 1000
+  app.enable('trust proxy')
+  app.use(
+    rateLimit({
+      windowMs,
+      max: seconds * requestPerSecond,
+      handler: (_req, res) => {
+        return res.status(429).json({ message: 'Too many requests' })
+      }
+    })
+  )
+}
 app.use(helmet())
 app.use(cors())
-app.use(morgan('dev'))
 app.use(express.json())
-app.use(redirectToHTTPS([/localhost:(\d{4})/]))
 
 /* Routes */
 app.use('/images', express.static(path.join(__dirname, 'assets', 'images')))
@@ -37,7 +54,7 @@ app.use('/links', require('./routes/links_shortener'))
 /* Errors Handling */
 app.use((_req, _res, next) =>
   errorHandling(next, { statusCode: 404, message: "La route n'existe pas!" })
-) // 404
+)
 app.use((error, _req, res, _next) => {
   console.log(error)
   const { statusCode, message } = error
@@ -83,7 +100,6 @@ Users.hasMany(ShortLinks)
 ShortLinks.belongsTo(Users, { constraints: false })
 
 /* Server */
-// sequelize.sync({ force: true })
 sequelize
   .sync()
   .then(() => {

api/assets/config/config.js

@@ -1,3 +1,8 @@
+const dotenv = require('dotenv')
+
+dotenv.config()
+const EMAIL_PORT = parseInt(process.env.EMAIL_PORT ?? '465', 10)
+
 const config = {
   PORT: process.env.PORT || 8080,
   HOST: process.env.HOST,
@@ -5,20 +10,22 @@ const config = {
   WEATHER_API_KEY: process.env.OpenWeatherMap_API_KEY,
   SCRAPER_API_KEY: process.env.Scraper_API_KEY,
   DATABASE: {
-    host: process.env.DB_HOST,
-    name: process.env.DB_NAME,
-    user: process.env.DB_USER,
-    password: process.env.DB_PASS
+    host: process.env.DATABASE_HOST,
+    name: process.env.DATABASE_NAME,
+    user: process.env.DATABASE_USER,
+    password: process.env.DATABASE_PASSWORD,
+    port: parseInt(process.env.DATABASE_PORT ?? '3306', 10)
   },
   JWT_SECRET: process.env.JWT_SECRET,
   EMAIL_INFO: {
     host: process.env.EMAIL_HOST,
-    port: 465,
-    secure: true, // true for 465, false for other ports
+    port: EMAIL_PORT,
+    secure: EMAIL_PORT === 465,
     auth: {
       user: process.env.EMAIL_USER,
       pass: process.env.EMAIL_PASSWORD
-    }
+    },
+    ignoreTLS: process.env.NODE_ENV !== 'production'
   },
   TOKEN_LIFE: '1 week'
 }

api/assets/utils/database.js

@@ -7,7 +7,8 @@ const sequelize = new Sequelize(
   DATABASE.password,
   {
     dialect: 'mysql',
-    host: DATABASE.host
+    host: DATABASE.host,
+    port: DATABASE.port
   }
 )
 

api/package.json

@@ -1,37 +1,46 @@
 {
   "name": "api",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Backend REST API for FunctionProject",
+  "standard": {
+    "files": [
+      "./**/*.js"
+    ],
+    "envs": [
+      "node"
+    ]
+  },
   "scripts": {
     "start": "node app.js",
     "dev": "nodemon app.js",
-    "format": "standard \"./**/*.js\" --fix | snazzy || exit 0"
+    "lint": "standard | snazzy"
   },
   "dependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
-    "express": "^4.17.1",
-    "express-fileupload": "^1.1.6",
-    "express-http-to-https": "^1.1.4",
-    "express-validator": "^6.4.0",
-    "helmet": "^3.21.3",
-    "jsdom": "^16.2.2",
-    "jsonwebtoken": "^8.5.1",
-    "moment": "^2.24.0",
-    "ms": "^2.1.2",
-    "mysql2": "^2.1.0",
-    "nodemailer": "^6.4.6",
-    "sequelize": "^5.21.5",
-    "smart-request-balancer": "^2.1.1",
-    "uuid": "^7.0.2",
-    "validator": "^13.0.0",
     "dotenv": "^8.2.0",
-    "morgan": "^1.9.1"
+    "express": "^4.17.1",
+    "express-fileupload": "^1.2.1",
+    "express-http-to-https": "^1.1.4",
+    "express-rate-limit": "^5.2.6",
+    "express-validator": "^6.10.0",
+    "helmet": "^4.4.1",
+    "jsdom": "^16.5.3",
+    "jsonwebtoken": "^8.5.1",
+    "moment": "^2.29.1",
+    "morgan": "^1.10.0",
+    "ms": "^2.1.3",
+    "mysql2": "^2.2.5",
+    "nodemailer": "^6.5.0",
+    "sequelize": "^6.6.2",
+    "smart-request-balancer": "^2.1.1",
+    "uuid": "^8.3.2",
+    "validator": "^13.5.2"
   },
   "devDependencies": {
-    "nodemon": "^2.0.4",
-    "snazzy": "^8.0.0",
-    "standard": "^14.3.4"
+    "nodemon": "^2.0.7",
+    "snazzy": "^9.0.0",
+    "standard": "^16.0.3"
   }
 }

docker-compose.yml

@@ -0,0 +1,73 @@
+version: '3.0'
+services:
+  functionproject-api:
+    build:
+      context: './api'
+    ports:
+      - '8080:8080'
+    depends_on:
+      - 'functionproject-database'
+      - 'functionproject-maildev'
+    volumes:
+      - './api:/app'
+      - '/app/node_modules'
+    environment:
+      WAIT_HOSTS: 'functionproject-database:3306'
+    container_name: 'functionproject-api'
+
+  s.divlo.fr-website:
+    build:
+      context: './s.divlo.fr'
+    ports:
+      - '7000:7000'
+    depends_on:
+      - 'functionproject-database'
+    volumes:
+      - './s.divlo.fr:/app'
+      - '/app/node_modules'
+    environment:
+      WAIT_HOSTS: 'functionproject-database:3306'
+    container_name: 's.divlo.fr-website'
+
+  functionproject-website:
+    build:
+      context: './website'
+    ports:
+      - '3000:3000'
+    volumes:
+      - './website:/app'
+      - '/app/node_modules'
+    container_name: 'functionproject-website'
+
+  functionproject-phpmyadmin:
+    image: 'phpmyadmin/phpmyadmin:5.1.0'
+    environment:
+      PMA_HOST: 'functionproject-database'
+      PMA_USER: 'root'
+      PMA_PASSWORD: 'password'
+    ports:
+      - '8000:80'
+    depends_on:
+      - 'functionproject-database'
+    container_name: 'functionproject-phpmyadmin'
+
+  functionproject-database:
+    image: 'mysql:8.0.23'
+    command: '--default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci'
+    environment:
+      MYSQL_ROOT_PASSWORD: 'password'
+      MYSQL_DATABASE: 'functionproject'
+    ports:
+      - '3306:3306'
+    volumes:
+      - 'database-volume:/var/lib/mysql'
+    container_name: 'functionproject-database'
+
+  functionproject-maildev:
+    image: 'maildev/maildev:1.1.0'
+    ports:
+      - '1080:80'
+    container_name: 'functionproject-maildev'
+
+volumes:
+  database-volume:

s.divlo.fr/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+build

s.divlo.fr/.env.example

@@ -1,4 +1,6 @@
-DB_HOST = ""
-DB_NAME = ""
-DB_USER = ""
-DB_PASS = ""
+COMPOSE_PROJECT_NAME="s.divlo.fr-website"
+DATABASE_HOST="functionproject-database"
+DATABASE_NAME="functionproject"
+DATABASE_USER="root"
+DATABASE_PASSWORD="password"
+DATABASE_PORT=3306

s.divlo.fr/.gitignore

@@ -1,2 +1,2 @@
 node_modules
-.env
+.env

s.divlo.fr/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:14.16.1
+
+WORKDIR /app
+
+COPY ./package*.json ./
+RUN npm install
+COPY ./ ./
+
+# docker-compose-wait
+ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.7.3/wait /wait
+RUN chmod +x /wait
+
+CMD /wait && npm run dev

s.divlo.fr/app.js

@@ -10,18 +10,21 @@ const mysql = require('mysql')
 /* Files Imports & Variables */
 const app = express()
 const database = mysql.createPool({
-  host: process.env.DB_HOST,
-  user: process.env.DB_USER,
-  password: process.env.DB_PASS,
-  database: process.env.DB_NAME,
-  port: process.env.DB_PORT
+  host: process.env.DATABASE_HOST,
+  user: process.env.DATABASE_USER,
+  password: process.env.DATABASE_PASSWORD,
+  database: process.env.DATABASE_NAME,
+  port: process.env.DATABASE_PORT
 })
 
 /* Middlewares */
+if (process.env.NODE_ENV === 'development') {
+  app.use(morgan('dev'))
+} else if (process.env.NODE_ENV === 'production') {
+  app.use(redirectToHTTPS())
+}
 app.use(helmet())
-app.use(morgan('dev'))
 app.use(express.json())
-app.use(redirectToHTTPS([/localhost:(\d{4})/]))
 
 /* EJS Template Engines */
 app.set('view engine', 'ejs')
@@ -77,7 +80,7 @@ app.use((error, _req, res) => {
 })
 
 /* Server */
-const PORT = process.env.PORT || 8000
+const PORT = process.env.PORT || 7000
 app.listen(PORT, () => {
   console.log('\x1b[36m%s\x1b[0m', `Started on port ${PORT}.`)
 })

s.divlo.fr/package.json

@@ -2,23 +2,31 @@
   "name": "short.divlo.fr",
   "version": "1.0.0",
   "description": "Link shortener for FunctionProject",
+  "standard": {
+    "files": [
+      "./**/*.js"
+    ],
+    "envs": [
+      "node"
+    ]
+  },
   "scripts": {
     "start": "node app.js",
     "dev": "nodemon app.js",
-    "format": "standard \"./**/*.js\" --fix | snazzy || exit 0"
+    "lint": "standard | snazzy"
   },
   "dependencies": {
     "dotenv": "^8.2.0",
-    "ejs": "^3.1.3",
+    "ejs": "^3.1.6",
     "express": "^4.17.1",
     "express-http-to-https": "^1.1.4",
-    "helmet": "^4.0.0",
+    "helmet": "^4.4.1",
     "morgan": "^1.10.0",
     "mysql": "^2.18.1"
   },
   "devDependencies": {
-    "nodemon": "^2.0.4",
-    "snazzy": "^8.0.0",
-    "standard": "^14.3.4"
+    "nodemon": "^2.0.7",
+    "snazzy": "^9.0.0",
+    "standard": "^16.0.3"
   }
 }

website/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+build
+dist
+.next

website/.env.example

@@ -1 +1,3 @@
-NEXT_PUBLIC_API_URL = "http://localhost:8080"
+COMPOSE_PROJECT_NAME="function.divlo.fr-website"
+NEXT_PUBLIC_API_URL="http://localhost:8080"
+CONTAINER_API_URL="http://functionproject-api:8080"

website/.gitignore

@@ -1,22 +1,24 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
-
-# testing
-/coverage
+.yarn
 
 # next.js
-/.next/
-/out/
+.next
+out
 
 # production
-/build
+build
+dist
 
-# misc
-.DS_Store
+# PWA
+**/public/workbox-*.js
+**/public/sw.js
+
+# envs
 .env
 .env.production
 
@@ -24,3 +26,17 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# lockfiles
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# editors
+.vscode
+.theia
+.idea
+
+# misc
+.DS_Store
+.lighthouseci

website/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:14.16.1
+
+WORKDIR /app
+
+COPY ./package*.json ./
+RUN npm install
+COPY ./ ./
+
+CMD ["npm", "run", "dev"]

website/components/Footer.jsx

@@ -0,0 +1,34 @@
+import Link from 'next/link'
+
+export default function Footer () {
+  return (
+    <>
+      <footer className='footer'>
+        <p className='footer-text text-center'>
+          <Link href='/about'>
+            <a>FunctionProject</a>
+          </Link>
+          &nbsp;- Version 2.3 <br />
+          <a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>
+            Divlo
+          </a>{' '}
+          | Tous droits réservés
+        </p>
+      </footer>
+
+      <style jsx>{`
+        .footer {
+          border-top: var(--border-header-footer);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        }
+        .footer-text {
+          line-height: 2.5;
+        }
+      `}
+      </style>
+    </>
+  )
+}

website/components/Footer/Footer.css

@@ -1,10 +0,0 @@
-.footer {
-  border-top: var(--border-header-footer);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.footer-text {
-  line-height: 2.5;
-}

website/components/Footer/Footer.jsx

@@ -1,19 +0,0 @@
-import Link from 'next/link'
-import './Footer.css'
-
-export default function Footer () {
-  return (
-    <footer className='footer'>
-      <p className='footer-text text-center'>
-        <Link href='/about'>
-          <a>FunctionProject</a>
-        </Link>
-        &nbsp;- Version 2.1 <br />
-        <a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>
-          Divlo
-        </a>{' '}
-        | Tous droits réservés
-      </p>
-    </footer>
-  )
-}

website/components/FunctionAdmin/AddEditFunction.jsx

@@ -3,7 +3,6 @@ import htmlParser from 'html-react-parser'
 import Loader from '../Loader'
 import useAPI from '../../hooks/useAPI'
 import api from '../../utils/api'
-import '../../public/css/pages/admin.css'
 
 const AddEditFunction = props => {
   const [, categories] = useAPI('/categories')

website/components/FunctionAdmin/EditArticleFunction.jsx

@@ -3,8 +3,6 @@ import dynamic from 'next/dynamic'
 import { complex } from '../../utils/sunEditorConfig'
 import api from '../../utils/api'
 import FunctionArticle from '../FunctionPage/FunctionArticle'
-import 'notyf/notyf.min.css'
-import '../../public/css/suneditor.min.css'
 
 const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false })
 

website/components/FunctionAdmin/EditFormFunction.jsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import api from '../../utils/api'
-import 'notyf/notyf.min.css'
 
 const EditFormFunction = props => {
   const [inputsArray, setInputsArray] = useState(

website/components/FunctionCard/FunctionCard.css

@@ -1,67 +0,0 @@
-.FunctionCard {
-  display: flex;
-  align-items: center;
-  position: relative;
-  flex-direction: column;
-  word-wrap: break-word;
-  box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
-  border: 1px solid black;
-  border-radius: 1rem;
-  margin: 0 0 50px 0;
-  cursor: pointer;
-  transition: all 0.3s;
-  color: var(--text-color);
-  text-decoration: none !important;
-}
-.FunctionCard__container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.FunctionCard:hover {
-  transform: translateY(-7px);
-}
-/* col-md */
-@media (min-width: 768px) {
-  .FunctionCard {
-    margin: 0 30px 50px 30px;
-  }
-}
-/* col-xl */
-@media (min-width: 1200px) {
-  .FunctionCard {
-    margin: 0 20px 50px 20px;
-  }
-}
-
-.FunctionCard__top {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-grow: 1;
-}
-.FunctionCard__image {
-  width: 150px;
-}
-.FunctionCard__title {
-  font-size: 1.4em;
-  margin: 0;
-  color: var(--important);
-  font-weight: 300;
-}
-.FunctionCard__description {
-  margin: 20px 0 10px 0;
-}
-.FunctionCard__info {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-.FunctionCard__category {
-  border-radius: 0.5em;
-  padding: 0.5em;
-  margin-right: 20px;
-  font-size: 16.4px;
-}

website/components/FunctionCard/FunctionCard.jsx

@@ -3,7 +3,6 @@ import { useState, forwardRef, memo } from 'react'
 import date from 'date-and-time'
 import Loader from '../Loader'
 import { API_URL } from '../../utils/api'
-import './FunctionCard.css'
 
 const FunctionCard = memo(
   forwardRef((props, ref) => {
@@ -13,66 +12,139 @@ const FunctionCard = memo(
       setIsLoading(false)
     }
 
-    const handleError = event => {
+    const handleError = (event) => {
       event.target.src = API_URL + '/images/functions/default.png'
     }
 
     const isFormOrArticle = props.type === 'form' || props.type === 'article'
 
     return (
-      <Link
-        {...(props.isAdmin
-          ? {
-            href: '/admin/[slug]',
-            as: `/admin/${props.slug}`
-          }
-          : {
-            href: isFormOrArticle
-              ? '/functions/[slug]'
-              : `/functions/${props.slug}`,
-            as: `/functions/${props.slug}`
-          })}
-      >
-        {/* FunctionCard a une hauteur pendant chargement */}
-        <a
-          ref={ref}
-          style={
-            isLoading ? { height: '360px', justifyContent: 'center' } : null
-          }
-          className='FunctionCard col-sm-24 col-md-10 col-xl-7'
+      <>
+        <Link
+          {...(props.isAdmin
+            ? {
+                href: '/admin/[slug]',
+                as: `/admin/${props.slug}`
+              }
+            : {
+                href: isFormOrArticle
+                  ? '/functions/[slug]'
+                  : `/functions/${props.slug}`,
+                as: `/functions/${props.slug}`
+              })}
         >
-          {isLoading && <Loader width='125px' height='125px' />}
-
-          <div
-            className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
+          {/* FunctionCard a une hauteur pendant chargement */}
+          <a
+            ref={ref}
+            style={
+              isLoading ? { height: '360px', justifyContent: 'center' } : null
+            }
+            className='FunctionCard col-sm-24 col-md-10 col-xl-7'
           >
-            <div className='FunctionCard__top'>
-              <img
-                onLoad={handleLoad}
-                onError={handleError}
-                className='FunctionCard__image'
-                alt={props.title}
-                src={API_URL + props.image}
-              />
-              <h2 className='FunctionCard__title'>{props.title}</h2>
-              <p className='FunctionCard__description text-center'>
-                {props.description}
-              </p>
+            {isLoading && <Loader width='125px' height='125px' />}
+
+            <div
+              className={`FunctionCard__container ${isLoading ? 'd-none' : ''}`}
+            >
+              <div className='FunctionCard__top'>
+                <img
+                  onLoad={handleLoad}
+                  onError={handleError}
+                  className='FunctionCard__image'
+                  alt={props.title}
+                  src={API_URL + props.image}
+                />
+                <h2 className='FunctionCard__title'>{props.title}</h2>
+                <p className='FunctionCard__description text-center'>
+                  {props.description}
+                </p>
+              </div>
+              <div className='FunctionCard__info'>
+                <p
+                  className='FunctionCard__category'
+                  style={{ backgroundColor: props.categorie.color }}
+                >
+                  {props.categorie.name}
+                </p>
+                <p className='FunctionCard__publication-date'>
+                  {date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
+                </p>
+              </div>
             </div>
-            <div className='FunctionCard__info'>
-              <p
-                className='FunctionCard__category'
-                style={{ backgroundColor: props.categorie.color }}
-              >
-                {props.categorie.name}
-              </p>
-              <p className='FunctionCard__publication-date'>
-                {date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
-              </p>
-            </div>
-          </div>
-        </a>
-      </Link>
+          </a>
+        </Link>
+
+        <style jsx>{`
+          .FunctionCard {
+            display: flex;
+            align-items: center;
+            position: relative;
+            flex-direction: column;
+            word-wrap: break-word;
+            box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.25);
+            border: 1px solid black;
+            border-radius: 1rem;
+            margin: 0 0 50px 0;
+            cursor: pointer;
+            transition: all 0.3s;
+            color: var(--text-color);
+            text-decoration: none !important;
+          }
+          .FunctionCard__container {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+          .FunctionCard:hover {
+            transform: translateY(-7px);
+          }
+          /* col-md */
+          @media (min-width: 768px) {
+            .FunctionCard {
+              margin: 0 30px 50px 30px;
+            }
+          }
+          /* col-xl */
+          @media (min-width: 1200px) {
+            .FunctionCard {
+              margin: 0 20px 50px 20px;
+            }
+          }
+
+          .FunctionCard__top {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex-grow: 1;
+          }
+          .FunctionCard__image {
+            width: 150px;
+          }
+          .FunctionCard__title {
+            font-size: 1.4em;
+            margin: 0;
+            color: var(--important);
+            font-weight: 300;
+          }
+          .FunctionCard__description {
+            margin: 20px 0 10px 0;
+          }
+          .FunctionCard__info {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+          }
+          .FunctionCard__category {
+            border-radius: 0.5em;
+            padding: 0.5em;
+            margin-right: 20px;
+            font-size: 16.4px;
+          }
+        `}
+        </style>
+      </>
     )
   })
 )

website/components/FunctionPage/CommentCard/CommentCard.jsx

@@ -6,7 +6,6 @@ import { UserContext } from '../../../contexts/UserContext'
 import ReactMarkdown from 'react-markdown'
 import CodeBlock from '../../CodeBlock'
 import api, { API_URL } from '../../../utils/api'
-import './CommentCard.css'
 
 const CommentCard = forwardRef((props, ref) => {
   const { isAuth, user } = useContext(UserContext)
@@ -82,62 +81,68 @@ const CommentCard = forwardRef((props, ref) => {
               <a>{props.user.name}</a>
             </Link>
             &nbsp;-{' '}
-            {date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', false)}
+            {date.format(
+              new Date(props.createdAt),
+              'DD/MM/YYYY à HH:mm',
+              false
+            )}
           </span>
         </div>
         <div className='row'>
           <div className='col-24'>
-            {!isEditing ? (
-              <>
-                <div className='CommentCard__message'>
-                  <ReactMarkdown
-                    source={editInput}
-                    renderers={{ code: CodeBlock }}
-                  />
-                </div>
-                {isAuth && user.name === props.user.name && (
-                  <p
-                    style={{
-                      fontSize: '15px',
-                      margin: '15px 0 0 0',
-                      fontStyle: 'italic'
-                    }}
-                  >
-                    <a onClick={deleteCommentById} href='#'>
-                      supprimer
-                    </a>
+            {!isEditing
+              ? (
+                <>
+                  <div className='CommentCard__message'>
+                    <ReactMarkdown
+                      source={editInput}
+                      renderers={{ code: CodeBlock }}
+                    />
+                  </div>
+                  {isAuth && user.name === props.user.name && (
+                    <p
+                      style={{
+                        fontSize: '15px',
+                        margin: '15px 0 0 0',
+                        fontStyle: 'italic'
+                      }}
+                    >
+                      <a onClick={deleteCommentById} href='#'>
+                        supprimer
+                      </a>
                     &nbsp;-&nbsp;
-                    <a style={{ cursor: 'pointer' }} onClick={editComment}>
-                      modifier
-                    </a>
-                  </p>
+                      <a style={{ cursor: 'pointer' }} onClick={editComment}>
+                        modifier
+                      </a>
+                    </p>
+                  )}
+                </>
+                )
+              : (
+                <form onSubmit={handleSubmit}>
+                  <div className='form-group FunctionComments__post-group'>
+                    <label className='form-label' htmlFor='commentEdit'>
+                      Modifier le commentaire :
+                    </label>
+                    <textarea
+                      style={{ height: 'auto' }}
+                      value={editInput}
+                      onChange={handleChange}
+                      name='commentEdit'
+                      id='commentEdit'
+                      className='form-control'
+                      rows='5'
+                      placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
+                    />
+                  </div>
+                  <div className='form-group' style={{ marginTop: '0.7em' }}>
+                    <button type='submit' className='btn btn-dark'>
+                      Envoyer
+                    </button>
+                  </div>
+                  <div className='text-center'>{htmlParser(message)}</div>
+                </form>
                 )}
-              </>
-            ) : (
-              <form onSubmit={handleSubmit}>
-                <div className='form-group FunctionComments__post-group'>
-                  <label className='form-label' htmlFor='commentEdit'>
-                    Modifier le commentaire :
-                  </label>
-                  <textarea
-                    style={{ height: 'auto' }}
-                    value={editInput}
-                    onChange={handleChange}
-                    name='commentEdit'
-                    id='commentEdit'
-                    className='form-control'
-                    rows='5'
-                    placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
-                  />
-                </div>
-                <div className='form-group' style={{ marginTop: '0.7em' }}>
-                  <button type='submit' className='btn btn-dark'>
-                    Envoyer
-                  </button>
-                </div>
-                <div className='text-center'>{htmlParser(message)}</div>
-              </form>
-            )}
           </div>
         </div>
       </div>

website/components/FunctionPage/FunctionArticle.jsx

@@ -3,11 +3,13 @@ import htmlParser from 'html-react-parser'
 const FunctionArticle = ({ article }) => {
   return (
     <div style={{ marginBottom: '50px' }} className='container-fluid'>
-      {article != null ? (
-        htmlParser(article)
-      ) : (
-        <p className='text-center'>L'article n'est pas encore disponible.</p>
-      )}
+      {article != null
+        ? (
+            htmlParser(article)
+          )
+        : (
+          <p className='text-center'>L'article n'est pas encore disponible.</p>
+          )}
     </div>
   )
 }

website/components/FunctionPage/FunctionComments/FunctionComments.jsx

@@ -4,7 +4,6 @@ import { UserContext } from '../../../contexts/UserContext'
 import CommentCard from '../CommentCard/CommentCard'
 import Loader from '../../Loader'
 import api from '../../../utils/api'
-import './FunctionComments.css'
 
 const FunctionComments = ({ functionId }) => {
   // State pour poster un commentaire
@@ -90,36 +89,38 @@ const FunctionComments = ({ functionId }) => {
       <div className='FunctionComments__post container-fluid'>
         <div className='row FunctionComments__row'>
           <div className='col-24'>
-            {isAuth ? (
-              <form onSubmit={handleSubmit}>
-                <div className='form-group FunctionComments__post-group'>
-                  <label className='form-label' htmlFor='commentPost'>
-                    Ajouter un commentaire :
-                  </label>
-                  <textarea
-                    className='FunctionComments__textarea form-control'
-                    value={inputState.commentPost}
-                    onChange={handleChange}
-                    name='commentPost'
-                    id='commentPost'
-                    placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
-                  />
-                </div>
-                <div className='form-group' style={{ marginTop: '0.7em' }}>
-                  <button type='submit' className='btn btn-dark'>
-                    Envoyer
-                  </button>
-                </div>
-              </form>
-            ) : (
-              <p className='text-center'>
-                Vous devez être{' '}
-                <Link href='/users/login'>
-                  <a>connecté</a>
-                </Link>{' '}
-                pour poster un commentaire.
-              </p>
-            )}
+            {isAuth
+              ? (
+                <form onSubmit={handleSubmit}>
+                  <div className='form-group FunctionComments__post-group'>
+                    <label className='form-label' htmlFor='commentPost'>
+                      Ajouter un commentaire :
+                    </label>
+                    <textarea
+                      className='FunctionComments__textarea form-control'
+                      value={inputState.commentPost}
+                      onChange={handleChange}
+                      name='commentPost'
+                      id='commentPost'
+                      placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
+                    />
+                  </div>
+                  <div className='form-group' style={{ marginTop: '0.7em' }}>
+                    <button type='submit' className='btn btn-dark'>
+                      Envoyer
+                    </button>
+                  </div>
+                </form>
+                )
+              : (
+                <p className='text-center'>
+                  Vous devez être{' '}
+                  <Link href='/users/login'>
+                    <a>connecté</a>
+                  </Link>{' '}
+                  pour poster un commentaire.
+                </p>
+                )}
           </div>
         </div>
       </div>

website/components/FunctionPage/FunctionComponentTop.jsx

@@ -6,7 +6,6 @@ import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'
 import date from 'date-and-time'
 import { UserContext } from '../../contexts/UserContext'
 import api, { API_URL } from '../../utils/api'
-import '../FunctionCard/FunctionCard.css'
 
 const FunctionComponentTop = props => {
   const { isAuth, user } = useContext(UserContext)

website/components/FunctionPage/FunctionForm.jsx

@@ -6,7 +6,6 @@ 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)
 

website/components/FunctionPage/FunctionTabs.jsx

@@ -1,5 +1,4 @@
 import SwipeableViews from 'react-swipeable-views'
-import './FunctionTabs.css'
 
 const FunctionTabs = props => {
   return (

website/components/FunctionsList/FunctionsList.jsx

@@ -4,7 +4,6 @@ import FunctionCard from '../FunctionCard/FunctionCard'
 import Loader from '../Loader'
 import api from '../../utils/api'
 import useAPI from '../../hooks/useAPI'
-import './FunctionsList.css'
 
 let pageFunctions = 1
 const FunctionsList = props => {

website/components/HeadTag.jsx

@@ -1,44 +1,49 @@
 import Head from 'next/head'
 
-const HeadTag = ({ title, image, description }) => (
-  <Head>
-    <title>{title || ''}</title>
-    <link rel='icon' type='image/png' href={image} />
+const HeadTag = (props) => {
+  const {
+    title = 'FunctionProject',
+    image = '/images/FunctionProject_icon_small.png',
+    description = "Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
+    url = 'https://function.divlo.fr/'
+  } = props
 
-    {/* Meta Tag */}
-    <meta name='viewport' content='width=device-width, initial-scale=1' />
-    <meta name='description' content={description} />
-    <link rel='canonical' href='function.divlo.fr' />
-    <meta name='Language' content='fr' />
-    <meta name='theme-color' content='#ffd800' />
+  return (
+    <Head>
+      <title>{title}</title>
+      <link rel='icon' type='image/png' href={image} />
 
-    {/* Open Graph Metadata */}
-    <meta property='og:title' content={title} />
-    <meta property='og:type' content='website' />
-    <meta property='og:url' content='https://function.divlo.fr/' />
-    <meta property='og:image' content={image} />
-    <meta property='og:description' content={description} />
-    <meta property='og:locale' content='fr_FR' />
-    <meta property='og:site_name' content='FunctionProject' />
+      {/* Meta Tag */}
+      <meta name='viewport' content='width=device-width, initial-scale=1' />
+      <meta name='description' content={description} />
+      <meta name='Language' content='fr' />
+      <meta name='theme-color' content='#ffd800' />
 
-    {/* Twitter card Metadata */}
-    <meta name='twitter:card' content='summary' />
-    <meta name='twitter:description' content={description} />
-    <meta name='twitter:title' content={title} />
-    <meta name='twitter:site' content='@Divlo_FR' />
-    <meta name='twitter:image:src' content={image} />
-    <meta name='twitter:creator' content='@Divlo_FR' />
+      {/* Open Graph Metadata */}
+      <meta property='og:title' content={title} />
+      <meta property='og:type' content='website' />
+      <meta property='og:url' content={url} />
+      <meta property='og:image' content={image} />
+      <meta property='og:description' content={description} />
+      <meta property='og:locale' content='fr_FR' />
+      <meta property='og:site_name' content={title} />
 
-    {/* Preloader script */}
-    <script src='/js/preloader.js' />
-  </Head>
-)
+      {/* Twitter card Metadata */}
+      <meta name='twitter:card' content='summary' />
+      <meta name='twitter:description' content={description} />
+      <meta name='twitter:title' content={title} />
+      <meta name='twitter:image:src' content={image} />
 
-HeadTag.defaultProps = {
-  title: 'FunctionProject',
-  description:
-    "Apprenez la programmation grâce à l'apprentissage par projet alias fonction.",
-  image: '/images/FunctionProject_icon_small.png'
+      {/* PWA Data */}
+      <link rel='manifest' href='/manifest.json' />
+      <meta name='apple-mobile-web-app-capable' content='yes' />
+      <meta name='mobile-web-app-capable' content='yes' />
+      <link rel='apple-touch-icon' href={image} />
+
+      {/* Preloader script */}
+      <script src='/js/preloader.js' />
+    </Head>
+  )
 }
 
 export default HeadTag

website/components/Header/Header.jsx

@@ -3,7 +3,6 @@ import { UserContext } from '../../contexts/UserContext'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import NavigationLink from './NavigationLink'
-import './Header.css'
 
 export default function Header () {
   const { isAuth, logoutUser, user } = useContext(UserContext)
@@ -51,35 +50,37 @@ export default function Header () {
             <NavigationLink name='Accueil' path='/' />
             <NavigationLink name='Fonctions' path='/functions' />
             <NavigationLink name='Utilisateurs' path='/users' />
-            {!isAuth ? (
-              <>
-                <NavigationLink name="S'inscrire" path='/users/register' />
-                <NavigationLink name='Connexion' path='/users/login' />
-              </>
-            ) : (
-              <>
-                <li className='navbar-item'>
-                  <Link href='/users/[name]' as={`/users/${user.name}`}>
-                    <a
-                      className={`navbar-link ${
+            {!isAuth
+              ? (
+                <>
+                  <NavigationLink name="S'inscrire" path='/users/register' />
+                  <NavigationLink name='Connexion' path='/users/login' />
+                </>
+                )
+              : (
+                <>
+                  <li className='navbar-item'>
+                    <Link href='/users/[name]' as={`/users/${user.name}`}>
+                      <a
+                        className={`navbar-link ${
                         pathname === '/users/[name]'
                           ? 'navbar-link-active'
                           : null
                       }`}
-                    >
-                      Mon Profil
-                    </a>
-                  </Link>
-                </li>
-                <li className='navbar-item'>
-                  <Link href='/'>
-                    <a onClick={logoutUser} className='navbar-link'>
-                      Se déconnecter
-                    </a>
-                  </Link>
-                </li>
-              </>
-            )}
+                      >
+                        Mon Profil
+                      </a>
+                    </Link>
+                  </li>
+                  <li className='navbar-item'>
+                    <Link href='/'>
+                      <a onClick={logoutUser} className='navbar-link'>
+                        Se déconnecter
+                      </a>
+                    </Link>
+                  </li>
+                </>
+                )}
             {isAuth && user.isAdmin && (
               <NavigationLink name='Admin' path='/admin' />
             )}

website/components/Header/NavigationLink.jsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import './Header.css'
 
 export default function NavigationLink (props) {
   const { pathname } = useRouter()

website/components/UserCard/UserCard.jsx

@@ -1,7 +1,6 @@
 import Link from 'next/link'
 import { forwardRef, memo } from 'react'
 import { API_URL } from '../../utils/api'
-import './UserCard.css'
 
 const UserCard = memo(
   forwardRef((props, ref) => {

website/next.config.js

@@ -1,3 +1,11 @@
-const withCSS = require('@zeit/next-css')
 const withFonts = require('next-fonts')
-module.exports = withFonts(withCSS())
+const withPWA = require('next-pwa')
+
+module.exports = withFonts(
+  withPWA({
+    pwa: {
+      disable: process.env.NODE_ENV !== 'production',
+      dest: 'public'
+    }
+  })
+)

website/package.json

@@ -1,47 +1,57 @@
 {
   "name": "website",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Website frontend for FunctionProject",
   "main": "server.js",
+  "standard": {
+    "files": [
+      "./**/*.{js,jsx}"
+    ],
+    "envs": [
+      "node"
+    ]
+  },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development node server",
+    "dev:custom": "cross-env NODE_ENV=development node server",
+    "start:custom": "cross-env NODE_ENV=production node server",
+    "dev": "next",
+    "start": "next start",
     "build": "next build",
     "export": "next export",
-    "start": "cross-env NODE_ENV=production node server",
-    "format": "standard \"./**/*.{js,jsx}\" --fix | snazzy || exit 0"
+    "lint": "standard | snazzy"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
-    "@zeit/next-css": "^1.0.1",
-    "axios": "^0.19.2",
-    "date-and-time": "^0.13.1",
-    "date-fns": "^2.12.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "axios": "^0.21.1",
+    "date-and-time": "^1.0.0",
+    "date-fns": "^2.21.1",
     "express": "^4.17.1",
     "express-http-to-https": "^1.1.4",
-    "html-react-parser": "^0.10.2",
-    "next": "^9.5.1",
-    "next-fonts": "^1.0.3",
-    "notyf": "^3.6.0",
+    "html-react-parser": "^1.2.5",
+    "next": "^10.1.3",
+    "next-fonts": "^1.5.1",
+    "next-pwa": "^5.2.9",
+    "notyf": "^3.9.0",
     "nprogress": "^0.2.0",
-    "react": "16.13.0",
-    "react-codepen-embed": "^1.0.1",
-    "react-color": "^2.18.0",
-    "react-datepicker": "^2.14.1",
-    "react-dom": "16.13.0",
-    "react-markdown": "^4.3.1",
+    "react": "16.13.1",
+    "react-codepen-embed": "^1.0.2",
+    "react-color": "^2.19.3",
+    "react-datepicker": "^3.3.0",
+    "react-dom": "16.13.1",
+    "react-markdown": "^5.0.3",
     "react-swipeable-views": "^0.13.9",
     "react-swipeable-views-utils": "^0.13.9",
-    "react-syntax-highlighter": "^12.2.1",
+    "react-syntax-highlighter": "^15.4.3",
     "suneditor-react": "^2.8.0",
-    "universal-cookie": "^4.0.3"
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
-    "cross-env": "^7.0.2",
-    "snazzy": "^8.0.0",
-    "standard": "^14.3.4"
+    "cross-env": "^7.0.3",
+    "snazzy": "^9.0.0",
+    "standard": "^16.0.3"
   }
 }

website/pages/404.jsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import HeadTag from '../components/HeadTag'
-import '../public/css/pages/404.css'
 
 const Error404 = () => (
   <>

website/pages/_app.jsx

@@ -4,17 +4,36 @@ import NProgress from 'nprogress'
 
 /* Components Imports */
 import Header from '../components/Header/Header'
-import Footer from '../components/Footer/Footer'
+import Footer from '../components/Footer'
 
 /* Contexts Imports */
 import UserContextProvider from '../contexts/UserContext'
 
 /* CSS Imports */
+import 'notyf/notyf.min.css'
+import 'react-datepicker/dist/react-datepicker.css'
 import '../public/fonts/Montserrat/Montserrat.css'
-import '../public/css/normalize.css'
-import '../public/css/grid.css'
-import '../public/css/general.css'
-import '../public/css/nprogress.css'
+import '../styles/suneditor.min.css'
+import '../styles/normalize.css'
+import '../styles/grid.css'
+import '../styles/general.css'
+import '../styles/nprogress.css'
+import '../styles/pages/admin.css'
+import '../styles/pages/404.css'
+import '../styles/pages/index.css'
+import '../styles/pages/profile.css'
+import '../styles/pages/register-login.css'
+import '../styles/pages/users.css'
+import '../styles/pages/FunctionComponent.css'
+import '../styles/pages/functions/chronometerTimer.css'
+import '../styles/pages/functions/rightPrice.css'
+import '../styles/pages/functions/toDoList.css'
+import '../styles/components/Header.css'
+import '../styles/components/FunctionTabs.css'
+import '../styles/components/CommentCard.css'
+import '../styles/components/FunctionComments.css'
+import '../styles/components/FunctionsList.css'
+import '../styles/components/UserCard.css'
 
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())

website/pages/admin/[slug].jsx

@@ -7,8 +7,6 @@ import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunct
 import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction'
 import redirect from '../../utils/redirect'
 import api, { API_URL } from '../../utils/api'
-import '../../components/FunctionPage/FunctionTabs.css'
-import '../../public/css/pages/admin.css'
 
 const AdminFunctionComponent = props => {
   const [slideIndex, setSlideIndex] = useState(0)

website/pages/admin/index.jsx

@@ -8,7 +8,6 @@ import Modal from '../../components/Modal'
 import FunctionsList from '../../components/FunctionsList/FunctionsList'
 import AddEditFunction from '../../components/FunctionAdmin/AddEditFunction'
 import redirect from '../../utils/redirect'
-import '../../public/css/pages/admin.css'
 
 const Admin = props => {
   const [isOpen, setIsOpen] = useState(false)
@@ -23,64 +22,66 @@ const Admin = props => {
       />
 
       {/* Création d'une fonction */}
-      {isOpen ? (
-        <Modal toggleModal={toggleModal}>
-          <div className='Admin__Modal__container container-fluid'>
-            <div className='Admin__Modal__row row'>
-              <div className='col-24'>
-                <div className='Admin__Modal-top-container row'>
-                  <div className='col-24'>
-                    <span
-                      onClick={toggleModal}
-                      style={{
-                        cursor: 'pointer',
-                        position: 'absolute',
-                        left: 0
-                      }}
-                    >
-                      <FontAwesomeIcon
-                        icon={faTimes}
-                        style={{ width: '1.5rem', color: 'red' }}
-                      />
-                    </span>
-                    <h2 className='text-center'>Crée une nouvelle fonction</h2>
+      {isOpen
+        ? (
+          <Modal toggleModal={toggleModal}>
+            <div className='Admin__Modal__container container-fluid'>
+              <div className='Admin__Modal__row row'>
+                <div className='col-24'>
+                  <div className='Admin__Modal-top-container row'>
+                    <div className='col-24'>
+                      <span
+                        onClick={toggleModal}
+                        style={{
+                          cursor: 'pointer',
+                          position: 'absolute',
+                          left: 0
+                        }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faTimes}
+                          style={{ width: '1.5rem', color: 'red' }}
+                        />
+                      </span>
+                      <h2 className='text-center'>Crée une nouvelle fonction</h2>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div className='col-24'>
-                <AddEditFunction
-                  defaultInputState={{ type: 'form' }}
-                  {...props}
-                />
+                <div className='col-24'>
+                  <AddEditFunction
+                    defaultInputState={{ type: 'form' }}
+                    {...props}
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        </Modal>
-      ) : (
-        <FunctionsList isAdmin token={props.user.token}>
-          <div className='col-24'>
-            <h1 className='Functions__title'>Administration</h1>
-            <button
-              onClick={toggleModal}
-              style={{ margin: '0 0 40px 0' }}
-              className='btn btn-dark'
-            >
-              Crée une nouvelle fonction
-            </button>
-            <Link href='/admin/manageCategories'>
-              <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
-                Gérer les catégories
+          </Modal>
+          )
+        : (
+          <FunctionsList isAdmin token={props.user.token}>
+            <div className='col-24'>
+              <h1 className='Functions__title'>Administration</h1>
+              <button
+                onClick={toggleModal}
+                style={{ margin: '0 0 40px 0' }}
+                className='btn btn-dark'
+              >
+                Crée une nouvelle fonction
               </button>
-            </Link>
-            <Link href='/admin/manageQuotes'>
-              <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
-                Gérer les citations
-              </button>
-            </Link>
-          </div>
-        </FunctionsList>
-      )}
+              <Link href='/admin/manageCategories'>
+                <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
+                  Gérer les catégories
+                </button>
+              </Link>
+              <Link href='/admin/manageQuotes'>
+                <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
+                  Gérer les citations
+                </button>
+              </Link>
+            </div>
+          </FunctionsList>
+          )}
     </>
   )
 }

website/pages/admin/manageCategories.jsx

@@ -11,7 +11,6 @@ import htmlParser from 'html-react-parser'
 import Loader from '../../components/Loader'
 import useAPI from '../../hooks/useAPI'
 import api from '../../utils/api'
-import '../../public/css/pages/admin.css'
 
 const defaultCategoryState = { name: '', color: '#ffffff' }
 
@@ -159,119 +158,121 @@ const manageCategories = props => {
         description="Page d'administration de FunctionProject. Gérer les catégories."
       />
 
-      {isOpen ? (
-        <Modal>
-          <AddEditCategory
-            handleToggleModal={toggleModal}
-            defaultInputState={defaultInputState}
-            {...props}
-            isEditing={isEditing}
-          />
-        </Modal>
-      ) : (
-        <div className='container-fluid text-center'>
-          <div className='row justify-content-center'>
-            <div className='col-24'>
-              <h1>Gérer les catégories</h1>
-              <button
-                onClick={() => {
-                  setDefaultInputState(defaultCategoryState)
-                  toggleModal()
-                  setIsEditing(false)
-                }}
-                style={{ margin: '0 0 40px 0' }}
-                className='btn btn-dark'
-              >
-                Ajouter une catégorie
-              </button>
+      {isOpen
+        ? (
+          <Modal>
+            <AddEditCategory
+              handleToggleModal={toggleModal}
+              defaultInputState={defaultInputState}
+              {...props}
+              isEditing={isEditing}
+            />
+          </Modal>
+          )
+        : (
+          <div className='container-fluid text-center'>
+            <div className='row justify-content-center'>
+              <div className='col-24'>
+                <h1>Gérer les catégories</h1>
+                <button
+                  onClick={() => {
+                    setDefaultInputState(defaultCategoryState)
+                    toggleModal()
+                    setIsEditing(false)
+                  }}
+                  style={{ margin: '0 0 40px 0' }}
+                  className='btn btn-dark'
+                >
+                  Ajouter une catégorie
+                </button>
+              </div>
             </div>
-          </div>
-          <div className='row justify-content-center'>
-            <div className='container-fluid'>
-              <div className='col-24 table-column'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th className='table-row' scope='col'>
-                        id
-                      </th>
-                      <th className='table-row' scope='col'>
-                        name
-                      </th>
-                      <th className='table-row' scope='col'>
-                        color
-                      </th>
-                      <th className='table-row' scope='col'>
-                        createdAt
-                      </th>
-                      <th className='table-row' scope='col'>
-                        updatedAt
-                      </th>
-                      <th className='table-row' scope='col'>
-                        Modifier
-                      </th>
-                      <th className='table-row' scope='col'>
-                        Supprimer
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {categories.map(category => {
-                      return (
-                        <tr
-                          key={category.id}
-                          style={{ backgroundColor: category.color }}
-                        >
-                          <td className='table-row'>{category.id}</td>
-                          <td className='table-row'>{category.name}</td>
-                          <td className='table-row'>{category.color}</td>
-                          <td className='table-row'>
-                            {date.format(
-                              new Date(category.createdAt),
-                              'DD/MM/YYYY à HH:mm',
-                              false
-                            )}
-                          </td>
-                          <td className='table-row'>
-                            {date.format(
-                              new Date(category.updatedAt),
-                              'DD/MM/YYYY à HH:mm',
-                              false
-                            )}
-                          </td>
-                          <td
-                            style={{ cursor: 'pointer' }}
-                            onClick={() =>
-                              handleEditCategory({
-                                name: category.name,
-                                color: category.color,
-                                id: category.id
-                              })}
+            <div className='row justify-content-center'>
+              <div className='container-fluid'>
+                <div className='col-24 table-column'>
+                  <table className='table'>
+                    <thead>
+                      <tr>
+                        <th className='table-row' scope='col'>
+                          id
+                        </th>
+                        <th className='table-row' scope='col'>
+                          name
+                        </th>
+                        <th className='table-row' scope='col'>
+                          color
+                        </th>
+                        <th className='table-row' scope='col'>
+                          createdAt
+                        </th>
+                        <th className='table-row' scope='col'>
+                          updatedAt
+                        </th>
+                        <th className='table-row' scope='col'>
+                          Modifier
+                        </th>
+                        <th className='table-row' scope='col'>
+                          Supprimer
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {categories.map(category => {
+                        return (
+                          <tr
+                            key={category.id}
+                            style={{ backgroundColor: category.color }}
                           >
-                            <FontAwesomeIcon
-                              icon={faPen}
-                              style={{ width: '1.5rem' }}
-                            />
-                          </td>
-                          <td
-                            style={{ cursor: 'pointer' }}
-                            onClick={() => handleRemoveCategory(category.id)}
-                          >
-                            <FontAwesomeIcon
-                              icon={faTrash}
-                              style={{ width: '1.5rem' }}
-                            />
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
+                            <td className='table-row'>{category.id}</td>
+                            <td className='table-row'>{category.name}</td>
+                            <td className='table-row'>{category.color}</td>
+                            <td className='table-row'>
+                              {date.format(
+                                new Date(category.createdAt),
+                                'DD/MM/YYYY à HH:mm',
+                                false
+                              )}
+                            </td>
+                            <td className='table-row'>
+                              {date.format(
+                                new Date(category.updatedAt),
+                                'DD/MM/YYYY à HH:mm',
+                                false
+                              )}
+                            </td>
+                            <td
+                              style={{ cursor: 'pointer' }}
+                              onClick={() =>
+                                handleEditCategory({
+                                  name: category.name,
+                                  color: category.color,
+                                  id: category.id
+                                })}
+                            >
+                              <FontAwesomeIcon
+                                icon={faPen}
+                                style={{ width: '1.5rem' }}
+                              />
+                            </td>
+                            <td
+                              style={{ cursor: 'pointer' }}
+                              onClick={() => handleRemoveCategory(category.id)}
+                            >
+                              <FontAwesomeIcon
+                                icon={faTrash}
+                                style={{ width: '1.5rem' }}
+                              />
+                            </td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+          )}
     </>
   )
 }

website/pages/admin/manageQuotes.jsx

@@ -6,7 +6,6 @@ import { faCheck, faTrash } from '@fortawesome/free-solid-svg-icons'
 import redirect from '../../utils/redirect'
 import HeadTag from '../../components/HeadTag'
 import api from '../../utils/api'
-import '../../public/css/pages/admin.css'
 
 const manageQuotes = props => {
   const [quotesData, setQuotesData] = useState({

website/pages/functions/[slug].jsx

@@ -5,7 +5,6 @@ import FunctionComments from '../../components/FunctionPage/FunctionComments/Fun
 import FunctionPage from '../../components/FunctionPage/FunctionPage'
 import redirect from '../../utils/redirect'
 import api from '../../utils/api'
-import '../../public/css/pages/FunctionComponent.css'
 
 const FunctionTabManager = props => {
   if (props.type === 'form') {

website/pages/functions/chronometerTimer.jsx

@@ -9,8 +9,6 @@ import Loader from '../../components/Loader'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlay, faPause, faSync } from '@fortawesome/free-solid-svg-icons'
 import api from '../../utils/api'
-import '../../public/css/pages/FunctionComponent.css'
-import '../../public/css/pages/functions/chronometerTimer.css'
 
 let interval
 function convertSeconds (seconds) {

website/pages/functions/linkShortener.jsx

@@ -12,9 +12,6 @@ import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
 import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
 import Modal from '../../components/Modal'
 import api from '../../utils/api'
-import 'notyf/notyf.min.css'
-import '../../public/css/pages/FunctionComponent.css'
-import '../../public/css/pages/admin.css'
 
 const CreateLink = ({ linksData, setLinksData }) => {
   const { isAuth, user } = useContext(UserContext)
@@ -266,144 +263,146 @@ const LinksList = ({
       </div>
       <div className='row justify-content-center'>
         <div className='container-fluid'>
-          {!isEditing ? (
-            <div className='col-24 table-column'>
-              <table className='table' style={{ marginBottom: '40px' }}>
-                <thead>
-                  <tr>
-                    <th className='table-row' scope='col'>
-                      Liens
-                    </th>
-                    <th className='table-row' scope='col'>
-                      Nom
-                    </th>
-                    <th className='table-row' scope='col'>
-                      Compteur de clics
-                    </th>
-                    <th className='table-row' scope='col'>
-                      Modifier
-                    </th>
-                    <th className='table-row' scope='col'>
-                      Supprimer
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {linksData.rows.map((link, index) => {
-                    const linkJSX = (
-                      <>
-                        <td className='table-row'>
-                          <a href={link.url}>{link.url}</a>
-                        </td>
-                        <td className='table-row'>
-                          <a href={`https://s.divlo.fr/${link.shortcut}`}>
-                            {link.shortcut}
-                          </a>
-                        </td>
-                        <td className='table-row'>{link.count}</td>
-                        <td
-                          style={{ cursor: 'pointer' }}
-                          onClick={() => handleEditLink(link)}
-                        >
-                          <FontAwesomeIcon
-                            icon={faPen}
-                            style={{ width: '1.5rem' }}
-                          />
-                        </td>
-                        <td
-                          style={{ cursor: 'pointer' }}
-                          onClick={() => handleRemoveLink(link.id)}
-                        >
-                          <FontAwesomeIcon
-                            icon={faTrash}
-                            style={{ width: '1.5rem' }}
-                          />
-                        </td>
-                      </>
-                    )
-                    // Si c'est le dernier élément
-                    if (linksData.rows.length === index + 1) {
-                      return (
-                        <tr key={index} ref={lastLinkRef}>
-                          {linkJSX}
-                        </tr>
+          {!isEditing
+            ? (
+              <div className='col-24 table-column'>
+                <table className='table' style={{ marginBottom: '40px' }}>
+                  <thead>
+                    <tr>
+                      <th className='table-row' scope='col'>
+                        Liens
+                      </th>
+                      <th className='table-row' scope='col'>
+                        Nom
+                      </th>
+                      <th className='table-row' scope='col'>
+                        Compteur de clics
+                      </th>
+                      <th className='table-row' scope='col'>
+                        Modifier
+                      </th>
+                      <th className='table-row' scope='col'>
+                        Supprimer
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {linksData.rows.map((link, index) => {
+                      const linkJSX = (
+                        <>
+                          <td className='table-row'>
+                            <a href={link.url}>{link.url}</a>
+                          </td>
+                          <td className='table-row'>
+                            <a href={`https://s.divlo.fr/${link.shortcut}`}>
+                              {link.shortcut}
+                            </a>
+                          </td>
+                          <td className='table-row'>{link.count}</td>
+                          <td
+                            style={{ cursor: 'pointer' }}
+                            onClick={() => handleEditLink(link)}
+                          >
+                            <FontAwesomeIcon
+                              icon={faPen}
+                              style={{ width: '1.5rem' }}
+                            />
+                          </td>
+                          <td
+                            style={{ cursor: 'pointer' }}
+                            onClick={() => handleRemoveLink(link.id)}
+                          >
+                            <FontAwesomeIcon
+                              icon={faTrash}
+                              style={{ width: '1.5rem' }}
+                            />
+                          </td>
+                        </>
                       )
-                    }
-                    return <tr key={index}>{linkJSX}</tr>
-                  })}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            <Modal>
-              <div className='Admin__Modal__container container-fluid'>
-                <div className='Admin__Modal__row row'>
-                  <div className='col-24'>
-                    <div className='Admin__Modal-top-container row'>
-                      <div className='col-24'>
-                        <span
-                          onClick={toggleModal}
-                          style={{
-                            cursor: 'pointer',
-                            position: 'absolute',
-                            left: 0
-                          }}
-                        >
-                          <FontAwesomeIcon
-                            icon={faTimes}
-                            style={{ width: '1.5rem', color: 'red' }}
-                          />
-                        </span>
+                      // Si c'est le dernier élément
+                      if (linksData.rows.length === index + 1) {
+                        return (
+                          <tr key={index} ref={lastLinkRef}>
+                            {linkJSX}
+                          </tr>
+                        )
+                      }
+                      return <tr key={index}>{linkJSX}</tr>
+                    })}
+                  </tbody>
+                </table>
+              </div>
+              )
+            : (
+              <Modal>
+                <div className='Admin__Modal__container container-fluid'>
+                  <div className='Admin__Modal__row row'>
+                    <div className='col-24'>
+                      <div className='Admin__Modal-top-container row'>
+                        <div className='col-24'>
+                          <span
+                            onClick={toggleModal}
+                            style={{
+                              cursor: 'pointer',
+                              position: 'absolute',
+                              left: 0
+                            }}
+                          >
+                            <FontAwesomeIcon
+                              icon={faTimes}
+                              style={{ width: '1.5rem', color: 'red' }}
+                            />
+                          </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className='col-24'>
-                    <form onSubmit={handleEditSubmit}>
-                      <div className='form-group'>
-                        <label className='form-label' htmlFor='url'>
-                          Entrez le lien à raccourcir :
-                        </label>
-                        <input
-                          value={defaultInputState.url}
-                          onChange={handleChange}
-                          type='text'
-                          name='url'
-                          id='url'
-                          placeholder='(e.g : https://divlo.fr)'
-                          className='form-control'
-                        />
-                      </div>
+                    <div className='col-24'>
+                      <form onSubmit={handleEditSubmit}>
+                        <div className='form-group'>
+                          <label className='form-label' htmlFor='url'>
+                            Entrez le lien à raccourcir :
+                          </label>
+                          <input
+                            value={defaultInputState.url}
+                            onChange={handleChange}
+                            type='text'
+                            name='url'
+                            id='url'
+                            placeholder='(e.g : https://divlo.fr)'
+                            className='form-control'
+                          />
+                        </div>
 
-                      <div className='form-group'>
-                        <label className='form-label' htmlFor='shortcutName'>
-                          Entrez le nom du raccourci :
-                        </label>
-                        <input
-                          value={defaultInputState.shortcutName}
-                          onChange={handleChange}
-                          type='text'
-                          name='shortcutName'
-                          id='shortcutName'
-                          placeholder='(e.g : divlo)'
-                          className='form-control'
-                        />
-                      </div>
+                        <div className='form-group'>
+                          <label className='form-label' htmlFor='shortcutName'>
+                            Entrez le nom du raccourci :
+                          </label>
+                          <input
+                            value={defaultInputState.shortcutName}
+                            onChange={handleChange}
+                            type='text'
+                            name='shortcutName'
+                            id='shortcutName'
+                            placeholder='(e.g : divlo)'
+                            className='form-control'
+                          />
+                        </div>
 
-                      <div className='form-group text-center'>
-                        <button type='submit' className='btn btn-dark'>
-                          Envoyer
-                        </button>
+                        <div className='form-group text-center'>
+                          <button type='submit' className='btn btn-dark'>
+                            Envoyer
+                          </button>
+                        </div>
+                      </form>
+                      <div className='form-result text-center'>
+                        {isLoading ? <Loader /> : htmlParser(message)}
                       </div>
-                    </form>
-                    <div className='form-result text-center'>
-                      {isLoading ? <Loader /> : htmlParser(message)}
                     </div>
                   </div>
                 </div>
-              </div>
-            </Modal>
-          )}
+              </Modal>
+              )}
         </div>
       </div>
     </div>

website/pages/functions/randomQuote.jsx

@@ -12,8 +12,6 @@ import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
 import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
 import api from '../../utils/api'
 import copyToClipboard from '../../utils/copyToClipboard'
-import 'notyf/notyf.min.css'
-import '../../public/css/pages/FunctionComponent.css'
 
 const GenerateQuote = () => {
   const [quote, setQuote] = useState({ quote: '', author: '' })

website/pages/functions/rightPrice.jsx

@@ -6,8 +6,6 @@ import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
 import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
 import Loader from '../../components/Loader'
 import api from '../../utils/api'
-import '../../public/css/pages/FunctionComponent.css'
-import '../../public/css/pages/functions/rightPrice.css'
 
 const PlayRightPrice = () => {
   const [isPlaying, setIsPlaying] = useState(false)
@@ -54,104 +52,110 @@ const PlayRightPrice = () => {
 
   return (
     <div className='container-fluid'>
-      {!isPlaying ? (
-        <div className='row justify-content-center'>
-          <div className='form-group text-center'>
-            <button
-              onClick={handlePlaying}
-              type='submit'
-              className='btn btn-dark'
-            >
-              Jouer
-            </button>
-          </div>
-        </div>
-      ) : isLoadingProduct ? (
-        <div className='row justify-content-center'>
-          <Loader />
-        </div>
-      ) : (
-        <>
+      {!isPlaying
+        ? (
           <div className='row justify-content-center'>
-            <div
-              style={{ marginBottom: '20px' }}
-              className='col-24 text-center'
-            >
-              <h4>{productToGuess.name}</h4>
-              <img
-                src={productToGuess.image}
-                alt={productToGuess.name}
-                className='Product__image'
-              />
+            <div className='form-group text-center'>
+              <button
+                onClick={handlePlaying}
+                type='submit'
+                className='btn btn-dark'
+              >
+                Jouer
+              </button>
             </div>
           </div>
-
-          <div className='row justify-content-center'>
-            <div style={{ marginBottom: '25px' }} className='col-24'>
-              {attemptsArray.length > 0 &&
-              attemptsArray[0].message ===
-                'Bravo, vous avez trouvé le juste prix !' ? (
-                  <div className='form-group text-center'>
-                    <button
-                      onClick={handlePlaying}
-                      type='submit'
-                      className='btn btn-dark'
-                    >
-                    Rejouer ?
-                    </button>
-                  </div>
-                ) : (
-                  <form onSubmit={handleSubmit}>
-                    <div className='text-center'>
-                      <input
-                        value={enteredPrice}
-                        onChange={handleChange}
-                        name='enteredPrice'
-                        id='enteredPrice'
-                        type='number'
-                        step='0.01'
-                        className='form-control'
-                        autoComplete='off'
-                        placeholder='Devinez le prix (prix à virgule possible!)'
-                      />
-                    </div>
-
-                    <div className='form-group text-center'>
-                      <button type='submit' className='btn btn-dark'>
-                      Deviner
-                      </button>
-                    </div>
-                  </form>
-                )}
+          )
+        : isLoadingProduct
+          ? (
+            <div className='row justify-content-center'>
+              <Loader />
             </div>
-          </div>
-
-          <div
-            style={{ marginBottom: '30px' }}
-            className='row justify-content-center'
-          >
-            {attemptsArray.map((attempt, index) => {
-              const { message } = attempt
-              let priceResultClass
-              if (message === "C'est moins !") {
-                priceResultClass = 'Price__result-moins'
-              } else if (message === "C'est plus !") {
-                priceResultClass = 'Price__result-plus'
-              } else {
-                priceResultClass = 'Price__result-success'
-              }
-              return (
+            )
+          : (
+            <>
+              <div className='row justify-content-center'>
                 <div
-                  key={index}
-                  className={`col-24 Price__result ${priceResultClass}`}
+                  style={{ marginBottom: '20px' }}
+                  className='col-24 text-center'
                 >
-                  # {attempt.numberTry} ({attempt.guessedPrice}) {message}
+                  <h4>{productToGuess.name}</h4>
+                  <img
+                    src={productToGuess.image}
+                    alt={productToGuess.name}
+                    className='Product__image'
+                  />
                 </div>
-              )
-            })}
-          </div>
-        </>
-      )}
+              </div>
+
+              <div className='row justify-content-center'>
+                <div style={{ marginBottom: '25px' }} className='col-24'>
+                  {attemptsArray.length > 0 &&
+                attemptsArray[0].message ===
+                'Bravo, vous avez trouvé le juste prix !'
+                    ? (
+                      <div className='form-group text-center'>
+                        <button
+                          onClick={handlePlaying}
+                          type='submit'
+                          className='btn btn-dark'
+                        >
+                          Rejouer ?
+                        </button>
+                      </div>
+                      )
+                    : (
+                      <form onSubmit={handleSubmit}>
+                        <div className='text-center'>
+                          <input
+                            value={enteredPrice}
+                            onChange={handleChange}
+                            name='enteredPrice'
+                            id='enteredPrice'
+                            type='number'
+                            step='0.01'
+                            className='form-control'
+                            autoComplete='off'
+                            placeholder='Devinez le prix (prix à virgule possible!)'
+                          />
+                        </div>
+
+                        <div className='form-group text-center'>
+                          <button type='submit' className='btn btn-dark'>
+                            Deviner
+                          </button>
+                        </div>
+                      </form>
+                      )}
+                </div>
+              </div>
+
+              <div
+                style={{ marginBottom: '30px' }}
+                className='row justify-content-center'
+              >
+                {attemptsArray.map((attempt, index) => {
+                  const { message } = attempt
+                  let priceResultClass
+                  if (message === "C'est moins !") {
+                    priceResultClass = 'Price__result-moins'
+                  } else if (message === "C'est plus !") {
+                    priceResultClass = 'Price__result-plus'
+                  } else {
+                    priceResultClass = 'Price__result-success'
+                  }
+                  return (
+                    <div
+                      key={index}
+                      className={`col-24 Price__result ${priceResultClass}`}
+                    >
+                      # {attempt.numberTry} ({attempt.guessedPrice}) {message}
+                    </div>
+                  )
+                })}
+              </div>
+            </>
+            )}
     </div>
   )
 }

website/pages/functions/toDoList.jsx

@@ -9,8 +9,6 @@ import FunctionTabs from '../../components/FunctionPage/FunctionTabs'
 import FunctionArticle from '../../components/FunctionPage/FunctionArticle'
 import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments'
 import api from '../../utils/api'
-import '../../public/css/pages/FunctionComponent.css'
-import '../../public/css/pages/functions/toDoList.css'
 
 const ManageToDo = () => {
   const { isAuth, user } = useContext(UserContext)

website/pages/index.jsx

@@ -4,7 +4,6 @@ import { autoPlay } from 'react-swipeable-views-utils'
 import Link from 'next/link'
 import HeadTag from '../components/HeadTag'
 import Loader from '../components/Loader'
-import '../public/css/pages/index.css'
 
 const AutoPlaySwipeableViews = autoPlay(SwipeableViews)
 

website/pages/users/[name].jsx

@@ -13,7 +13,6 @@ import Loader from '../../components/Loader'
 import ReactMarkdown from 'react-markdown'
 import CodeBlock from '../../components/CodeBlock'
 import api, { API_URL } from '../../utils/api'
-import '../../public/css/pages/profile.css'
 
 const Profile = props => {
   const { isAuth, user, logoutUser } = useContext(UserContext)
@@ -84,299 +83,301 @@ const Profile = props => {
       />
 
       {/* Édition du profil */}
-      {isOpen ? (
-        <Modal toggleModal={toggleModal}>
-          <div className='Profile__container container-fluid'>
-            <div className='Profile__row row'>
-              <div className='col-24'>
-                <div className='Profile__Modal-top-container row'>
-                  <div className='col-24'>
-                    <span
+      {isOpen
+        ? (
+          <Modal toggleModal={toggleModal}>
+            <div className='Profile__container container-fluid'>
+              <div className='Profile__row row'>
+                <div className='col-24'>
+                  <div className='Profile__Modal-top-container row'>
+                    <div className='col-24'>
+                      <span
+                        onClick={toggleModal}
+                        style={{
+                          cursor: 'pointer',
+                          position: 'absolute',
+                          left: 0
+                        }}
+                      >
+                        <FontAwesomeIcon
+                          icon={faTimes}
+                          style={{ width: '1.5rem', color: 'red' }}
+                        />
+                      </span>
+                      <h2 className='text-center'>Éditer le profil</h2>
+                      <p className='text-center'>
+                        <em>
+                          (Vous devrez vous reconnecter après la sauvegarde){' '}
+                          <br /> Si vous changez votre adresse email, vous devrez
+                          la confirmer comme à l'inscription (vérifier vos
+                          emails).
+                        </em>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='col-24'>
+                  <form onSubmit={handleSubmit}>
+                    <div className='form-group'>
+                      <label className='form-label' htmlFor='name'>
+                        Nom :
+                      </label>
+                      <input
+                        value={inputState.name}
+                        onChange={handleChange}
+                        type='text'
+                        name='name'
+                        id='name'
+                        className='form-control'
+                        placeholder='Divlo'
+                      />
+                    </div>
+
+                    <div className='form-group'>
+                      <label className='form-label' htmlFor='email'>
+                        Email :
+                      </label>
+                      <input
+                        value={inputState.email}
+                        onChange={handleChange}
+                        type='email'
+                        name='email'
+                        id='email'
+                        className='form-control'
+                        placeholder='email@gmail.com'
+                      />
+                    </div>
+
+                    <div className='form-group custom-control custom-switch'>
+                      <input
+                        onChange={event => handleChange(event, true)}
+                        type='checkbox'
+                        name='isPublicEmail'
+                        checked={inputState.isPublicEmail}
+                        className='custom-control-input'
+                        id='isPublicEmail'
+                      />
+                      <label
+                        className='custom-control-label'
+                        htmlFor='isPublicEmail'
+                      >
+                        Email Public
+                      </label>
+                    </div>
+
+                    <div className='form-group'>
+                      <label className='form-label' htmlFor='biography'>
+                        Biographie :
+                      </label>
+                      <textarea
+                        style={{ height: 'auto' }}
+                        value={inputState.biography}
+                        onChange={handleChange}
+                        name='biography'
+                        id='biography'
+                        className='form-control'
+                        rows='5'
+                      />
+                    </div>
+
+                    <div className='form-group'>
+                      <label className='form-label' htmlFor='logo'>
+                        Logo <em>(400x400 recommandé)</em> :
+                      </label>
+                      <p style={{ margin: 0 }}>
+                        <em>
+                          Si aucun fichier est choisi, le logo ne sera pas
+                          modifié.
+                        </em>
+                      </p>
+                      <input
+                        onChange={handleChange}
+                        accept='image/jpeg,image/jpg,image/png,image/gif'
+                        type='file'
+                        name='logo'
+                        id='logo'
+                      />
+                    </div>
+
+                    <div className='form-group text-center'>
+                      <button type='submit' className='btn btn-dark'>
+                        Sauvegarder
+                      </button>
+                    </div>
+                  </form>
+                  <div className='form-result text-center'>
+                    {isLoading ? <Loader /> : htmlParser(message)}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Modal>
+          )
+        : (
+          <div className='container-fluid Profile__container'>
+            <div className='row Profile__row'>
+              <div className='col-20'>
+                <div className='text-center'>
+                  <h1>
+                    Profil de <span className='important'>{props.name}</span>
+                  </h1>
+                </div>
+                <div className='row justify-content-center'>
+                  <div className='col-24 text-center'>
+                    <img
+                      className='Profile__logo'
+                      src={API_URL + props.logo}
+                      alt={props.name}
+                    />
+                  </div>
+
+                  <div className='col-24 text-center'>
+                    {props.biography != null && <p>{props.biography}</p>}
+                    {props.email != null && (
+                      <p>
+                        <span className='important'>Email :</span> {props.email}
+                      </p>
+                    )}
+                    <p>
+                      <span className='important'>
+                        Date de création du compte :
+                      </span>{' '}
+                      {date.format(
+                        new Date(props.createdAt),
+                        'DD/MM/YYYY à HH:mm',
+                        false
+                      )}
+                    </p>
+                  </div>
+
+                  {isAuth && user.name === props.name && (
+                    <button
                       onClick={toggleModal}
-                      style={{
-                        cursor: 'pointer',
-                        position: 'absolute',
-                        left: 0
-                      }}
+                      style={{ marginBottom: '25px' }}
+                      className='btn btn-dark'
                     >
                       <FontAwesomeIcon
-                        icon={faTimes}
-                        style={{ width: '1.5rem', color: 'red' }}
+                        icon={faPen}
+                        style={{ cursor: 'pointer', width: '1rem' }}
                       />
-                    </span>
-                    <h2 className='text-center'>Éditer le profil</h2>
-                    <p className='text-center'>
-                      <em>
-                        (Vous devrez vous reconnecter après la sauvegarde){' '}
-                        <br /> Si vous changez votre adresse email, vous devrez
-                        la confirmer comme à l'inscription (vérifier vos
-                        emails).
-                      </em>
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <div className='col-24'>
-                <form onSubmit={handleSubmit}>
-                  <div className='form-group'>
-                    <label className='form-label' htmlFor='name'>
-                      Nom :
-                    </label>
-                    <input
-                      value={inputState.name}
-                      onChange={handleChange}
-                      type='text'
-                      name='name'
-                      id='name'
-                      className='form-control'
-                      placeholder='Divlo'
-                    />
-                  </div>
-
-                  <div className='form-group'>
-                    <label className='form-label' htmlFor='email'>
-                      Email :
-                    </label>
-                    <input
-                      value={inputState.email}
-                      onChange={handleChange}
-                      type='email'
-                      name='email'
-                      id='email'
-                      className='form-control'
-                      placeholder='email@gmail.com'
-                    />
-                  </div>
-
-                  <div className='form-group custom-control custom-switch'>
-                    <input
-                      onChange={event => handleChange(event, true)}
-                      type='checkbox'
-                      name='isPublicEmail'
-                      checked={inputState.isPublicEmail}
-                      className='custom-control-input'
-                      id='isPublicEmail'
-                    />
-                    <label
-                      className='custom-control-label'
-                      htmlFor='isPublicEmail'
-                    >
-                      Email Public
-                    </label>
-                  </div>
-
-                  <div className='form-group'>
-                    <label className='form-label' htmlFor='biography'>
-                      Biographie :
-                    </label>
-                    <textarea
-                      style={{ height: 'auto' }}
-                      value={inputState.biography}
-                      onChange={handleChange}
-                      name='biography'
-                      id='biography'
-                      className='form-control'
-                      rows='5'
-                    />
-                  </div>
-
-                  <div className='form-group'>
-                    <label className='form-label' htmlFor='logo'>
-                      Logo <em>(400x400 recommandé)</em> :
-                    </label>
-                    <p style={{ margin: 0 }}>
-                      <em>
-                        Si aucun fichier est choisi, le logo ne sera pas
-                        modifié.
-                      </em>
-                    </p>
-                    <input
-                      onChange={handleChange}
-                      accept='image/jpeg,image/jpg,image/png,image/gif'
-                      type='file'
-                      name='logo'
-                      id='logo'
-                    />
-                  </div>
-
-                  <div className='form-group text-center'>
-                    <button type='submit' className='btn btn-dark'>
-                      Sauvegarder
+                    &nbsp; Éditez le profil
                     </button>
-                  </div>
-                </form>
-                <div className='form-result text-center'>
-                  {isLoading ? <Loader /> : htmlParser(message)}
+                  )}
                 </div>
               </div>
             </div>
-          </div>
-        </Modal>
-      ) : (
-        <div className='container-fluid Profile__container'>
-          <div className='row Profile__row'>
-            <div className='col-20'>
-              <div className='text-center'>
-                <h1>
-                  Profil de <span className='important'>{props.name}</span>
-                </h1>
-              </div>
+
+            {props.favoritesArray.length > 0 && (
               <div className='row justify-content-center'>
                 <div className='col-24 text-center'>
-                  <img
-                    className='Profile__logo'
-                    src={API_URL + props.logo}
-                    alt={props.name}
-                  />
+                  <h2>
+                    Dernières fonctions ajoutées aux{' '}
+                    <span className='important'>favoris</span> :
+                  </h2>
                 </div>
+                <div className='col-24'>
+                  <div className='row justify-content-center'>
+                    {props.favoritesArray.map(favorite => {
+                      return <FunctionCard key={favorite.id} {...favorite} />
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
 
+            {props.commentsArray.length > 0 && (
+              <div className='row justify-content-center'>
                 <div className='col-24 text-center'>
-                  {props.biography != null && <p>{props.biography}</p>}
-                  {props.email != null && (
-                    <p>
-                      <span className='important'>Email :</span> {props.email}
-                    </p>
-                  )}
-                  <p>
-                    <span className='important'>
-                      Date de création du compte :
-                    </span>{' '}
-                    {date.format(
-                      new Date(props.createdAt),
-                      'DD/MM/YYYY à HH:mm',
-                      false
-                    )}
-                  </p>
+                  <h2>
+                    Derniers <span className='important'>commentaires</span> :
+                  </h2>
                 </div>
-
-                {isAuth && user.name === props.name && (
-                  <button
-                    onClick={toggleModal}
-                    style={{ marginBottom: '25px' }}
-                    className='btn btn-dark'
-                  >
-                    <FontAwesomeIcon
-                      icon={faPen}
-                      style={{ cursor: 'pointer', width: '1rem' }}
-                    />
-                    &nbsp; Éditez le profil
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-
-          {props.favoritesArray.length > 0 && (
-            <div className='row justify-content-center'>
-              <div className='col-24 text-center'>
-                <h2>
-                  Dernières fonctions ajoutées aux{' '}
-                  <span className='important'>favoris</span> :
-                </h2>
-              </div>
-              <div className='col-24'>
-                <div className='row justify-content-center'>
-                  {props.favoritesArray.map(favorite => {
-                    return <FunctionCard key={favorite.id} {...favorite} />
-                  })}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {props.commentsArray.length > 0 && (
-            <div className='row justify-content-center'>
-              <div className='col-24 text-center'>
-                <h2>
-                  Derniers <span className='important'>commentaires</span> :
-                </h2>
-              </div>
-              <div className='col-24'>
-                {props.commentsArray.map(comment => (
-                  <div
-                    key={comment.id}
-                    className='row Profile__row Profile__comment'
-                  >
-                    <div className='col-20'>
-                      <p style={{ textAlign: 'center', marginTop: '30px' }}>
-                        Posté sur la fonction&nbsp;
-                        <Link
-                          href={
+                <div className='col-24'>
+                  {props.commentsArray.map(comment => (
+                    <div
+                      key={comment.id}
+                      className='row Profile__row Profile__comment'
+                    >
+                      <div className='col-20'>
+                        <p style={{ textAlign: 'center', marginTop: '30px' }}>
+                          Posté sur la fonction&nbsp;
+                          <Link
+                            href={
                             comment.function.type === 'form' ||
                             comment.function.type === 'article'
                               ? '/functions/[slug]'
                               : `/functions/${comment.function.slug}`
                           }
-                          as={`/functions/${comment.function.slug}`}
-                        >
-                          <a>{comment.function.title}</a>
-                        </Link>
+                            as={`/functions/${comment.function.slug}`}
+                          >
+                            <a>{comment.function.title}</a>
+                          </Link>
                         &nbsp;le{' '}
-                        {date.format(
-                          new Date(comment.createdAt),
-                          'DD/MM/YYYY à HH:mm',
-                          false
-                        )}
-                      </p>
-                      <ReactMarkdown
-                        source={comment.message}
-                        renderers={{ code: CodeBlock }}
-                      />
+                          {date.format(
+                            new Date(comment.createdAt),
+                            'DD/MM/YYYY à HH:mm',
+                            false
+                          )}
+                        </p>
+                        <ReactMarkdown
+                          source={comment.message}
+                          renderers={{ code: CodeBlock }}
+                        />
+                      </div>
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {props.quotesArray.length > 0 && (
-            <div className='row justify-content-center'>
-              <div className='col-24 text-center'>
-                <h2>
-                  Dernières <span className='important'>citations</span>{' '}
-                  proposées (et validées) :
-                </h2>
-                <p>
-                  Citations pour la fonction{' '}
-                  <Link href='/functions/randomQuote'>
-                    <a>Générateur de citations</a>
-                  </Link>
-                  .
-                </p>
+            {props.quotesArray.length > 0 && (
+              <div className='row justify-content-center'>
+                <div className='col-24 text-center'>
+                  <h2>
+                    Dernières <span className='important'>citations</span>{' '}
+                    proposées (et validées) :
+                  </h2>
+                  <p>
+                    Citations pour la fonction{' '}
+                    <Link href='/functions/randomQuote'>
+                      <a>Générateur de citations</a>
+                    </Link>
+                    .
+                  </p>
+                </div>
+                <div className='col-24 table-column'>
+                  <table style={{ marginBottom: '50px' }}>
+                    <thead>
+                      <tr>
+                        <th className='table-row' scope='col'>
+                          Citation/Proverbe
+                        </th>
+                        <th className='table-row' scope='col'>
+                          Auteur
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {props.quotesArray.map((currentQuote, index) => {
+                        return (
+                          <tr key={index}>
+                            <td className='table-row text-center'>
+                              {currentQuote.quote}
+                            </td>
+                            <td className='table-row text-center'>
+                              {currentQuote.author}
+                            </td>
+                          </tr>
+                        )
+                      })}
+                    </tbody>
+                  </table>
+                </div>
               </div>
-              <div className='col-24 table-column'>
-                <table style={{ marginBottom: '50px' }}>
-                  <thead>
-                    <tr>
-                      <th className='table-row' scope='col'>
-                        Citation/Proverbe
-                      </th>
-                      <th className='table-row' scope='col'>
-                        Auteur
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {props.quotesArray.map((currentQuote, index) => {
-                      return (
-                        <tr key={index}>
-                          <td className='table-row text-center'>
-                            {currentQuote.quote}
-                          </td>
-                          <td className='table-row text-center'>
-                            {currentQuote.author}
-                          </td>
-                        </tr>
-                      )
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
+            )}
+          </div>
           )}
-        </div>
-      )}
     </>
   )
 }

website/pages/users/forgotPassword.jsx

@@ -4,7 +4,6 @@ import Loader from '../../components/Loader'
 import HeadTag from '../../components/HeadTag'
 import api from '../../utils/api'
 import withoutAuth from '../../hoc/withoutAuth'
-import '../../public/css/pages/register-login.css'
 
 const forgotPassword = () => {
   const [inputState, setInputState] = useState({})

website/pages/users/index.jsx

@@ -3,7 +3,6 @@ import HeadTag from '../../components/HeadTag'
 import Loader from '../../components/Loader'
 import UserCard from '../../components/UserCard/UserCard'
 import api from '../../utils/api'
-import '../../public/css/pages/users.css'
 
 const Users = () => {
   let pageUsers = 1

website/pages/users/login.jsx

@@ -6,7 +6,6 @@ import Loader from '../../components/Loader'
 import HeadTag from '../../components/HeadTag'
 import { UserContext } from '../../contexts/UserContext'
 import withoutAuth from '../../hoc/withoutAuth'
-import '../../public/css/pages/register-login.css'
 
 const Login = () => {
   const router = useRouter()

website/pages/users/newPassword.jsx

@@ -5,7 +5,6 @@ import HeadTag from '../../components/HeadTag'
 import api from '../../utils/api'
 import redirect from '../../utils/redirect'
 import withoutAuth from '../../hoc/withoutAuth'
-import '../../public/css/pages/register-login.css'
 
 const newPassword = (props) => {
   const [inputState, setInputState] = useState({})

website/pages/users/register.jsx

@@ -4,7 +4,6 @@ import Loader from '../../components/Loader'
 import HeadTag from '../../components/HeadTag'
 import api from '../../utils/api'
 import withoutAuth from '../../hoc/withoutAuth'
-import '../../public/css/pages/register-login.css'
 
 const Register = () => {
   const [inputState, setInputState] = useState({ name: '', email: '', password: '' })