feat(user): add franceconnect button on info page

.github/workflows/end-to-end.yml

@@ -7,18 +7,11 @@ on:
       - "!master"
 
 env:
-  PGUSER: moncomptepro
-  PGPASSWORD: moncomptepro
-  PGDATABASE: moncomptepro
-  PGHOST: 127.0.0.1
-  PGPORT: 5432
   BREVO_API_KEY: ${{ secrets.BREVO_API_KEY }}
-  CYPRESS_BASE_URL: http://172.18.0.1:3000
-  CYPRESS_MAILSLURP_API_KEY: ${{ secrets.MAILSLURP_API_KEY }}
-  DATABASE_URL: postgres://moncomptepro:[email protected]:5432/moncomptepro
+  CYPRESS_RECORD: true
+  DATABASE_URL: postgres://moncomptepro:moncomptepro@localhost:5432/moncomptepro
   DEBOUNCE_API_KEY: ${{ secrets.DEBOUNCE_API_KEY }}
   FEATURE_SEND_MAIL: "True"
-  HOST: http://172.18.0.1:3000
   ZAMMAD_TOKEN: ${{ secrets.ZAMMAD_TOKEN }}
 jobs:
   test:
@@ -29,6 +22,7 @@ jobs:
         e2e_test:
           - activate_totp
           - check_email_deliverability
+          - connect_franceconnect_account
           - delete_account
           - delete_totp
           - join_and_moderation
@@ -54,52 +48,10 @@ jobs:
           - signup_entreprise_unipersonnelle
           - update_personal_information
     runs-on: ubuntu-22.04
-    services:
-      standard-client:
-        image: ghcr.io/numerique-gouv/proconnect-test-client
-        ports:
-          - 4000:3000
-        env:
-          SITE_TITLE: standard-client
-          HOST: http://localhost:4000
-          PC_CLIENT_ID: standard_client_id
-          PC_CLIENT_SECRET: standard_client_secret
-          PC_PROVIDER: ${{ env.HOST }}
-          PC_SCOPES: openid email profile organization
-          ACR_VALUE_FOR_2FA: https://proconnect.gouv.fr/assurance/consistency-checked-2fa
-          STYLESHEET_URL: ""
-      proconnect-federation-client:
-        image: ghcr.io/numerique-gouv/proconnect-test-client
-        ports:
-          - 4001:3000
-        env:
-          SITE_TITLE: proconnect-federation-client
-          HOST: http://localhost:4001
-          PC_CLIENT_ID: proconnect_federation_client_id
-          PC_CLIENT_SECRET: proconnect_federation_client_secret
-          PC_PROVIDER: ${{ env.HOST }}
-          PC_SCOPES: openid uid given_name usual_name email siren siret organizational_unit belonging_population phone chorusdt is_service_public is_public_service
-          PC_ID_TOKEN_SIGNED_RESPONSE_ALG: ES256
-          PC_USERINFO_SIGNED_RESPONSE_ALG: ES256
-          STYLESHEET_URL: ""
-          LOGIN_HINT: [email protected]
-          ACR_VALUES: eidas1
-      redis:
-        image: redis:7.2
-        ports:
-          - 6379:6379
-      postgres:
-        image: postgres:15.10
-        env:
-          POSTGRES_USER: ${{ env.PGUSER }}
-          POSTGRES_PASSWORD: ${{ env.PGPASSWORD }}
-          POSTGRES_DB: ${{ env.PGDATABASE }}
-        ports:
-          - 5432:5432
     steps:
       - uses: actions/checkout@v4
 
-      - run: docker compose up --build --detach maildev
+      - run: docker compose up --build --detach
 
       - run: corepack enable
       - uses: actions/setup-node@v4
@@ -114,7 +66,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/[email protected]
         with:
-          wait-on: ${{ env.HOST }}/users/start-sign-in
+          wait-on: http://localhost:3000/users/start-sign-in
           build: npm run build:assets
           start: npx dotenvx run -f cypress/e2e/${{ matrix.e2e_test }}/env.conf --overload -- npm run start:with-mocks
           install: false

assets/css/imports/custom.css

@@ -50,3 +50,9 @@
   z-index: 1000;
   position: absolute;
 }
