Merge branch 'develop' into dist/ubuntu/bionic/develop

- Récupération et affichage des groupes existants
- Création d'un nouveau groupe
- Modification d'un groupe existant
- Rejoindre/quitter un groupe de travail

.env.dist

@@ -0,0 +1,7 @@
+DEBUG=true
+OIDC_CLIENT_ID=daddy
+OIDC_CLIENT_SECRET=daddycool
+OIDC_POST_LOGOUT_REDIRECT_URL=http://localhost:8081/logout/redirect
+HTTP_COOKIE_AUTHENTICATION_KEY=cL87ucJJSGt7XSjRuQe7GDb2qna8ijfQ
+HTTP_COOKIE_ENCRYPTION_KEY=cL87ucJJSGt7XSjRuQe7GDb2qna8ijfQ
+DATABASE_DSN="host=localhost user=daddy database=daddy password=daddy port=5432 sslmode=disable"

.gitignore

@@ -0,0 +1,5 @@
+/vendor
+/data
+/bin
+/.env
+/release

Makefile

@@ -1,17 +1,28 @@
-build:
+SHELL := /bin/bash
+
+build: build-server
+
+docker:
 	docker-compose build
 
-deps:
+generate:
-	cd frontend && npm install
+	go generate ./...
 
-up: build
+build-server:
-	( cd frontend && NODE_ENV=development npm run server ) & USER_ID=$(shell id -u) docker-compose up && wait
+	CGO_ENABLED=0 go build -v -o ./bin/server ./cmd/server
 
-sg:
+deps: generate
-	docker-compose exec -u $(shell id -u) super-graph sh
+	cd client && npm install
+	go get ./...
 
-sgr:
+client-dist:
-	docker-compose run -u $(shell id -u) super-graph sh
+	cd client && NODE_ENV=production npm run build
+
+up: docker
+	docker-compose up
+
+watch:
+	go run github.com/cortesi/modd/cmd/modd
 
 down:
 	docker-compose down -v --remove-orphans
@@ -19,5 +30,29 @@ down:
 db-shell:
 	docker-compose exec postgres psql -Udaddy
 
+migrate: build-server
+	( set -o allexport && source .env && set +o allexport && bin/server -workdir "./cmd/server" -config ../../data/config.yml -migrate $(MIGRATE) )
+
+migrate-latest:
+	$(MAKE) MIGRATE=latest migrate
+
+migrate-up:
+	$(MAKE) MIGRATE=up migrate
+
+migrate-down:
+	$(MAKE) MIGRATE=down migrate
+
+test:
+	go test -v ./...
+
 hydra-shell:
 	docker-compose exec hydra /bin/sh
+
+.PHONY: release
+release:
+	./misc/script/release
+
+clean:
+	rm -rf client/node_modules bin data .env internal/graph/generated internal/graph/server.go
+	rm -rf vendor
+	go clean -modcache

README.md

@@ -17,39 +17,45 @@ Application de gestion des Dossiers d'Aide à la Décision (D.A.D.) à Cadoles.
 ```bash
 git clone https://forge.cadoles.com/Cadoles/daddy.git   # Cloner le projet
 cd daddy                                                # Se placer dans le répertoire
-make deps                                               # Installer les dépendances NPM
+make clean                                              # On s'assure d'avoir un environnement propre
-make up                                                 # Démarrer l'environnement de développement
+make deps                                               # Installer les dépendances
+make up                                                 # Démarrer l'environnement docker-compose (hydra, hydra-passwordless et fake-smtp)
+# Dans un second terminal
+make watch                                              # Suivre les modifications et compiler à la volée le backend et frontend
 ```
 
 Les services suivants devraient être disponibles après démarrage de l'environnement:
 
 |Service|Type|Accès|Description|
 |-------|----|-----|-----------|
-|Application React|HTTP (UI)|http://localhost:8081/|Page d'accueil de l'application React (serveur Webpack)|
+|Application React|HTTP (UI)|http://localhost:8080/|Page d'accueil de l'application React (serveur Webpack)|
-|Interface Web GraphQL|HTTP (UI)|http://localhost:8080/|Interface Web de développement de l'API GraphQL **\***|
+|Interface Web GraphQL|HTTP (UI)|http://localhost:8081/api/v1/playground|Interface Web de développement de l'API GraphQL (mode debug uniquement, nécessite d'être authentifié)|
-|Serveur GraphQL|HTTP (GraphQL)|http://localhost:8080/api/v1/graphql|Point d'entrée de l'API GraphQL|
+|Serveur GraphQL|HTTP (GraphQL)|http://localhost:8081/api/v1/graphql (POST)|Point d'entrée de l'API GraphQL|
 |Serveur Hydra|HTTP (ReST)|http://localhost:4444|Point d'entrée pour l'API OAuth2 d'[Hydra](https://www.ory.sh/hydra/docs/)|
 |Serveur Hydra Passwordless|HTTP|http://localhost:3000|Point d'entrée pour la ["Login/Consent App"](https://www.ory.sh/hydra/docs/implementing-consent) [hydra-passwordless](https://forge.cadoles.com/wpetit/hydra-passwordless)|
 |Serveur FakeSMTP|HTTP|http://localhost:8082|Interface web du serveur [FakeSMTP](https://forge.cadoles.com/wpetit/fake-smtp)
 |Serveur PostgreSQL|TCP/IP (PostgreSQL)|`127.0.0.1:5432`|Port de connexion à la base de données PostgreSQL de développement|
 
-**\*** Pensez à passer l'attribut `auth_fail_block: false` dans le fichier `backend/config/dev.yml` si vous voulez pouvoir utiliser cette interface sans avoir à définir l'entête `Authorization`.
-
 #### Fichiers/répertoires notables
 
 |Chemin|Description|
 |------------------|-----------|
 |`docker-compose.yml`|Configuration de l'environnement Docker Compose|
-|`frontend/src`|Sources du frontend ([React](https://reactjs.org))|
+|`client/src`|Sources du frontend ([React](https://reactjs.org))|
-|`backend/config/migrations`|Migrations SQL pour le backend, voir [la documentation de SuperGraph à ce sujet](https://supergraph.dev/docs/start#migrations)|
 
 #### Commandes utiles
 
 |Commande|Description|
 |--------|-----------|
-|`make up`|Démarrer l'environnement de développement, `Ctrl+C` pour le stopper.|
+|`make up`|Démarrer l'environnement Docker Compose, `Ctrl+C` pour le stopper.|
-|`make down`|Stopper et supprimer l'environnement de développement.|
+|`make down`|Stopper et supprimer l'environnement Docker Compose.|
+|`make watch`|Suerveiller les sources et recompiler à la volée le client/server.|
 |`make db-shell`|Ouvrir une console `psql` sur la base de données de développement.|
+|`make hydra-shell`|Ouvrir un shell interactif dans le conteneur Hydra. (`hydra --help` pour voir les commandes disponibles pour l'administration)|
+|`make migrate-latest`|Migrer la base de données à la dernière version disponible du schéma.|
+|`make migrate-down`|Migrer la base de données à la version précédente du schéma.|
+|`make migrate-up`|Migrer la base de données à la version suivante du schéma.|
+|`make clean`|Nettoyer l'environnement.|
 
 #### Ressources
 

backend/config/allow.list

@@ -1,18 +0,0 @@
-/* fetchUser */
-
-variables {
-  "email": ""
-}
-
-
-      query fetchUser {
-          user(where: {email: {eq: $email}}) {
-          id
-          created_at
-          updated_at
-          email,
-          full_name
-        }
-      }
-    
-

backend/config/dev.yml

@@ -1,225 +0,0 @@
-app_name: "Daddy Dev"
-host_port: 0.0.0.0:8080
-web_ui: true
-
-# debug, error, warn, info
-log_level: debug
-
-# enable or disable http compression (uses gzip)
-http_compress: true
-
-# When production mode is 'true' only queries 
-# from the allow list are permitted.
-# When it's 'false' all queries are saved to the
-# the allow list in ./config/allow.list
-production: false
-
-# Throw a 401 on auth failure for queries that need auth
-auth_fail_block: true
-
-# Latency tracing for database queries and remote joins
-# the resulting latency information is returned with the
-# response
-enable_tracing: true
-
-# Watch the config folder and reload Super Graph
-# with the new configs when a change is detected
-reload_on_config_change: true
-
-# File that points to the database seeding script
-# seed_file: seed.js
-
-# Path pointing to where the migrations can be found
-# this must be a relative path under the config path
-migrations_path: ./migrations
-
-# Secret key for general encryption operations like 
-# encrypting the cursor data
-secret_key: supercalifajalistics
-
-# CORS: A list of origins a cross-domain request can be executed from. 
-# If the special * value is present in the list, all origins will be allowed. 
-# An origin may contain a wildcard (*) to replace 0 or more 
-# characters (i.e.: http://*.domain.com).
-cors_allowed_origins: ["*"]
-cors_allowed_headers: ["Authorization", "Content-Type", "Mode"]
-cors_allowed_methods: ["POST"]
-
-# Debug Cross Origin Resource Sharing requests
-cors_debug: false
-
-# Postgres related environment Variables
-# SG_DATABASE_HOST
-# SG_DATABASE_PORT
-# SG_DATABASE_USER
-# SG_DATABASE_PASSWORD
-
-# Auth related environment Variables
-# SG_AUTH_RAILS_COOKIE_SECRET_KEY_BASE
-# SG_AUTH_RAILS_REDIS_URL
-# SG_AUTH_RAILS_REDIS_PASSWORD
-# SG_AUTH_JWT_PUBLIC_KEY_FILE
-
-# inflections:
-#   person: people
-#   sheep: sheep
-
-auth:
-  # Can be 'rails', 'jwt' or 'header'
-  type: jwt
-  #cookie: _supergraph_session
-
-  # Comment this out if you want to disable setting
-  # the user_id via a header for testing. 
-  # Disable in production
-  #creds_in_header: false
-
-  jwt:
-    provider: hydra
-    jwks_url: http://hydra:4444/.well-known/jwks.json
-
-  # header:
-  #   name: dnt
-  #   exists: true
-  #   value: localhost:8080
-
-# You can add additional named auths to use with actions
-# In this example actions using this auth can only be
-# called from the Google Appengine Cron service that
-# sets a special header to all it's requests
-# auths:
-  # - name: from_taskqueue
-  #   type: header
-  #   header:
-  #     name: X-Appengine-Cron
-  #     exists: true
-
-database:
-  type: postgres
-  host: localhost
-  port: 5432
-  dbname: daddy
-  user: daddy
-  password: daddy
-
-  #schema: "public"
-  #pool_size: 10
-  #max_retries: 0
-  log_level: "debug"
-
-  # Set session variable "user.id" to the user id
-  # Enable this if you need the user id in triggers, etc
-  set_user_id: true
-
-  # database ping timeout is used for db health checking
-  ping_timeout: 1m
-
-  # Define additional variables here to be used with filters
-  variables:
-    # admin_account_id: "5"
-    # admin_account_id: "sql:select id from users where admin = true limit 1"
-
-
-  # Field and table names that you wish to block
-  blocklist:
-    - ar_internal_metadata
-    - schema_migrations
-    - secret
-    - password
-    - encrypted
-    - token
-
-# Create custom actions with their own api endpoints
-# For example the below action will be available at /api/v1/actions/refresh_leaderboard_users
-# A request to this url will execute the configured SQL query
-# which in this case refreshes a materialized view in the database.
-# The auth_name is from one of the configured auths
-actions:
-  # - name: refresh_leaderboard_users
-  #   sql: REFRESH MATERIALIZED VIEW CONCURRENTLY "leaderboard_users"
-  #   auth_name: from_taskqueue
-
-tables:
-  # - name: customers
-  #   remotes:
-  #     - name: payments
-  #       id: stripe_id
-  #       url: http://rails_app:3000/stripe/$id
-  #       path: data
-  #       # debug: true
-  #       pass_headers: 
-  #         - cookie
-  #       set_headers:
-  #         - name: Host
-  #           value: 0.0.0.0
-          # - name: Authorization
-          #   value: Bearer <stripe_api_key>
-
-  # - # You can create new fields that have a
-  #   # real db table backing them
-  #   name: me
-  #   table: users
-
-
-roles_query: "select * from users where users.email = $user_id"
-
-roles:
-  # Rôle par défaut si l'utilisateur n'existe pas dans la table `users`
-  - name: anon
-    tables:
-      - name: users
-        # insert:
-        #   block: true
-        # query:
-        #   block: true
-        # update:
-        #   block: true
-        # delete:
-        #   block: true
-
-  # Rôle par défaut si l'utilisateur existe dans la table `users`
-  # mais que la valeur de la colonne `role` n'est pas définie
-  - name: user
-    tables:
-      - name: users
-        insert:
-          block: true
-        query:
-          filters: ["{ email: { _eq: $user_id } }"]
-        update:
-          columns:
-            - full_name
-          filters: ["{ email: { _eq: $user_id } }"]
-        delete:
-          block: true
-
-  - name: admin
-    match: role = 'admin'
-    tables:
-      - name: users
-
-      # - name: products
-      #   query:
-      #     limit: 50
-      #     filters: ["{ user_id: { eq: $user_id } }"]
-      #     disable_functions: false
-
-      #   insert:
-      #     filters: ["{ user_id: { eq: $user_id } }"]
-      #     presets:
-      #       - user_id: "$user_id"
-      #       - created_at: "now"
-            
-      #   update:
-      #     filters: ["{ user_id: { eq: $user_id } }"]
-      #     presets:
-      #       - updated_at: "now"
-
-        # delete:
-        #   block: true
-
-  # - name: admin
-  #   match: id = 1000
-  #   tables:
-  #     - name: users
-  #       filters: []

backend/config/migrations/0_init.sql

@@ -1,17 +0,0 @@
--- Write your migrate up statements here
-
-CREATE TABLE public.users (
-  id bigint GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
-  full_name  text,
-  email      text UNIQUE NOT NULL CHECK (length(email) < 255),
-  created_at timestamptz NOT NULL NOT NULL DEFAULT NOW(),
-  updated_at timestamptz NOT NULL NOT NULL DEFAULT NOW(),
-  role  varchar(64)
-);
-
----- create above / drop below ----
-
--- Write your down migrate statements here. If this migration is irreversible
--- then delete the separator line above.
-
-DROP TABLE public.users

backend/config/prod.yml

@@ -1,67 +0,0 @@
-# Inherit config from this other config file
-# so I only need to overwrite some values
-inherits: dev
-
-app_name: "Backend Production"
-host_port: 0.0.0.0:8080
-web_ui: false
-
-# debug, info, warn, error, fatal, panic, disable
-log_level: "warn"
-
-# enable or disable http compression (uses gzip)
-http_compress: true
-
-# When production mode is 'true' only queries 
-# from the allow list are permitted.
-# When it's 'false' all queries are saved to the
-# the allow list in ./config/allow.list
-production: true
-
-# Throw a 401 on auth failure for queries that need auth
-auth_fail_block: true
-
-# Latency tracing for database queries and remote joins
-# the resulting latency information is returned with the
-# response
-enable_tracing: true
-
-# File that points to the database seeding script
-# seed_file: seed.js
-
-# Path pointing to where the migrations can be found
-# migrations_path: migrations
-
-# Secret key for general encryption operations like 
-# encrypting the cursor data
-# secret_key: supercalifajalistics
-
-# Postgres related environment Variables
-# SG_DATABASE_HOST
-# SG_DATABASE_PORT
-# SG_DATABASE_USER
-# SG_DATABASE_PASSWORD
-
-# Auth related environment Variables
-# SG_AUTH_RAILS_COOKIE_SECRET_KEY_BASE
-# SG_AUTH_RAILS_REDIS_URL
-# SG_AUTH_RAILS_REDIS_PASSWORD
-# SG_AUTH_JWT_PUBLIC_KEY_FILE
-
-database:
-  type: postgres
-  host: db
-  port: 5432
-  dbname: backend_development
-  user: postgres
-  password: postgres
-  #pool_size: 10
-  #max_retries: 0
-  #log_level: "debug" 
-
-  # Set session variable "user.id" to the user id
-  # Enable this if you need the user id in triggers, etc
-  set_user_id: false
-
-  # database ping timeout is used for db health checking
-  ping_timeout: 5m

backend/config/seed.js

@@ -1,33 +0,0 @@
-// Voir https://supergraph.dev/docs/seed
-
-var users = [
-  {
-    full_name: 'Admin',
-    email: 'admin@cadoles.com',
-    role: 'admin',
-  },
-  {
-    full_name: 'User 1',
-    email: 'user1@cadoles.com',
-    role: 'user',
-  },
-  {
-    full_name: 'User 2',
-    email: 'user2@cadoles.com',
-    role: 'user',
-  },
-  {
-    full_name: 'User 3',
-    email: 'user3@cadoles.com',
-    role: 'user',
-  }
-];
-
-for (var user, i = 0; (user = users[i]); i++) {
-  var res = graphql(" \
-	mutation { \
-		user(insert: $data) { \
-			id \
-		} \
-	}", { data: user });
-}

client/package-lock.json

@@ -1,9 +1,46 @@
 {
-  "name": "dadd-",
+  "name": "daddy",
   "version": "0.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@apollo/client": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.0.2.tgz",
+      "integrity": "sha512-4ighan5Anlj4tK/tdUHs4Mi1njqXZ7AxRCVolz/H702DjPphAJfm+FRkIadPTmwz+OLO+d+tX+6V1VBshf02rg==",
+      "requires": {
+        "@types/zen-observable": "^0.8.0",
+        "@wry/context": "^0.5.2",
+        "@wry/equality": "^0.1.9",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graphql-tag": "^2.10.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.12.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^1.2.0",
+        "ts-invariant": "^0.4.4",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.14"
+      },
+      "dependencies": {
+        "@wry/context": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.5.2.tgz",
+          "integrity": "sha512-B/JLuRZ/vbEKHRUiGj6xiMojST1kHhu4WcreLfNN7q9DqQFrb97cWgf/kiYsPSUCAMVN0HzfFc8XjJdzgZzfjw==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        },
+        "optimism": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.12.1.tgz",
+          "integrity": "sha512-t8I7HM1dw0SECitBYAqFOVHoBAHEQBTeKjIL9y9ImHzAVkdyPK4ifTgM4VJRDtTUY4r/u5Eqxs4XcGPHaoPkeQ==",
+          "requires": {
+            "@wry/context": "^0.5.2"
+          }
+        }
+      }
+    },
     "@babel/code-frame": {
       "version": "7.10.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
@@ -1372,6 +1409,11 @@
         }
       }
     },
+    "@types/zen-observable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz",
+      "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -1547,6 +1589,14 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@wry/equality": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
+      "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -1875,8 +1925,7 @@
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
-      "dev": true
     },
     "asynckit": {
       "version": "0.4.0",
@@ -2724,6 +2773,11 @@
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
       "dev": true
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -2785,6 +2839,14 @@
         }
       }
     },
