Merge pull request #1012 from MTES-MCT/feat-rework-account-creation-flow

Rework account creation flow

e2e/.env.example

@@ -2,3 +2,7 @@ CYPRESS_BASE_URL=https://zerologementvacant-staging.incubateur.net
 CYPRESS_API=https://api.zerologementvacant-staging.incubateur.net/api
 CYPRESS_EMAIL=E2E_EMAIL
 CYPRESS_PASSWORD=E2E_PASSWORD
+
+CYPRESS_MAILER_HOST=https://maildev.zerologementvacant.beta.gouv.fr
+CYPRESS_MAILER_USER=
+CYPRESS_MAILER_PASSWORD=

e2e/config.ts

@@ -5,6 +5,11 @@ export interface Config {
   baseURL: string;
   email: string;
   password: string;
+  mailer: {
+    host: string;
+    user: string;
+    password: string;
+  };
 }
 
 const config = convict<Config>({
@@ -17,22 +22,50 @@ const config = convict<Config>({
   baseURL: {
     env: 'CYPRESS_BASE_URL',
     doc: 'The base URL of the application',
+    format: String,
     default: null,
     nullable: false
   },
   email: {
     env: 'CYPRESS_EMAIL',
     doc: 'The email to use for authentication',
+    format: String,
     default: null,
     sensitive: true,
     nullable: false
   },
   password: {
     env: 'CYPRESS_PASSWORD',
     doc: 'The password to use for authentication',
+    format: String,
     default: null,
     sensitive: true,
     nullable: false
+  },
+  mailer: {
+    host: {
+      env: 'CYPRESS_MAILER_HOST',
+      doc: 'The nodemailer host',
+      format: String,
+      default: null,
+      nullable: false
+    },
+    user: {
+      env: 'CYPRESS_MAILER_USER',
+      doc: 'The nodemailer username',
+      format: String,
+      default: null,
+      sensitive: true,
+      nullable: false
+    },
+    password: {
+      env: 'CYPRESS_MAILER_PASSWORD',
+      doc: 'The nodemailer password',
+      format: String,
+      default: null,
+      sensitive: true,
+      nullable: false
+    }
   }
 });
 

e2e/cypress/e2e/sign-up.cy.ts

@@ -0,0 +1,155 @@
+import { faker } from '@faker-js/faker/locale/fr';
+
+describe('Sign up', () => {
+  it('should sign up', () => {
+    cy.visit('/connexion');
+    cy.get('a').contains('Créer votre compte').click();
+
+    const user = faker.internet.email();
+
+    cy.get('label')
+      .contains(/Adresse e-mail/i)
+      .next()
+      .type(`${user}{enter}`);
+
+    cy.location('pathname').should('eq', '/inscription/activation');
+
+    // Fetch emails from the Nodemailer API
+    cy.request({
+      method: 'GET',
+      url: `${Cypress.env('MAILER_HOST')}/email`,
+      auth: {
+        username: Cypress.env('MAILER_USER'),
+        password: Cypress.env('MAILER_PASSWORD')
+      }
+    }).then((response) => {
+      const emails: ReadonlyArray<Email> = response.body;
+      const email: Email = emails
+        .filter(subject('Activation du compte'))
+        .filter(to(user))
+        .filter(unread())
+        .reduce((acc, email) => (acc.date > email.date ? acc : email));
+      const link = email.html.substring(
+        email.html.indexOf('/inscription/mot-de-passe')
+      );
+      cy.visit(link);
+    });
+
+    cy.get('label')
+      .contains(/Définissez votre mot de passe/i)
+      .next()
+      .type('123QWEasd');
+    cy.get('label')
+      .contains(/Confirmez votre mot de passe/i)
+      .next()
+      .type('123QWEasd{enter}');
+
+    cy.get('button')
+      .contains(/Créer mon compte/i)
+      .click();
+
+    cy.location('pathname').should('eq', '/parc-de-logements');
+  });
+
+  it('should await access to LOVAC', () => {
+    cy.visit('/connexion');
+    cy.get('a').contains('Créer votre compte').click();
+
+    const user = '[email protected]';
+
+    cy.get('label')
+      .contains(/Adresse e-mail/i)
+      .next()
+      .type(`${user}{enter}`);
+
+    cy.location('pathname').should('eq', '/inscription/activation');
+
+    // Fetch emails from the Nodemailer API
+    cy.request({
+      method: 'GET',
+      url: `${Cypress.env('MAILER_HOST')}/email`,
+      auth: {
+        username: Cypress.env('MAILER_USER'),
+        password: Cypress.env('MAILER_PASSWORD')
+      }
+    }).then((response) => {
+      const emails: ReadonlyArray<Email> = response.body;
+      const email: Email = emails
+        .filter(subject('Activation du compte'))
+        .filter(to(user))
+        .filter(unread())
+        .reduce((acc, email) => (acc.date > email.date ? acc : email));
+      const link = email.html.substring(
+        email.html.indexOf('/inscription/mot-de-passe')
+      );
+      cy.visit(link);
+    });
+
+    cy.location('pathname').should('eq', '/inscription/en-attente');
+  });
+
+  it('should forbid access to unauthorized users', () => {
+    cy.visit('/connexion');
+    cy.get('a').contains('Créer votre compte').click();
+
+    const user = '[email protected]';
+
+    cy.get('label')
+      .contains(/Adresse e-mail/i)
+      .next()
+      .type(`${user}{enter}`);
+
+    cy.location('pathname').should('eq', '/inscription/activation');
+
+    // Fetch emails from the Nodemailer API
+    cy.request({
+      method: 'GET',
+      url: `${Cypress.env('MAILER_HOST')}/email`,
+      auth: {
+        username: Cypress.env('MAILER_USER'),
+        password: Cypress.env('MAILER_PASSWORD')
+      }
+    }).then((response) => {
+      const emails: ReadonlyArray<Email> = response.body;
+      const email: Email = emails
+        .filter(subject('Activation du compte'))
+        .filter(to(user))
+        .filter(unread())
+        .reduce((acc, email) => (acc.date > email.date ? acc : email));
+      const link = email.html.substring(
+        email.html.indexOf('/inscription/mot-de-passe')
+      );
+      cy.visit(link);
+    });
+
+    cy.location('pathname').should('eq', '/inscription/impossible');
+  });
+});
+
+interface Email {
+  id: string;
+  html: string;
+  subject: string;
+  from: ReadonlyArray<{
+    address: string;
+    name: string;
+  }>;
+  to: ReadonlyArray<{
+    address: string;
+    name: string;
+  }>;
+  date: string;
+  read: boolean;
+}
+
+function subject(subject: string) {
+  return (email: Email) => email.subject === subject;
+}
+
+function to(recipient: string) {
+  return (email: Email) => email.to.some((to) => to.address === recipient);
+}
+
+function unread() {
+  return (email: Email) => !email.read;
+}

e2e/package.json

@@ -7,6 +7,7 @@
   },
   "devDependencies": {
     "@dotenvx/dotenvx": "^1.14.2",
+    "@faker-js/faker": "^8.4.1",
     "@types/convict": "^6.1.6",
     "convict": "^6.2.4",
     "cypress": "^13.15.0",

frontend/jest.polyfills.js

@@ -30,3 +30,17 @@ Object.defineProperties(globalThis, {
   Request: { value: Request, configurable: true },
   Response: { value: Response, configurable: true }
 });
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  })
+});

frontend/package.json

@@ -25,6 +25,7 @@
     "@codegouvfr/react-dsfr": "1.9.16",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@hookform/resolvers": "^3.9.1",
     "@jonkoops/matomo-tracker-react": "^0.7.0",
     "@lexical/html": "^0.18.0",
     "@lexical/list": "^0.18.0",
@@ -55,6 +56,7 @@
     "qs": "^6.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-map-gl": "^7.1.7",
     "react-redux": "^8.1.3",
     "react-redux-loading-bar": "^5.0.8",

frontend/src/App.tsx

@@ -30,6 +30,7 @@ import ForgottenPasswordView from './views/Account/ForgottenPasswordView';
 import ResetPasswordView from './views/Account/ResetPasswordView';
 import NotFoundView from './views/NotFoundView';
 import AnalysisView from './views/Analysis/AnalysisView';
+import { useIsDsfrReady } from './hooks/useIsDsfrReady';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -92,6 +93,8 @@ function App() {
     )
   );
 
+  useIsDsfrReady();
+
   useEffect(() => {
     if (isSomeQueryPending) {
       dispatch(showLoading());