betagouv / secretariat

La webapp espace membre de l’incubateur 💁‍♂️👩‍💻

Espace Membre

L'espace membre de l’incubateur

Dev de l'app Espace Membre

Variables d'environnement

• Variables d'environnement nécessaires :
  • OVH_APP_KEY - Obtenir les credentials OVH pour débugger
  • OVH_APP_SECRET
  • OVH_CONSUMER_KEY
  • SESSION_SECRET - Clé de 32 caractère aléatoires, important en prod
  • MAIL_SERVICE - Service géré par nodemailer (Débugger SMTP en local). Si absente, MAIL_HOST, MAIL_PORT, et MAIL_IGNORE_TLS seront utilisées.
  • MAIL_USER
  • MAIL_PASS
  • SECURE - true si https sinon false
  • HOSTNAME - Par exemple localhost pour le développement en local
  • CHAT_WEBHOOK_URL_SECRETARIAT - Adresse d'envoi des notifications Mattermost (anciennement Slack) pour le canal "#secretariat" - par ex. : https://hooks.mattermost.com/services/... (Débugger sans Mattermost)
  • CHAT_WEBHOOK_URL_GENERAL - Adresse d'envoi des notifications Mattermost (anciennement Slack) pour le canal "#general" - par ex. : https://hooks.mattermost.com/services/... (Débugger sans Mattermost)
  • DATABASE_URL - Le string de connexion pour se connecter à Postgres (pensez à échapper les caractères spéciaux s'il s'agit d'une URI). Le string de connexion doit contenir le user, password, host, port et le nom de la base de données.
  • GITHUB_TOKEN - Le Personal Access Token du compte Github utilisé pour créer les PR des nouvelles recrues
  • GITHUB_REPOSITORY - Le repository Github qui contient les fiches des utilisateurs (par ex: betagouv/beta.gouv.fr)
  • GITHUB_FORK - Le fork du GITHUB_REPOSITORY utilisé pour créer les PRs, (par ex: test-user/beta.gouv.fr).
  • GITHUB_ORG_ADMIN_TOKEN - Le Personal Access Token du compte Github utilisé pour gérer les membres de la communauté
• Variables d'environnement optionnelles :
  • SECRETARIAT_DOMAIN - Domaine OVH à utiliser (Débugger avec un autre domaine OVH)
  • USERS_API - API User à utiliser (Débugger avec une autre API)
  • POSTGRES_PASSWORD - Cette variable sert à lancer l'image docker de postgres et donc seulement nécessaire si Docker est utilisé pour le développement.
  • MAIL_HOST - Si la variable MAIL_SERVICE est absente, cette variable sera utilisée pour spécifier le hostname ou adresse IP à utiliser pour l'envoi d'emails avec Nodemailer.
  • MAIL_PORT - Si la variable MAIL_SERVICE est absente, cette variable sera utilisée pour spécifier le port à utiliser pour l'envoi d'emails avec Nodemailer.
  • MAIL_IGNORE_TLS - Si la variable MAIL_SERVICE est absente, cette variable sera utilisée pour l'utilisation de TLS dans la connexion email avec Nodemailer.
  • NEWSLETTER_HASH_SECRET - Clé pour générer un id pour les newsletters, important en prod
  • INVESTIGATION_REPORTS_IFRAME_URL - URL de l'iframe Airtable contenant les bilans d'investigations et qui est intégrée à la page ressources
  • GITHUB_ORGANIZATION_NAME - Nom de l'organization github à laquelle inviter les membres
  • MATTERMOST_INVITE_ID - ID secret de l'invitation qui permet de se créer un compte sur l'espace mattermost https://mattermost.incubateur.net/signup_user_complete/?id=[ID]
  • MATTERMOST_TEAM_ID - ID de la team Communauté
  • MATTERMOST_BOT_TOKEN - Token du bot mattermost qui permet de faire les requêtes à l'api

Lancer en mode développement

Une fois Postgres lancé, vous pouvez démarrer l'application avec ces commandes :

• Créer le fichier de configuration : cp .env.example .env et le remplir avec les identifiants OVH obtenus plus haut.

» npm install # Récupère les dépendances
» npm run migrate # Applique les migrations
» npm run seed # Ajoute des utilisateurs dans la base users. Utilisez l'un des primary_email présent dans la bdd pour vous connecter
» npm run dev
   ...
   Running on port: 8100

L'application sera disponible sur http://localhost:8100 (8100 est le port par défaut, vous pouvez le changer avec la variable d'env PORT)