+
+/* Inspied by `.fr-input:disabled` from the dsfr */
+input[readonly] {
+  color: var(--text-disabled-grey);
+  box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey);
+}

cypress/e2e/connect_franceconnect_account/fixtures.sql

@@ -0,0 +1,16 @@
+INSERT INTO users
+  (id, email, email_verified, email_verified_at, encrypted_password, created_at, updated_at, given_name, family_name,
+   phone_number, job)
+VALUES
+  (1, '[email protected]', true, CURRENT_TIMESTAMP, '$2a$10$kzY3LINL6..50Fy9shWCcuNlRfYq0ft5lS.KCcJ5PzrhlWfKK4NIO', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'God', 'Emperor', '9999999999', 'God Emperor')
+  ;
+
+INSERT INTO organizations
+  (id, siret, created_at, updated_at)
+VALUES
+  (1, '21340126800130', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);
+
+INSERT INTO users_organizations
+  (user_id, organization_id, is_external, verification_type, has_been_greeted)
+VALUES
+  (1, 1, false, 'verified_email_domain', true);

cypress/e2e/connect_franceconnect_account/index.cy.ts

@@ -0,0 +1,33 @@
+describe("Connect FranceConnect account", () => {
+  it("Should update personal information with FranceConnect data", function () {
+    cy.visit("/personal-information");
+
+    cy.login("[email protected]");
+
+    cy.visit("/personal-information");
+
+    cy.title().should("include", "Informations personnelles -");
+
+    cy.seeInField("Prénom", "God");
+    cy.seeInField("Nom", "Emperor");
+
+    cy.contains("S’identifier avec").click();
+
+    cy.origin("https://fcp.integ01.dev-franceconnect.fr", () => {
+      cy.contains("Démonstration eIDAS faible").click();
+    });
+    cy.origin("https://fip1-low.integ01.fcp.fournisseur-d-identite.fr", () => {
+      cy.contains("Mot de passe").click();
+      cy.focused().type("123");
+      cy.contains("Valider").click();
+    });
+    cy.origin("https://fcp.integ01.dev-franceconnect.fr", () => {
+      cy.contains("Continuer sur FSPublic").click();
+    });
+
+    cy.title().should("include", "Informations personnelles -");
+
+    cy.seeInField("Prénom", "Angela Claire Louise");
+    cy.seeInField("Nom", "DUBOIS");
+  });
+});

cypress/e2e/update_personal_information/fixtures.sql

@@ -2,7 +2,8 @@ INSERT INTO users
   (id, email, email_verified, email_verified_at, encrypted_password, created_at, updated_at, given_name, family_name,
    phone_number, job)
 VALUES
-  (1, '[email protected]', true, CURRENT_TIMESTAMP, '$2a$10$kzY3LINL6..50Fy9shWCcuNlRfYq0ft5lS.KCcJ5PzrhlWfKK4NIO', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'Konrad', 'Curze', '0404040404', 'Primarque');
+  (1, '[email protected]', true, CURRENT_TIMESTAMP, '$2a$10$kzY3LINL6..50Fy9shWCcuNlRfYq0ft5lS.KCcJ5PzrhlWfKK4NIO', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'God', 'Emperor', '9999999999', 'God Emperor'),
+  (2, '[email protected]', true, CURRENT_TIMESTAMP, '$2a$10$kzY3LINL6..50Fy9shWCcuNlRfYq0ft5lS.KCcJ5PzrhlWfKK4NIO', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'Konrad', 'Curze', '0404040404', 'Primarque');
 
 INSERT INTO organizations
   (id, siret, created_at, updated_at)
@@ -12,4 +13,10 @@ VALUES
 INSERT INTO users_organizations
   (user_id, organization_id, is_external, verification_type, has_been_greeted)
 VALUES
-  (1, 1, false, 'verified_email_domain', true);
+  (1, 1, false, 'verified_email_domain', true),
+  (2, 1, false, 'verified_email_domain', true);
+
+INSERT INTO franceconnect_userinfo
+  (user_id)
+VALUES
+  (1);

cypress/e2e/update_personal_information/index.cy.ts