+    "base-x": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.8.tgz",
+      "integrity": "sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA==",
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -3073,6 +3135,14 @@
         "pkg-up": "^2.0.0"
       }
     },
+    "bs58": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz",
+      "integrity": "sha1-vhYedsNU9veIrkBx9j806MTwpCo=",
+      "requires": {
+        "base-x": "^3.0.2"
+      }
+    },
     "btoa": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
@@ -3123,14 +3193,9 @@
       "dev": true
     },
     "bulma": {
-      "version": "0.7.5",
+      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
-      "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw=="
+      "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
-    },
-    "bulma-switch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.0.tgz",
-      "integrity": "sha512-myD38zeUfjmdduq+pXabhJEe3x2hQP48l/OI+Y0fO3HdDynZUY/VJygucvEAJKRjr4HxD5DnEm4yx+oDOBXpAA=="
     },
     "bytes": {
       "version": "3.0.0",
@@ -5029,8 +5094,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
-      "dev": true
     },
     "fastparse": {
       "version": "1.1.2",
@@ -5499,10 +5563,15 @@
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
       "dev": true
     },
-    "graphql-request": {
+    "graphql": {
-      "version": "2.0.0",
+      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/graphql-request/-/graphql-request-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.3.0.tgz",
-      "integrity": "sha512-Ww3Ax+G3l2d+mPT8w7HC9LfrKjutnCKtnDq7ZZp2ghVk5IQDjwAk3/arRF1ix17Ky15rm0hrSKVKxRhIVlSuoQ=="
+      "integrity": "sha512-GTCJtzJmkFLWRfFJuoo9RWWa/FfamUHgiFosxi/X1Ani4AVWbeyBenZTNX6dM+7WSbbFfTo/25eh0LLkwHMw2w=="
+    },
+    "graphql-tag": {
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.4.tgz",
+      "integrity": "sha512-O7vG5BT3w6Sotc26ybcvLKNTdfr4GfsIVMD+LdYqXCeJIYPRyp8BIsDOUtxw7S1PYvRw5vH3278J2EDezR6mfA=="
     },
     "handle-thing": {
       "version": "2.0.1",
@@ -6308,6 +6377,11 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
       "dev": true
     },
+    "iterall": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz",
+      "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg=="
+    },
     "js-base64": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
@@ -6381,11 +6455,6 @@
         "verror": "1.10.0"
       }
     },
-    "jwt-decode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
-      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -7914,11 +7983,6 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
-    "qs": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
-    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -8583,8 +8647,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9420,6 +9483,33 @@
       "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
       "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
     },
+    "subscriptions-transport-ws": {
+      "version": "0.9.17",
+      "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.17.tgz",
+      "integrity": "sha512-hNHi2N80PBz4T0V0QhnnsMGvG3XDFDS9mS6BhZ3R12T6EBywC8d/uJscsga0cVO4DKtXCkCRrWm2sOYrbOdhEA==",
+      "requires": {
+        "backo2": "^1.0.2",
+        "eventemitter3": "^3.1.0",
+        "iterall": "^1.2.1",
+        "symbol-observable": "^1.0.4",
+        "ws": "^5.2.0"
+      },
+      "dependencies": {
+        "eventemitter3": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
+          "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+        },
+        "ws": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+          "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -9658,6 +9748,14 @@
         "glob": "^7.1.2"
       }
     },
+    "ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
     "ts-loader": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-7.0.5.tgz",
@@ -9725,8 +9823,7 @@
     "tslib": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
-      "dev": true
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -10833,6 +10930,11 @@
           "dev": true
         }
       }
+    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
     }
   }
 }

client/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dadd-",
+  "name": "daddy",
   "version": "0.0.0",
   "description": "Daddy",
   "main": "index.js",
@@ -51,12 +51,11 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "@apollo/client": "^3.0.2",
     "@types/qs": "^6.9.3",
-    "bulma": "^0.7.2",
+    "bs58": "^4.0.1",
-    "bulma-switch": "^2.0.0",
+    "bulma": "^0.9.0",
-    "graphql-request": "^2.0.0",
+    "graphql": "^15.3.0",
-    "jwt-decode": "^2.2.0",
-    "qs": "^6.9.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",
@@ -65,6 +64,7 @@
     "redux": "^4.0.4",
     "redux-saga": "^1.1.3",
     "styled-components": "^4.4.1",
+    "subscriptions-transport-ws": "^0.9.17",
     "typescript": "^3.8.3"
   }
 }

client/src/components/App.tsx

@@ -0,0 +1,49 @@
+import React, { FunctionComponent, useState } from 'react';
+import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
+import { HomePage } from './HomePage/HomePage';
+import { ProfilePage } from './ProfilePage/ProfilePage';
+import { WorkgroupPage } from './WorkgroupPage/WorkgroupPage';
+import { DecisionSupportFilePage } from './DecisionSupportFilePage/DecisionSupportFilePage';
+import { DashboardPage } from './DashboardPage/DashboardPage';
+import { useUserProfile } from '../gql/queries/profile';
+import { LoggedInContext } from '../hooks/useLoggedIn';
+import { PrivateRoute } from './PrivateRoute';
+import { useKonamiCode } from '../hooks/useKonamiCode';
+import { Modal } from './Modal';
+
+export interface AppProps {
+
+}
+
+export const App: FunctionComponent<AppProps> = () => {
+  const { user } = useUserProfile();
+
+  const [ showBoneyM, setShowBoneyM ] = useState(false);
+  useKonamiCode(() => setShowBoneyM(true));
+
+  return (
+    <LoggedInContext.Provider value={user.id !== ''}>
+      <BrowserRouter>
+        <Switch>
+          <Route path="/" exact component={HomePage} />
+          <PrivateRoute path="/profile" exact component={ProfilePage} />
+          <PrivateRoute path="/workgroups/:id" exact component={WorkgroupPage} />
+          <PrivateRoute path="/decisions/:id" exact component={DecisionSupportFilePage} />
+          <PrivateRoute path="/dashboard" exact component={DashboardPage} />
+          <Route component={() => <Redirect to="/" />} />
+        </Switch>
+      </BrowserRouter>
+      {
+        showBoneyM ?
+        <Modal active={true} showCloseButton={true} onClose={() => setShowBoneyM(false)}>
+          <iframe width={560} height={315}
+            frameBorder={0}
+            allowFullScreen={true}
+            src="https://www.youtube.com/embed/uVzT5QEEQ2c?autoplay=1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
+          </iframe>
+        </Modal> :
+        null
+      }
+    </LoggedInContext.Provider>
+  );
+}

client/src/components/DashboardPage/Dashboard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { WorkgroupsPanel } from './WorkgroupsPanel';
+import { DecisionSupportFilePanel } from './DecisionSupportFilePanel';
+
+export function Dashboard() {
+  return (
+    <div className="columns">
+      <div className="column is-6">
+        <DecisionSupportFilePanel />
+      </div>
+      <div className="column is-3">
+        <WorkgroupsPanel />
+      </div>
+      <div className="column is-3">
+        <div className="box">
+          <div className="level">
+            <div className="level-left">
+              <h3 className="is-size-3 subtitle level-item">Assemblées</h3>
+            </div>
+            <div className="level-right">
+              <button disabled className="button is-primary level-item"><i className="fa fa-plus"></i></button>
+            </div>
+          </div>
+          <pre>TODO</pre>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Page } from '../Page';
+import { Dashboard } from './Dashboard';
+
+export function DashboardPage() {
+  return (
+    <Page title={'Tableau de bord'}>
+      <div className="container is-fluid">
+        <section className="mt-5">
+          <Dashboard />
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/components/DashboardPage/DecisionSupportFilePanel.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
+import { ItemPanel, TabDefinition, Item } from './ItemPanel';
+import { useUserProfile } from '../../gql/queries/profile';
+import { inWorkgroup } from '../../types/workgroup';
+import { useDecisionSupportFiles } from '../../gql/queries/dsf';
+
+export function DecisionSupportFilePanel() {
+  const { user } = useUserProfile();
+  const { decisionSupportFiles } = useDecisionSupportFiles();
+
+  const tabs: TabDefinition[] = [
+    {
+      label: 'Mes dossiers en cours',
+      itemFilter: (item: Item) => {
+        const dsf = item as DecisionSupportFile;
+        return (dsf.status === DecisionSupportFileStatus.Draft || dsf.status === DecisionSupportFileStatus.Ready) && inWorkgroup(user, dsf.workgroup);
+      }
+    },
+    {
+      label: 'Brouillons',
+      itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Draft
+    },
+    {
+      label: 'Clos',
+      itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Closed
+    },
+  ];
+
+
+  return (
+    <ItemPanel
+      className='is-link'
+      title="Dossiers"
+      newItemUrl="/decisions/new"
+      items={decisionSupportFiles}
+      tabs={tabs}
+      itemIconClassName='fas fa-folder'
+      itemKey={item => item.id}
+      itemLabel={item => item.title}
+      itemUrl={item => `/decisions/${item.id}`}
+    />
+  );
+}

client/src/components/DashboardPage/ItemPanel.tsx

@@ -0,0 +1,121 @@
+import React, { FunctionComponent, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { WithLoader } from "../WithLoader";
+
+export interface Item {
+  id: string
+  [propName: string]: any;
+}
+
+export interface TabDefinition {
+  label: string
+  itemFilter?: (item: Item) => boolean
+}
+
+
+export interface ItemPanelProps {
+  className?: string
+  itemIconClassName?: string
+  title?: string
+  newItemUrl: string
+  isLoading?: boolean
+  items: Item[]
+  tabs?: TabDefinition[],
+  itemKey: (item: Item, index: number) => string
+  itemLabel: (item: Item, index: number) => string
+  itemUrl: (item: Item, index: number) => string
+}
+
+export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
+  const { 
+    title, className, newItemUrl, 
+    itemKey, itemLabel, 
+    itemIconClassName, itemUrl
+  } = props;
+  
+  const [ state, setState ] = useState({ selectedTab: 0, filteredItems: [] });
+
+  const filterItemsForTab = (tab: TabDefinition, items: Item[]) => {
+    const itemFilter = tab && typeof tab.itemFilter === 'function' ? tab.itemFilter : () => true;
+    return items.filter(itemFilter);
+  };
+
+  const selectTab = (tabIndex: number) => {
+    setState(state => {
+      const { tabs, items } = props;      
+      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[tabIndex] : null;
+      return { 
+        ...state, 
+        selectedTab: tabIndex,
+        filteredItems: filterItemsForTab(newTab, items)
+      };
+    });
+  };
+
+  useEffect(() => {
+    setState(state => {
+      const { tabs, items } = props;      
+      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[state.selectedTab] : null;
+      return {
+        ...state,
+        filteredItems: filterItemsForTab(newTab, items),
+      }
+    });
+  }, [props.items, props.tabs]);
+
+  const itemElements = state.filteredItems.map((item: Item, i: number) => {
+    return (
+      <Link to={itemUrl(item, i)} key={`item-${itemKey(item, i)}`} className="panel-block">
+        <span className="panel-icon">
+          <i className={itemIconClassName} aria-hidden="true"></i>
+        </span>
+        {itemLabel(item, i)}
+      </Link>
+    );
+  });
+
+  const tabs = props.tabs || [];
+
+  return (
+    <nav className={`panel ${className}`}>
+      <div className="level is-mobile panel-heading mb-0">
+        <div className="level-left">
+          <p className="level-item">{title}</p>
+        </div>
+        <div className="level-right">
+          <Link to={newItemUrl} className="button level-item is-outlined is-info is-inverted">
+            <i className="icon fa fa-plus"></i>
+          </Link>
+        </div>
+      </div>
+      <div className="panel-block">
+        <p className="control has-icons-left">
+          <input className="input" type="text" placeholder="Filtrer..." />
+          <span className="icon is-left">
+            <i className="fas fa-search" aria-hidden="true"></i>
+          </span>
+        </p>
+      </div>
+      <p className="panel-tabs">
+        {
+          tabs.map((tab, i) => {
+            return (
+              <a key={`workgroup-tab-${i}`}
+                onClick={selectTab.bind(null, i)}
+                className={i === state.selectedTab ? 'is-active' : ''}>
+                {tab.label}
+              </a>
+            )
+          })
+        }
+      </p>
+      {
+        itemElements.length > 0 ?
+        itemElements :
+        <a className="panel-block has-text-centered is-block">
+          <em>Aucun élément pour l'instant.</em>
+        </a>
+      }
+    </nav>
+  )
+};

client/src/components/DashboardPage/WorkgroupsPanel.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { Workgroup, inWorkgroup } from '../../types/workgroup';
+import { User } from '../../types/user';
+import { Link } from 'react-router-dom';
+import { useWorkgroupsQuery, useWorkgroups } from '../../gql/queries/workgroups';
+import { useUserProfileQuery, useUserProfile } from '../../gql/queries/profile';
+import { WithLoader } from '../WithLoader';
+import { ItemPanel, Item } from './ItemPanel';
+
+export function WorkgroupsPanel() {
+  const { workgroups } = useWorkgroups();
+  const  { user } = useUserProfile();
+
+  const tabs = [
+    {
+      label: "Mes groupes en cours",
+      itemFilter: (item: Item) => {
+        const wg = item as Workgroup;
+        return  wg.closedAt === null && inWorkgroup(user, wg);
+      }
+    },
+    {
+      label: "Ouverts",
+      itemFilter: (item: Item) => !(item as Workgroup).closedAt
+    },
+    {
+      label: "Clos",
+      itemFilter: (item: Item) => !!(item as Workgroup).closedAt
+    }
+  ];
+  
+  return (
+    <ItemPanel
+      className='is-info'
+      title="Groupes de travail"
+      newItemUrl="/workgroups/new"
+      items={workgroups}
+      tabs={tabs}
+      itemIconClassName='fas fa-users'
+      itemKey={item => item.id}
+      itemLabel={item => item.name}
+      itemUrl={item => `/workgroups/${item.id}`}
+    />
+  );
+}

client/src/components/DecisionSupportFilePage/AppendixPanel.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent, useState } from 'react';
+import { DecisionSupportFile } from '../../types/decision';
+
+export interface AppendixPanelProps {
+  dsf: DecisionSupportFile,
+};
+
+export const AppendixPanel: FunctionComponent<AppendixPanelProps> = ({ dsf }) => {
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Annexes
+      </p>
+      <div className="panel-block">
+      </div>
+    </nav>
+  );
+};

client/src/components/DecisionSupportFilePage/ClarificationSection.tsx

@@ -0,0 +1,134 @@
+import React, { FunctionComponent, useState, ChangeEvent, useEffect } from 'react';
+import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
+import { useDebounce } from '../../hooks/useDebounce';
+import { asDate } from '../../util/date';
+
+export interface ClarificationSectionProps extends DecisionSupportFileUpdaterProps {};
+
+const ClarificationSectionName = 'clarification';
+
+export const ClarificationSection: FunctionComponent<ClarificationSectionProps> = ({ dsf, updateDSF }) => {
+  const [ state, setState ] = useState({
+    changed: false,
+    section: {
+      objectives: '',
+      motivations: '',
+      scope: '',
+      nature: '',
+      deadline: undefined,
+      hasDeadline: false,
+    }
+  });
+
+  useEffect(() => {
+    if (!state.changed) return;
+    updateDSF({ ...dsf, sections: { ...dsf.sections, [ClarificationSectionName]: { ...state.section }} })
+    setState(state => ({ ...state, changed: false }));
+  }, [state.changed]);
+
+  useEffect(() => {
+    if (!dsf.sections[ClarificationSectionName]) return;
+    setState(state => ({ ...state, changed: false, section: {...state.section, ...dsf.sections[ClarificationSectionName] }}));
+  }, [dsf.sections[ClarificationSectionName]]);
+
+  const onTitleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const title = (evt.currentTarget).value;
+    updateDSF({ ...dsf, title });
+  };
+
+  const onSectionAttrChange = (attrName: string, evt: ChangeEvent<HTMLInputElement>) => {
+    const target = evt.currentTarget;
+    const value = target.hasOwnProperty('checked') ? target.checked : target.value;
+    setState(state => ({ ...state, changed: true, section: {...state.section, [attrName]: value }}));
+  };
+
+  const onDeadlineChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    const deadline = evt.currentTarget.valueAsDate;
+    setState(state => ({ ...state, changed: true, section: { ...state.section, deadline }}));
+  };
+
+  return (
+    <section>
+      <div className="box">
+        <div className="field">
+          <label className="label">Intitulé du dossier</label>
+          <div className="control">
+            <input className="input" type="text" value={dsf.title} onChange={onTitleChange} />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Quelle décision devons nous prendre ?</label>
+          <div className="control">
+            <textarea className="textarea"
+              value={state.section.objectives}
+              onChange={onSectionAttrChange.bind(null, 'objectives')}
+              placeholder="Décrire globalement les tenants et aboutissants de la décision à prendre." 
+              rows={10}>
+            </textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Ne pas essayer de rentrer trop dans les détails ici. Préférer l'utilisation des annexes et y faire référence.</p>
+        </div>
+        <div className="field">
+          <label className="label">Pourquoi devons nous prendre cette décision ?</label>
+          <div className="control">
+            <textarea className="textarea"
+              value={state.section.motivations}
+              onChange={onSectionAttrChange.bind(null, 'motivations')}
+              placeholder="Décrire pourquoi il est important de prendre cette décision." 
+              rows={10}>
+            </textarea>
+          </div>
+          <p className="help is-info"><i className="fa fa-info-circle"></i> Penser à indiquer si des obligations légales pèsent sur cette prise de décision.</p>
+        </div>
+        <div className="field">
+          <label className="label">Portée de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select 
+                onChange={onSectionAttrChange.bind(null, 'scope')} 
+                value={state.section.scope}>
+                <option></option>
+                <option value="individual">Individuelle</option>
+                <option value="identified-group">Groupe identifié</option>
+                <option value="collective">Collective</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Nature de la décision</label>
+          <div className="control">
+            <div className="select">
+              <select onChange={onSectionAttrChange.bind(null, 'nature')} 
+                value={state.section.nature}>
+                <option></option>
+                <option value="operational">Opérationnelle</option>
+                <option value="tactic">Tactique</option>
+                <option value="strategic">Stratégique</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        
+        <div className="columns">
+          <div className="column">
+            <label className="checkbox">
+              <input type="checkbox"
+                onChange={onSectionAttrChange.bind(null, 'hasDeadline')}
+                checked={state.section.hasDeadline} />
+              <span className="ml-1">Existe t'il une échéance particulière pour cette décision ?</span>
+            </label>
+            <div className="field">
+              <div className="control">
+                <input disabled={!state.section.hasDeadline} 
+                  value={state.section.deadline ? asDate(state.section.deadline).toISOString().substr(0, 10) : ''}
+                  onChange={onDeadlineChange}
+                  type="date" className="input" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};