Lancer avec docker-compose

• Créer le fichier de configuration : cp .env.example .env et le remplir avec les identifiants OVH obtenus plus haut.
• Lancer le service et initialiser la base de données : docker-compose up - disponible sur http://localhost:8100
• Pour ajouter des données à la base de données (facultatif): docker-compose run web npm run seed;
• Lancer les tests : docker-compose run web npm test

Lancer avec docker sans docker-compose

• Exemple pour développer dans un container :
  • docker run --rm --env-file ../.env.secretariat.dev -v $(pwd):/app -w /app -ti -p 8100 node /bin/bash (avec vos variables d'environnement dans ../.env.secretariat.dev)

Lancer en mode production

» npm run start
   ...
   Running on port: 8100

Lancer les tests

» npm run test

Générer clé API OVH

Si vous n'avez pas les droits pour générer les credentials OVH, postez un message sur #incubateur-amélioration-secretariat.

Lien : https://eu.api.ovh.com/createToken/

• Nécessaires pour les fonctionalités en cours

GET /email/domain/beta.gouv.fr/*
POST /email/domain/beta.gouv.fr/account
DELETE /email/domain/beta.gouv.fr/account/*
POST /email/domain/beta.gouv.fr/redirection
DELETE /email/domain/beta.gouv.fr/redirection/*
POST /email/domain/beta.gouv.fr/account/*/changePassword

• Nécessaires pour les prochaines fonctionalités

POST /email/domain/beta.gouv.fr/mailingList
POST /email/domain/beta.gouv.fr/mailingList/*/subscriber
DELETE /email/domain/beta.gouv.fr/mailingList/*/subscriber/*
GET /email/domain/beta.gouv.fr/mailingList/*/subscriber
GET /email/domain/beta.gouv.fr/responder/*
POST /email/domain/beta.gouv.fr/responder
PUT /email/domain/beta.gouv.fr/responder/*
DELETE /email/domain/beta.gouv.fr/responder/*

Debug avec le serveur SMTP Maildev

Maildev est un serveur SMTP avec une interface web conçus pour le développement et les tests.

Sans docker: Une fois installé et lancé, il suffit de mettre la variable d'environnement MAIL_SERVICE à maildev pour l'utiliser. MAIL_USER et MAIL_PASS ne sont pas nécessaires.

Avec docker: ne pas préciser de MAIL_SERVICE, les bonnes variables d'environnement sont déjà précisées dans le docker-compose

Tous les emails envoyés par le code de l'espace membre seront visibles depuis l'interface web de Maildev (http://localhost:1080/).

Debug sans notifications Mattermost

Pour certaines actions, l'espace membre envoie une notification Mattermost. En local, vous pouvez mettre les variables d'environnements CHAT_WEBHOOK_URL_SECRETARIAT et CHAT_WEBHOOK_URL_GENERAL à un service qui reçoit des requêtes POST et répond avec un 200 OK systématiquement.

Beeceptor permet de le faire avec une interface en ligne sans besoin de télécharger quoi que ce soit.

Sinon, certains outils gratuits comme Mockoon ou Postman permettent de créer des serveurs mock facilement aussi (Guide Postman).

Debug avec un autre domaine OVH

Lorsqu'on utilise un autre domaine OVH (par exemple, un domain bac-à-sable pour le développement), la variable SECRETARIAT_DOMAIN doit être renseignée. Par défaut, le domaine est beta.gouv.fr.

Debug avec une autre API utilisateur

Configurer la variable d'environnement USERS_API (par défaut à https://beta.gouv.fr/api/v1.6/authors.json)

Créer des migrations

KnexJS permet de créer des migrations de base de données. Un shortcut a été ajouté au package.json pour créer une migration :

npm run makeMigration <nom de la migration>

Une fois la migration créée, vous pouvez l'appliquer avec :

npm run migrate

Pour utiliser d'autres commandes, le CLI de KnexJS est disponible avec ./node_modules/knex/bin/cli.js. Par exemple, pour faire un rollback :

./node_modules/knex/bin/cli.js migrate:rollback

Scripts pour faire des taches en local

Générer le graphe des redirections emails

• Configurer les variables d'environnements : OVH_APP_KEY, OVH_APP_SECRET et OVH_CONSUMER_KEY (Avec une clé ayant un accès aux emails)
• Lancer le script : node ./scripts/export_redirections_to_dot.ts > redirections.dot
• Lancer graphviz : dot -Tpdf redirections.dot -o redirections.pdf (Format disponible : svg,png, ...)

Supprimer une redirection

• Configurer les variables d'environnements : OVH_APP_KEY, OVH_APP_SECRET et OVH_CONSUMER_KEY (Avec une clé ayant un accès aux emails)
• Lancer le script : node ./scripts/delete_redirections.js [email protected] [email protected]

Explication du fonctionnement des pull requests Github

En prod, l'app sécrétariat génère des pulls requests sur le github reposity betagouv/beta.gouv.fr. Pour cela une une branche est créée sur un fork du repository betagrouv/beta.gouv.fr et une pull request est effectuée depuis ce fork vers ce repository initial betagouv/beta.gouv.fr.

Pourquoi utiliser un fork ?

Afin de créer une branche et faire une pull request sur un repository, on donne les droits d'accès en écriture sur ce repository via un token (GITHUB_TOKEN) utilisé par le code. Pour prévenir tout problème ces droits sont donnés sur le repository "fork", et non sur le repository principal.

Il faut donc préciser ces variables d'environnement:

• GITHUB_TOKEN - Le Personal Access Token du compte Github utilisé pour créer les PR des nouvelles recrues. Ce token doit contenir les droits d'écriture à GITHUB_FORK.
• GITHUB_REPOSITORY - Le repository Github qui contient les fiches des utilisateurs (par ex: betagouv/beta.gouv.fr). L'application n'a pas des droits d'écriture sur ce repository.
• GITHUB_FORK - Le fork du GITHUB_REPOSITORY auquel l'application a des droits d'accès en écriture

En dev : le GITHUB_REPOSITORY est un fork de betagouv/beta.gouv.fr, et le GITHUB_FORK un fork de ce fork.

Pour simplifier, on peut utiliser des repos communs entre dev. Demandez a vos collègues le nom des repository à spécifer dans le .env ainsi que les droits d'accès au resository GITHUB_FORK

secretariat's Issues

Mail de bienvenue (on peut parler du marrainage)

A la création de l'email, parler du marrainage et d'autres aspects pratiques (Introduire la doc)

Ajouter lien github vers ce repo dans le footer de l'app

Regarder l'UX pour séparer les fonctionnalités

Voilà, 2 pages “Mon compte” et “Communauté“. Sur ces maquettes, je n’ai pas modifié/rajouté de fonctionnalité à l’existant (même si ça me démange 😄), simplement réorganisé. Ça permet d’imaginer comment rajouter simplement des nouvelles pages ensuite :

Desktop : https://www.figma.com/proto/PwjUHlF7UIt0hywZP2CeJD/betagouv?node-id=330%3A32&scaling=min-zoom
Responsive : https://www.figma.com/proto/PwjUHlF7UIt0hywZP2CeJD/betagouv?node-id=415%3A139&scaling=scale-down

Ajouter des logs de tracabilités

Table Events :

• id
• create_by_username
• action_code
• action_description
• action_on_username?
• creation_date

Préparation

• Lister les événements et donner un code à chaque évenement

Rediriger vers next après le login

Certains utilisateurs peuvent se rendre sur le secrétariat en suivant un lien - par exemple https://secretariat.beta.gouv.fr/users/prenom.nom - mais sont redirigés vers la page de login si ils ne sont pas connectés. Une fois connecté, la page /users s'affiche ensuite par défaut.

Au moment de la redirection vers le login, on pourrait garder leur url initiale dans un paramètre next https://secretariat.beta.gouv.fr/login?next=/users/prenom.nom et les y rediriger une fois connectés (ou plus précisément : leur fournir un lien de connexion qui pointe directement vers cette url)

Priorité : basse

Régression sur l'utilisateur sans compte email

On a essayé de créer l'adresse pour @lucas-bch de CartoBio.

On a créé sa fiche sur Github : https://github.com/betagouv/beta.gouv.fr/blob/6321a796cc69bda0bcd7fabc587d761c04604b24/content/_authors/lucas.bchini.md
Je me suis loggée sur le secrétariat sur https://secretariat.beta.gouv.fr/ avec mon compte sabine.safi - ça a marché.

L'autocomplete m'a bien proposé lucas.bchini.
Ça m'a amenée sur cette page :

@jdauphant sur Slack :
Il y a un bug dans l'app
On a une régression sur l'utilisateur sans compte email

Mise à jour de la version Node du Dockerfile

Le Dockerfile se base sur l'image Node 8.16, qui n'est plus supporté depuis fin 2019. On pourra la mettre à jour avec une des versions actives (10.x, 12.x, 14.x)

Maintenir les champs renseignés en cas d'erreur (onboarding view)

Aujourd'hui, si le POST /onboarding échoue (par exemple à cause d'une fiche du même nom qui existe déjà), on est redirigé vers GET /onboarding sans l'information rentrée précédemment, ce qui provoque la perte des données dans le formulaire.

Il faut qu'on puisse passer ces informations (par exemple via req.flash) et qu'on les utilise pour pré-remplir les champs dans onboarding.ejs.

Utiliser des points median · au lieu de point

Trouver une alternative à request-promise (deprecated)

Malgré le release recent, request-promise est obsolète depuis le 11 février 2020 :
https://github.com/request/request-promise#deprecated

Tableau de board des noms de domaines : tests SSL, test de ping, ...

Créer des sites et des comptes Matomo (stats.data.gouv.fr)

Matomo dispose des API nécessaires

Review app sur Heroku avec betagouv.ovh comme domaine

Regarder pour lancer un service de capture de crash (comme sentry.incubateur.net)

Intégrer un tracker Matomo stats.data.gouv.fr

Enlever le style inline dans les templates

Créer des délégations DNS

Pouvoir délegué le domaine de sa startup

Intégrer les emails de rappel et autres fonctionnalités du betaGouvBot

Ajouter du linting

Définir des règles d'écriture du code en s'appuyant sur https://eslint.org/
Cela s'appliquera au fichiers .js, mais aussi au .ejs
Idéalement avoir un hook pre-commit pour éviter de commiter des erreurs de linting (que le CI détectera, et qu'il faudra corriger, etc)

Permettre la réinitialisation du mot de passe par mail

Si j'ai choisi de bénéficier d'une redirection dans un premier temps mais que je souhaite évoluer vers un compte mail beta.gouv.fr "normal", ou bien si j'ai oublié mon mot de passe, je souhaite pouvoir demander une réinitialisation sécurisée de mon mot de passe.

Idée d'implémentation:

• créer une case à cocher "envoyer à mon adresse secondaire" à côté du bouton "Connexion par email"
• envoyer le lien d'authentification à l'adresse secondaire, ce qui permet de s'appuyer sur l'implémentation de #13

Alternative 1:

• créer une page et un formulaire spécifique "Réinitialiser mon mot de passe"
• dans ce formulaire demander l'identifiant beta.gouv.fr de la personne
• envoyer un lien à l'adresse secondaire correspondante contenant un jeton sécurisé
• sur présentation de ce jeton sécurisé, donner accès au formulaire de changement de mot de passe pour ce membre

Alternative 2:

• créer une page et un formulaire spécifique "Réinitialiser mon mot de passe"
• dans ce formulaire demander l'adresse mail secondaire de la personne
• envoyer un lien à cette adresse correspondante contenant un jeton sécurisé
• sur présentation de ce jeton sécurisé, donner accès au formulaire de changement de mot de passe pour l'identifiant beta.gouv.fr associé à cette adresse mail

Dans tous ces cas:

• pour les nouveaux membres, stocker dans une base de données les adresses mail secondaires
• attention, ceci implique également de modifier le comportement de la commande Slack /compte
• pour les membres existants, compléter ces informations manuellement

Départ d'un membre

• Bouton sur la fiche utilisateur "Ce membre est parti" si la date de fin est dépassée
• à l'appui du bouton :
  • suppression du compte et redirection
  • redirection de l'email vers l'adresse "[email protected]"
  • retirer les droits sur github
• Proposer que l'utilisateur puisse supprimé son propre compte

request-promise deprecated

https://www.npmjs.com/package/request-promise

Index des ressources privés (Trello, Pad, Miro, Whereby, ...)

L'attribut SameSite des réponses HTTP Set-Cookie n'est pas bien renseigné

Les cookies token et session n'ont pas une valeur pour l'attribut SameSite, d'où le warning sous Firefox :

Cookie “token” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite

D'après le site MDN : Cet alerte apparaît dans les cas où des cookies requièrent l'attribut SameSite=None et ne sont pas marqués Secure, étant donc refusés par le navigateur.

Nous avons deux options :

1. Marquer les cookies "secure" quand on utilise https en utilisant config.secure (pour pouvoir continuer à développer en http)
   Par exemple avec le cookie session:
   app.use(session({ cookie: { maxAge: 300000, secure: config.secure } }));

2. Ajouter une politique sameSite lax ou strict.
   Les cookies ne seront envoyés qu'avec les requêtes effectuées sur le domaine de même niveau, et ne seront pas envoyées sur les requêtes vers des sites tiers.
   app.use(session({ cookie: { maxAge: 300000, sameSite: 'strict' ou 'lax' } }));

Des avis ?

Ajout de tests automatiser lié à la sécurité de l'app

Serveur OAuth (Pour connecter d'autres services)

Ajouter un serveur OAuth pour permettre de se connecter à d'autres services (par exemple les pads mais aussi la future app de compta et je cherchais un outil OAuth pour rendre accessible les archives de Slack)

Mettre les emails dans des template ejs dédiés

Simplifier le parcours utilisateur

On n'est pas si souvent recruteur, il est facile de désapprendre le process.
Séparer la gestion du compte de la création d'un compte et ajouter des éléments contextuels sont des actions qui pourraient simplifier le parcours.

Proposition ici :
https://www.figma.com/proto/PwjUHlF7UIt0hywZP2CeJD/betagouv?node-id=14%3A14&viewport=-77%2C522%2C0.25&scaling=scale-down-width

Permettre le changement de mot de passe mail

Pour avoir un meilleur niveau de sécurité, je souhaite pouvoir changer mon mot de passe (par exemple si j'ai choisi il y a longtemps un mot de passe de faible entropie, ou un mot de passe réutilisé qui a été compromis). Le mode opératoire actuel n'est pas satisfaisant, car je dois demander à un administrateur de beta.gouv de le faire et ne suis pas autonome.

Faire en sorte que le lien de connexion soit à usage unique

On a surement besoins d'une base de donnée pour faire ça

Fichiers des polices référencés dans le CSS ne sont pas trouvés

Les fichiers Evolventa-Bold.ttf et SourceSansPro-Regular.otf sont référencés dans template.min.css et non trouvés.

GEThttps://secretariat.beta.gouv.fr/static/css/fonts/Evolventa/Evolventa-Bold.ttf
[HTTP/2 404 Not Found 25ms]

GEThttps://secretariat.beta.gouv.fr/static/css/fonts/Source%20Sans%20Pro/SourceSansPro-Regular.otf
[HTTP/2 404 Not Found 24ms]

Assurer une meilleure distribution des marrain.es pour éviter des doublons

Ajouter le secretariat sur sentry.data.gouv.fr

Pédagogie quand la date de fin est expiré

En cas d'erreur expérience actuelle :

Bloquer les interractions quand la date de fin de la personne est dépassé

Vérifier à l'ouverture de la page sur la date de fin

[BUG] Création d'une redirection d'email vers "@beta.gouv.fr" vide

Proposition de fonctionnalité : création d’email automatique

Proposition (Par Anne-So)

• 1. La nouvelle recrue de la communauté clique sur un bouton “Créer un compte”
• 2. Il remplit un formulaire (nom, prénom, date de début et de fin de mission, email pro ou perso...)
• 3. Ça fait une PR sur Github pour créer la fiche (grosse valeur ajoutée car c’est une manipulation très fastidieuse pour tous les non devs de la communauté)
• 4. Ça créé l’email
• 5. Ça assigne un marrain ou une parraine (#391)

Migrer l'app de prod vers Scalingo en SecNumCloud

C'est plus convainquant au niveau sécurité.

La procédure est ici : https://doc.scalingo.com/platform/app/regions-migration

Supprimé BlueBird (remplacé par les promesses natives)

Template engine : remplace Mustache par EJS

https://ejs.co/

• plus proche du HTML
• moins "magique" que Mustache
• marche nativement avec Express

Gestion de la date dans le formulaire pour la création des fiches Github (onboarding view)

Aujourd'hui, les champs date sont des champs texte classiques avec une regexp pour enforcer le format yyyy-mm-dd. Deux améliorations sont nécessaires :

1- Utiliser un date-picker.
L'utilisation du est la solution la plus simple, mais le support n'est pas très complet (notamment Safari). Si on prend cette direction il faudra prévoir un fallback. À noter que la date de départ pourrait être pré-remplie avec la date d'aujourd'hui.

2- Validation de la date
En front et en back on doit s'assurer que les dates soient des dates valides et que la date de fin soit après la date de début.

Convertir la CI de Circle CI à Github Actions

• Supprimer Circle CI
• Voir pourquoi Circle CI n'est pas lancé sur les PR externe

Activer les reviews app sur Heroku

Dashboard des expirations de compte

Ajouter un CONTRIBUTING.md

Dérecommandé les redirections dans l'App

• Suppression de la création de redirection pour les externes
• Suppression de la création d'une redirection en même temps que le compte

Tirage au sort d'un.e marrain.ne

Constat

Beaucoup de personnes dans la communauté n'ont pas de lien avec quelqu'un de la communauté en dehors de leur équipe.
Quand il cherche un.e marrain.ne c'est compliqué à trouver.

Solution

• On peut faire la demande d'un.e marrain.ne dans l'app
• L'app tire au sort dans la communauté une personne présente depuis + de 6 mois
• La personne tiré au sort reçois un email, elle a 24h pour accepter l'invitation (Il y a 2 liens : Oui ou Non )
• Si au bout de 24h la personne n'a pas accepté ou si elle refuse avant 24h, on tire au sort une nouvelle personne
• Si une personne accepte, on met en relation

Problème message d'erreur (j'essai de créé 2 fois un compte par exemple)

Si j'essai de créé 2 fois le compte le message d'erreur ne s'affiche pas

Log :

2020-07-24T22:51:41.050981+00:00 app[web.1]: Error: Vous n'avez pas le droits de créer le compte email de l'utilisateur
2020-07-24T22:51:41.050992+00:00 app[web.1]:     at module.exports.postEmail (/app/controllers/usersController.js:84:13)
2020-07-24T22:51:41.050993+00:00 app[web.1]:     at runNextTicks (internal/process/task_queues.js:62:5)
2020-07-24T22:51:41.050993+00:00 app[web.1]:     at processImmediate (internal/timers.js:429:9)

Solution :
Remplacer req.flash('error', err); par req.flash('error', err.message);

Enlever première proposition de valeur du code frontend

Interdire la création de compte email si la date de fin est expiré

On ne devrait pas pouvoir faire de création de compte pour cette personne