@@ -19,12 +19,12 @@ describe("Signup into new entreprise unipersonnelle", () => {
       "Mise à jour de vos données personnelles",
     ).then((email) => {
       cy.maildevVisitMessageById(email.id);
+      cy.maildevDeleteMessageById(email.id);
       cy.contains(
         "Nous vous informons que vos données personnelles ont été mises à jour avec succès.",
       );
       cy.contains("Prénom : Night");
       cy.contains("Nom de famille : Haunter");
-      cy.maildevDeleteMessageById(email.id);
     });
   });
 
@@ -43,4 +43,30 @@ describe("Signup into new entreprise unipersonnelle", () => {
       );
     });
   });
+
+  it("should no allow verified user to update given and family name", () => {
+    cy.visit("/personal-information");
+
+    cy.login("[email protected]");
+
+    ["given_name", "family_name"].forEach((inputName) => {
+      cy.get(`input[name="${inputName}"]`).should(
+        "have.attr",
+        "readonly",
+        "readonly",
+      );
+    });
+
+    cy.contains("Issue de votre vérification par FranceConnect");
+    cy.contains("Profession").click();
+    cy.focused().clear().type("Guide GPS Warp");
+
+    cy.get('[type="submit"]').contains("Mettre à jour").click();
+
+    cy.contains("Vos informations ont été mises à jour.");
+    cy.seeInField(
+      "Profession ou rôle au sein de votre organisation",
+      "Guide GPS Warp",
+    );
+  });
 });

cypress/support/commands.ts

@@ -16,6 +16,7 @@ declare global {
       fillTotpFields(totpSecret?: string): Chainable<void>;
       login(email: string): Chainable<void>;
       mfaLogin(email: string): Chainable<void>;
+      seeInField: typeof seeInFieldCommand;
       setCustomParams(customParams: any): Chainable<void>;
       setRequestedAcrs(requestedAcrs?: string[]): Chainable<void>;
     }
@@ -70,6 +71,16 @@ Cypress.Commands.add("mfaLogin", (email) => {
   });
 });
 
+function seeInFieldCommand(field: string, value: string) {
+  return cy
+    .contains("label", field)
+    .invoke("attr", "for")
+    .then((id) => {
+      cy.get(`#${id}`).should("have.value", value);
+    });
+}
+Cypress.Commands.add("seeInField", seeInFieldCommand);
+
 Cypress.Commands.add("setCustomParams", (customParams) => {
   cy.get('[name="custom-params"]')
     .clear({ force: true })

docker-compose.yml

@@ -57,10 +57,8 @@ services:
     network_mode: "host"
 
   maildev:
-    ports:
-      - "1080:1080"
-      - "1025:1025"
     image: soulteary/maildev
+    network_mode: "host"
 
 volumes:
   db-data:

migrations/1740590618761_add-franceconnect-userinfo.cjs

@@ -0,0 +1,37 @@
+/**
+ * @type {import('node-pg-migrate').ColumnDefinitions | undefined}
+ */
+exports.shorthands = undefined;
+
+/**
+ * @param pgm {import('node-pg-migrate').MigrationBuilder}
+ * @param run {() => void | undefined}
+ * @returns {Promise<void> | void}
+ */
+exports.up = async (pgm) => {
+  await pgm.db.query(`
+    CREATE TABLE franceconnect_userinfo (
+      user_id INTEGER UNIQUE PRIMARY KEY REFERENCES users (id) ON DELETE CASCADE,
+
+      birthdate          VARCHAR(255),
+      birthplace         VARCHAR(255),
+      family_name        VARCHAR(255),
+      gender             VARCHAR(255),
+      given_name         VARCHAR(255),
+      preferred_username VARCHAR(255),
+      sub                VARCHAR(255),
+
+      created_at  TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      updated_at  TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT CURRENT_TIMESTAMP
+    );
+    `);
+};
+
+/**
+ * @param pgm {import('node-pg-migrate').MigrationBuilder}
+ * @param run {() => void | undefined}
+ * @returns {Promise<void> | void}
+ */
+exports.down = async (pgm) => {
+  await pgm.db.query(`DROP TABLE franceconnect_userinfo;`);
+};

package.json

@@ -9,10 +9,10 @@
   },
   "main": "src/index.js",
   "workspaces": [
-    "packages/devtools/typescript",
     "packages/core",
     "packages/crisp",
     "packages/debounce",
+    "packages/devtools/typescript",
     "packages/email",
     "packages/entreprise",
     "packages/identite"