client/src/components/DecisionSupportFilePage/DecisionSupportFilePage.tsx

@@ -0,0 +1,161 @@
+import React, { FunctionComponent, useState, useEffect } from 'react';
+import { Page } from '../Page';
+import { ClarificationSection } from './ClarificationSection';
+import { MetadataPanel } from './MetadataPanel';
+import { AppendixPanel } from './AppendixPanel';
+import { DecisionSupportFile, newDecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
+import { useParams, useHistory } from 'react-router';
+import { useDecisionSupportFiles } from '../../gql/queries/dsf';
+import { useCreateDecisionSupportFileMutation, useUpdateDecisionSupportFileMutation } from '../../gql/mutations/dsf';
+import { useDebounce } from '../../hooks/useDebounce';
+import { OptionsSection } from './OptionsSection';
+
+export interface DecisionSupportFilePageProps {
+
+};
+
+export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
+  const { id } = useParams();
+  const history = useHistory();
+  const { decisionSupportFiles } = useDecisionSupportFiles({
+    variables:{
+      filter: {
+        ids: id !== 'new' ? [id] : undefined,
+      }
+    }
+  });
+
+  const [ state, setState ] = useState({ 
+    dsf: newDecisionSupportFile(),
+    saved: true,
+    selectedTabIndex: 0,
+  });
+
+  useEffect(() => {
+    const dsf = decisionSupportFiles.length > 0 && decisionSupportFiles[0].id === id ? decisionSupportFiles[0] : {};
+    setState(state => ({ ...state, dsf: { ...state.dsf, ...dsf }}))
+  }, [ decisionSupportFiles ]);
+
+  const selectTab = (tabIndex: number) => {
+    setState(state => ({ ...state, selectedTabIndex: tabIndex }));
+  };
+
+  const updateDSF = (dsf: DecisionSupportFile) => {
+    setState(state => {
+      return { ...state, saved: false, dsf: { ...state.dsf, ...dsf } };
+    });
+  };
+
+  const [ createDecisionSupportFile ] = useCreateDecisionSupportFileMutation();
+  const [ updateDecisionSupportFile ] = useUpdateDecisionSupportFileMutation();
+
+  const saveDSF = () => {
+    const changes = {
+      title: state.dsf.title !== '' ? state.dsf.title : undefined,
+      status: state.dsf.status,
+      workgroupId: state.dsf.workgroup ? state.dsf.workgroup.id : undefined,
+      sections: state.dsf.sections,
+    };
+
+    if (!changes.workgroupId) return;
+
+    if (state.dsf.id === '') {
+      createDecisionSupportFile({
+        variables: { changes },
+      }).then(({ data }) => {
+        history.push(`/decisions/${data.createDecisionSupportFile.id}`);
+      });
+    } else {
+      updateDecisionSupportFile({
+        variables: { changes, id: state.dsf.id },
+      }).then(({ data }) => {
+        setState(state => {
+          return { ...state, saved: true, dsf: { ...state.dsf, ...data.updateDecisionSupportFile } };
+        });
+      });
+    }
+  };
+
+  const canSave = !!state.dsf.workgroup && !state.saved;
+  const isNew = state.dsf.id === '';
+  const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;
+
+  return (
+    <Page title="Dossier d'Aide à la Décision">
+      <div className="container is-fluid">
+        <section className="mt-5">
+          <div className="level">
+            <div className="level-left">
+              {
+                isNew ?
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">Nouveau</h2>
+                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision</h3>
+                  </div>
+                </div> :
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">{state.dsf.title}</h2>
+                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision <span className="is-italic">{ isClosed ? '(clos)' : null }</span></h3>
+                  </div>
+                </div>
+              }
+            </div>
+            <div className="level-right">
+              <div className="level-item buttons">
+                <button className="button is-medium is-success" disabled={!canSave} onClick={saveDSF}>
+                  <span className="icon"><i className="fa fa-save"></i></span>
+                  <span>Enregistrer</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+        <div className="columns mt-3">
+          <div className="column is-9">
+            <div className="tabs is-medium is-toggle">
+              <ul>
+                <li className={`has-background-white ${state.selectedTabIndex === 0 ? 'is-active': ''}`}
+                  onClick={selectTab.bind(null, 0)}>
+                  <a>
+                    <span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
+                    <span>Clarifier la proposition</span>
+                  </a>
+                </li>
+                <li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`} 
+                    onClick={selectTab.bind(null, 1)}>
+                  <a>
+                    <span className="icon is-small"><i className="fas fa-search" aria-hidden="true"></i></span>
+                    <span>Explorer les options</span>
+                  </a>
+                </li>
+                <li className={`has-background-white ${state.selectedTabIndex === 2 ? 'is-active': ''}`} 
+                    onClick={selectTab.bind(null, 2)}>
+                  <a>
+                    <span className="icon is-small"><i className="fas fa-person-booth" aria-hidden="true"></i></span>
+                    <span>Prendre la décision</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            {
+              state.selectedTabIndex === 0 ?
+              <ClarificationSection dsf={state.dsf} updateDSF={updateDSF} /> :
+              null
+            }
+            {
+              state.selectedTabIndex === 1 ?
+              <OptionsSection dsf={state.dsf} updateDSF={updateDSF} /> :
+              null
+            }
+          </div>
+          <div className="column is-3">
+            <MetadataPanel dsf={state.dsf} updateDSF={updateDSF} />
+            <AppendixPanel dsf={state.dsf} />
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+};

client/src/components/DecisionSupportFilePage/DecisionSupportFileUpdaterProps.tsx

@@ -0,0 +1,6 @@
+import { DecisionSupportFile } from "../../types/decision";
+
+export interface DecisionSupportFileUpdaterProps {
+  dsf: DecisionSupportFile
+  updateDSF: (dsf: DecisionSupportFile) => void
+}

client/src/components/DecisionSupportFilePage/MetadataPanel.tsx

@@ -0,0 +1,86 @@
+import React, { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
+import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
+import { useWorkgroups } from '../../gql/queries/workgroups';
+import { useUserProfile } from '../../gql/queries/profile';
+import { inWorkgroup } from '../../types/workgroup';
+import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
+import { asDate } from '../../util/date';
+
+export interface MetadataPanelProps extends DecisionSupportFileUpdaterProps {};
+
+export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf, updateDSF }) => {
+  const { user } = useUserProfile();
+  const { workgroups } = useWorkgroups();
+
+  const [ userOpenedWorkgroups, setUserOpenedWorkgroups ] = useState([]);
+
+  useEffect(() => {
+    const filtered = workgroups.filter(wg => !wg.closedAt && inWorkgroup(user, wg));
+    setUserOpenedWorkgroups(filtered);
+  }, [workgroups, user])
+
+  const onStatusChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
+    const status = evt.currentTarget.value as DecisionSupportFileStatus;
+    updateDSF({ ...dsf, status });
+  };
+
+  const onWorkgroupChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
+    const workgroupId = evt.currentTarget.value;
+    const workgroup = workgroups.find(wg => wg.id === workgroupId);
+    updateDSF({ ...dsf, workgroup });
+  };
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Métadonnées
+      </p>
+      <div className="panel-block">
+        <div style={{width:'100%'}}>
+          <div className="field">
+            <div className="label">Groupe de travail</div>
+            <div className="control is-expanded">
+              <div className="select is-fullwidth">
+                <select onChange={onWorkgroupChanged} value={dsf.workgroup ? dsf.workgroup.id : ''}>
+                  <option></option>
+                  {
+                    userOpenedWorkgroups.map(wg => {
+                      return (
+                        <option key={`wg-${wg.id}`} value={wg.id}>{wg.name}</option>
+                      );
+                    })
+                  }
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Statut</div>
+            <div className="control is-expanded">
+              <div className="select is-fullwidth">
+                <select onChange={onStatusChanged} value={dsf.status}>
+                  <option value="draft">Brouillon</option>
+                  <option value="ready">Prêt à voter</option>
+                  <option value="voted">Voté</option>
+                  <option value="closed">Clôs</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Créé le</div>
+            <div className="control">
+              <p>{asDate(dsf.createdAt).toISOString()}</p>
+            </div>
+          </div>
+          <div className="field">
+            <div className="label">Voté le</div>
+            <div className="control">
+              <p>{dsf.votedAt ? dsf.votedAt : '--'}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

client/src/components/DecisionSupportFilePage/OptionsSection.tsx

@@ -0,0 +1,153 @@
+import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent } from 'react';
+import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
+import { base58UUID } from "../../util/uuid";
+
+export interface OptionsSectionProps extends DecisionSupportFileUpdaterProps {};
+
+const OptionsSectionName = 'options';
+
+export const OptionsSection: FunctionComponent<OptionsSectionProps> = ({ dsf, updateDSF }) => {
+  interface OptionsSectionState {
+    changed: boolean
+    section: OptionsSection
+  }
+  
+  interface OptionsSection {
+     options: Option[]
+  }
+  
+  interface Option {
+      id: string
+      label: string
+      pros: string
+      cons: string
+  }
+  
+  const [ state, setState ] = useState<OptionsSectionState>({
+     changed: false,
+     section: {
+       options: [],
+     }
+  });
+
+  useEffect(() => {
+    if (!state.changed) return;
+    updateDSF({ ...dsf, sections: { ...dsf.sections, [OptionsSectionName]: { ...state.section }} })
+    setState(state => ({ ...state, changed: false }));
+  }, [state.changed]);
+
+  useEffect(() => {
+    if (!dsf.sections[OptionsSectionName]) return;
+    setState(state => ({ ...state, changed: false, section: {...state.section, ...dsf.sections[OptionsSectionName] }}));
+  }, [dsf.sections[OptionsSectionName]]);
+
+  function newOption(label: string, pros: string, cons: string): Option {
+    return {
+      id: base58UUID(),
+      label,
+      pros,
+      cons
+    };
+  }
+
+  const onAddOptionClick = (evt: MouseEvent) => {
+    const options = JSON.parse(JSON.stringify(state.section.options))
+    const option = newOption("Décision", "", "");
+    options.push(option);
+    setState(state => ({ ...state, changed: true, section: { ...state.section, options }}));
+  };
+
+  const onOptionChange = (id: number, attrName: string, evt: ChangeEvent<HTMLInputElement>) => {
+    const target = evt.currentTarget;
+    const value = target.hasOwnProperty('checked') ? target.checked : target.value;
+    const options = JSON.parse(JSON.stringify(state.section.options))
+    options[id][attrName] = value;
+    setState(state => ({ ...state, changed: true, section: { ...state.section, options }}));
+  };
+
+  const onRemoveOptionClick = (id: number, evt: MouseEvent) => {
+    if(confirm('Voulez-vous supprimer cette option ?')){
+      const options = JSON.parse(JSON.stringify(state.section.options))
+      options.splice(id, 1);
+      setState(state => ({ ...state, changed: true, section: { ...state.section, options }}));
+    }
+  };
+
+  return (
+    <section>
+      <h4 id="options-section" className="is-size-4 title is-spaced"><a href="#options-section">Explorer les options</a></h4>
+      <div className="box">
+      <div className="table-container">
+            <table className={`table is-bordered is-striped is-hoverable is-fullwidth`}>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Décision</th>
+                        <th>Pours</th>
+                        <th>Contres</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        state.section.options.map((o, index) => {
+                            return (
+                                <tr key={`option-${o.id}`}>
+                                    <td>
+                                        <button
+                                            onClick={onRemoveOptionClick.bind(null, index)}
+                                            className="button is-danger is-small is-outlined">
+                                        🗑️
+                                        </button>
+                                    </td>
+                                    <td>
+                                      <textarea className="textarea"
+                                        value={o.label}
+                                        onChange={onOptionChange.bind(null, index, 'label')}
+                                        placeholder="Décrire cette décision." 
+                                        rows={10}>
+                                      </textarea>
+                                    </td>
+                                    <td>
+                                      <textarea className="textarea is-success"
+                                        value={o.pros}
+                                        onChange={onOptionChange.bind(null, index, 'pros')}
+                                        placeholder="Décrire les avantages de cette décision." 
+                                        rows={10}>
+                                      </textarea>
+                                    </td>
+                                    <td>
+                                      <textarea className="textarea is-danger"
+                                        value={o.cons}
+                                        onChange={onOptionChange.bind(null, index, 'cons')}
+                                        placeholder="Décrire les désavantages de cette décision." 
+                                        rows={10}>
+                                      </textarea>
+                                    </td>
+                                </tr>
+                            )
+                        })
+                    }
+                    {
+                        state.section.options.length === 0 ?
+                        <tr>
+                            <td></td>
+                            <td colSpan={4}>Aucune option pour l'instant.</td>
+                        </tr> :
+                        null
+                    }
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td colSpan={5}>
+                          <a className="button is-primary is-pulled-right" onClick={onAddOptionClick}>
+                          Ajouter
+                          </a>
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </div>
+      </div>
+    </section>
+  );
+};

client/src/components/HomePage/HomePage.tsx

@@ -0,0 +1,20 @@
+import React, { useEffect } from 'react';
+import { Page } from '../Page';
+import { WelcomeContent } from './WelcomeContent';
+import { useUserProfile } from '../../gql/queries/profile';
+import { useHistory } from 'react-router';
+
+export function HomePage() {
+  const { user } = useUserProfile();
+  const history = useHistory();
+
+  useEffect(() => {
+    if (user.id !== '') history.push('/dashboard');
+  }, [user.id])
+
+  return (
+    <Page title="Accueil">
+      <WelcomeContent />
+    </Page>
+  );
+}

client/src/components/HomePage/WelcomeContent.tsx

@@ -0,0 +1,75 @@
+import React, { FunctionComponent, Fragment } from "react";
+
+export interface WelcomeContentProps {
+
+}
+
+export const WelcomeContent: FunctionComponent<WelcomeContentProps> = () => {
+  return (
+    <Fragment>
+      <section className="hero is-normal is-light is-bold">
+        <div className="hero-body has-text-centered">
+          <div className="container">
+            <h1 className="title">
+              Bienvenue sur Daddy !
+            </h1>
+            <h2 className="subtitle">
+              L'outil de suivi de la vie d'entreprise démocratique.
+            </h2>
+          </div>
+        </div>
+      </section>
+      <div className="box cta">
+        <p className="has-text-centered">
+          <span className="tag is-info">Attention</span> Le service est actuellement en alpha. L'accès est restreint aux adresses autorisées.
+        </p>
+      </div>
+      <section className="container mt-5">
+        <div className="columns">
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-at mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Une adresse courriel et c'est parti !</h4>
+                  <p>Pas de création de compte, pas de mot de passe à retenir. Entrez votre adresse courriel et commencez directement à travailler !</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-edit mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Préparer vos dossiers d'aide à la décision</h4>
+                  <p>Une décision à prendre ? Un nouveau projet à lancer ? Crééz votre groupe de travail et rédigez un dossier pour faciliter la prise de décision collective !</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="column is-4">
+            <div className="card is-shady">
+              <div className="card-image has-text-centered">
+                <i className="fa fa-users mt-5" style={{fontSize: '8rem'}}></i>
+              </div>
+              <div className="card-content">
+                <div className="content">
+                  <h4>Travaillez collaborativement</h4>
+                  <p>Éditez à plusieurs vos dossiers d'aide à la décision, suivi l'avancée des débats et retrouvez simplement les décisions prises dans l'entreprise.</p>
+                  {/* <p><a href="#">En savoir plus</a></p> */}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Fragment>
+  );
+};

client/src/components/Navbar.tsx

@@ -0,0 +1,67 @@
+import React, { Fragment, useState } from 'react';
+import logo from '../resources/logo.svg';
+import { useSelector } from 'react-redux';
+import { Config } from '../config';
+import { Link } from 'react-router-dom';
+import { useLoggedIn } from '../hooks/useLoggedIn';
+
+export function Navbar() {
+  const loggedIn = useLoggedIn();
+  const [ isActive, setActive ] = useState(false);
+
+  const toggleMenu = () => {
+    setActive(active => !active);
+  };
+  
+  return (
+    <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
+      <div className="container is-fluid">
+        <div className="navbar-brand">
+          <Link className="navbar-item" to="/">
+            <img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
+            <h1 className="is-size-4">Daddy</h1>
+          </Link>
+          <a role="button" 
+            className={`navbar-burger ${isActive ? 'is-active' : ''}`}
+            onClick={toggleMenu}
+            aria-label="menu" 
+            aria-expanded="false">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+        <div className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
+          <div className="navbar-end">
+            <div className="navbar-item">
+              <div className="buttons">
+                {
+                  loggedIn ?
+                  <Fragment>
+                    <Link to="/profile" className="button">
+                      <span className="icon">
+                        <i className="fas fa-user"></i>
+                      </span>
+                      <span>Mon profil</span>
+                    </Link>
+                    <a className="button is-warning" href={Config.logoutURL}>
+                      <span className="icon">
+                        <i className="fas fa-sign-out-alt"></i>
+                      </span>
+                    </a>
+                  </Fragment> :
+                  <a className="button is-primary" href={Config.loginURL}>
+                    <span className="icon">
+                      <i className="fas fa-sign-in-alt"></i>
+                    </span>
+                    <span>S'identifier</span>
+                  </a>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

client/src/components/Page.tsx

@@ -25,6 +25,6 @@ export class Page extends React.PureComponent<PageProps> {
 
   updateTitle() {
     const { title } = this.props;
-    if (title !== undefined) window.document.title = title;
+    if (title !== undefined) window.document.title = title + ' - Daddy';
   }
 }

client/src/components/PrivateRoute.tsx

@@ -0,0 +1,18 @@
+import React, { FunctionComponent, Component, ReactType } from "react"
+import { Route, Redirect, RouteProps } from "react-router"
+import { useLoggedIn } from "../hooks/useLoggedIn";
+
+export interface PrivateRouteProps extends RouteProps {
+}
+
+export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ({component: Component, ...rest}) => {  
+  const loggedIn = useLoggedIn();
+  return (
+    <Route
+      {...rest}
+      render={(props) => loggedIn === true
+        ? <Component {...props} />
+        : <Redirect to={{pathname: '/', state: {from: props.location}}} />}
+    />
+  )
+}

client/src/components/ProfilePage/ProfilePage.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Page } from '../Page';
+import { UserForm } from '../UserForm';
+import { User } from '../../types/user';
+import { useUserProfileQuery } from '../../gql/queries/profile';
+import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
+import { WithLoader } from '../WithLoader';
+
+export function ProfilePage() {
+  const userProfileQuery = useUserProfileQuery();
+  const [ updateProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation();
+  const isLoading = updateUserProfileMutation.loading || userProfileQuery.loading;
+
+  const { userProfile } = (userProfileQuery.data || {});
+
+  const onUserChange = (user: User) => {
+    if (userProfile.name !== user.name) {
+      updateProfile({ variables: {changes: { name: user.name }}});
+    }
+  };
+
+  return (
+    <Page title="Mon profil">
+      <div className="container is-fluid">
+        <section className="section">
+          <div className="columns">
+            <div className="column is-6 is-offset-3">
+              <h2 className="is-size-2 subtitle">Mon profil</h2>
+              <WithLoader loading={isLoading || !userProfile}>
+              {
+                <UserForm onChange={onUserChange} user={userProfile} />
+              }
+              </WithLoader>
+            </div>
+          </div>
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/components/UserForm.tsx

@@ -0,0 +1,80 @@
+import React, { useState, ChangeEvent, useEffect } from 'react';
+import { User } from '../types/user';
+
+export interface UserFormProps {
+  user: User
+  onChange?: (user: User) => void
+}
+
+export function UserForm({ user, onChange }: UserFormProps) {  
+  const [ state, setState ] = useState({
+    changed: false,
+    user: {
+      id: user && user.id ? user.id : '',
+      name: user && user.name ? user.name : '',
+      email: user && user.email ? user.email : '',
+      createdAt: user && user.createdAt ? user.createdAt : null,
+      connectedAt: user && user.connectedAt ? user.connectedAt : null,
+    }
+  });
+
+  const onSaveClick = () => {
+    if (!state.changed) return;
+    if (typeof onChange !== 'function') return;
+    onChange(state.user);
+    setState(state => {
+      return {
+        ...state,
+        changed: false,
+      };
+    })
+  };
+  
+  const onUserAttrChange = function(attrName: string, evt: ChangeEvent<HTMLInputElement>) {
+    const value = evt.currentTarget.value;
+    setState(state => {
+      return {
+        ...state,
+        changed: true,
+        user: {
+          ...state.user,
+          [attrName]: value,
+        }
+      };
+    });
+  };
+
+  return (
+    <div className="form">
+      <div className="field">
+        <label className="label">Nom d'utilisateur</label>
+        <div className="control">
+          <input type="text" className="input" value={state.user.name} 
+            onChange={onUserAttrChange.bind(null, "name")} />
+        </div>
+      </div>
+      <div className="field">
+        <label className="label">Adresse courriel</label>
+        <div className="control">
+          <p className="input is-static">{state.user.email}</p>
+        </div>
+      </div>
+      <div className="field">
+        <label className="label">Date de dernière connexion</label>
+        <div className="control">
+          <p className="input is-static">{state.user.connectedAt}</p>
+        </div>
+      </div>
+      <div className="field">
+        <label className="label">Date de création</label>
+        <div className="control">
+          <p className="input is-static">{state.user.createdAt}</p>
+        </div>
+      </div>
+      <div className="buttons is-right">
+        <button disabled={!state.changed} 
+          className="button is-primary" onClick={onSaveClick}>Enregistrer</button>
+      </div>
+    </div>
+  );
+}

client/src/components/WithLoader.tsx

@@ -0,0 +1,18 @@
+import React, { Fragment, PropsWithChildren, FunctionComponent } from 'react';
+
+export interface WithLoaderProps {
+  loading?: boolean|boolean[]
+}
+
+export const WithLoader: FunctionComponent<WithLoaderProps> = ({ loading, children }) => {
+  const isLoading = Array.isArray(loading) ? loading.some(l => l) : loading;
+  return (
+    <Fragment>
+      {
+        isLoading ?
+        <div>Chargement</div> :
+        children
+      }
+    </Fragment>
+  )
+}

client/src/components/WorkgroupPage/InfoForm.tsx

@@ -0,0 +1,96 @@
+import React, { useState, ChangeEvent, useEffect } from 'react';
+import { Workgroup } from '../../types/workgroup';
+
+export interface InfoFormProps {
+  workgroup: Workgroup
+  onChange?: (workgroup: Workgroup) => void
+}
+
+export function InfoForm({ workgroup, onChange }: InfoFormProps) {  
+  const [ state, setState ] = useState({
+    changed: false,
+    workgroup: {
+      id: workgroup && workgroup.id ? workgroup.id : '',
+      name: workgroup && workgroup.name ? workgroup.name : '',
+      createdAt: workgroup && workgroup.createdAt ? workgroup.createdAt : null,
+      closedAt: workgroup && workgroup.closedAt ? workgroup.closedAt : null,
+    }
+  });
+
+  useEffect(() => {
+    setState({
+      changed: false,
+      workgroup: {
+        id: workgroup && workgroup.id ? workgroup.id : '',
+        name: workgroup && workgroup.name ? workgroup.name : '',
+        createdAt: workgroup && workgroup.createdAt ? workgroup.createdAt : null,
+        closedAt: workgroup && workgroup.closedAt ? workgroup.closedAt : null,
+      }
+    });
+  }, [workgroup]);
+
+  const onSaveClick = () => {
+    if (!state.changed) return;
+    if (typeof onChange !== 'function') return;
+    onChange(state.workgroup as Workgroup);
+    setState(state => {
+      return {
+        ...state,
+        changed: false,
+      };
+    })
+  };
+  
+  const onWorkgroupAttrChange = function(attrName: string, evt: ChangeEvent<HTMLInputElement>) {
+    const value = evt.currentTarget.value;
+    setState(state => {
+      return {
+        ...state,
+        changed: true,
+        workgroup: {
+          ...state.workgroup,
+          [attrName]: value,
+        }
+      };
+    });
+  };
+
+  return (
+    <div className="form" style={{width: '100%'}}>
+      <div className="field">
+        <label className="label">Nom du groupe</label>
+        <div className="control">
+          <input type="text" className="input" value={state.workgroup.name} 
+            onChange={onWorkgroupAttrChange.bind(null, "name")} />
+        </div>
+      </div>
+      {
+        state.workgroup.createdAt ?
+        <div className="field">
+          <label className="label">Date de création</label>
+          <div className="control">
+            <p className="input is-static">{state.workgroup.createdAt}</p>
+          </div>
+        </div>:
+        null
+      }
+      {
+        state.workgroup.closedAt ?
+        <div className="field">
+          <label className="label">Date de clôture</label>
+          <div className="control">
+            <p className="input is-static">{state.workgroup.closedAt}</p>
+          </div>
+        </div>:
+        null
+      }
+      <div className="buttons is-right">
+        <button disabled={!state.changed} 
+          className="button is-success" onClick={onSaveClick}>
+          <span>Enregistrer</span>
+          <span className="icon"><i className="fa fa-save"></i></span>
+        </button>
+      </div>
+    </div>
+  );
+}

client/src/components/WorkgroupPage/InfoPanel.tsx

@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from 'react';
+import { User } from '../../types/user';
+import { Workgroup } from '../../types/workgroup';
+import { InfoForm } from './InfoForm';
+import { WithLoader } from '../WithLoader';
+import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups';
+import { useHistory } from 'react-router';
+
+export interface InfoPanelProps {
+  workgroup: Workgroup
+}
+
+export const InfoPanel: FunctionComponent<InfoPanelProps> = ({ workgroup }) => {
+  const [ updateWorkgroup, updateWorkgroupMutation ] = useUpdateWorkgroupMutation();
+  const [ createWorkgroup, createWorkgroupMutation ] = useCreateWorkgroupMutation();
+  const history = useHistory();
+  const isLoading = updateWorkgroupMutation.loading || createWorkgroupMutation.loading;
+
+  const onWorkgroupChange = (formWorkgroup: Workgroup) => {
+    const variables: any = { changes: {} };
+    
+    if (workgroup.name !== formWorkgroup.name) {
+      variables.changes.name = formWorkgroup.name;
+    }
+
+    if (Object.keys(variables.changes).length === 0) return;
+
+    const isCreation = workgroup.id === '';
+    if (isCreation) {
+      createWorkgroup({variables})
+        .then(({ data: { createWorkgroup } }) => {
+          history.push(`/workgroups/${createWorkgroup.id}`);
+        });
+    } else {
+      variables.workgroupId = workgroup.id;
+      updateWorkgroup({variables});
+    }
+  };
+
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Informations
+      </p>
+      <div className="panel-block">
+        <WithLoader loading={isLoading}>
+          <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} />
+        </WithLoader>
+      </div>
+    </nav>
+  );
+}

client/src/components/WorkgroupPage/MembersPanel.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+import { User } from '../../types/user';
+
+export interface MembersPanelProps {
+  users: User[]
+}
+
+export const MembersPanel: FunctionComponent<MembersPanelProps> = ({ users }) => {
+  return (
+    <nav className="panel">
+      <p className="panel-heading">
+        Membres
+      </p>
+      {
+        users.map(u => {
+          return (
+            <div key={`user-${u.id}`} className="panel-block">
+              <span className="panel-icon">
+                <i className="fas fa-user" aria-hidden="true"></i>
+              </span>
+              <span>{`${ u.name ? (u.name + '  - ') : '' }`}</span><span className="is-italic">{`${u.email}`}</span>
+            </div>
+          );
+        })
+      }
+      {
+        users.length === 0 ?
+        <a className="panel-block has-text-centered is-block">
+          <p className="is-italic">Aucun membre pour l'instant.</p>
+        </a> :
+        null
+      }
+    </nav>
+  );
+}

client/src/components/WorkgroupPage/WorkgroupPage.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState, Fragment } from 'react';
+import { Page } from '../Page';
+import { WithLoader } from '../WithLoader';
+import { useParams } from 'react-router';
+import { useWorkgroupsQuery } from '../../gql/queries/workgroups';
+import { useUserProfileQuery } from '../../gql/queries/profile';
+import { MembersPanel } from './MembersPanel';
+import { User } from '../../types/user';
+import { InfoPanel } from './InfoPanel';
+import { Workgroup } from '../../types/workgroup';
+import { useJoinWorkgroupMutation, useLeaveWorkgroupMutation, useCloseWorkgroupMutation } from '../../gql/mutations/workgroups';
+
+export function WorkgroupPage() {
+  const { id } = useParams();
+  const workgroupsQuery = useWorkgroupsQuery({
+    variables:{
+      filter: { 
+        ids: [id],
+      }
+    }
+  });
+  const userProfileQuery = useUserProfileQuery();
+  const [ joinWorkgroup, joinWorkgroupMutation ] = useJoinWorkgroupMutation();
+  const [ leaveWorkgroup, leaveWorkgroupMutation ] = useLeaveWorkgroupMutation();
+  const [ closeWorkgroup, closeWorkgroupMutation ] = useCloseWorkgroupMutation();
+  const [ state, setState ] = useState({
+    userProfileId: '',
+    workgroup: {
+      id: '',
+      name: '',
+      closedAt: null,
+      createdAt: null,
+      members: [],
+    }
+  });
+
+  useEffect(() => {
+    if (!workgroupsQuery.data) return;
+    setState(state => ({...state, workgroup:{ ...state.workgroup, ...workgroupsQuery.data.workgroups[0]}}));
+  }, [workgroupsQuery.data]);
+
+  useEffect(() => {
+    if (!userProfileQuery.data) return;
+    setState(state => ({...state, userProfileId: userProfileQuery.data.userProfile.id }));
+  }, [userProfileQuery.data]);
+
+  const onJoinWorkgroupClick = () => {
+    joinWorkgroup({
+      variables: {
+        workgroupId: state.workgroup.id,
+      }
+    });
+  }
+
+  const onLeaveWorkgroupClick = () => {
+    leaveWorkgroup({
+      variables: {
+        workgroupId: state.workgroup.id,
+      }
+    });
+  }
+
+  const onCloseWorkgroupClick = () => {
+    closeWorkgroup({
+      variables: {
+        workgroupId: state.workgroup.id,
+      }
+    });
+  }
+
+  const isNew = state.workgroup.id === '';
+  const isWorkgroupMember = state.workgroup.members.some(u => u.id === state.userProfileId);
+  const isClosed = state.workgroup.closedAt !== null;
+
+  return (
+    <Page title="Groupe de travail">
+      <div className="container is-fluid">
+        <section className="mt-5">
+          <div className="level">
+            <div className="level-left">
+              {
+                isNew ?
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">Nouveau</h2>
+                    <h3 className="is-size-5 subtitle">Groupe de travail</h3>
+                  </div>
+                </div> :
+                <div className="level-item">
+                  <div>
+                    <h2 className="is-size-3 title is-spaced">{state.workgroup.name}</h2>
+                    <h3 className="is-size-5 subtitle">Groupe de travail <span className="is-italic">{ isClosed ? '(clos)' : null }</span></h3>
+                  </div>
+                </div>
+              }
+            </div>
+            <div className="level-right">
+              <div className="buttons is-right level-item">
+                {
+                  isNew || isClosed ? null :
+                  <Fragment>
+                    {
+                      isWorkgroupMember ?
+                      <Fragment>
+                        <button onClick={onLeaveWorkgroupClick} className="button is-info is-warning is-medium">
+                          <span>Quitter</span>
+                          <span className="icon"><i className="fas fa-sign-out-alt"></i></span>
+                        </button>
+                        <button onClick={onCloseWorkgroupClick} className="button is-danger is-medium">
+                          <span>Clore</span>
+                          <span className="icon"><i className="far fa-times-circle"></i></span>
+                        </button>
+                      </Fragment> :
+                      <button onClick={onJoinWorkgroupClick} className="button is-info is-medium">
+                        <span>Rejoindre</span>
+                        <span className="icon"><i className="fas fa-user-plus"></i></span>
+                      </button>
+                    }
+                  </Fragment>
+                }
+              </div>
+            </div>
+          </div>
+          <WithLoader loading={[workgroupsQuery.loading, userProfileQuery.loading, joinWorkgroupMutation.loading, leaveWorkgroupMutation.loading]}>
+            <div className="columns">
+              <div className="column">
+                <InfoPanel workgroup={state.workgroup as Workgroup} />
+              </div>
+              <div className="column">
+                <MembersPanel users={state.workgroup.members as User[]} />
+              </div>
+            </div>
+          </WithLoader>
+        </section>
+      </div>
+    </Page>
+  );
+}

client/src/config.ts

@@ -0,0 +1,15 @@
+export const Config = {
+  loginURL: get<string>("loginURL", "http://localhost:8081/login"),
+  logoutURL: get<string>("logoutURL", "http://localhost:8081/logout"),
+  graphQLEndpoint: get<string>("graphQLEndpoint", "http://localhost:8081/api/v1/graphql"),
+  subscriptionEndpoint: get<string>("subscriptionEndpoint", "ws://localhost:8081/api/v1/graphql"),
+};
+
+function get<T>(key: string, defaultValue: T):T {
+  const config = window['__CONFIG__'] || {};
+  if (config && config.hasOwnProperty(key)) {
+    return config[key] as T;
+  } else {
+    return defaultValue;
+  }
+} 

client/src/gql/client.tsx

@@ -0,0 +1,56 @@
+import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+import { Config } from '../config';
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { RetryLink } from "@apollo/client/link/retry";
+import { SubscriptionClient } from "subscriptions-transport-ws";
+import { User } from '../types/user';
+
+const subscriptionClient = new SubscriptionClient(Config.subscriptionEndpoint, {
+  reconnect: true,
+});
+
+const link = new RetryLink({attempts: {max: 2}}).split(
+  (operation) => operation.operationName === 'subscription',
+  new WebSocketLink(subscriptionClient),
+  new HttpLink({ uri: Config.graphQLEndpoint, credentials: 'include' })
+);
+
+const cache = new InMemoryCache({
+  typePolicies: {
+    Workgroup: {
+      fields: {
+        members: {
+          merge: mergeArrayByField<User>("id"),
+        }
+      }
+    }
+  }
+});
+
+export const client = new ApolloClient<any>({
+  cache: cache,
+  link: link,
+});
+
+function mergeArrayByField<T>(fieldName: string) {
+  return (existing: T[] = [], incoming: T[], { readField, mergeObjects }) => {
+    const merged: any[] = existing ? existing.slice(0) : [];
+    const objectFieldToIndex: Record<string, number> = Object.create(null);
+    if (existing) {
+      existing.forEach((obj, index) => {
+        objectFieldToIndex[readField(fieldName, obj)] = index;
+      });
+    }
+    incoming.forEach(obj => {
+      const field = readField(fieldName, obj);
+      const index = objectFieldToIndex[field];
+      if (typeof index === "number") {
+        merged[index] = mergeObjects(merged[index], obj);
+      } else {
+        objectFieldToIndex[name] = merged.length;
+        merged.push(obj);
+      }
+    });
+    return merged;
+  }
+}

client/src/gql/mutations/dsf.tsx

@@ -0,0 +1,40 @@
+import { gql, useQuery, useMutation } from '@apollo/client';
+import { QUERY_DECISION_SUPPORT_FILES } from '../queries/dsf';
+
+export const MUTATION_CREATE_DECISION_SUPPORT_FILE = gql`
+mutation createDecisionSupportFile($changes: DecisionSupportFileChanges!) {
+  createDecisionSupportFile(changes: $changes) {
+    id,
+    title,
+    status,
+    sections,
+    createdAt,
+    updatedAt
+  }
+}`;
+
+export function useCreateDecisionSupportFileMutation() {
+  return useMutation(MUTATION_CREATE_DECISION_SUPPORT_FILE, {
+    refetchQueries: [{query: QUERY_DECISION_SUPPORT_FILES}],
+  });
+}
+
+export const MUTATION_UPDATE_DECISION_SUPPORT_FILE = gql`
+mutation updateDecisionSupportFile($id: ID!, $changes: DecisionSupportFileChanges!) {
+  updateDecisionSupportFile(id: $id, changes: $changes) {
+    id,
+    title,
+    status,
+    sections,
+    createdAt,
+    updatedAt
+  }
+}`;
+
+export function useUpdateDecisionSupportFileMutation() {
+  return useMutation(MUTATION_UPDATE_DECISION_SUPPORT_FILE, {
+    refetchQueries: [{
+      query: QUERY_DECISION_SUPPORT_FILES,
+    }],
+  });
+}

client/src/gql/mutations/profile.tsx

@@ -0,0 +1,15 @@
+import { gql, useQuery, useMutation } from '@apollo/client';
+
+export const MUTATION_UPDATE_USER_PROFILE = gql`
+mutation updateUserProfile($changes: ProfileChanges!) {
+  updateProfile(changes: $changes) {
+    id,
+    name,
+    createdAt,
+    connectedAt,
+  }
+}`;
+
+export function useUpdateUserProfileMutation() {
+  return useMutation(MUTATION_UPDATE_USER_PROFILE);
+}

client/src/gql/mutations/workgroups.tsx

@@ -0,0 +1,99 @@
+import { gql, useQuery, useMutation } from '@apollo/client';
+import { QUERY_WORKGROUP } from '../queries/workgroups';
+
+export const MUTATION_UPDATE_WORKGROUP = gql`
+mutation updateWorkgroup($workgroupId: ID!, $changes: WorkgroupChanges!) {
+  updateWorkgroup(workgroupId: $workgroupId, changes: $changes) {
+    id,
+    name,
+    createdAt,
+    closedAt,
+    members {
+      id,
+      name,
+      email
+    }
+  }
+}`;
+
+export function useUpdateWorkgroupMutation() {
+  return useMutation(MUTATION_UPDATE_WORKGROUP);
+}
+
+export const MUTATION_CREATE_WORKGROUP = gql`
+mutation createWorkgroup($changes: WorkgroupChanges!) {
+  createWorkgroup(changes: $changes) {
+    id,
+    name,
+    createdAt,
+    closedAt,
+    members {
+      id,
+      name,
+      email
+    }
+  }
+}`;
+
+export function useCreateWorkgroupMutation() {
+  return useMutation(MUTATION_CREATE_WORKGROUP, {
+    refetchQueries: [{query: QUERY_WORKGROUP}],
+  });
+}
+
+export const MUTATION_JOIN_WORKGROUP = gql`
+mutation joinWorkgroup($workgroupId: ID!) {
+  joinWorkgroup(workgroupId: $workgroupId) {
+    id,
+    name,
+    createdAt,
+    closedAt,
+    members {
+      id,
+      name,
+      email
+    }
+  }
+}`;
+
+export function useJoinWorkgroupMutation() {
+  return useMutation(MUTATION_JOIN_WORKGROUP);
+}
+
+const MUTATION_LEAVE_WORKGROUP = gql`
+mutation leaveWorkgroup($workgroupId: ID!) {
+  leaveWorkgroup(workgroupId: $workgroupId) {
+    id,
+    name,
+    createdAt,
+    closedAt,
+    members {
+      id,
+      name,
+      email
+    }
+  }
+}`;
+
+export function useLeaveWorkgroupMutation() {
+  return useMutation(MUTATION_LEAVE_WORKGROUP);
+}
+
+const MUTATION_CLOSE_WORKGROUP = gql`
+mutation closeWorkgroup($workgroupId: ID!) {
+  closeWorkgroup(workgroupId: $workgroupId) {
+    id,
+    name,
+    createdAt,
+    closedAt,
+    members {
+      id,
+      name,
+      email
+    }
+  }
+}`;
+
+export function useCloseWorkgroupMutation() {
+  return useMutation(MUTATION_CLOSE_WORKGROUP);
+}

client/src/gql/queries/dsf.tsx

@@ -0,0 +1,35 @@
+import { gql, useQuery } from '@apollo/client';
+import { DecisionSupportFile } from '../../types/decision';
+import { useGraphQLData } from './helper';
+
+export const QUERY_DECISION_SUPPORT_FILES = gql`
+  query decisionSupportFiles($filter: DecisionSupportFileFilter) {
+    decisionSupportFiles(filter: $filter) {
+      id,
+      title,
+      sections,
+      createdAt,
+      closedAt,
+      votedAt,
+      status,
+      workgroup {
+        id,
+        name,
+        members {
+          id
+        }
+      },
+    }
+  }
+`;
+
+export function useDecisionSupportFilesQuery(options = {}) {
+  return useQuery(QUERY_DECISION_SUPPORT_FILES, options);
+}
+
+export function useDecisionSupportFiles(options = {}) {
+  const { data, loading, error } = useGraphQLData<DecisionSupportFile[]>(
+    QUERY_DECISION_SUPPORT_FILES, 'decisionSupportFiles', [], options
+  );
+  return { decisionSupportFiles: data, loading, error };
+}

client/src/gql/queries/helper.ts

@@ -0,0 +1,11 @@
+import { useQuery, DocumentNode } from "@apollo/client";
+import { useState, useEffect } from "react";
+
+export function useGraphQLData<T>(q: DocumentNode, key: string, defaultValue: T, options = {}) {
+  const query = useQuery(q, options);
+  const [ data, setData ] = useState<T>(defaultValue);
+  useEffect(() => {
+    setData(query.data ? query.data[key] as T : defaultValue);
+  }, [query.loading, query.data]);
+  return { data, loading: query.loading, error: query.error };
+}

client/src/gql/queries/profile.tsx

@@ -0,0 +1,26 @@
+import { gql, useQuery } from '@apollo/client';
+import { User } from '../../types/user';
+import { useState, useEffect } from 'react';
+import { useGraphQLData } from './helper';
+
+export const QUERY_USER_PROFILE = gql`
+query userProfile {
+  userProfile {
+    id,
+    name,
+    email,
+    createdAt,
+    connectedAt
+  }
+}`;
+
+export function useUserProfileQuery() {
+  return useQuery(QUERY_USER_PROFILE);
+}
+
+export function useUserProfile() {
+  const { data, loading, error } = useGraphQLData<User>(
+    QUERY_USER_PROFILE, 'userProfile', {id: '', email: ''}
+  );
+  return { user: data, loading, error };
+}

client/src/gql/queries/workgroups.tsx

@@ -0,0 +1,31 @@
+import { gql, useQuery } from '@apollo/client';
+import { Workgroup } from '../../types/workgroup';
+import { useGraphQLData } from './helper';
+
+export const QUERY_WORKGROUP = gql`
+  query workgroups($filter: WorkgroupsFilter) {
+    workgroups(filter: $filter) {
+      id,
+      name,
+      createdAt,
+      closedAt,
+      members {
+        id,
+        email,
+        name
+      }
+    }
+  }
+`;
+
+export function useWorkgroupsQuery(options = {}) {
+  return useQuery(QUERY_WORKGROUP, options);
+}
+
+export function useWorkgroups(options = {}) {
+  const { data, loading, error } = useGraphQLData<Workgroup[]>(
+    QUERY_WORKGROUP, 'workgroups', [],
+    options
+  );
+  return { workgroups: data, loading, error };
+}

client/src/hooks/useDebounce.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(
+    () => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [value, delay]
+  );
+
+  return debouncedValue;
+}

client/src/hooks/useKonamiCode.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+export function useKonamiCode(cb: Function) {
+  const KONAMI_CODE = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
+  let cursor = 0;
+
+  useEffect(()=> {
+    const onKeyDown = (e) => {
+      cursor = (e.keyCode == KONAMI_CODE[cursor]) ? cursor + 1 : 0;
+      if (cursor == KONAMI_CODE.length) {
+        cb();
+        cursor = 0;
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+  
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, []);
+}

client/src/hooks/useLoggedIn.tsx

@@ -0,0 +1,7 @@
+import React, { useState, useContext } from "react";
+
+export const LoggedInContext = React.createContext(false);
+
+export const useLoggedIn = () => {
+  return useContext(LoggedInContext);
+};

client/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="has-navbar-fixed-top">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

client/src/index.tsx

@@ -2,15 +2,18 @@ import './sass/_all.scss';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './components/App';
-import { Config } from './config';
+import { client } from './gql/client';
 
 import '@fortawesome/fontawesome-free/js/fontawesome'
 import '@fortawesome/fontawesome-free/js/solid'
 import '@fortawesome/fontawesome-free/js/regular'
 import '@fortawesome/fontawesome-free/js/brands'
 import './resources/favicon.png';
+import { ApolloProvider } from '@apollo/client';
 
 ReactDOM.render(
-  <App />,
+  <ApolloProvider client={client}>
+    <App />
+  </ApolloProvider>,
   document.getElementById('app')
 );

client/src/sass/_all.scss

@@ -0,0 +1,3 @@
+@import 'bulma/bulma.sass';
+@import '_base.scss';
+@import '_loader.scss';

client/src/sass/_base.scss

@@ -0,0 +1,27 @@
+html, body {
+    height: 100%;
+    background-color: #ffffff;
+    // Generated with https://www.svgbackgrounds.com/
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='292.5' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.is-fullheight {
+    height: 100%;
+}
+
+.has-margin-top-normal {
+    margin-top: $size-normal;
+}
+
+.has-padding-small {
+    padding: 1rem;
+}
+
+#app {
+    display: flex;
+    flex-direction: column;
+}
+
+.panel {
+    background-color: #ffffff;
+}

client/src/types/decision.tsx

@@ -0,0 +1,35 @@
+import { Workgroup } from "./workgroup";
+
+export enum DecisionSupportFileStatus {
+  Draft = "draft",
+  Ready = "ready",
+  Voted = "voted",
+  Closed = "closed",
+}
+
+export interface DecisionSupportFileSection {
+  name: string
+}
+
+// aka Dossier d'aide à la décision
+export interface DecisionSupportFile {
+  id: string
+  title: string
+  sections: {[name: string]: any}
+  status: DecisionSupportFileStatus
+  workgroup?: Workgroup,
+  createdAt: Date
+  votedAt?: Date
+  closedAt?: Date
+}
+
+export function newDecisionSupportFile(): DecisionSupportFile {
+  return {
+    id: '',
+    title: '',
+    sections: {},
+    status: DecisionSupportFileStatus.Draft,
+    workgroup: null,
+    createdAt: new Date(),
+  };
+}

client/src/types/user.ts

@@ -0,0 +1,7 @@
+export interface User {
+  id: string
+  email: string
+  name?: string
+  connectedAt?: Date
+  createdAt?: Date
+}

client/src/types/workgroup.ts

@@ -0,0 +1,18 @@
+import { User } from "./user";
+export interface Workgroup {
+  id: string
+  name: string
+  createdAt: Date
+  closedAt: Date
+  members: User[]
+}
+
+export function inWorkgroup(u: User, wg: Workgroup): boolean {
+  for (let m, i = 0; (m = wg.members[i]); i++) {
+    if(m.id === u.id) {
+      return true;
+    }
+  }
+
+  return false;
+}

client/src/util/date.ts

@@ -0,0 +1,4 @@
+export function asDate(d: string|Date): Date {
+  if (typeof d === 'string') return new Date(d);
+  return d;
+}

client/src/util/uuid.ts

@@ -0,0 +1,53 @@
+import bs58 from 'bs58';
+
+const hex: string[] = [];
+
+for (var i = 0; i < 256; i++) {
+    hex[i] = (i < 16 ? '0' : '') + (i).toString(16);
+}
+
+export function uuidV4(): string {
+    const r = crypto.getRandomValues(new Uint8Array(16));
+
+    r[6] = r[6] & 0x0f | 0x40;
+    r[8] = r[8] & 0x3f | 0x80;
+
+    return (
+        hex[r[0]] +
+        hex[r[1]] +
+        hex[r[2]] +
+        hex[r[3]] +
+        "-" +
+        hex[r[4]] +
+        hex[r[5]] +
+        "-" +
+        hex[r[6]] +
+        hex[r[7]] +
+        "-" +
+        hex[r[8]] +
+        hex[r[9]] +
+        "-" +
+        hex[r[10]] +
+        hex[r[11]] +
+        hex[r[12]] +
+        hex[r[13]] +
+        hex[r[14]] +
+        hex[r[15]]
+    );
+}
+
+export function toUTF8Bytes(str: string): number[] {
+    var utf8 = unescape(encodeURIComponent(str));
+
+    var arr: number[] = [];
+    for (var i = 0; i < utf8.length; i++) {
+        arr.push(utf8.charCodeAt(i));
+    }
+
+    return arr
+}
+
+export function base58UUID(): string {
+    const uuid = uuidV4();
+    return bs58.encode(toUTF8Bytes(uuid));
+}

client/webpack.config.js

@@ -22,7 +22,8 @@ module.exports = {
   devServer: {
     contentBase: path.join(__dirname, 'dist'),
     compress: true,
-    port: 8081,
+    host: '0.0.0.0',
+    port: 8080,
     historyApiFallback: true,
     writeToDisk: true,
   },

cmd/server/container.go

@@ -0,0 +1,103 @@
+package main
+
+import (
+	"context"
+	"net/http"
+	"time"
+
+	"github.com/wader/gormstore"
+
+	"forge.cadoles.com/Cadoles/daddy/internal/auth"
+	"forge.cadoles.com/Cadoles/daddy/internal/orm"
+
+	"gitlab.com/wpetit/goweb/logger"
+
+	"forge.cadoles.com/Cadoles/daddy/internal/config"
+	oidc "forge.cadoles.com/wpetit/goweb-oidc"
+	"github.com/pkg/errors"
+	"gitlab.com/wpetit/goweb/service"
+	"gitlab.com/wpetit/goweb/service/build"
+	"gitlab.com/wpetit/goweb/service/session"
+	"gitlab.com/wpetit/goweb/session/gorilla"
+)
+
+func getServiceContainer(ctx context.Context, conf *config.Config) (*service.Container, error) {
+	// Initialize and configure service container
+	ctn := service.NewContainer()
+
+	ctn.Provide(build.ServiceName, build.ServiceProvider(ProjectVersion, GitRef, BuildDate))
+
+	// Generate random cookie authentication key if none is set
+	if conf.HTTP.CookieAuthenticationKey == "" {
+		logger.Info(ctx, "could not find cookie authentication key. generating one...")
+
+		cookieAuthenticationKey, err := gorilla.GenerateRandomBytes(64)
+		if err != nil {
+			return nil, errors.Wrap(err, "could not generate cookie authentication key")
+		}
+
+		conf.HTTP.CookieAuthenticationKey = string(cookieAuthenticationKey)
+	}
+
+	// Generate random cookie encryption key if none is set
+	if conf.HTTP.CookieEncryptionKey == "" {
+		logger.Info(ctx, "could not find cookie encryption key. generating one...")
+
+		cookieEncryptionKey, err := gorilla.GenerateRandomBytes(32)
+		if err != nil {
+			return nil, errors.Wrap(err, "could not generate cookie encryption key")
+		}
+
+		conf.HTTP.CookieEncryptionKey = string(cookieEncryptionKey)
+	}
+
+	ctn.Provide(orm.ServiceName, orm.ServiceProvider("postgres", conf.Database.DSN, conf.Debug))
+
+	orm, err := orm.From(ctn)
+	if err != nil {
+		return nil, errors.WithStack(err)
+	}
+
+	// Create and initialize HTTP session service provider
+	sessionStore := gormstore.NewOptions(
+		orm.DB(),
+		gormstore.Options{
+			TableName:       "sessions",
+			SkipCreateTable: false,
+		},
+		[]byte(conf.HTTP.CookieAuthenticationKey),
+		[]byte(conf.HTTP.CookieEncryptionKey),
+	)
+
+	quit := make(chan struct{})
+	go sessionStore.PeriodicCleanup(1*time.Hour, quit)
+
+	// Define default cookie options
+	sessionStore.SessionOpts.Path = "/"
+	sessionStore.SessionOpts.HttpOnly = true
+	sessionStore.SessionOpts.MaxAge = conf.HTTP.CookieMaxAge
+	sessionStore.SessionOpts.SameSite = http.SameSiteStrictMode
+
+	ctn.Provide(
+		session.ServiceName,
+		gorilla.ServiceProvider("daddy", sessionStore),
+	)
+
+	// Create and expose config service provider
+	ctn.Provide(config.ServiceName, config.ServiceProvider(conf))
+
+	provider, err := oidc.NewProvider(ctx, conf.OIDC.IssuerURL)
+	if err != nil {
+		return nil, errors.Wrap(err, "could not create oidc provider")
+	}
+
+	ctn.Provide(oidc.ServiceName, oidc.ServiceProvider(
+		oidc.WithCredentials(conf.OIDC.ClientID, conf.OIDC.ClientSecret),
+		oidc.WithProvider(provider),
+		oidc.WithScopes("email", "openid"),
+	))
+
+	ctn.Provide(auth.ServiceName, auth.ServiceProvider(conf.Auth.Rules))
+
+	return ctn, nil
+}

cmd/server/main.go

@@ -0,0 +1,183 @@
+package main
+
+import (
+	"context"
+	"net/http"
+
+	"forge.cadoles.com/Cadoles/daddy/internal/config"
+	"forge.cadoles.com/Cadoles/daddy/internal/route"
+
+	"github.com/go-chi/chi"
+	"github.com/go-chi/chi/middleware"
+	"gitlab.com/wpetit/goweb/middleware/container"
+
+	"flag"
+	"fmt"
+	"log"
+
+	"os"
+
+	"github.com/pkg/errors"
+	"gitlab.com/wpetit/goweb/logger"
+)
+
+//nolint: gochecknoglobals
+var (
+	configFile = ""
+	workdir    = ""
+	dumpConfig = false
+	version    = false
+	migrate    = ""
+)
+
+// nolint: gochecknoglobals
+var (
+	GitRef         = "unknown"
+	ProjectVersion = "unknown"
+	BuildDate      = "unknown"
+)
+
+//nolint: gochecknoinits
+func init() {
+	flag.StringVar(&configFile, "config", configFile, "configuration file")
+	flag.StringVar(&workdir, "workdir", workdir, "working directory")
+	flag.BoolVar(&dumpConfig, "dump-config", dumpConfig, "dump configuration and exit")
+	flag.BoolVar(&version, "version", version, "show version and exit")
+	flag.StringVar(&migrate, "migrate", migrate, "migrate data schema version and exit, possible values: latest, down, up")
+}
+
+func main() {
+	ctx := context.Background()
+
+	flag.Parse()
+
+	if version {
+		fmt.Printf("%s (%s) - %s\n", ProjectVersion, GitRef, BuildDate)
+
+		os.Exit(0)
+	}
+
+	// Switch to new working directory if defined
+	if workdir != "" {
+		if err := os.Chdir(workdir); err != nil {
+			logger.Fatal(
+				ctx,
+				"could not change working directory",
+				logger.E(err),
+				logger.F("workdir", workdir),
+			)
+		}
+	}
+
+	// Load configuration file if defined, use default configuration otherwise
+	var conf *config.Config
+
+	var err error
+
+	if configFile != "" {
+		conf, err = config.NewFromFile(configFile)
+		if err != nil {
+			log.Fatalf("%+v", errors.Wrapf(err, " '%s'", configFile))
+			logger.Fatal(
+				ctx,
+				"could not load config file",
+				logger.E(err),
+				logger.F("configFile", configFile),
+			)
+		}
+	} else {
+		if dumpConfig {
+			conf = config.NewDumpDefault()
+		} else {
+			conf = config.NewDefault()
+		}
+
+	}
+
+	// Dump configuration if asked
+	if dumpConfig {
+		if err := config.Dump(conf, os.Stdout); err != nil {
+			logger.Fatal(
+				ctx,
+				"could not dump config",
+				logger.E(err),
+			)
+		}
+
+		os.Exit(0)
+	}
+
+	if err := config.WithEnvironment(conf); err != nil {
+		logger.Fatal(
+			ctx,
+			"could not override config with environment",
+			logger.E(err),
+		)
+	}
+
+	logger.Info(
+		ctx,
+		"starting",
+		logger.F("gitRef", GitRef),
+		logger.F("projectVersion", ProjectVersion),
+		logger.F("buildDate", BuildDate),
+	)
+
+	logger.Debug(ctx, "setting log format", logger.F("format", conf.Log.Format))
+	logger.SetFormat(conf.Log.Format)
+
+	logger.Debug(ctx, "setting log level", logger.F("level", conf.Log.Level.String()))
+	logger.SetLevel(conf.Log.Level)
+
+	// Create service container
+	ctn, err := getServiceContainer(ctx, conf)
+	if err != nil {
+		logger.Fatal(
+			ctx,
+			"could not create service container",
+			logger.E(err),
+		)
+	}
+
+	ctx = container.WithContainer(ctx, ctn)
+
+	if migrate != "" {
+		if err := applyMigration(ctx, ctn); err != nil {
+			logger.Fatal(
+				ctx,
+				"could not apply migration",
+				logger.E(err),
+			)
+		}
+
+		os.Exit(0)
+	}
+
+	r := chi.NewRouter()
+
+	// Define base middlewares
+	r.Use(middleware.Logger)
+	r.Use(middleware.Recoverer)
+
+	// Expose service container on router
+	r.Use(container.ServiceContainer(ctn))
+
+	// Define routes
+	if err := route.Mount(r, conf); err != nil {
+		logger.Fatal(
+			ctx,
+			"could not mount http routes",
+			logger.E(err),
+		)
+	}
+
+	logger.Info(ctx, "listening", logger.F("address", conf.HTTP.Address))
+	if err := http.ListenAndServe(conf.HTTP.Address, r); err != nil {
+		logger.Fatal(
+			ctx,
+			"could not listen",
+			logger.E(err),
+			logger.F("address", conf.HTTP.Address),
+		)
+	}
+}

cmd/server/migration.go

@@ -0,0 +1,108 @@
+package main
+
+import (
+	"context"
+
+	"forge.cadoles.com/Cadoles/daddy/internal/model"
+	"forge.cadoles.com/Cadoles/daddy/internal/orm"
+	"github.com/jinzhu/gorm"
+	"github.com/pkg/errors"
+	"gitlab.com/wpetit/goweb/logger"
+	"gitlab.com/wpetit/goweb/service"
+)
+
+const (
+	migrateUp     = "up"
+	migrateLatest = "latest"
+	migrateDown   = "down"
+)
+
+func applyMigration(ctx context.Context, ctn *service.Container) error {
+	orm, err := orm.From(ctn)
+	if err != nil {
+		return err
+	}
+
+	migr := orm.Migration()
+
+	// Register available migrations
+	migr.Register(
+		m000initialSchema(),
+	)
+
+	currentVersion, err := migr.CurrentVersion(ctx)
+	if err != nil {
+		return errors.Wrap(err, "could not retrieve current data schema version")
+	}
+
+	switch migrate {
+	case migrateUp:
+		if err := migr.Up(ctx); err != nil {
+			return errors.Wrap(err, "could not apply up migration")
+		}
+
+	case migrateLatest:
+		latestVersion, err := migr.LatestVersion()
+		if err != nil {
+			return errors.Wrap(err, "could not retrieve latest data schema version")
+		}
+
+		logger.Info(
+			ctx,
+			"migrating data schema to latest version",
+			logger.F("currentVersion", currentVersion),
+			logger.F("latestVersion", latestVersion),
+		)
+
+		// Execute migration to latest available version
+		if err := migr.Latest(ctx); err != nil {
+			return errors.Wrap(err, "could not migrate to latest data schema")
+		}
+
+	case migrateDown:
+		if err := migr.Down(ctx); err != nil {
+			return errors.Wrap(err, "could not apply down migration")
+		}
+
+	default:
+		return errors.Errorf("unknown migration command: '%s'", migrate)
+	}
+
+	logger.Info(
+		ctx,
+		"migration completed",
+	)
+
+	return nil
+}
+
+// nolint: gochecknoglobals
+var initialModels = []interface{}{
+	&model.User{},
+	&model.Workgroup{},
+	&model.DecisionSupportFile{},
+}
+
+func m000initialSchema() orm.Migration {
+	return orm.NewDBMigration(
+		"00_initial_schema",
+		func(ctx context.Context, tx *gorm.DB) error {
+			for _, m := range initialModels {
+				if err := tx.AutoMigrate(m).Error; err != nil {
+					return errors.WithStack(err)
+				}
+			}
+
+			return nil
+		},
+		func(ctx context.Context, tx *gorm.DB) error {
+			for i := len(initialModels) - 1; i >= 0; i-- {
+				if err := tx.DropTableIfExists(initialModels[i]).Error; err != nil {
+					return errors.WithStack(err)
+				}
+			}
+
+			return nil
+		},
+	)
+}

debian/compat

@@ -0,0 +1 @@
+9

debian/control

@@ -0,0 +1,14 @@
+Source: daddy
+Section: unknown
+Priority: optional
+Maintainer: Cadoles <contact@cadoles.com>
+Build-Depends: debhelper (>= 8.0.0), wget, ca-certificates, tar
+Standards-Version: 3.9.4
+Homepage: http://forge.cadoles.com/Cadoles/daddy
+Vcs-Git: http://forge.cadoles.com/Cadoles/daddy.git
+Vcs-Browser: http://forge.cadoles.com/Cadoles/daddy
+
+Package: daddy
+Architecture: amd64
+Depends: ${shlibs:Depends}, ${misc:Depends}
+Description: Daddy app

debian/daddy.links

@@ -0,0 +1 @@
+/etc/daddy/client-config.js /usr/share/daddy/public/config.js

debian/daddy.service

@@ -0,0 +1,11 @@
+[Unit]
+Description=Daddy app
+After=network-online.target
+
+[Service]
+Type=simple
+ExecStart=/usr/bin/daddy -workdir /usr/share/daddy -config /etc/daddy/config.yml
+Restart=on-failure
+
+[Install]
+WantedBy=multi-user.target

debian/rules

@@ -0,0 +1,56 @@
+#!/usr/bin/make -f
+# -*- makefile -*-
+
+# Uncomment this to turn on verbose mode.
+export DH_VERBOSE=1
+
+GO_VERSION := 1.13.5
+OS := linux
+ARCH := amd64
+GOPATH=$(HOME)/go
+
+ifeq (, $(shell which go 2>/dev/null))
+override_dh_auto_build: install-go
+
+override_dh_auto_clean: install-go
+endif
+
+ifeq (, $(shell which node 2>/dev/null))
+override_dh_auto_build: install-nodejs
+endif
+
+%:
+	dh $@ --with systemd
+
+override_dh_auto_build: $(GOPATH)
+	GOPATH=$(GOPATH) PATH="$(PATH):/usr/local/go/bin:$(GOPATH)/bin" make deps
+	GOPATH=$(GOPATH) PATH="$(PATH):/usr/local/go/bin:$(GOPATH)/bin" ARCH_TARGETS=$(ARCH) make release
+
+$(GOPATH):
+	mkdir -p $(GOPATH)
+	
+install-go:
+	wget -nc https://dl.google.com/go/go$(GO_VERSION).$(OS)-$(ARCH).tar.gz
+	tar -C /usr/local -xzf go$(GO_VERSION).$(OS)-$(ARCH).tar.gz
+
+install-nodejs:
+	wget -O- https://deb.nodesource.com/setup_12.x | bash -
+	apt-get install -y nodejs
+
+override_dh_auto_install:
+
+	mkdir -p debian/daddy/usr/share/daddy
+	mkdir -p debian/daddy/etc/daddy
+	mkdir -p debian/daddy/usr/bin
+
+	cp -r release/server-$(OS)-$(ARCH)/* debian/daddy/usr/share/daddy/
+	
+	mv debian/daddy/usr/share/daddy/bin/server debian/daddy/usr/bin/daddy
+	mv debian/daddy/usr/share/daddy/server.conf debian/daddy/etc/daddy/config.yml
+	mv debian/daddy/usr/share/daddy/public/config.js debian/daddy/etc/daddy/client-config.js
+
+	install -d debian/daddy
+
+override_dh_strip:
+
+override_dh_auto_test:

debian/source/format

@@ -0,0 +1 @@
+3.0 (native)

docker-compose.yml

@@ -1,26 +1,5 @@
 version: '2.4'
 services:
-  super-graph:
-    build:
-      context: ./misc/containers/super-graph
-      args:
-        - HTTP_PROXY=${HTTP_PROXY}
-        - HTTPS_PROXY=${HTTPS_PROXY}
-        - http_proxy=${http_proxy}
-        - https_proxy=${https_proxy}
-    environment:
-      - SG_DATABASE_HOST=postgres
-      - SG_DATABASE_USER=daddy
-      - SG_DATABASE_PASSWORD=daddy
-      - USER_ID=${USER_ID}
-      - GO_ENV=dev
-    volumes:
-      - ./backend:/app
-    links:
-      - postgres
-    ports:
-      - 8080:8080
-
   postgres:
     build:
       context: ./misc/containers/postgres
@@ -48,15 +27,12 @@ services:
       SUPPORTED_CLAIMS: email,email_verified
       SECRETS_SYSTEM: fAAya66yXNib52lbXpo16bxy1jD4NZrX
       HYDRA_ADMIN_URL: http://localhost:4445
-      SERVE_PUBLIC_CORS_ENABLED: "true"
-      SERVE_PUBLIC_CORS_ALLOWED_ORIGINS: http://localhost:8081
-      WEBFINGER_JWKS_BROADCAST_KEYS: hydra.openid.id-token,hydra.jwt.access-token
     ports:
       - 4444:4444
     command: hydra serve all --dangerous-force-http
   
   hydra-passwordless:
-    image: bornholm/hydra-passwordless
+    image: bornholm/hydra-passwordless:latest@sha256:e6b335e3677dc937c62978890b42312a7486e4fe10208aa2670b1917489ec492
     ports:
       - 3000:3000
     environment:
@@ -72,6 +48,7 @@ services:
       - SMTP_INSECURE_SKIP_VERIFY=true
       - HYDRA_BASE_URL=http://hydra:4445
       - HYDRA_FAKE_SSL_TERMINATION=false
+      - NO_PROXY=hydra
 
   smtp:
     image: bornholm/fake-smtp

frontend/src/components/App.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
-import { HomePage } from './HomePage/HomePage';
-import { store } from '../store/store';
-import { Provider } from 'react-redux';
-import { OAuth2Page } from './OAuth2Page/OAuth2Page';
-
-export class App extends React.Component {
-  render() {
-    return (
-      <Provider store={store}>
-        <BrowserRouter>
-          <Switch>
-            <Route path="/" exact component={HomePage} />
-            <Route path="/oauth2/:action" exact component={OAuth2Page} />
-            <Route component={() => <Redirect to="/" />} />
-          </Switch>
-        </BrowserRouter>
-      </Provider>
-    );
-  }
-}

frontend/src/components/HomePage/HomePage.tsx

@@ -1,28 +0,0 @@
-import React, { useEffect } from 'react';
-import { Page } from '../Page';
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState } from '../../store/reducers/root';
-
-export function HomePage() {
-  const currentUser = useSelector((state: RootState) => state.auth.currentUser);
-
-  return (
-    <Page title="Daddy - Accueil">
-      <div className="container is-fluid">
-        <section className="section">
-          <div className="columns">
-            <div className="column is-4 is-offset-4">
-              <div className="box">
-              { 
-                currentUser && currentUser.full_name ?
-                <p>Bonjour <span className="has-text-weight-bold">{currentUser.full_name}</span> !</p> :
-                <p>Veuillez vous authentifier.</p>
-              }
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </Page>
-  );
-}

frontend/src/components/Loader.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export class Loader extends React.Component {
-  render() {
-    return (
-      <div className="loader-container">
-        <div className="lds-ripple">
-          <div></div>
-          <div></div>
-        </div>
-      </div>
-    )
-  }
-}

frontend/src/components/Navbar.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import logo from '../resources/logo.svg';
-import { useSelector } from 'react-redux';
-import { RootState } from '../store/reducers/root';
-import { Link } from 'react-router-dom';
-
-export function Navbar() {
-  const isAuthenticated = useSelector<RootState>(state => state.auth.isAuthenticated);
-  
-  return (
-    <nav className="navbar" role="navigation" aria-label="main navigation">
-      <div className="container is-fluid">
-        <div className="navbar-brand">
-          <a className="navbar-item" href="#/">
-            <img src={logo} style={{marginRight:'5px',width:'28px',height:'28px'}} />
-            <h1 className="is-size-4">Daddy</h1>
-          </a>
-          <a role="button" className="navbar-burger" aria-label="menu" aria-expanded="false">
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-            <span aria-hidden="true"></span>
-          </a>
-        </div>
-        <div className="navbar-menu">
-          <div className="navbar-end">
-            <div className="navbar-item">
-              {
-                isAuthenticated ?
-                <Link className="button is-small" to="/oauth2/logout">
-                  <span className="icon">
-                    <i className="fas fa-sign-out-alt"></i>
-                  </span>
-                  <span>Se déconnecter</span>
-                </Link> :
-                <Link className="button is-small" to="/oauth2/login">
-                  <span className="icon">
-                    <i className="fas fa-sign-in-alt"></i>
-                  </span>
-                  <span>Se connecter</span>
-                </Link>
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};

frontend/src/components/OAuth2Page/OAuth2Page.tsx

@@ -1,31 +0,0 @@
-import React, { useEffect } from 'react';
-import { Page } from '../Page';
-import { useDispatch } from 'react-redux';
-import { logout, login, handleOAuth2Callback } from '../../store/actions/auth';
-
-export function OAuth2Page({ match, location, history }) {
-  const dispatch = useDispatch();
-  const { action } = match.params;
-
-  useEffect(() => {
-    switch(action) {
-      case 'logout':
-        dispatch(logout());
-        history.push("/");
-        break;
-      case 'login':
-        dispatch(login());
-        break;
-      case 'callback':
-        dispatch(handleOAuth2Callback(location.search));
-        history.push("/");
-        break;
-    }
-  }, [action]);
-
-  return (
-    <Page title="Daddy - OAuth2">
-      
-    </Page>
-  );
-}

frontend/src/config.ts

@@ -1,21 +0,0 @@
-export const Config = {
-  // The OpenID Connect client_id
-  oauth2ClientId: get<string>("oauth2ClientId", "daddy"),
-  oauth2Scope: get<string>("oauth2Scope", "email email_verified openid offline_access"),
-  oauth2RedirectURI: get<string>("oauth2RedirectURI", "http://localhost:8081/oauth2/callback"),
-  oauth2Audience: get<string>("oauth2Audience", ""),
-  oauth2AuthorizeURL: get<string>("oauth2AuthorizeURL", "http://localhost:4444/oauth2/auth"),
-  oauth2TokenURL: get<string>("oauth2TokenURL", "http://localhost:4444/oauth2/token"),
-  oauth2LogoutURL: get<string>("oauth2LogoutURL", "http://localhost:4444/oauth2/sessions/logout"),
-  oauth2PostLogoutRedirectURI: get<string>("oauth2PostLogoutRedirectURI", "http://localhost:8081"),
-  graphQLEndpoint: get<string>("graphQLEndpoint", "http://localhost:8080/api/v1/graphql")
-};
-
-function get<T>(key: string, defaultValue: T):T {
-  const config = window['__CONFIG__'] || {};
-  if (config && config.hasOwnProperty(key)) {
-    return config[key] as T;
-  } else {
-    return defaultValue;
-  }
-} 

frontend/src/sass/_all.scss

@@ -1,4 +0,0 @@
-@import 'bulma/bulma.sass';
-@import 'bulma-switch/dist/css/bulma-switch.sass';
-@import '_base.scss';
-@import '_loader.scss';

frontend/src/sass/_base.scss

@@ -1,21 +0,0 @@
-html, body {
-    height: 100%;
-    background-color: #f7f7f7;
-}
-
-.is-fullheight {
-    height: 100%;
-}
-
-.has-margin-top-normal {
-    margin-top: $size-normal;
-}
-
-.has-padding-small {
-    padding: 1rem;
-}
-
-#app {
-    display: flex;
-    flex-direction: column;
-}

frontend/src/store/actions/auth.ts

@@ -1,69 +0,0 @@
-import { Action } from "redux";
-import { AccessGrant } from "../../util/auth";
-import { IdToken } from "../../types/idToken";
-
-export const LOGOUT = "LOGOUT_REQUEST";
-
-export function logout() {
-  return { type: LOGOUT };
-};
-
-export const LOGIN_REQUEST = "LOGIN_REQUEST";
-export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
-export const LOGIN_FAILURE = "LOGIN_FAILURE";
-
-export function login() {
-  return { type: LOGIN_REQUEST };
-};
-
-export const HANDLE_OAUTH2_CALLBACK_REQUEST = "HANDLE_OAUTH2_CALLBACK_REQUEST";
-export const HANDLE_OAUTH2_CALLBACK_SUCCESS = "HANDLE_OAUTH2_CALLBACK_SUCCESS";
-export const HANDLE_OAUTH2_CALLBACK_FAILURE = "HANDLE_OAUTH2_CALLBACK_FAILURE";
-
-export interface handleOAuth2CallbackAction extends Action {
-  search: string
-}
-
-export function handleOAuth2Callback(search: string): handleOAuth2CallbackAction  {
-  return { type: HANDLE_OAUTH2_CALLBACK_REQUEST, search };
-};
-
-export interface handleOAuth2CallbackSuccessAction extends Action {
-  grant: AccessGrant
-}
-
-export function handleOAuth2CallbackSuccess(grant: AccessGrant): handleOAuth2CallbackSuccessAction {
-  return { type: HANDLE_OAUTH2_CALLBACK_SUCCESS, grant };
-};
-
-export const PARSE_ID_TOKEN_REQUEST = "PARSE_ID_TOKEN_REQUEST";
-export const PARSE_ID_TOKEN_SUCCESS = "PARSE_ID_TOKEN_SUCCESS";
-export const PARSE_ID_TOKEN_FAILURE = "PARSE_ID_TOKEN_FAILURE";
-
-export interface parseIdTokenAction extends Action {
-  rawIdToken: string
-};
-
-export function parseIdToken(rawIdToken: string): parseIdTokenAction  {
-  return { type: PARSE_ID_TOKEN_REQUEST, rawIdToken };
-};
-
-
-export interface parseIdTokenSuccessAction extends Action {
-  idToken: IdToken
-}
-
-export function parseIdTokenSuccess(idToken: IdToken): parseIdTokenSuccessAction {
-  return { type: PARSE_ID_TOKEN_SUCCESS, idToken };
-};
-
-
-export const SET_CURRENT_USER = 'SET_CURRENT_USER';
-
-export interface setCurrentUserAction extends Action {
-  email: string
-}
-
-export function setCurrentUser(email: string): setCurrentUserAction {
-  return { type: SET_CURRENT_USER, email };
-}

frontend/src/store/actions/profile.ts

@@ -1,19 +0,0 @@
-import { Action } from "redux";
-import { User } from "../../types/user";
-
-export const FETCH_PROFILE_REQUEST = 'FETCH_PROFILE_REQUEST';
-export const FETCH_PROFILE_SUCCESS = 'FETCH_PROFILE_SUCCESS';
-export const FETCH_PROFILE_FAILURE = 'FETCH_PROFILE_FAILURE';
-
-export interface fetchProfileRequestAction extends Action {
-
-}
-
-export interface fetchProfileSuccessAction extends Action {
-  profile: User
-}
-
-
-export function fetchProfile(): fetchProfileRequestAction {
-  return { type: FETCH_PROFILE_REQUEST }
-}

frontend/src/store/reducers/auth.ts

@@ -1,55 +0,0 @@
-import { Action } from "redux";
-import { User } from "../../types/user";
-import { SET_CURRENT_USER, setCurrentUserAction, LOGOUT } from "../actions/auth";
-import { FETCH_PROFILE_SUCCESS, fetchProfileSuccessAction } from "../actions/profile";
-
-export interface AuthState {
-  isAuthenticated: boolean
-  currentUser: User
-}
-
-const defaultState = {
-  isAuthenticated: false,
-  currentUser: null,
-};
-
-export function authReducer(state = defaultState, action: Action): AuthState {
-  switch (action.type) {
-    case SET_CURRENT_USER:
-      return handleSetCurrentUser(state, action as setCurrentUserAction);
-    case LOGOUT:
-      return handleLogout(state);
-    case FETCH_PROFILE_SUCCESS:
-      return handleFetchProfileSuccess(state, action as fetchProfileSuccessAction);
-
-  }
-  return state;
-}
-
-function handleSetCurrentUser(state: AuthState, { email }: setCurrentUserAction): AuthState {
-  return {
-    ...state,
-    isAuthenticated: true,
-    currentUser: {
-      email
-    }
-  };
-};
-
-function handleLogout(state: AuthState): AuthState {
-  return {
-    ...state,
-    isAuthenticated: false,
-    currentUser: null,
-  };
-};
-
-function handleFetchProfileSuccess(state: AuthState, { profile }: fetchProfileSuccessAction): AuthState {
-  return {
-    ...state,
-    isAuthenticated: true,
-    currentUser: {
-      ...profile,
-    }
-  };
-};

frontend/src/store/reducers/flags.ts

@@ -1,32 +0,0 @@
-import { Action } from "redux";
-
-export interface FlagsState {
-  actions: { [actionName: string]: ActionState }
-}
-
-export interface ActionState {
-  isLoading: boolean
-}
-
-const defaultState = {
-  actions: {}
-};
-
-export function flagsReducer(state = defaultState, action: Action): FlagsState {
-  const matches = (/^(.*)_((SUCCESS)|(FAILURE)|(REQUEST))$/).exec(action.type);
-
-  if(!matches) return state;
-
-  const actionPrefix = matches[1];
-
-  return {
-    ...state,
-    actions: {
-      ...state.actions,
-      [actionPrefix]: {
-        isLoading: matches[2] === 'REQUEST'
-      }
-    }
-  };
-
-}

frontend/src/store/reducers/root.ts

@@ -1,13 +0,0 @@
-import { combineReducers } from 'redux';
-import { flagsReducer, FlagsState } from './flags';
-import { authReducer, AuthState } from './auth';
-
-export interface RootState {
-  auth: AuthState,
-  flags: FlagsState,
-}
-
-export const rootReducer = combineReducers({
-  flags: flagsReducer,
-  auth: authReducer,
-});

frontend/src/store/sagas/auth.ts

@@ -1,98 +0,0 @@
-import { put, takeLatest, all } from 'redux-saga/effects';
-import { 
-  LOGOUT, LOGIN_REQUEST, 
-  HANDLE_OAUTH2_CALLBACK_REQUEST, handleOAuth2CallbackAction, 
-  HANDLE_OAUTH2_CALLBACK_FAILURE, handleOAuth2CallbackSuccess, 
-  parseIdTokenAction, parseIdToken, 
-  PARSE_ID_TOKEN_REQUEST, PARSE_ID_TOKEN_FAILURE, parseIdTokenSuccess, 
-  setCurrentUser, LOGIN_FAILURE,
-} from '../actions/auth';
-import { 
-  createLoginSession, LoginSession, 
-  createAccessTokenRequest, saveAccessGrant, 
-  saveLoginSessionState, getSavedLoginSessionState, 
-  getLogoutURL, getSavedAccessGrant, clearAccessGrant 
-} from '../../util/auth';
-import qs from 'qs';
-import { UnauthorizedError } from '../../util/daddy';
-import jwtDecode from 'jwt-decode';
-import { IdToken } from '../../types/idToken';
-
-export function* authRootSaga() {
-  yield all([
-    takeLatest(LOGIN_REQUEST, loginSaga),
-    takeLatest(LOGOUT, logoutSaga),
-    takeLatest(HANDLE_OAUTH2_CALLBACK_REQUEST, handleOAuth2CallbackSaga),
-    takeLatest(PARSE_ID_TOKEN_REQUEST, parseIDTokenSaga),
-  ]);
-}
-
-export function* loginSaga() {
-  try {
-    const loginSession: LoginSession = yield createLoginSession();
-    console.log('Code verifier is ', loginSession.verifier);
-    console.log('State is ', loginSession.state);
-    saveLoginSessionState(loginSession.verifier, loginSession.state);
-    window.location.replace(loginSession.redirectUrl);
-  } catch(err) {
-    yield put({ type: LOGIN_FAILURE, err });
-  }
-}
-
-export function* logoutSaga() {
-  const accessGrant = getSavedAccessGrant();
-  const logoutURL = getLogoutURL(accessGrant.id_token);
-  clearAccessGrant();
-  window.location.replace(logoutURL);
-}
-
-export function* handleOAuth2CallbackSaga({ search }: handleOAuth2CallbackAction) {
-  const query = search.substring(1);
-  const params = qs.parse(query);
-  
-  const loginSession = getSavedLoginSessionState();
-  
-  console.log('Stored state verifier is', loginSession.state);
-  if (loginSession.state !== params.state) {
-    yield put({ type: HANDLE_OAUTH2_CALLBACK_FAILURE, err: new Error("Invalid state") });
-    return;
-  }
-
-  console.log('Stored code verifier is', loginSession.verifier);
-  console.log('Authorization code is', params.code);
-  
-  const req = createAccessTokenRequest(params.code as string, loginSession.verifier);
-
-  let grant;
-  try {
-    grant = yield fetch(req.url, { method: "POST", body: req.data })
-      .then(res => {
-        if (res.status === 401) return Promise.reject(new UnauthorizedError());
-        return res;
-      })
-      .then(res => res.json());
-  } catch(err) {
-    yield put({ type: HANDLE_OAUTH2_CALLBACK_FAILURE, err });
-    return;
-  }
-
-  console.log("Access grant is", grant);
-  saveAccessGrant(grant);
-
-  yield put(handleOAuth2CallbackSuccess(grant));
-  yield put(parseIdToken(grant.id_token));
-};
-
-
-export function* parseIDTokenSaga({ rawIdToken }: parseIdTokenAction) {
-  let idToken: IdToken;
-  try {
-    idToken = jwtDecode(rawIdToken);
-  } catch(err) {
-    yield put({ type: PARSE_ID_TOKEN_FAILURE, err });
-    return;
-  }
-
-  yield put(parseIdTokenSuccess(idToken));
-  yield put(setCurrentUser(idToken.email));
-};

frontend/src/store/sagas/failure.ts

@@ -1,21 +0,0 @@
-import { UnauthorizedError } from "../../util/daddy";
-import { put, all, takeEvery } from 'redux-saga/effects';
-import { logout } from '../actions/auth';
-
-export function* failureRootSaga() {
-  yield all([
-    takeEvery(patternFromRegExp(/^.*_FAILURE/), failuresSaga),
-  ]);
-}
-
-export function* failuresSaga(action) {
-  if (action.error instanceof UnauthorizedError) {
-    yield put(logout());
-  }
-}
-
-export function patternFromRegExp(re: any)  {
-  return (action: any) => {
-    return re.test(action.type);
-  };
-}

frontend/src/store/sagas/init.ts

@@ -1,18 +0,0 @@
-import { all, put } from "redux-saga/effects";
-import { getSavedAccessGrant } from "../../util/auth";
-import { parseIdToken } from "../actions/auth";
-
-export function* initRootSaga() {
-  yield all([
-    retrieveSessionSaga(),
-  ]);
-}
-
-export function* retrieveSessionSaga() {
-  console.log("Checking session status...");
-
-  const accessGrant = getSavedAccessGrant();
-  if (!accessGrant) return;
-
-  yield put(parseIdToken(accessGrant.id_token));
-}

frontend/src/store/sagas/root.ts

@@ -1,14 +0,0 @@
-import { all } from 'redux-saga/effects';
-import { failureRootSaga } from './failure';
-import { authRootSaga } from './auth';
-import { initRootSaga } from './init';
-import { usersRootSaga } from './users';
-
-export function* rootSaga() {
-  yield all([
-    initRootSaga(),
-    failureRootSaga(),
-    authRootSaga(),
-    usersRootSaga(),
-  ]);
-}

frontend/src/store/sagas/users.ts

@@ -1,37 +0,0 @@
-import { DaddyClient } from "../../util/daddy";
-import { Config } from "../../config";
-import { getSavedAccessGrant } from "../../util/auth";
-import { all, takeLatest, put, select } from "redux-saga/effects";
-import { FETCH_PROFILE_REQUEST, fetchProfile, FETCH_PROFILE_FAILURE, FETCH_PROFILE_SUCCESS } from "../actions/profile";
-import { SET_CURRENT_USER } from "../actions/auth";
-import { RootState } from "../reducers/root";
-import { User } from "../../types/user";
-
-export function* usersRootSaga() {
-  yield all([
-    takeLatest(SET_CURRENT_USER, onCurrentUserChangeSaga),
-    takeLatest(FETCH_PROFILE_REQUEST, fetchProfileSaga),
-  ]);
-}
-
-export function* onCurrentUserChangeSaga() {
-  yield put(fetchProfile());
-}
-
-
-
-export function* fetchProfileSaga() {
-  const grant = getSavedAccessGrant();
-  const client = new DaddyClient(Config.graphQLEndpoint, grant.id_token);
-  
-  let profile: User;
-  try {
-    const currentUser: User = yield select((state: RootState) => state.auth.currentUser);
-    profile = yield client.fetchUser(currentUser.email).then(result => result.user);
-  } catch(err) {
-    yield put({ type: FETCH_PROFILE_FAILURE, err });
-    return;
-  }
-
-  yield put({type: FETCH_PROFILE_SUCCESS, profile });
-}

frontend/src/store/selectors/flags.ts

@@ -1,7 +0,0 @@
-export function selectFlagsIsLoading(state: any, ...actionPrefixes: any[]) {
-  const { actions } = state.flags;
-  return actionPrefixes.reduce((isLoading, prefix) => {
-    if (!(prefix in actions)) return isLoading; 
-    return isLoading || actions[prefix].isLoading;
-  }, false);
-};

frontend/src/store/store.ts

@@ -1,30 +0,0 @@
-import { createStore, applyMiddleware, compose } from 'redux'
-import createSagaMiddleware from 'redux-saga'
-import { rootReducer }  from './reducers/root'
-import { rootSaga } from './sagas/root'
-
-let reduxMiddlewares = [];
-
-if (process.env.NODE_ENV !== 'production') {
-  const createLogger = require('redux-logger').createLogger;
-  const loggerMiddleware = createLogger({
-    collapsed: true,
-    diff: true
-  });
-  reduxMiddlewares.push(loggerMiddleware);
-}
-
-const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-
-// create the saga middleware
-const sagaMiddleware = createSagaMiddleware()
-reduxMiddlewares.push(sagaMiddleware);
-
-// mount it on the Store
-export const store = createStore(
-  rootReducer,
-  composeEnhancers(applyMiddleware(...reduxMiddlewares)),
-)
-
-// then run the saga
-sagaMiddleware.run(rootSaga);

frontend/src/types/idToken.ts

@@ -1,3 +0,0 @@
-export interface IdToken {
-  email: string
-}

frontend/src/types/user.ts

@@ -1,6 +0,0 @@
-export interface User {
-  email: string
-  full_name?: string
-  updated_at?: Date
-  created_at?: Date
-}

frontend/src/util/auth.ts

@@ -1,126 +0,0 @@
-import { Config } from '../config';
-
-export interface LoginSession {
-  state: string
-  redirectUrl: string
-  verifier: string
-}
-
-export function generateRandomString() {
-  var array = new Uint32Array(28);
-  window.crypto.getRandomValues(array);
-  return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
-}
-
-export function sha256(plain): PromiseLike<any> {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(plain);
-  return window.crypto.subtle.digest('SHA-256', data);
-}
-
-export function pkceChallengeFromVerifier(v): PromiseLike<string> {
-  return sha256(v)
-    .then(hashed => base64urlencode(hashed));
-}
-
-export function base64urlencode(str) {
-  return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
-      .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-}
-
-export function createLoginSession(): Promise<LoginSession> {
-  // Based on https://auth0.com/docs/api-auth/tutorials/authorization-code-grant-pkce
-  const state = generateRandomString();
-  const verifier = generateRandomString();
-
-  return new Promise<LoginSession>((resolve, reject) => {
-    try {
-      pkceChallengeFromVerifier(verifier).then(challenge => {
-        console.log('Code challenge is', challenge);
-        
-        let redirectUrl=`${Config.oauth2AuthorizeURL}`;
-        redirectUrl += `?audience=${encodeURIComponent(Config.oauth2Audience)}`;
-        redirectUrl += `&scope=${encodeURIComponent(Config.oauth2Scope)}`;
-        redirectUrl += `&response_type=code`;
-        redirectUrl += `&client_id=${encodeURIComponent(Config.oauth2ClientId)}`
-        redirectUrl += `&code_challenge=${encodeURIComponent(challenge)}`;
-        redirectUrl += `&code_challenge_method=S256`
-        redirectUrl += `&redirect_uri=${encodeURIComponent(Config.oauth2RedirectURI)}`;
-        redirectUrl += `&state=${encodeURIComponent(state)}`;
-
-        return resolve({
-          state,
-          redirectUrl,
-          verifier,
-        });
-      });
-    } catch(err) {
-      return reject(err);
-    }
-  });  
-};
-
-export interface AccessTokenRequest {
-  data: FormData,
-  url: string
-}
-
-export function createAccessTokenRequest(code: string, verifier: string): AccessTokenRequest {
-  const data = new FormData();
-  data.append('grant_type', 'authorization_code');
-  data.append('client_id', Config.oauth2ClientId);
-  data.append('code_verifier', verifier);
-  data.append('code', code);
-  data.append('redirect_uri', Config.oauth2RedirectURI);
-  return {
-    url: Config.oauth2TokenURL,
-    data,
-  };
-};
-
-export function getLogoutURL(rawIdToken: string): string {
-  let logoutURL = Config.oauth2LogoutURL;
-  logoutURL += `?post_logout_redirect_uri=${encodeURIComponent(Config.oauth2PostLogoutRedirectURI)}`;
-  logoutURL += `&id_token_hint=${encodeURIComponent(rawIdToken)}`;
-  return logoutURL;
-}
-
-export interface AccessGrant {
-  access_token: string
-  expires_in: number
-  id_token: string
-  refresh_token: string
-  scope: string
-  token_type: string
-}
-
-export function saveLoginSessionState(verifier: string, state: string) {
-  window.localStorage.setItem('login_verifier', verifier);
-  window.localStorage.setItem('login_state', state);
-}
-
-export function getSavedLoginSessionState(cleanup = true) {
-  const loginSession = {
-    verifier: window.localStorage.getItem('login_verifier'),
-    state: window.localStorage.getItem('login_state')
-  };
-  if (cleanup) {
-    window.localStorage.removeItem('login_verifier');
-    window.localStorage.removeItem('login_state');
-  }
-  return loginSession;
-}
-
-export function saveAccessGrant(grant: AccessGrant) {
-  window.localStorage.setItem('access_grant', JSON.stringify(grant));
-}
-
-export function getSavedAccessGrant(): AccessGrant {
-  const raw = window.localStorage.getItem('access_grant');
-  if (raw === "") return null;
-  return JSON.parse(raw) as AccessGrant;
-}
-
-export function clearAccessGrant() {
-  window.localStorage.removeItem('access_grant');
-}

frontend/src/util/daddy.ts

@@ -1,44 +0,0 @@
-import { GraphQLClient } from 'graphql-request'
-import { Config } from "../config";
-
-export class UnauthorizedError extends Error {
-  constructor(...args: any[]) {
-    super(...args)
-    Object.setPrototypeOf(this, UnauthorizedError.prototype);
-  }
-}
-
-export class DaddyClient {
-
-  gql: GraphQLClient
-
-  constructor(endpoint: string, idToken: string) {
-    this.gql = new GraphQLClient(endpoint, {
-      headers: {
-        Authorization: `Bearer ${idToken}`,
-        mode: 'cors',
-      }
-    });
-  }
-
-  fetchUser(email: string) {
-    return this.gql.rawRequest(`
-      query fetchUser {
-          user(where: {email: {eq: $email}}) {
-          id
-          created_at
-          updated_at
-          email,
-          full_name
-        }
-      }
-    `, { email })
-    .then(this.assertAuthorization)
-  }
-
-  assertAuthorization({ status, data }: any) {
-    if (status === 401) return Promise.reject(new UnauthorizedError());
-    return data;
-  }
-
-}

go.mod

@@ -0,0 +1,24 @@
+module forge.cadoles.com/Cadoles/daddy
+
+go 1.14
+
+require (
+	forge.cadoles.com/wpetit/goweb-oidc v0.0.0-20200619080035-4bbf7b016032
+	github.com/99designs/gqlgen v0.11.3
+	github.com/antonmedv/expr v1.8.8
+	github.com/caarlos0/env/v6 v6.2.2
+	github.com/cortesi/modd v0.0.0-20200630120222-8983974e5450 // indirect
+	github.com/davecgh/go-spew v1.1.1
+	github.com/go-chi/chi v4.1.0+incompatible
+	github.com/gorilla/sessions v1.2.0
+	github.com/gorilla/websocket v1.2.0
+	github.com/jackc/pgx v3.6.2+incompatible
+	github.com/jackc/pgx/v4 v4.7.1
+	github.com/jinzhu/gorm v1.9.14
+	github.com/pkg/errors v0.9.1
+	github.com/rs/cors v1.7.0
+	github.com/vektah/gqlparser/v2 v2.0.1
+	github.com/wader/gormstore v0.0.0-20200328121358-65a111a20c23
+	gitlab.com/wpetit/goweb v0.0.0-20200707070104-985ce3eba3c2
+	gopkg.in/yaml.v2 v2.2.8
+)